HTML From the Ground Up

by L. Downs

Adding Graphics to Your Page

By now you're probably eager to start adding colorful and eye-catching graphics to your newly-nascent Web page, so this month we're going to gratuitously toss some in. Since in order to add graphics you need some to begin with, we'll also show you how to get an almost unlimited supply for free, and add a few warnings about legal implications as well.

First, you need to understand that a computer graphic is stored as a file, just like your HTML page is. There are currently only two kinds of graphics files that Web browsers can reliably understand. These are GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group) files. You can tell them apart because GIF files end with the extension .gif and JPEG files end with .jpg. For now, don't worry about the difference.

NOTE: There have been efforts to add other graphics file types to the above two, but at this time you can't rely on these being supported by all of the currently popular browsers.

Each graphic on a Web page is usually a separate computer file. This means that your page may actually consist of an HTML file plus anywhere from one to a hundred or more separate graphics files. You add these graphics to your page by including a special tag at each location where you want a graphic to appear.

First, you need some graphics. Fire up your web browser and go to the examples for these lessons and choose Sample graphics from the examples for Adding Graphics to Your Web Page. You'll see a page with several graphics displayed. Here's the trick: to grab a graphic and save it to your hard disk, just point to it with the mouse, click on it with the right mouse button, and on the context menu that pops up click on "Save Picture As." You'll be prompted for the location to save the file to; save it to the same directory where you're keeping your sample Web page in progress. Go ahead and save all the graphics you see on the page, one after another. It wouldn't hurt to jot down the filenames as you do so (or print out the sample page; it has the filenames displayed).

Now open up that HTML file that you've been working on. Somewhere in the page, add this tag: <IMG SRC="new.gif">

Save the file, and load it into your browser. Voila! You should see a small "New!" graphic displayed at the location where you inserted the tag.

The <IMG> tag always has to have the SRC attribute included, since that's the part that tells the browser what file to insert at that point. If you have problems displaying your page, make sure you included both the starting and ending quotes around the filename; it won't work if one or both are missing. Also, remember that when you use an attribute it always has to have a space separating it from anything (such as the name of the tag) that precedes it.

Note that the graphic doesn't automatically cause a line break. If you want the graphic to appear on a separate line, you'll need to add the necessary <BR> tag before or after it to cause one or more line breaks.

A very popular kind of graphic is an "animated GIF" file. This is a graphic that actually contains a "movie" within the graphic file itself. You don't have to do anything special with these; just insert the same kind of <IMG> tag as with an ordinary graphic file and it will "play" whenever the page is loaded. Try inserting the tag <IMG SRC="ryoko_an.gif"> into your page and watch the results. (This assumes you copied all the graphics to your hard disk as suggested above.)

HTML allows you to add a background image to your page (typically the default background is a featureless gray or white unless the user has set up their browser differently). To do this, you include the attribute BACKGROUND="[a filename]" in the <BODY> tag in your document. For example, to include the file "chalk.jpg" in your page as a background, your <BODY> tag should look like this:
<BODY BACKGROUND="chalk.jpg">

To see what your sample page might look like by now, take a look at Example 1 for Adding Graphics To Your Web Page.

You can also make the background for your page a plain solid color by instead using BGCOLOR="[a color]" in the <BODY> tag, like this: <BODY BGCOLOR="AQUA">

Try it and see what happens. Important: only use one <BODY> tag at a time in your document (plus the </BODY> tag at the end, of course). Example 2 shows you what this would look like.

Only the following color names are understood by all browsers:

AQUA	BLACK	BLUE	FUCHSIA	GRAY	GREEN	LIME	MAROON
NAVY	OLIVE	PURPLE	RED	SILVER	TEAL	WHITE	YELLOW

Unfortunately, it doesn't take much study of the above chart to realize that most of these colors are not really very useful as backgrounds, either because they're too dark or too harsh on the eye (especially when spread over an entire screen). Most Web authors prefer to use special numeric codes here instead. (More on this in a later lesson.)

Almost any graphic on any Web page can be downloaded to your own hard drive and incorporated into your own pages in the manner described above. However, keep in mind this simple rule: unless the graphics on a Web page are clearly marked as free for the taking, DON'T DO IT. You could be violating copyright if you do; besides, it's considered poor manners. (And keep in mind that there's no guarantee that just because a Web site says a graphic is copyright-free that they didn't get it from somewhere else without checking on possible copyright infringement.)

The safest sources of all for graphics are:

Commercial clipart packages described as intended for Web sites (such as those that come with recent versions of CorelDraw!); and
Graphics you create yourself.

Next lesson: We back up a little and talk about how this all works.

Terms to know from this lesson

<IMG> ("image") tag: Inserts a graphic file into the page at the location of the tag.

SRC attribute: Tells the browser what image file to use for the current <IMG> tag.

BACKGROUND attribute: Tells the browser what image file to use as a background (used in the <BODY> tag and other tags as well).

BGCOLOR attribute: Tells the browser what solid color to use as a background (used in the <BODY> tag and other tags as well).

GIF file: A Graphics Interchange Format graphic file; will have an extension of .gif.

JPEG file: A Joint Photographic Experts Group graphic file; will have an extension of .jpg.

Animated GIF file: A GIF file which contains two or more images which will automatically cycle when the page is reloaded, creating motion.

Portions of this tutorial originally appeared in Technotes, a publication of the UNLV Libraries, and are copyright by the University of Nevada, Las Vegas; used by permission. All remaining material © 2003 Lamont Downs.