Take a tag, say the <IMG SRC=" "> and use it as is:

<IMG SRC="images/img-ex1.gif">
which gives you

or you can be more definitive:
<IMG SRC="images/img-ex1.gif" HEIGHT=80 WIDTH=60 BORDER=0 ALT="Green Square">

The HEIGHT=80, WIDTH=60, BORDER=0 and ALT=" " are called attributes.

Why do I NEED all that extra stuff???

Actually, each serves a specific function, and has a real purpose.

The HEIGHT=80, WIDTH=60 give the size of the graphic image, and since the browser doesn't have to interpret the size, decreases the amount of "load time" before you can see the image on a web page.
In a page full of graphics, any decrease in load times is very helpful.

The BORDER=0 attribute is very helpful when using an image in conjunction with an <A HREF=" "> tag. If you leave the "BORDER" attribute out, you get a blue line around the image.

<A HREF="kisshtml.htm"> <IMG SRC="images/img-ex1.gif" HEIGHT=80 WIDTH=60 ALT="Green Square"> </A>

Of course, you may want a border, maybe a large border, in which case you would do this:

<A HREF="kisshtml.htm"> <IMG SRC="images/img-ex1.gif" HEIGHT=80 WIDTH=60 BORDER=6 ALT="Green Square"> </A>

Finally, the ALT=" "
If your image doesn't load, instead of just a broken graphic, the ALTernate tag tells what image should be there.

This is also helpful to those who surf the web with their graphics turned off, or who are using a browser, such as Lynx, which doesn't read graphics.

Another usage is informational. It can, for instance, say ALT="Click Here".

Note: if you move your mouse cursor over an image with an "ALT=" " tag and hold it there, you can read what the "ALT=" " attribute says.

Almost every HTML tag (even the lowly <P> tag), can have Attributes. In these tutorials, we discussed Attributes for the "Horizontal Rule" in Lesson #8.
We also discussed Attributes for <Table> "TH" in Lesson #18,

Check it out!

<- Previous | Next ->