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

Image

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):

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.

1 2 3 4

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 : Image Link


[HTML Tutorial Home Page] [Previous Page] [Next Page]
Obliquity Valid HTML 3.2! Copyright © 1995-2007 by David Harper and L.M. Stockman
All Rights Reserved
Designed and maintained by Obliquity
Last modified on 1 January 2007
http://www.obliquity.com/computer/html/images.html