Lab 10 - HCI 201
These labs are not a race. Work these questions at your own pace. It is better to be complete with each question before moving on. If you don't finish during class, that is okay, finish at home.
Each of you should do your own lab. You will get more out of it. You can get as much help as you like from me or your classmates.
- Create an external style sheet to add style to tempnostyle.html. You can get the source code here.
tempnostyle.html
Make sure you view the page in your browser after you add each style.
- See lab preparation under class 11 notes.
- Create a blank text file named style.css. This file must be named style.css
You will add the following styles to this file. After each style you add you must save the file.
- Add this style to the file.
<![CDATA[
body{
margin:2% 8% 2% 8%;
background:white;
}
]]>
- After you add the above style now you need to link this css file to your html document. Insert the
following HTML code between the head tag of HTML file.
<![CDATA[
<link href="style.css" rel="stylesheet" type="text/css" />
]]>
- Add this style to the file.
<![CDATA[
#head {
background-image: url(greenback.jpg);
}
]]>
Don't forget to view it
- Add this style to the file.
<![CDATA[
#head h1{
font-family:"New Century Schoolbook", "Book Antiqua", serif;
font-size:1.5em;
color:darkmagenta;
margin:0;
}
]]>
Don't forget to view it
- Add this style to the file.
<![CDATA[
#head p{
font-size:1.2em;
margin:0;
}
]]>
Don't forget to view it
- Add these styles to the file.
<![CDATA[
#navigation a {
color:greenyellow;
text-decoration:none;
}
#navigation a:hover{
color:salmon;
text-decoration:underline;
}
]]>
Don't forget to view it. Place the mouse over the navigation links.
- Add these styles to the file.
<![CDATA[
#navigation table{
font-size:1.2em;
background:black;
}
#navigation td{
padding-left:1em;
}
]]>
Don't forget to view it. Place the mouse over the navigation links.
- Add these styles to the file.
<![CDATA[
#content{
font-family:Helvetica;
font-size:1em;
}
#content h2{
color:darkorange;
margin-bottom:.3em;
}
#content h3{
font-size:1.1em;
margin-top:0;
margin-bottom:0;
color:darkolivegreen;
}
#content p{
margin-top:0;
margin-right:30%;
}
#content img{
float:left;
}
#content hr{
color:darkorange;
}
]]>
Don't forget to view it
- Add these styles to the file.
<![CDATA[
#footer{
font-size:.8em;
color:darkred;
}
#footer a{
color:darkorange;
text-decoration:none;
}
span{
color:darkred;
}
]]>
- Rename tempnostyle.html to index.html
- Create a directory at your students account named project. This directory must be a sub directory of hci201.
- Transfer index.html, style.css and the picture of suzie and the green background to your project directory.
- Type the following URL into your browser.
<![CDATA[ http://students.depaul.edu/~yourLogin/hci201/project ]]>
You should see the template web page