Beginner's HTML Guide VI

Return to my Computer Pages
Go to my home page

Beginner's HTML Guide VI - Images

HTML supports two image formats, GIF and JPEG. So, you may have to convert your graphic files to these formats. There are paint programs and conversion programs that do this.

Basically, there are four different things that you can do with an image:

Display it.
Use it as a background image, which is tiled over the entire page.
Make it a hot spot, which the user can click.
Use as an image map, so the user can click on different parts of the image to go to different URLs. I will not show that, in this article.

First, let's display an image. The one that you see on the left was entered like this:

<IMG SRC="html.gif" ALIGN="Left">

This is the <IMG> tag with the source of the image SRC="html.gif". You can specify an entire URL, as the source. And I wanted the image to appear on the left, so I used the ALIGN="Left" option.

There are quite a few options:

ALIGN=left/right/middle/top/texttop/absmiddle/baseline/bottom/absbottom.
ALT="html picture". Non-graphic browsers show "html picture" instead of the image. Be sure and use ALT, for people with such browsers.
HEIGHT=100, WIDTH=200 sets the height and width (can stretch the image).
HSPACE=10 seperates the image from the text, by 10 pixels. VSPACE is similar vertically.

Note: Using the HEIGHT and WIDTH options can seem to actually speed up the loading of your page. The user's browser can go ahead and format later text, while the image is still loading.

The background image, on this page, was typed like this: <BODY BACKGROUND="html0.gif">, inside the <BODY> tag. The image is automatically tiled, all over the page. Make your image small, so that it loads very rapidly, but too small (just a few pixels) may slow it down, too.

You may recall that <A HREF="http://www.mcn.net/~jimloy/computer.html">Return to my Computer Page</A> is how to type a link. This one goes to my computer pages. It allows the user to click on Return to my Computer Page. You can also let the user click on an image. The image at the left was typed like this: <A HREF="http://www.mcn.net/~jimloy/computer.html"><IMG SRC="html.gif" ALIGN="LEFT"></A> It just says to use the image instead of some text. The resultant image has a box around it to show that it can be clicked.

Note: GIF and JPEG are both compressed bit-mapped formats. GIF can be saved with a trasparent background, and interleaved . Interleaving puts your image on the user's screen a little at a time, which allows his browser to display subsequent text while this is going on. It makes the whole process appear much faster. Use a paint program that supports these features.

Return to my Computer pages
Go to my home page