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

1. On your local file system create a directory named lab8. Next, create a subdirectory of lab8 called images.
2. If the image editing program Gimp is not already installed then istall Gimp. Go to http://www.gimp.org/downloads/ You may not be able install into program files or on the C drive. Create an hci201 folder under My Document and try to instal it there.
• Click the link Download GIMP 2.6.8 – Installer for Windows XP SP2 or later
3. Download the sample photos on the second row, save them to your images directory. Make sure you click on each image first before you save them. Do not download the thumbnails. Go to http://condor.depaul.edu/~alarrain/hci201/photo.html
4. Use photo ginjoe.jpg. Load it into GTimp. Make a duplicate.
• Select Image.
• Select duplicate
5. Make a thumbnail out of the duplicate.
• Select Image
• Scale Image

Choose 100 for the width, the height should scale accordingly

6. Save the thumbnail to your images directory. A good name would be ginjoethumb

Usually thumbnails are saved as gif files. Select gif when saving. Your file should be ginjoethumb.gif

7. Make sure both ginjoe.jpg and ginjoethumb.gif are in the images directory. Create a simple web page that contains this code. The HTML file should be saved to lab5b directory.
<a href="images/ginjoe.jpg"><img src="images/ginjoethumb.gif"></a>

Click on gin joe thumb, you should see the larger image.

8. Add the dimension attributes and alt attribute to the above image tag. Also close the image tag.
Remember width= height= alt=
9. Add the following style to the above web page.
img{border:0;}
10. Make another thumbnail using another image. Add this to the above web page. Don't forget to make a duplicate of the image first
11. Load the flower image into Gimp. Play around with some of the filters, selection tools. Don't be afraid to experiment.
12. Make the new flower into a thumbnail(Duplicate it first) and add it to the above thumbnail html file.
13. Type the following URL into your browser
    http://condor.depaul.edu/~alarrain/hci201/examples/floatleft.html
• Save the picture to your images directory. Right click on the picture and select "save picture as".
• Save the source code to your lab8 directory. Right click and view source. Remember when saving the file remove the [1] if it is present in the file name. The file name should be saved as floatleft.html
• Display floatleft.html in your browser locally.
• Modify the CSS so the picture floats right. Also modify the margin so the text doesn't crowd the image.
• Save this as floatright.html
14. Add another picture to floatright.html. Use this picture
    http://condor.depaul.edu/~alarrain/hci201/images/cumberland1.jpg   Also add some text, just make up some text.
15. Modify floatright.html so the first picture floats left the second floats right.
16. Upload all your html file to your lab8 directory. Upload all images to the images sub directory of lab 8 at your students account.
17. Look over homework3
18. If you do not have any questions you can leave