Chapter 6, Lesson 5

If you already know how to specify alternate text for an inline-image, you can skip this lesson.

While you and I, being die-hard cyber-geeks, have the latest in graphic browser software, some folks are still quite happy to keep using their text-only browser. When their browser encounters an image tag, it typically places some text instead, usually something that looks like this: [INLINE]. Your graphic browser will do something similiar if it can't load the image file for some reason (this is known in web lingo as a 'broken image'), usually placing a small generic graphic image in the place of the one originally specified.

HTML provides for a way to tell the remote operator what image would have been there, had it been available. The 'ALT' attribute can be added to the 'IMG' tag to specify alternate text to be used by the browser in the event the browser doesn't support inline images, or (maybe) if the image file is "broken". The format for alternate text is:

<IMG SRC="image-filename" ALT="your-alternate-text">

As with previous tags which had multiple attributes, be sure to leave some whitespace between tags. The alternate text is placed inside quotation marks, as shown, and will replace the broken or missing image. Generally, you'll want to keep this text very short, so as not to mess up the layout of your page. What should you use for the actual alternate text? Sometimes, the image filename is used as alternate text, and sometimes a short description of what you would have seen. Which you do is a matter of personal preference.

Let's see some source code and an example:

Here's a picture of Jupiter that I don't have:  <BR>
<IMG SRC="jupiter.gif">... not so cool, huh?
<P>
And here's the same non-picture with alternate text "[image:Jupiter]":<BR>
<IMG SRC="jupiter.gif" ALT="[image: Jupiter]">... a whiter shade of pale, yes?
<P>
And here's the familiar saturn pic, with alternate text "[image: Saturn]": <BR>
<IMG SRC="saturn1.gif" ALT="[image: Saturn]">... right on!

Here's a picture of Jupiter that I don't have:
... not so cool, huh?

And here's the same non-picture with alternate text "[image: Jupiter]":
... a whiter shade of pale, yes?

And here's the familiar saturn pic, with alternate text "[image: Saturn]":
... right on!

> Here's a picture of Jupiter that I don't have:
   [INLINE] ... not so cool, huh?

   And here's the same non-picture with alternate text "[image: Jupiter]":
   [image: Jupiter] ... a whiter shade of pale, yes?

   And here's the familiar saturn pic, with alternate text "[image: Saturn]":
  [image: Saturn] ... right on!

Notice that there are two distinct demonstrations. The first demonstrates what your browser does with the source code, and the second demonstrates what a text-only browser did (Lynx, on my UNIX account).

There are several things to take note of here. The jupiter image doesn't really exist, but we've created an image-reference to it anyway, for demonstartion purposes. The first incidence had no alternate text. Those using a text-only browser saw results similar to that shown above, and those with graphics browsers got the generic 'broken-image' graphic. Next, we insert alternate text in the image tag, but we're still pointing to the same broken file. You can see what our text-only browser did, but what did your graphics browser do? Mine just showed a generic broken-image graphic, but some graphics browsers may also show the alternate text. Finally, we show the 'saturn' image, which DOES exist, with alternate text. Text-only browsers saw the alternate text displayed, while graphics browsers saw the image and no alternate text.

Typically, alternate text is also displayed in a graphics browser when an image is not yet loaded, but about to be, so that the viewing operator can see what's about to come up, and abondon ship if they want to.

It's always a good idea to include some alternate text with each and every image. You never know when it might be needed. I suggest using standard brackets to surround the text, and maybe a reference to the fact that it's an image (like we did in the examples above).

---

Overseer: Monty Northrup ... ... leave e-mail ...

---