HTML and CSS Reference
In-Depth Information
<a href="html/seattle_downtown.html">
<img src="thumbnails/seattle_downtown.jpg" alt="An iPod in downtown Seattle, WA">
</a>
</p>
<h2>
Birmingham, England
</h2>
<p>
Here are some iPod photos around Birmingham. We've obviously got some
passionate folks over here who love their iPods. Check out the classic
red British telephone box!
</p>
<p>
<a href="html/britain.html">
<img src="thumbnails/britain.jpg" alt="An iPod in Birmingham at a telephone box">
</a>
<a href="html/applestore.html">
<img src="thumbnails/applestore.jpg" alt="An iPod at the Birmingham Apple store">
</a>
</p>
</body>
</html>
For each th
umbnail image
, wrap an <a
> element ar
ound it.
Just be care
ful to get t
he right href
in each link
!
Add these
<a>
elements to your “index.html” file.
Save, load into your browser, and check out myPod!
Q:
When we put an <a> element around text, we get an
underline. Why don't we get something equivalent with images?
A:
Actually, Internet Explorer puts a border around an image
to show it is linked. (Our browser, Safari, doesn't do that.) If your
browser puts a border around or a line under your linked images, and
you don't like it, hold on a few more chapters and you'll learn how to
change that with CSS. Also notice that when you pass your mouse
over an image, your cursor will change to indicate you can click on
the linked image. In most cases your users will know an image is
linked by context and by the mouse cursor, even if there's no border.
Q:
Can't we just link to the JPEG image directly without all
those HTML pages? I thought the browser was smart enough to
display images by themselves.
A:
You're right; you could link directly to the image, like this: <a
href=“photos/seattle_downtown.jpg”> ... </a>. If you did that and
clicked on the link, the browser would display the image by itself
on a blank page. In general, though, linking directly to an image is
considered bad form, because you usually want to provide some
context for the images you are displaying.
