LAB 3 Name Due: Monday, September 29 We will use Notepad (or
advertisement
LAB 3
Name ________________________________
Due: Monday, September 29
We will use Notepad (or Notepad++ if it is available) to create an html page and css document.
1) Create a document that looks similar to this. Feel free to insert your own text inside the paragraph
tags.
You may notice that we’ve added a few new lines to this example – the <link> tag to tell our page where
to find the CSS document (which is named style.css), and an ID and CLASS that will coordinate
formatting between the html and css files.
<html>
<head>
<title>Lab 2</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Welcome to my Lab 2 page - h1.</h1>
<h2>Testing CSS - h2</h2>
<p>
An external style sheet is ideal when the style is applied to many pages. With an external style sheet,
you can change the look of an entire Web site by changing one file. Each page must link to the style
sheet using the <link> tag. The <link> tag goes inside the head section:
</p>
<p class="quote"> When you are courting a nice girl an hour seems like a second. When you sit on a redhot cinder a second seems like an hour. That's relativity. <br />
Albert Einstein
</p>
<p id="footer">This is an awesome footer -- not to be confused with a stinky foot.</p>
</body>
</html>
Save as lab3.html and upload the file to your Sunny webspace using Filezilla.
Open the file in your browser and take note of how it appears.
2) Now create a document named style.css with the following entries. PLEASE type it out – yes, you
could copy and paste from a Word document, but you’ll learn more if you type it yourself…
body {
background-color: #999999;
color: #000000;
}
h1 { font-size: 20px; font-weight: bold; color:"red"; }
h2 { font-size: 18px; font-weight: bold; color:"blue";}
h3 { font-size: 16px; font-weight: bold; }
h4 { font-size: 14px; font-weight: bold; }
h5 { font-size: 12px; font-weight: bold; }
h6 { font-size: 10px; font-weight: bold; }
p{
font-size: 12px;
font-weight: normal;
text-align: left;
font-family: Verdana;
}
p.quote {
margin: 10px 40px 10px 40px;
font-weight: 100;
text-align: justify;
font-family: Courier New;
}
#footer {
width: 725px;
background-color: #CCCCCC;
color: #444444;
font-size: 10px;
font-weight: normal;
text-align: center;
font-family: Times New Roman;
}
Save the file and upload it to your web space. Be sure to name it style.css, or match the name you
included in the html document.
3) Reload your webpage in the browser of your choice and describe what changed.
4) Create another webpage named lab3a.html:
<html>
<head>
<title>lab31</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
Welcome to my Lab 3a page.
</p>
<h1>Links</h1>
<p>
<a href="http://www.uni.edu">UNI</a>
<br>
<a href="lab2.html">My last assignment</a>
</p>
<h2>My favorite quote:</h2>
<p class="quote">
Enter your favorite quote here.
</p>
<div id="footer">
Brought to you by: your name here
<br>
Email me at <a href="mailto:youremailaddress">youremailaddress</a>
</div>
</body>
</html>
We’ve added some hyperlinks to this example, as well as a mailto attribute.
Save the document and upload with Filezilla.
Open the file in your browser and see how it looks.
5) Edit your css file and change the background color for the body tag.
6) Re-upload your css file.
7) View both html pages and describe what happened when you made that one change.
8) Send me an email with the links (sam.barr@uni.edu)
