HTML Image Tags

To insert an image into your web page, use:

<IMG SRC="URL_of_graphic">

For example:
Gorin & Cook, Inc.

This was coded as:

    <IMG SRC="logo.gif">Gorin & Cook, Inc.

It is recommended that you use the *.gif or *.jpg format for graphics if possible.

Image Attributes: WIDTH, HEIGHT, ALIGN

Example: Scale an image to a width of 100 pixels and a height of 40 pixels:

This was coded as:

    <IMG SRC="logo.gif" WIDTH=100 HEIGHT=40>

Example: Align the text to the top of an image (default=bottom):

Gorin & Cook, Inc.

This was coded as:

    <IMG SRC="logo.gif" ALIGN=TOP>Gorin  
    & Cook, Inc.

Example: Align the [bottom edge of the] text to the middle of an image:

Gorin & Cook, Inc.

This was coded as:

    <IMG SRC="logo.gif" ALIGN=MIDDLE>Gorin  
    & Cook, Inc.

Other useful values are ALIGN=LEFT, ABSMIDDLE, RIGHT which align the image across the page with respect to the page width.

Making an image "hot":

An image can be made a hot link by including it inside the A HREF container:

Example:

Visit the Gorin & Cook, Inc. home page

This was coded as:

Visit the <A HREF="http://www.gorin.com">
<IMG SRC="logo.gif">Gorin & Cook, Inc. 
home page</A>

You can eliminate the blue border box around the image by setting the BORDER attribute value to 0 pixels wide, but still make it "hot". (You'll see that the logo below is "hot" by moving your mouse cursor ontop of the logo.)

Example:

Visit the Gorin & Cook, Inc. home page

This was coded as:

Visit the <A HREF="http://www.gorin.com">
<IMG SRC="logo.gif" BORDER=0>Gorin & Cook, Inc. 
home page</A>

Of course, you can make the border thicker, by setting the value of BORDER equal to any pixel width you want.