Lab 4 - HCI 201

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 we will use edit plus http://www.editplus.com. Edit plus is an HTML editor for windows that will recognize CSS keywords.

Hosting Your Web Files to be Viewed by the World

Don't recomend

If you have a unix account on students.depaul.edu follow this tutorial on setting up your students account Secure File Tranfer tutorial then follow these instructions Sudents Account Setup

Recomended

If you are not using your students account. Use this web hosting company and create a free account 000webhost When creating an account pick subdomain. Use your name, lastname followed by first initial, nick name etc...

Once the account is created login and go to control panel. Go to files and look for file manager, you should have a public_html folder. Go in this folder and create a sub directory called hci201. Go into hci201 and create a subdirectory called lab. In Lab create the subdirectories lab1 lab2 lab3 lab4. Upload your labs to the appropriate directory

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. 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.
3. Play around with some the styles, create your own style. Change colors, fonts, margins etc ... Go to W3Schools