HTML and CSS Reference
In-Depth Information
The most important attribute of the
<img>
tag is
src
, which is the URL of the image you
want to include. Paths to images are specified in the same way as the paths in the
href
attribute of links. So, to point to a GIF file named
image.gif
in the same directory as the
HTML document, you can use the following XHTML tag:
<
img src=“image.gif” /
>
For an image file one directory up from the current directory, use this XHTML tag:
<
img src=“../image.gif” /
>
And so on, using the same rules as for page names in the
href
part of the
<a>
tag.
9
You can also point to images on remote servers from the
src
attribute of an
<img>
tag,
just as you can from the
href
attribute of a link. If you want to include the image
exam-
<
img src=“http://www.example.com/example.gif” /
>
CAUTION
Just because you can use images stored on other servers for your
own web pages doesn't mean that you should. A lot of legal, ethi-
cal, and technical issues are involved with using images on other
sites. I discuss them later in this lesson.
Adding Alternative Text to Images
Images can turn a simple text-only web page into a glorious visual feast. But what hap-
pens if someone is reading your web page using a text-only browser? What if she has
image loading turned off so that all your carefully crafted graphics appear as generic
icons? All of a sudden, that visual feast doesn't look quite as glorious.
There's a simple solution to this problem. By using the
alt
attribute of the
<img>
tag,
you can substitute something meaningful in place of the image on browsers that cannot
display it.
In text-only browsers, such as Lynx, graphics that are specified using the
<img>
tag in the
original file usually are displayed as the word
IMAGE
with square brackets around it, like
this:
[IMAGE]
. If the image itself is a link to something else, that link is preserved.
The
alt
attribute in the
<img>
tag provides a more meaningful text alternative to the
blank
[IMAGE]
for your visitors who are using text-only web browsers or who have
graphics turned off on their browsers. The
alt
attribute contains a string with the text
you want to substitute for the graphic:
<img src=“myimage.gif” alt=“[a picture of a cat]” />
