HTML and CSS Reference
If you look in the “html” folder in the chapter example files, you'll find all of the single photo
pages already there, except one — the page for “seattle_downtown.jpg”. Create a page called
“seattle_downtown.html” in the “html” folder, and test it out. Get this working before you move on.
You'll find the answer in the back of the chapter if you have any problems.
So, how do I make links out of images?
You've got your large photos, your smaller thumbnails, and even a set of
HTML pages for displaying individual photos. Now you need to put it all
together and get those thumbnails in “index.html” linked to the pages in the
“html” folder. But how?
To link an image, you put the <img> element inside an <a> element, like this:
A nd here 's an <a >
o pening t ag just before
t he <img> elemen t.
Here's th e <img> element for
the “sea ttle_do wntown.j pg”
thumbna il, just a s it is in the
“ index.ht ml” file.
alt="An iPod in downtown Seattle, WA">
T he <img> ele ment is neste d
d irectly inside the <a> ele ment.
Once you've placed the <img> element into an <a> element, the
browser treats the image as a clickable link. When you click the
image, the browser will retrieve the page in the href .