CONTENTS

• Images: Some Semi-Important Background Info
• The <IMG> Tag
• Good Uses for Images on Your Web Page
• Aligning Text and Images
• Handling Graphically Challenged Text Browsers
• Images Can Be Links, Too
• The Least You Need to Know

Images: Some Semi-Important Background Info

No, Images Aren't Text, But That's Okay

First off, let us answer the main question that's probably running through your mind even now about all this graphics rumpus:

If the innards of a Web page are really just text and HTML tags, then how am I supposed to get an image in there?

As you'll see later on all you'll really be doing is, for each image you want to use, adding a tag to the document that says, in effect, "Insert image here." That tag specifies the name of the graphics file, so the browser just opens the file and displays the image.

Graphics Formats: Can't We All Just Get Along?

Some computer wag once said that the nice thing about standards is that there are so many of them! Graphics files are no exception. It seems that every geek who ever gawked at a graphic has invented his own format for storing them on disk. And talk about alphabet soup! Why, there are images in GIF, JPEG, BMP, PCX, TIFF, DIB, EPS, and TGA formats, and those are just off the top of the head. How's a budding Web page architect supposed to make sense of all this acronymic anarchy?

The format that Web creators use almost exclusively in Web pages is GIF (Graphics Interchange Format). All graphical browsers are fully GIF-aware, so they display these images within a Web page without getting all hot and bothered. This means you can include GIF files in your Web pages willy-nilly, safe in the knowledge that the vast majority of your readers will be able to see the pics in all their glory.

The other format that's becoming increasingly popular on the Web is JPEG (Joint Photographic Experts Group). The main advantage of JPEG files is that, given the same image, they're smaller than GIFs, so they take less time to download. The GIF format doesn't display these graphics very well, so JPEG is almost always a better choice.

How Do I Get Graphics?

The text part of a Web page is, at least from a production standpoint, a piece of cake for most folks. After all, even the most pathetic typist can peck out at least a few words a minute. Graphics, on the other hand, are another kettle of digital fish entirely. Creating a snazzy logo or eye-catching illustration requires a modicum of artistic talent, which is a bit harder to come by than basic typing skills.

However, if you have such talent, then you're laughing: just create the image in your favorite paint program and save it in GIF format.

The non-artists in the crowd will have to obtain their graphics goodies from some other source. Fortunately, there's no shortage of images floating around. Here are some ideas:

Many software packages (including Microsoft Office and most paint and illustration programs) come with clip art libraries. Clip art is professional-quality artwork that you can freely incorporate in your own designs. If you don't have a program that comes with its own clip art, most software stores have CD-ROMs for sale that are chock-full of clip art images.

Grab an image from a Web page. When your browser displays a Web page with an image, the corresponding graphics file is stored temporarily on your computer's hard disk. Most browsers have a command that lets you save that file permanently. Here are some examples:

Netscape-Right-click on the graphic and choose Save this Image as from the menu that appears.

Internet Explorer-Right-click on the graphic and then select Save Picture As from the shortcut menu.

Take advantage of the many graphics archives on the Internet. There are sites all over the Net that store dozens, even hundreds, of images.

If you have access to a scanner, you can use it to digitize photos, illustrations, doodles, or whatever. Alternatively, if you have a fax modem and fax software, and you don't mind a black and white picture, you can send yourself an image as a fax. You capture the fax using your software and then load the image into a graphics program for editing.

Converting Graphics to GIF Format

What do you do if you've got the perfect image for your Web page, but it's not in GIF format? No sweat. There are plenty of programs out there that do nothing but convert graphics files from one format to another.

The <IMG> Tag

As mentioned earlier, there's an HTML code that tells a browser to display an image: the <IMG> tag. Here's how it works:

<IMG SRC="filename">

Here, "SRC" is short for "source" and filename is the name of the graphics file you want to display. For example, suppose you have an image named logo.gif. To add it to your page, you use the following line:

<IMG SRC="logo.gif">

Let's check out a real world example.

<HTML>

<HEAD>

<TITLE>My Home Page!</TITLE>

</HEAD>

<BODY>

<IMG SRC="wait.gif">

<H2>Web Work In Progress!</H2>

<HR>

Sorry for all the mess, but I haven't quite got around to

implementing this section yet. Hopefully I'll have everything

up and running real soon.

<P>

<A HREF="homepage.html">Click here to go back to my home page.</A>

</BODY>

</HTML>

Good Uses for Images on Your Web Page

Images are endlessly useful, and they're an easy way to give your page a professional look and feel. Although we're sure you can think of all kinds of ways to put pictures to work, here are a few suggestions:

A company logo on a business-related page
Graphics from an ad
Drawings done by the kids in a paint program
Charts and graphs
Fancy-schmancy fonts
Your signature
Using a graphic line in place of the <HR> tag
Using graphic bullets to create a better bulleted list

You might be wondering how to do that last item. Well, there are a number of ways to go about it. For example:

<DL>

<DD><IMG SRC="redball.gif">First item

<DD><IMG SRC="redball.gif">Second item

<DD><IMG SRC="redball.gif">Third item

</DL>

Aligning Text and Images

In the "Work In Progress" example you saw earlier, the image appears on a line by itself. However, that only happened because we used a heading tag-<H2>-immediately after the <IMG> tag, and heading tags always start on a fresh line. However, if you insert an image inside regular page text, the browser will display the image and the text on the same line. (Now you know why images that appear in a Web page are called inline images.)

This is all very reasonable, but you might run into problems with tall images, because the bottom of the image is aligned with the bottom of the line. If you prefer your text to appear at the top of the image, or even in the middle, the <IMG> tag has an extra ALIGN attribute that you can use. Here's how it works:

<IMG SRC="filename" ALIGN=TOP|MIDDLE|BOTTOM>

Here, |MIDDLE|BOTTOM means you use either TOP, MIDDLE, or BOTTOM to specify the alignment you want. The following HTML listing gives you an example:

<HTML>

<HEAD>

<TITLE>Aligning Text and Images</TITLE>

</HEAD>

<BODY>

<IMG SRC="hello.gif" ALIGN=TOP>This text appears at the top of the

 image.

<P>

<IMG SRC="hello.gif" ALIGN=MIDDLE>This text appears in the middle of

 the image.

<P>

<IMG SRC="hello.gif" ALIGN=BOTTOM>This text appears at the bottom of

 the image.

</BODY>

</HTML>

Handling Graphically Challenged Text Browsers

All browsers allow you to turn off the display of images. This feature is a favorite among people with slow Internet connections, so your images won't be shown. The <IMG> tag has an extra ALT attribute you can throw in to provide some alternative text that appears in place of the image. Here's the general format:

<IMG SRC="filename" ALT="[alternative text]">

Here, alternative text is whatever text you want to use instead of the graphic. For example, if you have a picture of your hometown in your page, you can display [A lovely pic of my hometown] (it's traditional to enclose these things in square brackets) with the following line:

<IMG SRC="hometown.gif" ALT="[A lovely pic of my hometown]">

In most cases, though, it's best not to trouble text-only Web surfers with descriptions of images. So most Web authors display a blank instead of a description, like so:

<IMG SRC="hometown.gif" ALT=" ">

Images Can Be Links, Too

You might think that Web page images are all show and no go, but we assure you they can "go" with the best of them. Specifically, we mean you can use them as hypertext links, just like regular text. The reader just clicks on the image, and he/she goes off to whatever corner of the Web you specify.

Designating an image as a hypertext link is not a whole lot different from using text. You use the same <A> tag, but you insert an <IMG> tag between the <A> and </A>, like this:

<A HREF="URL"><IMG SRC="filename"></A>

For example, it's often a good idea to include a link back to your home page from all of your other Web pages. This makes it easy for your readers to start over again. Here is an example:

<HTML>

<HEAD>

<TITLE>Images Can Be Links 2</TITLE>

</HEAD>

<BODY>

Click on this house <A HREF="homepage.html"><IMG SRC="house.gif"></A>

to return to my home page.

</BODY>

</HTML>

The browser displays a border around the image to identify it as a link. If you prefer not to see this border, add BORDER=0 to your <IMG> tag:

<IMG SRC="house.gif" BORDER=0>

The Least You Need to Know

• Inline images appear directly in a Web page. External images can only be viewed by using a separate graphics program.
• There are billions and billions of graphics formats floating around, but only two are used extensively on the Web: GIF and JPEG.
• Other than your own artistic endeavors, graphics are available from clip art libraries, other Web pages, Internet archives, via scanner or fax.
• If you have a non-GIF graphic, use a graphic program to convert it into GIF format.
• To add an image to your Web page, include the <IMG SRC="filename"> tag, where filename is the name of the graphics file.
  
• To make an image a hypertext link, use the <A> tag and replace the usual link text with an <IMG> tag: <A HREF="URL"><IMG SRC="filename"></A>.

Copyright © 2004 KacMac. All rights reserved.