In this brief section we consider how to put images in an HTML document as well as the DOs and DON'Ts of using images.
Images -- be they photographs, charts, or drawings -- are a great way to spruce up a webpage. Images can either stand alone or be part of a paragraph.
We use the <img> tag to indicate an image. As an attribute, it takes src for the "source" file; this attributes is required. All other attributes are optional, but highly encouraged. For example, to put the file "sourcesmall.jpg" after this paragraph, we include the tag <img src="sourcesmall.jpg"> after this paragraph.
To center it, we include the attribute "align=center" in the tag. We could also align it on the right-hand side of the page. By default, images are aligned on the left.
Types of Images
It is safe to include .jpg and .gif images in your pages. You can also inlude .png graphics. These three types are supported by practically all modern browsers. Do not include bitmap (.bmp) or .tif/.tiff files, or other graphics formats specific to a particular program.
You can indicate the dimensions of an image by using the height and width attributes. Each takes an integer value -- the height or width of the image in pixels. You can also use the align attribute. It can take the values left, right and center. If you include an image within a paragraph, you can use the align attribute to determine how the image is placed in a paragraph and how and whether the text of the paragraph will run around the image.
An important attribute is the alt attribute. Alt contains "alternate text", which is often used to describe the image. This is very useful for when people have auto-loading of images turned off, or for when your pages is being viewed by a text-only browser. Browsers for the blind also read alt attributes when converting text-to-speech. The value of the alt attribute must be enclosed in quotes.
This site © copyright 1999, Steve Krause, all rights reserved.