Lab 5 - It130
Each of you must do your own lab. You can get as much help as you like from me or your classmates.
Remember you have to turn in all of your labs.
You need to understand the material from the previous classes and labs before you can do this lab.
For this lab use edit plus http://www.editplus.com. If you can't find it just re install it.
You must do lab4 before attempting this lab.
- Get the HTML code for http://condor.depaul.edu/~alarrain/hci201/hw/hw1com.html
View Source and save the code into your local system. Make sure the file name is hw1com.html
- Make a copy of the file call it hw1comstyle.html
To make a copy, select save as from the file menu.
- Take some time and study the html code. All of it should be familiar to you, if not just ask
This question has multiple parts. For each part you will add the styles to hw1comstyle.html.
You must type these in. After you add a part compare it to the original document.
- Remember the style definitions are placed within the <style> </style> tags. The style tags are placed within the head.
<![CDATA[
body{
background:#3300C0;
font-family:Verdana, Helvetica, sans-serif;
font-size:1em;
color:ivory;
margin:3% 35% 3% 5%;
text-align:justify;
}
]]>
After you insert the above piece of code display hw1comstyle.html in your browser. Compare it to the original.
- Add the following style. Remember to display it in the browser.
<![CDATA[
h2{
font-family:Georgia, serif;
color:gold;
font-size:1.4em;
border-bottom: 2px dotted red;
padding-bottom:10px;
margin:0;
}
]]>
After you insert the above piece of code display hw1comstyle.html in your browser. Compare it to the original.
- Add the following style. Remember to display it in the browser.
<![CDATA[
ul{
margin-left:1em;
}
li {
list-style:square;
margin-bottom:1.3em;
}
]]>
After you insert the above piece of code display hw1comstyle.html in your browser. Compare it to the original.
- Add the following style. Remember to display it in the browser.
<![CDATA[
dt {
margin-bottom:.5em;
}
dd {
margin-left:2%;
}
]]>
After you insert the above piece of code display hw1comstyle.html in your browser. Compare it to the original.
- Add the following style. Remember to display it in the browser.
<![CDATA[
dt a {
text-decoration:none;
font-size:1.1em;
color:hotpink;
}
]]>
After you insert the above piece of code display hw1comstyle.html in your browser. Compare it to the original.
- Add the following style. Remember to display it in the browser.
<![CDATA[
dt a:hover {
text-decoration:underline;
color:lime;
}
]]>
- Play around with some the styles, create your own style. Change colors, fonts, margins etc ... Go to W3Schools also look at my css tutorials 2 and 3 at the course homepage.
- Go online and find a few web design websites and add the links along with a brief explanation about the websites to the web design links section.
- Upload hw1comstyle.html to your webserver. Upload it to a directory called lab5. Lab5 should be a sub directory of lab.
- This question you will have two html files. This is not related to the hw1comstyle.Relative URL's - Create two html pages called page1.html and page2.html Each page should have a main heading and a hyperlink to the other page.
Ex to link page1 to page2 you would write in page1.html
<![CDATA[
<a href="page2.html">page2</a>
]]>
Now make page 2 link back to page 1.