HTML Help

Adding Images and Backgrounds

One of the great attractions the World Wide Web is the ability to incorporate backgrounds and images. Currently, two image formats are supported on the Web:

Graphic Interchange Format (GIF)

The Graphic Interchange Format (GIF) was originally developed for image transfer by users of Compuserve. GIF uses a color map with a maximum of 256 colors. Because of this, GIF's are not always appropriate for photo realistic images. GIF's are great for images with a limited color map such as buttons, logs or icons and have two features which make the extremely useful for web pages:

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 the whatever is underneath, usually the background, 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 fro top to bottom, interlaced GIF's materialize every forth row from top to bottom. This allows the viewer to see the entire image, albeit fuzzy, in a quarter of the time.

Joint Photographic Experts Group (JPEG)

JPEG images support and image map up to 16 million images and allow for greater compression 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 whose values the URL of the image to be displayed. URL's can be absolute:

<img src="http//www.woonsocket.org/oceanban2.gif">

or relative:

<img src="oceanban2.gif">

The alt attribute allows you to add alternative text to be displayed for text only browsers or for viewers who have graphics turned off.

<img src="oceanban2.gif" alt="Ocean State Webring">

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.

<img src="oceanban2.gif" alt="Ocean State Webring" align="right">

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.

<img src="oceanban2.gif" alt="Ocean State Webring" align="right" vspace=5 hspace=5>

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.

<img src="oceanban2.gif" alt="Ocean State Webring" align="right" vspace=5 hspace=5 height=40 width=400>

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.

<img src="oceanban2.gif" alt="Ocean State Webring" align="right" vspace=5 hspace=5 height=40 width=400 border=0>

Looking for graphics? Check out Laura's Graphics & More. She has compiled a list of over 80 sites with some of the best graphics, backgrounds and other neat stuff to help you design your web pages.

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 to background color. Value can be the RBG value preceded by a # or the standard color name.

<body bgcolor=#FFFFFF>
<body bgcolor=black>

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

<body bgcolor=black background="back.gif">

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 <text> tag can be used to change the text color in sections of the document.) The value can be RBG or standard color name.

<body bgcolor=black background="back.gif" text=white>

The link, vlink and alink attribute set the color of hyperlinks which have yet to be visited, have been visited and are active respectively. The value can be RBG or standard color name.

<body bgcolor=black background="back.gif" text=white link=red vlink=green alink=pink>

In the next section, we will review ways to link your page to other pages on the web.