The Image Tag

To insert your picture onto a web page, use the IMG tag:

<IMG>

The only REQUIRED attribute for IMG is SRC. SRC stands for "source". You must identify the filename or URL for the image. Below is the code to load an image called "sunset.jpg" onto your web page. Example

<IMG SRC="sunset.jpg">

Notice that the file name is set in quotes. Also there is always a space between the tag and the attribute (IMG SRC), but never any space between the attribute and the value, just the equal (=) sign: (SRC="sunset.jpg"). In addition there is NOT a closing </IMG> tag.

to the top

Several attributes accompany IMG SRC.

Some browsers place a border around all images by default. IE5.0 does not. But to sure you can force the browser to suppress the border. In addition, whenever you nest the image inside of an anchor, all browsers force a border by default. You can suppress the border on images used for anchors by the same method below: Default No Border

<A HREF="http://howdyyall.com"> <IMG SRC="sunset.jpg"> </A>

To suppress the border that the link forces, set the border to "0". Example

<A HREF="http://howdyyall.com"> <IMG SRC="sunset.jpg" BORDER="0"> </A>

to the top

Using the ALT attribute, you can have the browser open a text box over the picture and describe the picture, a link, other information. The ALT attribute was originally used for non-graphical browsers. Since pictures would not display, HTML programmers provided text to describe what the user is missing. The value of the ALT attribute is any sting of text. Example

<A HREF="http://howdyyall.com"> <IMG SRC="sunset.jpg" ALT="Go to Howdy Y'all .com"> </A> </A>

to the top

If a picture is too small, tall or wide, you can adjust the width and height by using the WIDTH attribute, and the HEIGHT attribute. WIDTH HEIGHT BOTH

<IMG SRC="sunset.jpg" WIDTH="300"> <IMG SRC="sunset.jpg" HEIGHT="250"> <IMG SRC="sunset.jpg" WIDTH="300" HEIGHT="75">

Adjusting either the WIDTH or the HEIGHT causes the other of the two to adjust proportionally. If you adjust both, you can easily distort the original picture.

to the top

The ALIGN attribute specifies the way the image is aligned in its space and the side to which text should wrap. Values for ALIGN include ABSMIDDLE, ABSBOTTOM, BASELINE, BOTTOM, CENTER, MIDDLE, LEFT, RIGHT, TEXTTOP and TOP. Example

<IMG SRC="sunset.jpg" ALIGN="RIGHT">

In the example displayed below, the text creeps right up to the graphic. This is normally poor layout. To set a space (or "gutter") between the text and the image, use HSPACE for Horizontal Space and VSPACE for vertical spacing. Example

<IMG SRC="sunset.jpg" ALIGN="RIGHT" HSPACE="10">

to the top

The <IMG SRC> tag can be nested within other tags, such as the <CENTER> tag, the <TD> tag within a table, or even inside a lists, heading, or marquee.

For example, you can nest the IMG tag in the CENTER tag to align your image to the center. Example

<CENTER><IMG SRC="sunset.jpg"></CENTER>

to the top

You can use an image as an imagemap. An imagemap allows the user to jump to different URLs from the same image by click on different "hot" areas of the image. Example

<IMG SRC="sunset.jpg" USEMAP=#mymapfile BORDER="0"> <MAP NAME="mymapfile"> <AREA SHAPE="POLY" COORDS="0,0 90,0 90,45 0,45" HREF="pg2.htm"> <AREA SHAPE="POLY" COORDS="0,46 90,46 90,90 0,90" HREF="pg3.htm"> </MAP>

to the top

For complete information on the IMG tag and attributes go to htmlhelp.com