HTML and CSS Reference
In-Depth Information
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:
1
Create a new directory for the thumbnails.
Resize each photo to 150 by 100 pixels and save it in a
“thumbnail” folder.
2
Set the
src
of each
<img>
element in “index.html”
to the thumbnail version of the photo.
3
4
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.
index.html
C
reate
a new
folder
ca
lled “
thumb
nails”
in
t
he “my
pod” f
older
.
