LIS 753

Refer to the textbook Head First HTML with CSS and XHTML as noted in this exercise.

1)     Read Chapter 5 of Head First HTML with CSS and XHTML.

2)     Using the information in Chapter 4 (and specifically on page 133) as a guide, create a new folder  (or directory, as the book calls it) named ”images” on your web host server. (Note: If you have access to Photoshop, I highly recommend you start to use that program.  Otherwise, use an image editing program that lets you resize.  For MS Office, the default program is MS Picture Manager, found via “All Programs” / “MS Office” / “Office Tools.”  For the Mac, use iPhoto.

3)     Work on your on local drive to build your exercise web pages.  You’ll need an image folder on your local drive as well, and this will help you keep things straight when you move everything to its proper place on your web host server.

4)     Using your text editor, compose a short html document that includes at least one image sized at approximately 600 x 400 pixels, and three thumbnail images sized approximately 150 x 100 or 100 x 150 pixels. The content of this web page is totally up to you.  Use the Welcome to My iPod site on page 199 of our text as a guide if you need to see an example of what your page might look like.  Note:  the book suggests a thumbnail folder as well as an image folder, but this is your choice.  You can keep both versions of the images in your image folder; for example you can have both kitten.jpg and kitten_small.jpg there.  Or, you can make a separate folder for thumbnails as the book describes.

5)     One of your thumbnail images should link to an individual page for a larger version of that image.  See pages 199 – 203 for step-by-step instructions of this process. This will be a new, individual html file, and will have a different name than your exercise file.

6)     Name this exercise02.html.

7)     Upload your html files and images to your web host. Email Michael the URL for your Exercise #2.  The subject line of your email should read LIS 753 Exercise Submission.

Include in this exercise:

• Standard html tags (opening and closing tags, head and title tags, body tags);
• background color, using the style command as found on page 30;
• Medium-sized image, including the alt attribute as described on page 176;
• Three thumbnail images, approximately 100 x 150 or 150 x 100 pixels, also including the alt attribute (p. 197);
• One link from a thumbnail to an individual page with a single, larger version of the same image (p. 199-203).

Note:  While the use of sizing within HTML does work (page 177), for this exercise use a photo editing program to size all the images before you use them in your code.

You will use this exercise as the basis for several upcoming exercises, so choose a theme and images you like and will enjoy seeing again!