In order to accomplish this you must use a special HTML tag. The <IMG> Tag is interesting because it is a member of a small family of tags known as one-sided tags. In other words, it has no Closing tag at all.

PROPER USE OF THE IMAGE TAG:

Let's start with a simple image tag:

<IMG>

This tag requires several attributes for successfully embedding an image on your page.

SRC=

The SRC= attribute is used to specify the actual filename of the image you want to put on the page. For example, if you have a graphic image with the filename my_picture.gif then you would enter the filename as the Value for the SRC= attribute, like this:

<IMG SRC="my_picture.gif">

WIDTH= and HEIGHT=

These are the two attributes you use to specify the dimensions of the image you wish to use. It is important to ALWAYS specify height and width attributes in your Image tags.

A browser will stop and wait for an entire image to load before moving on if you do not specify beforehand what the dimensions of the image are. This will slow down the loading time of your page considerably. So, if you include the height and width attributes in the image tag, the browser will know and can make allowances for it, and continue on.

You can set the height and width attributes like this:

<IMG SRC="picname.gif" WIDTH="100" HEIGHT="200">

The numbers I used refer to the image size in PIXELS. The above image would therefore appear on the page as 100 pixels wide, and 200 pixels high.

How do I know what the dimensions of an image are?

Well now, this is an interesting question. You can usually check the dimensions of your images in a graphic editing program of some sort, like Paint Shop Pro, or Adobe Photoshop. Some browsers will even show you the dimensions of the image, in the title bar, if you use the browser to view your image. Just type in the path and filename of the image in your browser's address bar:

c:\pictures\my_picture.gif

Now here is the cool part of the image tag. Let's say we have an image we have determined to be 200 pixels wide and 150 pixels in height. We could code the width and height to those dimensions easily enough. But the really spiffy part of HTML is that it allows you to specify any dimensions you like IN THE TAG. The image itself may well be 200 pixels wide and 150 pixels in height, but you can tell the browser to display bigger or smaller just by adjusting the size in the Tag attribute code.

To illustrate this, here is a sample image and it's coding:

<IMG SRC="lilgazoo2.gif" WIDTH="90" HEIGHT="90">

This image is 90 pixels wide and 90 pixels high. This is what it tells me in my image editing program.

Now let's just change the number values in the WIDTH= and HEIGHT= attributes and see what happens:

<IMG SRC="lilgazoo2.gif" WIDTH="150" HEIGHT="150">

In this example all I have done is changed the coding. I have not made changes of any sort to the image itself. I have simply told the browser to display the image in the dimensions I have chosen.

PLEASE NOTE: This does not change the actual file's filesize in any manner. If the file was 15k to start with, it will remain as a 15k filesize. the only thing that changes is the displayed dimensions.

ALT=

It is ALWAYS a good habit to include the ALT= attribute. Put your mouse over the image below and watch what happens:

A little box comes up with the text I specified in the image's ALT= attribute. This is how you would code it:

<IMG SRC="lilgazoo2.gif" WIDTH="90" HEIGHT="90" ALT="Testing the ALT text trick">

Why would I bother with the ALT coding?

Some people turn OFF their browsers ability to display pictures for faster performance, and if you do not have a text description to replace the graphic, they won't be able to do or see much on your site. This is especially important if you have a menu built with graphic menu choices.

BORDER=

You can specify that your image be displayed with or without a border by adding a simple BORDER= attribute, like this:

<IMG SRC="picname.gif" WIDTH="100" HEIGHT="200" ALT="This is a test" BORDER="0">

BORDER="0" tells the browser NOT to use a border. (technically you are telling the browser to display the graphic with a border 0 [zero] pixels wide) If I wanted to use a border I could either put in NO border attribute at all, or I could use a 1 instead of a 0 (zero) like this:

<IMG SRC="picname.gif" WIDTH="100" HEIGHT="200" ALT="This is a test" BORDER="1">

Try using a 2 or a 3 instead of a 1 and watch the results. Personally I loathe having borders around graphics, it makes them look amateurish and silly.

MAKING AN IMAGE A CLICKABLE LINK:

Ok, now that we have the basic image tag built it is time to make it clickable! We need to define the image as a link with our anchor tag, like this:

<A HREF="http://www.gazoo.net"> <IMG SRC="picname.gif" WIDTH="100" HEIGHT="200" ALT="This is a test" BORDER="0"></A>

In the above example we have embedded our image tag inside the link (anchor) tag, and it is now a fully clickable image link.

Please note: See the Creating A Text Link tutorial for more details on creating the anchor tag code.

TIPS TO REMEMBER:

Tags are NOT case sensitive, you can use WIDTH, width, or Width...

Do NOT put spaces between the attribute name and the = (equals) sign.

This is bad: width  =  " 25 " This is good: width="25"

It doesn't matter what order you put the tag attributes in, but be sure you ALWAYS use the quotes to specify attribute values.

ALWAYS use the ALT attribute in your images. People with text-only browsers will love you for it. (And so will webmasters who give awards out. Using ALT attributes is excellent web-etiquette)

HTM-Hell: HTML For Newbies Email: webmaster@gazoo.net   Design and Tutorials by Gazoo, Infinity International ©1998