Head First HTML with CSS

Reworking the site to use thumbnails
You’re now going to make this page more usable by substituting a
smaller image (which we’ll call a thumbnail) for each photo, and then
you’ll create a link from that thumbnail to each of the larger photos.
Here’s how you’re going to do this, one step at a time:
1
2
3
4
Create a new directory for the thumbnails.
Resize each photo to 150 by 100 pixels and save it in a
“thumbnail” folder.
Set the src of each element in “index.html”
to the thumbnail version of the photo.
Add a link from each thumbnail to a new page
containing the larger photo.
Create a new directory for thumbnails
To keep things organized, create a separate folder for the thumbnail
images. Otherwise, you’ll end up with a folder of larger images
and small thumbnails all lumped together, which could get quite
cluttered after you’ve added a significant number of photos.
Create a folder called “thumbnails” under the “mypod” folder. If
you’re working from the book example files, you’ll find this folder
already in there.
photos
mypod
thumbnails
.
.
.
index.html
Create a new folder
called “thumbnails” in
the “mypod” folder.
adding images to your web pages
you are here 195