The "img" tag is what makes most pages shine - after the content, of course.

The < img > tag, like the < body > tag, has lots of different parts: src, lowsrc, height, width, and alt. Src is short for "SeaRCh"... or maybe it isn't, but that's a good way to remember it. Img src is the tag you use to tell the computer to search for, and show you, an image. Duh. Lowsrc searches for a lower-resolution or lower-memory version of that image; you use it to speed up your page's loading time. The page won't really load any faster, but your visitors will see the graphics sooner. Like this:

You might have to reload this page to see it; the image loads first in black and white, and then in color. You have to create both the regular image and the low-resolution black-and-white version yourself, naming them something like image.gif and image_low.gif, and then give the computer the command < img src="image.gif" lowsrc="image_low.gif" >.

It's very important to include height and width. You can find out how big an image is by opening it with your web browser. Click on the picture above, and select "Open this image." Then look at the title bar on that browser window - it will say something like "image.gif, 500x60 pixels." Then you change your tag to be: < img src="image.gif" lowsrc="image_low.gif" width="500" height="60" >
and it's all good! Telling the browser in advance what size the picture will be means that, while the picture loads, your browser can arrange all the text around it so you have something to read while you wait. Otherwise, you don't see any of the page until you see the slowest parts of it.

The last thing to know is the alt tag. Alt gives you an alternative to the image, so that if you're on a text-only browser, or if the picture doesn't load right, you can still get your message across. Sometimes the picture's just for illustration, but if the leaf picture links you to your page about nifty Arkansas foliage, you might want to do this: < img src="image.gif" lowsrc="image_low.gif" width="500" height="60" alt="Read about foliage" >
so that people will see either

or

Read about foliage

and you're covered no matter what happens!

So now that you know what goes into a web page, how can you move the elements around?

Links Images Tables Frames Streamlining Forms Learning More
My home page
Email me