Using Graphics

Adding Images and Backgrounds

The World Wide Web has the ability to incorporate backgrounds and images into your HTML documents. The two most popular and standard image formats supported on the Web are:

Graphic Interchange Format (GIF)

The Graphic Interchange Format (GIF) was originally developed for image transfer by users of Compuserve. GIF's are generally larger in file size, but offer several features not found in other image file types:

	Transparency - With transparent GIF's, a specified color can be made "transparent". When the image is loaded by the browser, the transparent color is not displayed allowing whatever is underneath, usually the background image or color, to show through. Transparent GIF's are a great way to incorporate graphics into your page.
	Interlacing - Unlike normal images which load one row at a time from top to bottom, interlaced GIF's materialize every fourth row from top to bottom. This allows the viewer to see the entire image, although fuzzy, in a quarter of the time.
	GIF is pronounced several ways by netizens... tamahto.. tomato.. doesn't matter, it's still the same thing.

Joint Photographic Experts Group (JPEG)

JPEG (.jpg) images support up to 16 million colors and allow for greater compression (smaller file size) than GIF's. JPEG images may be a better choice for photo realistic images.

Adding Images

The <IMG> image tag allows you to insert graphics into your page. The image tag has one required and several optional attributes.

The src attribute is a required attribute where the value is the URL of the image to be displayed. URL's can be absolute:

or relative:

The alt attribute allows you to add alternative text to be displayed for text only browsers or for viewers who have graphics turned off. This will also show up in some browsers when the mouse pointer is held over the image.

The align attribute sets an image's alignment on the page to left, right or center. Default is left. Text will flow around left or right aligned images.

The vspace and hspace attributes insert space between the image and the surrounding text when text flows around the image. The value is in pixels.

The height and width attributes allow the page to load leaving appropriate space for the image. This allows the viewer to begin reading the text while the graphics load.

The border attribute includes a colored border around a graphic when the graphic is used as a hyperlink. Value is in pixels and the default is 3 pixels. Border can be eliminated completely by setting border to 0. This is especially useful for transparent GIF's.

Adding Backgrounds

By default pages on the internet generally appear with black text and a gray background. The background can be changed using two attributes to the <BODY> tag. The bgcolor attribute changes the background color. Value can be the RGB value preceded by a # or the standard color name.

The background attribute allows you to add a background graphic which tiles across the background of the page. The bgcolor and background attributes can be used together in the event that the page is visited by someone with a text only browser.

With changes in the background, you may need to change the text colors and links to make them more visible. These are also changed with attributes to the <BODY> tag.

The text attribute changes to text color for the entire document. (The color attribute to the <FONT> tag can be used to change the text color in sections of the document.) The value can be RGB or standard color name.

The link, vlink (viewed link) and alink (active link) attributes set the color of hyperlinks which have yet to be visited, have been visited and are actively being clicked. The value can be RGB or standard color name.