HTML and CSS Reference
In-Depth Information
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.
<a href="html/seattle_downtown.html">
<img src="thumbnails/seattle_downtown.jpg"
alt="An iPod in downtown Seattle, WA">
</a>
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
.
