13. MORE ON IMAGES

INDEX CARD #13:

USING A GRAPHIC AS A LINK (13a) How can I use a graphic as a link? Just place the anchor tags around the image tag (and text, too, if desired), like this: <A HREF="URL_link"> <IMG SRC="URL_image"> Some text... </A> Here's an example which uses an "animated GIF" (future lesson!) as the image source: There are some fun icons here! How can I tell when a graphic is being used as a link? When a graphic is used as a link, the default is usually a 1-pixel-wide border around the image (see the example above). You can change the width of the border by using the BORDER attribute. You specify the width of the border, in number of pixels: <A HREF="URL_link"> <IMG SRC="URL_image" BORDER=2> </A> If you set BORDER=0, then the border will disappear. Remember, however, that if you remove the border, then you're removing the visual clue that the graphic is a link, so your reader may not know to click on the image!

ALTERNATIVE TEXT FOR IMAGES (13b) What happens to my image if a person has graphics turned off, or the graphics file can't be found? A generic icon is put in its place, which gives no hint of what was supposed to be there. A better alternative is to have some descriptive text appear whenever your graphic is unavailable (for whatever reason), which brings us to... How do I provide alternative text for a graphic? Use the ALT attribute, as follows: <IMG SRC="URL_graphic" ALT="alternative text"> Take the time to provide alternative text for images, and you'll be making your web page accessible to a much wider audience. The HTML 4.0 specification has declared ALT to be a required attribute for the <IMG> tag (but browsers aren't currently enforcing it).

Printable version of Index Card 13a

Printable version of Index Card 13b

WORKSHEET #13:

• (W13.1) Continue with the tutorial located at: http://www.cwru.edu/help/introHTML/toc.html (link is no longer valid) Please finish Chapter 7 (IMAGES), and do all the exercises at the end of the the chapter.

ASSIGNMENT #13:

• (A13.1) It's nice to see what things look like to people who have a text-only (no graphics) browser, like Lynx. Visit the following site, read the information, and then enter the URL of this page to see (approximately) what it would look like to people using Lynx: http://www.delorie.com/web/lynxview.html
• (A13.2) Figure out how to TURN OFF THE GRAPHICS in your favorite browser for faster loading of web pages. (HINT: Use the HELP material; search for something like "turn off graphics.") View this web page without graphics; what has changed? Have I used alternative text for the "dancing Hobbs" icon? (Don't forget to turn your graphics back on.)
• (A13.3) Read pages 158–159 (from "Linking Graphics" up to "Specifying Width and Height") in the Weasel Book.
• (A13.4) Put ALTERNATIVE TEXT into any graphics that you are currently using in your homepage; be sure to do the same for any future graphics.