HTML Tutorials‎ > ‎

Images & Image Links

First, let's start w/a basic image tag: <IMG SRC="image.gif" ALT="text" WIDTH="specified in pixels" HEIGHT="ditto">. Now, let's break down these attributes, one by one.

SRC: This is the source/url of your image file.

ALT: This is text that will be seen when you mouse over the image. Also, if some of your viewers have a TEXT ONLY Browser, they'll be able to see the text you wrote. So, it's probably a good idea to be somewhat descriptive.

WIDTH/HEIGHT: (specified in pixels)-By specifying the width & height of your image, the browser makes it load faster, which makes happy visitors! If you don't know the pixel width & height of your image, you can find out by using an Image Editor/Maker. For the sake of explanation, I'll use Photoshop. Click on the Image menu, then click Image Size. When the Image Size dialog box comes up, DON'T CHANGE ANYTHING! Just take note of the height & width & write them down if you need to.

Now let's link an image. To begin, we need a basic link. If you dont know how to make a link, please refer to the links tutorial. Now here's our link: <A HREF="page.html"></A>.

Instead of putting text between the <A></A> tags like we would normally do, we put an image tag.

Here's how it'll look:  <A HREF="page.html"><IMG SRC="image.gif" WIDTH="specifiedinpixels" HEIGHT="ditto" ALT="description" BORDER="0"> </A>

Now, we'll go through each of these attributes, one by one.

SRC: See above

WIDTH/HEIGHT: See above

ALT: See above

BORDER: Unless you specify 0, you'll have an ugly border that will appear around your image. (same color as your specified link color. See the text & link colors tutorial.) With zero specified, you'll have a clean, neat looking image link.

I hope this has been helpful.