Useful Links

Amphi HTML Page

HTML Help

Colors Graphics
Using Graphics
Graphics have many uses on web pages. They include the following situations:
Backgound Graphics
To use a graphic as a background, insert a BACKGROUND="image.gif" (where "image.gif" is the name of the background that you want to use) attribute into the <BODY> tag, so that the resulting tag looks like this:

<BODY BACKGROUND="image.gif">

Please note that you cannot use both a background color and a backgound graphic in a simple page.

Images
Images, whether they be pictures, drawings, buttons or icons, add spice to any web page. Naturally, every web page writer wishes to use a variety of images. Fortunately they are quite easy to use. To place an image in a page, simple use the

<IMG SRC="image.gif">

tag, where "image.gif" is the name of the graphic that you want to use. For example, the following image is placed into this page through use of the following tag:

<IMG SRC="../graphics/amphi.gif" WIDTH="250" HEIGHT="168">

The Amphi Logo

To wrap text along one side of a graphic, insert the ALIGN attribute into the IMG tag. Here are two examples:

The Amphi Logo <IMG SRC="../graphics/amphi.gif" WIDTH="250" HEIGHT="168" ALIGN="LEFT"> produces and image on the left side of the page and text that wraps along the right margin of the image. This is often a nice way to use images and text and the same time. To make the text stop wrapping and continue at the bottom of the image, use the <BR CLEAR="ALL"> tag.
The Amphi Logo <IMG SRC="../graphics/amphi.gif" WIDTH="250" HEIGHT="168" ALIGN="RIGHT"> produces and image on the right side of the page and text that wraps along the left margin of the image. This is often a nice way to use images and text and the same time. To make the text stop wrapping and continue at the bottom of the image, use the <BR CLEAR="ALL"> tag.
Another useful function of graphics is as links. To accomplish this, simply insert an IMG tag inside an A HREF tag.

For example, the following picture is also a link:

The Amphi Logo

To attain this, use a tag that looks like this:

<A HREF="http://www.amphi.com"><IMG SRC="../graphics/amphi.gif" WIDTH="250" HEIGHT="168" ALIGN="Left"></A>

Note the blue border that alerts the viewer that the image is a link. If you do not want such a border, insert the attribute BORDER="0", which produces the following result:

The Amphi Logo

Note that the above image is still a link. The full tag used to produce the above image was

<A HREF="http://www.amphi.com"><IMG SRC="../graphics/amphi.gif" WIDTH="250" HEIGHT="168" BORDER="0"></A>

A Few Notes on Graphics
  • The only graphics supported by most browsers are .jpg and .gif formats. Please don't try to use other kinds of graphics! Most complicated art like photos and paintings will use .jpg format, while simple line art, small icons and black and white art will use .gif format.
  • When possible, include the WIDTH and HEIGHT attributes in the IMG tag, as it allows the browser to load the page faster. Make sure that you know the WIDTH and HEIGHT of you graphic (in pixels) if you use it, though!
  • Also, when possible, use the ALT attribute to include a brief description of your graphic for those viewers who may have slow connections, who may have turned off graphics in their browser, or who may be using a (rare) text-only browser. The correct use of the ALT attribute for the above images would be ALT="The Amphi Logo".
  • Keep use of graphics to a minumum. Each time you want to use a graphic, consider whether it is really necessary and if it adds to the overall design of your page. Too many graphics can make a page cluttered and hard to read.

This site created and maintained by Christopher Yetman for the Amphitheater School District and is intended for the use of the employees and students of the Amphitheater School District. © 2000 by the Amphitheater School District.