cs 3870/cs 5870 web protocols, technologies and applications
TRANSCRIPT
CS 3870/CS 5870
Web Protocols, Technologies and Applications
2
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>
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
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
6
Cascading Style Sheets (CSS)
• Inline Styles• Internal Style Sheets• External Style Sheets
7
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>
8
Creating Internal Style Sheets in VS
• Select the element to be formatted
• Click FORMAT on the menu bar
• New Style
• Specify the styles
• OK or Apply
9
Internal Style Sheets<head>
<style type="text/css">
.myStyleClass
{
font-size:x-large;
text-decoration: underline
}
</style>
<title>CS3870/CS5870 - Prog1</title>
</head>
10
Internal Style Sheets<head>
<style type="text/css">. . .</style>
<title>CS3870/CS5870 - Prog1</title>
</head>
<body>
<p class="myStyleClass">
Using internal CSS </p>
</body>
</html>
11
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
12
External Style SheetsA text file with any name, e.g. myStyleSheet
body
{
padding-left: 11em;
}
.navbar
{
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em
}
13
External Style Sheets<head>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
<title>CS3870/CS5870 - Prog1</title>
</head>
<body>
<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>
Prog1
Due 5:00 PM, Wednesday, September 9
Folder Name: Prog1
14
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.
15
Grader
https://xray.ion.uwplatt.edu/yangq/grader.aspx
It goes to the first page of the selected program of the selected student, including my sample
program at CS3870.
16