Attributes of the IMG Tag
September 29, 2000
The image tag can take several attributes, and it's important to use them
correctly. See the Web Developer's Journal logo to the right? Here's the
code for it:
<a href="/index.html">
<IMG SRC = "/gifs/wdj134.gif"
WIDTH = 134
HEIGHT = 28
BORDER = 0
ALT = "Back to the Web Developer's Journal Main Page"
ALIGN = "right"
HSPACE = "6"
VSPACE = "6">
</a>
Unlike our first example, this IMG tag includes lots of attributes. All
are optional, but all are highly recommended. Let's look at them one at a
time.
First, note that this image is also a hyperlink. To make a graphic a link,
just put an
A (anchor) tag around it as you would
a bit of text. As you would with text, make sure that there is no space
between the anchor tag and the image tag, or you'll end up with an ugly
little "tick" next to the graphic. Also, make sure that the
BORDER attribute is set to "0" or else a border will automatically be added.
WIDTH and HEIGHT Attributes
These tell the browser to set aside a box of the specified size for the graphic, so the browser can go on and continue loading the rest of the page while the graphic loads. If these attributes are not included, then the browser must wait to load the whole graphic before it can go on to the next item, stalling the page load and causing your visitors to mutter "Amateurs!" as they quickly click away to your competitor's site.
Make sure that your WIDTH and HEIGHT values are correct. If they're not,
the browser will stretch (or squash) the graphic to the specified values,
and it will look abysmal. HTML editors like Homesite can automatically
calculate the values for you.
Well, has anybody caught my error yet? In correct HTML 4.0, values of
attributes must be set off by quotation marks. Although
WIDTH=134 HEIGHT=28
still works, at some point in the future it may not, so it's better to use
the correct form:
WIDTH="134" HEIGHT="28"
BORDER Attribute
This can be used to add a border to your graphic, if desired. If the image
is not a hyperlink, the BORDER attribute can be omitted. If it is a link
however, BORDER should always be set to "0", or a border will be added.
ALT (Alternate Text) Attribute
Often incorrectly referred to as "alt tags" (ALT is an attribute of the
IMG tag), these are very important. The idea is to include a text
description of the graphic, so that if the graphic fails to load for some
reason, the visitor can get an idea of what it is. In fact, some people
surf with images off, and rely on the ALT text to tell them which images
they might want to look at. Also, current browsers will make the ALT text
pop up whenever the mouse is positioned over the graphic (you can do this
with hyperlinks, too - some call these "tool tips"). This can be used to
display handy messages for a variety of reasons. Some even advocate
including keywords in your ALT text, as some search engines use them to
rank pages.
ALIGN Attribute
Notice how the Web Developer's Journal logo nestles there on the right,
and the text flows around it? This is done by using the ALIGN attribute,
which can have the values:
left
right
top
texttop
middle
absmiddle
baseline
bottom
absbottom
The related HSPACE and VSPACE attributes create a horizontal space and a
vertical space, respectively, between the graphic and the surrounding text,
with the value specified in pixels.
In fact, the IMG tag can take lots of other attributes, which you can use
to do all sorts of nifty things. The ones described here are enough for a
beginner to fool with, however. If you want to delve deeper into HTML,
check out a good HTML reference book, or consult the help section of a
good HTML editor -
Homesite has an excellent, comprehensive list of all the HTML 4.0 tags.
Additional Resources:
Graphics Software
Pictures on my Web Site - How?
|
