HTML 3.2 - Images

Images

You can enhance your HTML documents through the judicious use of pictures or images. All you need is an image that has been stored electronically and its name. The tag for producing an image is

<IMG
SRC="image source file name" ALIGN="something"
ALT="alternate text" WIDTH="pixels" 
HEIGHT="pixels">

. The alternate text will be displayed if the web browsers is unable to load the image. The ALIGN, WIDTH, and HEIGHT attributes are optional and are discussed below.

For instance, if the URL of an image of spherical harmonics is tinyball.gif, then the tag <IMG SRC="tinyball.gif" ALT="Image" WIDTH="100" HEIGHT="100"> will produce the picture

If the image is embedded in text, then it is important to include the ALIGN parameter in the tag. The following three examples are identical except for the alignment (and the descriptive ALT tag):

This is an example of ALIGN="BOTTOM"
This is an example of ALIGN="MIDDLE"
This is an example of ALIGN="TOP"

Later versions of HTML allow the text to flow around an image, creating a much more pleasing display.

Left In this example, the image is flush left on the page and the text accompanying it floats beside it on the right. To attain this effect, we use ALIGN="LEFT" in the <IMG> tag instead of TOP, MIDDLE, or BOTTOM. However, if the text is not long enough to reach the bottom of the image and we wish the next paragraph to begin left-justified, we must use the tag <BR CLEAR="LEFT"> at the end of the text to clear the alignment. Otherwise, everything that follows will also be placed right of the image.

Right Alternatively, we can put the image flush right on the page with the text accompanying it floating beside it on the left. To attain this effect, we use ALIGN="RIGHT" in the <IMG> tag. Again, if the text is not long enough to reach the bottom of the image, we must use the tag <BR CLEAR="RIGHT"> at the end of the text to clear the alignment. Otherwise, everything that follows will also be placed left of the image.

It is also possible to have several images in a row. Simply put the commands one after another.

The WIDTH and HEIGHT attributes are not necessary but help the browser in determining the page layout. By specifying the width and height of your images, you are telling browsers exactly how much room to set aside.

If you wish to use an image as a link to another document, simply embed the image tag within the appropriate hypertext link tags. To go to the page about hypertext links, activate this picture :

[HTML Tutorial Home Page] [Previous Page] [Next Page]