Topic: HTML

Before you get down to brass tacks and start trudging through the HTML tags that'll plop pictures onto your pages, there are a few things I need to discuss. Not to worry, though; it's nothing that's overly technical. (That, of course, would be contrary to Idiot's Guide bylaw 4.17c: "Thou shalt not cause the eyes of thy readers to glaze over with interminable technical claptrap.") Instead, I'll just look at a few things that'll help you choose and work with images, and that should help make all this stuff a bit clearer.

First off, let me 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 in the name of h-e-double-hockey-sticks am I supposed to get an image in there?

Hey, that's a darn good question. Here's the easy answer: you don't.

Huh?

Yeah. As you'll see later on (in the section "The Nitty-Gritty, At Last: The <IMG> Tag"), all you'll really be doing is, for each image you want to use, adding a tag to the document that says, in effect, "Yo! Insert image here." That tag specifies the name of the graphics file, so the browser just opens the file and displays the image.

Well, I should say that the browser probably displays the image. Different browsers handle graphics in different ways, so you need to make allowances:

Some browsers (such as Lynx) are ham-fisted when it comes to graphics, so they display only text. There are things you can do to make life easier for the users of these browsers, however, and I'll talk about them in the section titled "Handling Graphically-Challenged Text Browsers."

If the browser knows how to handle an image, it displays it in the Web page without kicking up a fuss. These kinds of graphics are called inline images, and they're the preferred kind for most Webmeisters. As long as you use the right type of graphics format (which I'll talk about in the next section), most modern browsers display your graphics inline.

If the browser balks at your image, you have to hope the reader has set up her browser to use some kind of graphics program to display the image in a separate window. These are called external images, and they're a poor substitute for inline images. Again, you can avoid this fate by using the right kinds of graphics.

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 my head. How's a budding Web page architect supposed to make sense of all this acronymic anarchy?

Well, my would-be Web welders, I bring tidings of great joy. You can toss most of that graphic traffic into the digital scrap heap, because the Web has standardized on just two formats, one of which is used in 90 percent of all Web imagery! Oh happy day!

The format that Web creators use almost exclusively in Web pages is GIF (which, just so you know, stands for 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 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. (If your program gives you several GIF options, use GIF87 or, even better, GIF89, if possible. If the software doesn't know GIF from a hole in the ground, I'll show you how to convert the file in the next section.)

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.

NCSA Mosaic-Right-click on the image, choose Save Image from the menu, and then choose Remote Site Format.

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. I'll give you some specifics in Chapter 13, "Some HTML Resources on the Web."

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.

For the most part, today's graphical browsers seem to agree that the ALIGN attribute for the <IMG> tag is here to stay. The <IMG> tag is useful for both graphical and non-graphical browsers because it allows for the text-only ALT attribute, which can explain your graphics to users who can't see them.
The ALIGN attribute allows more control over the display of the graphic and whether or not text will wrap around it. Its general format is the following:

<IMG SRC="URL" ALT="text description" ALIGN="Direction">

Appropriate values for the ALIGN attribute now include TOP, MIDDLE, BOTTOM, LEFT, and RIGHT. You may recall that TOP, MIDDLE, and BOTTOM were part of the HTML 2.0 specification discussed earlier. What's new, then, is just LEFT and RIGHT.
For all ALIGN attributes, the direction refers to where text will be displayed in relation to graphic image and not the other way around. In essence, you're using the attribute to align text to the graphic not aligning the graphic to anything in particular.
So why add LEFT and RIGHT? They offer options for wrapping text around an image. Consider the following example. Without the ALIGN attribute, you could render a graphic as the following:

<P>I just thought you might be interested in seeing this graphic I've created for

myself in PhotoShop. <IMG SRC="image1.gif" ALT="My Graphic"> I

was actually a bit surprised at how easy it was to create. I'm not artist, but there are

enough filters and special effects in Photoshop that it makes it possible for me to create

something this professional looking without being absolutely sure of what I'm

doing!</P>

The following is the same example, except the ALIGN attribute is set to LEFT:

<P>I just thought you might be interested in seeing this graphic I've created for

myself in PhotoShop. <IMG SRC="image1.gif" ALT="My Graphic"

ALIGN="LEFT"> I was actually a bit surprised at how easy it was to create. I'm

not an artist, but there are enough filters and special effects in Photoshop that it makes

it possible for me to create something this professional looking without being absolutely

sure of what I'm doing!</P>

Figure 16.1 shows you how these appear in a typical graphical browser. Interesting, isn't it?
Example : Using the ALIGN attribute with the <IMG> tag.
As you can see, the ALIGN="LEFT" attribute forces this image to be displayed to the left of the text, and allows text to wrap above and below it on the page. Without it, the image is displayed inline. (When a graphic is displayed inline, it appears at the exact point in the text that the <IMG> tag appears.)

Aligning to RIGHT works in a similar way:

<P>I just thought you might be interested in seeing this graphic I've created for

myself in PhotoShop. <IMG SRC="image1.gif" ALT="My Graphic"

ALIGN="RIGHT"> I was actually a bit surprised at how easy it was to create.

I'm not an artist, but there are enough filters and special effects in Photoshop that it

makes it possible for me to create something this professional looking without being

absolutely sure of what I'm doing!</P>

The graphic is lined up with the right side border of the browser window, and is flexible with that window, so that dragging the window to make it larger or smaller would affect where the image would appear relative to the text
Example: ALIGN to RIGHT.

One of the latest HTML 3.0 (or, at least, beyond HTML 2.0) initiatives has been the addition of a tag called the <INSERT> tag, which expands on the role of the <IMG> tag by allowing various different multimedia types to be displayed inline. As the bandwidth of connections to the Internet grows, and the technology for inline multimedia grows with it, more and more Web viewers will be capable of viewing inline animations, presentation graphics, movies, and more.
As of this writing, very few browsers support the <INSERT> tag. Unlike some other HTML initiatives, however, this specification has been written with much more involvement from industry leaders like Microsoft, Netscape, Spyglass, and Sun. So, I expect you'll see support for this tag very soon (probably by the time you're reading this) and might as well include it here now.

This is not exactly the easiest tag to get your arms around. Like tables, the <INSERT> tag is a container for other tags that help define the element. But, somewhat unlike tables, most of those contained tags don't actually display anything.

Let's take a look at a typical <INSERT> container:

<INSERT DATA="URL to multimedia file" TYPE="type of file">

Other Insert tags...

</INSERT>