HTML and CSS Reference
Reworking the site to use thumbnails
You're now going to make this page more usable by substituting a
smaller image (which we 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:
Create a new directory for the thumbnails.
Resize each photo to 150 by 100 pixels and save it in a
Set the src of each <img> 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 topic example files, you'll find this folder
already in there.
C reate a new folder
ca lled “ thumb nails” in
t he “my pod” f older .