Web Protocols, Technologies and Applications CS 3870/CS 5870 Web Protocols, Technologies and Applications
Formatting HTML Pages <h1> CS3870/CS5870: 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>
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>
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>
Elements Not Supported in VS <center> <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> </center> -1: using non-supported HTML element
Cascading Style Sheets (CSS) Inline Styles Internal Style Sheets External Style Sheets
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>
Internal Style Sheets Web Form Next Tuesday
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
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; }
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: 9em }
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 }
Using External Style Sheets <head> <link rel="stylesheet" type="text/css" href="StyleSheet.css" /> <title>CS3870/CS5870 - Prog1</title> </head> <body> <h1 class="CS3870Title">Web Protocols, Technologies and Applications</h1> <ul class="navbar"> <li> <a href="http://people.uwplatt.edu/~yangq/">My Home Page </a></li> <li> <a href="http://www.uwplatt.edu/csse/">Absolute link </a></li> <li> <a href="HtmlPage2.html"/>Relative link</a></li> </ul> </body> </html>
CSS Tutorial http://www.w3schools.com/css/default.asp Google!
Prog1 Folder Prog1 under Web Site Develop the pages inside folder Prog1 Publish Web App (Site) to Alpha Use the Grader to check!
Grader https://alpha.ion.uwplatt.edu/CS3870/grader.aspx It goes to the first page of the selected program of the selected student, including my sample program at CS3870.
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 with IE in Lab 206.