adding images to your web pages
you are here
passionate folks over here who love their iPods. Check out the classic
red British telephone box!
<img src=”thumbnails/britain.jpg” alt=”An iPod in Birmingham at a telephone box”>
<img src=”thumbnails/applestore.jpg” alt=”An iPod at the Birmingham Apple store”>
elements to your “index.html” ﬁle.
Save, load into your browser and check out myPod!
For each thumbnail image, wrap an <a> element around it.
Just be careful to get the right href in each link!
there are no
When we put an <a> element around text we get
an underline. Why don’t we get something equivalent with
Actually, most browsers DO put a border around an image
to show it is linked. (Our browser, Safari, is one of the few that
don’t.) If your browser puts a border around your linked images,
and you don’t like it, hold on a few more chapters and you’ll
learn how to take that border off 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.
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.
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.