Lab 4 - It 130

You need to understand the material from the previous classes and labs before you can do this lab.

For this lab we will use edit plus http://www.editplus.com. Edit plus is an HTML editor for windows that will recognize CSS keywords.

1. Get the HTML code for http://condor.depaul.edu/~alarrain/hci201/examples/defliststyle.html

View Source and save the code into your local system. Make sure the file name is defliststyle.html

2. Make a copy of the file defliststyle.html call it deflistlab.html

   To make a copy, select save as from the file menu.

3. Take some time and study the html code.

This question has multiple parts. For each part you will add the styles to deflistlab.html. You must type these in. After you add a part compare it to the original document.

• Place the style definition after the <style> tag but before the </style> tag in deflistlab.html
body { margin-top: 3%; margin-left: 10%; margin-right:20%; font-family: Verdana,sans-serif; }

After you insert the above piece of code display deflistlab.html in your browser. Compare it to the original.

• Add the following style. Remember to display it in the browser.
h2{ margin-left: -2%;}
• After the above style add the following style. Remember to display it in the browser.
dd{padding-bottom: 1%;}
• After the above style add the following style. Remember to display it in the browser.
p {color:maroon;font-weight:bold;}
• After the above style add the following style. Remember to display it in the browser.
a{color:olive;}
• After the above style add the following declaration to the body selector. Remember to display it in the browser.
background-image:url(book.jpg);

To See the image you need to download it and save it to the same directory as the HTML file.

http://condor.depaul.edu/~alarrain/hci201/examples/book.jpg

To download the image.

• right click on the image
• select "save picture as"
• save the file book.jpg to the folder where deflistlab.html is.
4. Play around with some the styles, create your own style. Change colors, fonts, margins etc ... Go to W3Schools
5. Upload deflistlab.html and book.jpg to your Webserver.
6. Look and Start Hw 1.
7. If you do not have any questions you can leave.