Lab 4 - It 130

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. Also, you need access to your students account.

For this lab use edit plus http://www.editplus.com. If you can't find it just re install it.

If you were not present the last class then you must read css tutorial 1 and do lab3 before attempting this lab.

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/hw/basicd.html

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

2. 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 basicd.html. You must type these in.

• Remember the style definitions are placed within the <style> </style> tags. The style tags are placed within the head.
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 basicd.html in your browser. Compare it to the original.

• Add the following style. Remember to display it in the browser.
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 basicd.html in your browser. Compare it to the original.

• Add the following style. Remember to display it in the browser.
ul{ margin-left:1em; } li { list-style:square; margin-bottom:1.3em; }

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

• Add the following style. Remember to display it in the browser.
dt { margin-bottom:.5em; } dd { margin-left:2%; }

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

• Add the following style. Remember to display it in the browser.
dt a { text-decoration:none; font-size:1.1em; color:hotpink; }

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

• Add the following style. Remember to display it in the browser.
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.
3. Create a sub directory of lab4 named images
4. Go to the following page
   http://condor.depaul.edu/~alarrain/hci201/photo.html
   Click on the first thumbnail, you should see a larger picture. Save this picture to your images directory created above.

To save an image:

1. Right click on the image
2. Select, Save Picture As. This should pop up a dialog box
3. Navigate to your images directory.
4. The filename should be cumberland1.
5. The save as type should be JPEG
6. Hit the save button
7. Go to your images directory and make sure the file is there.
5. Please make this a new HTML file. Create a simple HTML file, name it pics.html and insert the following piece of code into the body. By now you should be comfortable with basic HTML so add a heading and a paragraph describing your page.
<img src="images/cumberland1.jpg" width="445" height="291"> Open up the html file in the browser. You should see the image.
6. See HTML tutorial 8 and read about the alt attribute and add that to the above image tag.
7. See HTML tutorial 8 and read about the title attribute and add that to the above image tag.
8. Download one image and insert the imzge into your html file. Check the dimensions of the image. Right click on the image and select properties.
9. If you do not have any questions you can leave.