Download presentation
Presentation is loading. Please wait.
1
Web Protocols, Technologies and Applications
CS 3870 Web Protocols, Technologies and Applications
2
Formatting HTML Pages <h1> CS3870: Prog1</h1>
<h3> HTML Elements </h3> <ul> <li> Bold face </li> <li> Underline</li> <li> emphasize</li> <li> italics</li> <li> Larger Size</li> <li> small size</li> </ul>
3
Formatting HTML Pages <ul>
<li> <b> Bold face </b></li> <li> <u> Underline</u></li> <li> <em>emphasize</em></li> <li> <i> italics</i></li> <li> <font size=+1>Larger Size</font></li> <li> <font size=-1>small size</font></li> </ul>
4
Using Style <ol>
<li style="font-size:large">Large font size </li> <li style="text-decoration:underline">underlined</li> <li style="font-style:italic">Italics</li> </ol>
5
Cascading Style Sheets (CSS)
Inline Styles Internal Style Sheets External Style Sheets
6
Inline Styles <ol>
<li style="font-size:large">Large font size </li> <li style="text-decoration:underline">underlined</li> <li style="font-style:italic">Italics</li> </ol>
7
Internal Style Sheets Web Form Next Tuesday
8
Creating External Style Sheets in VS
Click Solution Explorer Right click the folder you want the CSS file to be Click Add Click Style Sheet Specify CSS file name Prog1StyleSheet inside folder Prog1 MainStyleSheet under the main web site
9
Referencing External Style Sheets In the Same Folder
<head> <link rel="stylesheet" type="text/css" href=“Prog1StyleSheet.css" /> <title>CS Prog1</title> </head> <body> <h1 class="CS3870Title">Web Protocols, Technologies and Applications</h1> </body> </html>
10
Referencing External Style Sheets In Other Folders
<head> <link rel="stylesheet" type="text/css" href=“../GlobalStyleSheet.css" /> <title>CS Prog1</title> </head> <body> <h1 class="CS3870Title">Web Protocols, Technologies and Applications</h1> </body> </html>
11
External Style Sheets A text file with any name, e.g. myStyleSheet
/* This is a comment in CSS file */ /* Notice: body is an HTML element */ /* The style setting applies to the entire body */ /* It will move the entire body to the right by 11em */ body { padding-left: 11em; }
12
External Style Sheets /* Multi-line comment
Notice: navbar is not an HTML element em: the current font size Default font size: 16px Absolute position will put the element using this style class to (2em, 1em) ignoring the position set for body, even it is part of the body */ .navbar { padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 11em }
13
External Style Sheets /*
The title should be the same on all three pages You are required to use an external CSS file */ .CS3870Title { font-family: Century, Arial; color: blue; text-align: center; text-decoration: underline; text-decoration-style: solid }
14
External Style Sheets /*
The title should be the same on all three pages You are required to use an external CSS file */ .CenterText { text-align:center; }
15
Using External Style Sheets
<head> <link rel="stylesheet" type="text/css" href="StyleSheet.css" /> <title>CS Prog1</title> </head> <body> <h1 class="CS3870Title">Web Protocols, Technologies and Applications</h1> <ul class="navbar"> <li> <a href=" link </a></li> <li> <a href="HtmlPage2.html"/>Relative link</a></li> </ul> <div class="CenterText"> <a href="index.html">Previous Page</a> <a href="HtmlPage2.html">Next Page</a> </div> </body> </html>
16
CSS Tutorial Google!
17
Prog1 Folder Prog1 under Web Site Develop the pages inside folder Prog1 Publish Web App (Site) to Alpha Use the Grader to check!
18
Grader It goes to the first page of the selected program of the selected student, including my sample program at CS3870.
19
Browsers Different browsers implement HTML and CSS in different ways.
Some browsers may not implement some rules at all. Must make sure your pages work as expected in Lab 206.
Similar presentations
