Lab 6 - 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.

Create a lab6 folder, both localy and at your webserver account.

Create a subdirectory of lab6 called images

  1. 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.

    2. 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.
  2. Create a simple HTML file, name it lab6.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.
    3. <img src="images/cumberland1.jpg" width="445" height="291"> Open up the html file in the browser. You should see the image.
  3. Download some of the other images and insert them into your html file. For now don't worry so much about the layout just get some of the other photos to show up. Check the dimensions of the image. Right click on the image and select properties.
  4. Experiment with adding some text and images to a web page.
  5. Add the alt attribute to each of your image tags.
  6. Add some text to the document.
  7. Most search engines allow you to search for images. Go to Yahoo and in the search box type in .. planets. Next look above the search box and click images. Hit the yahoo search button. You should see a bunch of images.
  8. Download one of the images and insert into the above page. Remember to check the dimensions.
  9. Add some CSS styles to the document.
  10. Upload lab6.html to the lab6 directory at your webserver .
  11. At your webserver make sure you have a subdirectory of lab6 directory called images
  12. Upload all the images you used for this lab to the images directory.