Picture this … you've signed up for your free 6MB webspace, read our bLink introductory HTML tutorial, and built yourself a simple, text-only homepage. Now it's time to add graphics. This tutorial will give you the skills you need to enliven your homepage with images.

The Basics
There are two basic file formats for Web images: the GIF format, for simple images, and the JPEG format, for detailed images with greater tonal range. JPEGs tend to have larger file sizes that take longer to load, so use them sparingly. Realize, too, more images mean longer downloads, so try to keep the graphics total on each page below 60K.

Putting a GIF image on your page is simple using the IMG tag. For an image called mypicture.gif you would use this tag in your page's HTML:<IMG SRC="mypicture.gif">.

To control the placement of an image, use the ALIGN tag, which describes the image's position relative to other page elements. You can place an image, for example, at the TOP, BOTTOM, or in the MIDDLE of the text on your page, and to the LEFT or RIGHT of it as well, like this: <IMG SRC="mypicture.gif" ALIGN=TOP>.

Specifying the HEIGHT and WIDTH of your image (in pixels) will speed the page's loading in browsers: <IMG SRC="mypicture.gif" ALIGN=TOP HEIGHT=75 WIDTH=75>. Most graphics programs will display the size of your image, but you can also use your Netscape browser. Simply open your image file in the browser; the title bar displays the image's name and dimensions. (Internet Explorer, unfortunately, lacks this feature.)

The ALT Tag
Because some people use text-only browsers, and others turn off their browser's image-loading option to speed their surfing, you should use an ALT tag so that an alternative, text description of the image will appear whenever the image does not. Our IMG tag with the ALT text added looks like this: <IMG SRC="mypicture.gif" ALIGN=TOP HEIGHT=75 WIDTH=75 ALT="Hello">. (See Figure 1, section a.)

Images as Links
Hyperlinks are what make the Web the Web, and they're not just for text. Images can be links too. Instead of putting text between the <A HREF> and </A> tags to create a text link, put your image tag there to make the image a link.

With the following HTML, clicking on the Get EarthLink image (as shown in the example page) would take you to our EarthLink membership page: <A HREF="http://www.earthlink.net/join/"> <IMG SRC="getearthlink.gif" ALT="Get EarthLink!"></A>. (See Figure 1, section b.) Viewers will know to click on the image because it will appear with a highlighted border (of the same color as the text links) around it.

Imagemaps
A more complicated form of image link — requiring more advanced HTML skills — is an "imagemap." Imagemaps let you assign different URLs to different parts of a single image. These divisions of the image aren't noticeable unless you move your cursor across the image; then the status bar at the bottom of the browser window displays the URL of each section.

Let's write something called a "client-side" imagemap (because they're easier than the other kind of imagemaps, called "server-side"). First, we create an IMG tag, as before. However, we'll place two new tags within the IMG tag: a BORDER=0 tag, to tell the browser not to put a link border around our image, and a USEMAP tag, written in this form: USEMAP="#nameofmap". This tag tells the browser that our image is going to be an imagemap, and it names the imagemap. Here, a new image — emailfav.gif — is our imagemap. The HTML for this imagemap will be: <IMG SRC="emailfav.gif" HEIGHT=60 WIDTH=210 BORDER=0 USEMAP="#emailfav">.

USEMAP also tells the browser to look around our HTML for a separate map description of how we want our image divided and what URLs are assigned to each section of the imagemap. Here's the full HTML of the map:

<MAP NAME="emailfav"> <AREA SHAPE="RECT" COORDS="1,1,105,60" HREF="mailto:mymail@earthlink.net"> <AREA SHAPE="RECT" COORDS="106,1,210,60" HREF="http://www.earthlink.net/blink/"></MAP>. (See Figure 1, section c.)

Our IMG tag, remember, told the browser to look for a description of a map called emailfav. The line <MAP NAME="emailfav"> tells the browser that this is the description for the emailfav map. Then, the first AREA of the imagemap is described: SHAPE="RECT" reveals that this section is rectangular (square, really, but it's the same tag for both shapes). Other SHAPE tags include CIRCLE, POLYGON, and DEFAULT — this last term describes areas that don't fall into the other shape categories.

COORDS plots specific coordinates for this rectangular imagemap. The first pair of numbers — 1,1 — tells us that the map's upper-left corner begins one pixel from the left side of the image and one pixel from the top. The second pair — 105,60 — tells us that this section is 105 pixels wide and 60 pixels high. So the first imagemap area comprises the entire left half of our 210x60 emailfav.gif. (You can determine these area coordinates either by trial and error or with the help of a graphics program — like Adobe Photoshop — or an imagemap editor: see URL in final paragraph below.)

The HREF tag in the AREA SHAPE line creates the link in this section of the imagemap. We've used a mailto link — clicking on this section of the image will open the browser's email, preaddressing a message to the specified email account. (Substitute your email address for mymail@earthlink.net.)

The next line describes the right half of our imagemap. It begins 106 pixels away from the left side of the image, one pixel from the top, and measures 105x60. This area links to the bLink homepage. And finally, </MAP> ends the map description.

Picture Perfect
Finding images is a lot easier than using them. Though some people just "borrow" images from other Web pages, you should never take someone else's graphics to use without their permission. But there are plenty of sites that advertise graphics free for all to use.

If you find an image you like that you can use, place your mouse cursor over it and right-click on the image (Mac users hold down your mouse button). A pop-up menu will appear. Select Save this Image as, if you are using Netscape, or Download Image to Disk, if you are using Internet Explorer, and then save the image to a folder on your hard drive so you can reuse it on your own page.

Visit our main graphics page for backgrounds, icons, clip art, and other images you can use on your site.

Remember, don't overuse images, or accessing your page will take too long. And although the copyright laws regarding Web images haven't been fully worked out, be sensitive to this issue. After all, somebody created those graphics. If you borrow an interesting image, first secure permission from the Web site on which you found the image.

So collect some images, and start designing! Soon you'll be well on your way to a picture-perfect homepage!

Figure 1. Below is a screenshot of the sample homepage referred to in the image tutorial. To the right is the HTML code for the page. The HTML sections that correspond to images are highlighted in red.

Section a. Contains the code you need to put an image and an ALT tag on your page.

Section b. Illustrates how an image is used as a link.

Section c. Shows the more complicated code used to create an imagemap.