- HTML By Example -

Chapter 16

Images, Multimedia Objects, and Background Graphics

It is, perhaps, appropriate homage to the turbulent nature of HTML that the title of this chapter has changed three times now from conception to its final form. Initially conceived to discuss the elegant <FIG> tag of the HTML 3.0 specification, it seems that tag will be long in coming—if at all. At the same time, the <IMG> tag has been expanded somewhat to offer control over layout (in browsers that recognize it) and a new tag, <INSERT>, is making headway in the HTML world.

More Control with <IMG>

For the most part, today's graphical browsers seem to agree that the ALIGN attribute for the <IMG> tag is here to stay. As was discussed in Chapter 9, 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 that 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 this appears in a typical graphical browser. Interesting, isn't it?

Fig. 16.1

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 LEFT and RIGHT is most effective when embedded in a long paragraph of text in order to achieve a "text-wrap" feel.

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 that window to make it larger or smaller would affect where the image would appear relative to the text (see fig. 16.2).

Fig. 16.2

ALIGN to RIGHT.

Example: Magazine-Style Presentation

One of the nicer things about gaining this kind of control over your graphics is the options is gives you to present a long page of text in a way that's a little more pleasing to the eye—by breaking it up with graphics. This example is an article I've written for a local magazine. Notice also the advantage in putting this particular article in HTML form—you can add hypertext links when appropriate.

Start with a fresh HTML document (from your template) and enter something similar to Listing 16.1 between the <BODY> tags.

Listing 16.1 Using ALIGN for HTML Page Layout

<BODY>

<IMG SRC="internet.gif" ALT="On the Internet" ALIGN="LEFT"> <IMG SRC="todd.gif"

ALT="By Todd Stauffer" ALIGN="RIGHT">

<HR>

<h2>Figure Your IQ on the Web</H2>

<P>I was cruising along on the Web, engaged in one of my favorite activities:

plugging my name into search engines like Lycos and Infoseek. My current favorite,

<IMG SRC="alta.gif" ALT="Alta Vista Logo" ALIGN="RIGHT"> Alta Vista (<A

HREF="http://altavista.digital.com/">http://altavista.digital.com/</A>),offers

some great links to stuff that's about me. (Just remember to put my name in quotes,

like "Todd Stauffer" in the searching text box. Or try your name...whatever.)</P>

<P>Somehow I came across a link to an IQ test in Europe. <IMG SRC="iq.gif" ALT="I"

graphic" ALIGN="LEFT"> With little sweat beads forming on my fingertips, and errant

thoughts clanging about the ego parts of my psyche ("What if I'm stupid"), I plunged

into the test, trying to beat that 20-minute time limit.</P>

<P>I emerged from the test, clicked for my score and was pleasantly shocked. "Wow,"

I thought. "That's high." But was it right? </P>

</BODY>

It's a little hit or miss, since some of how the graphics will display is based on the size of the browser window. Check it out in figure 16.3.

Fig. 16.3

The ALIGN example.

Inserting Multimedia Objects

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.

The <INSERT> Tag

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.

<INSERT> is a developing standard. Consult http://www.w3.org/ for possible changes.

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

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

Other Insert tags...

</INSERT>

Already, there are a couple of things you're required to know. You need to know the filename of the multimedia file—or the appropriate URL if it's not in the current directory. You also need to know the MIME-style "type" of the data file. (See sidebar.)

MIME (Multipurpose Internet Mail Extensions) data types are simply the standardized way that certain Internet programs can identify the type of ASCII and non-ASCII files that are being transferred to a client application. A very common example of this is the text/html MIME type.

The <INSERT> tag (and HTML in general) is not limited to the official MIME categories and types, hence we'll call them MIME-style data types. For the purposes of the <INSERT> tag, this is just a more reliable way to tell a Web browser what type of multimedia file to expect—more reliable, that is, than just the file's extension.

Some common MIME-style data types appear in Table 16.1. These and others are all useful for the <INSERT> tag.

Table 16.1 Some MIME-Style Data Types for the <INSERT> Tag

MIME-style data types for newer multimedia formats (especially vendor-specific ones like Macromedia Director) will generally be in the form of application/x-datatype. More often than not, these are the types you'll use for the <INSERT> tag, since these are the data types used for browser plug-ins.

<INSERT>'s Attributes

Aside from DATA and TYPE, <INSERT> can also accept the attributes ALIGN, WIDTH, HEIGHT, and BORDER.

<INSERT ALIGN="direction">

ALIGN works much as it does with <IMG>. The values possible for ALIGN are shown in Table 16.2. Notice that some of these values (LEFT, CENTER, MIDDLE) cause <INSERT> to act as a separate object, while the others assume the inserted multimedia object is supposed to be inline with the text of the document. You may recall that this is almost identical to what you learned about <IMG> at the beginning of this chapter.

Table 16.2 Values for the <INSERT ALIGN> Attribute

WIDTH and HEIGHT accept numbers and unit suffixes (like px for pixels and in for inches). These two attributes are used to define the size of the object for faster downloading. Some browsers will also resize objects according to these attributes, so that you might expand a smaller inline movie's object with WIDTH and HEIGHT, for instance, to save on downloading time. WIDTH and HEIGHT take the following format:

<INSERT WIDTH="#units" WIDTH="#units">

The last parameter is BORDER, which has a default value of 1. The border will generally only appear when the entire <INSERT> object in enclosed in a anchor tag, as in the following example:

<A HREF="intro.html"><INSERT DATA="intro.moov" TYPE="video/quicktime" ALIGN="LEFT" WIDTH="3in"

HEIGHT="2in" BORDER="2">

</INSERT></A>

At least it's not complicated, right?

Using <PARAM> and <IMG> with <INSERT>

Two of the most common tags you'll want to use with the <INSERT> tag are the <PARAM> and <IMG> tags. The <IMG> tag is used just as it has been elsewhere—except it's only displayed when the browser isn't able to deal with the type of multimedia file that the <INSERT> tag is trying to send. For instance, if you were sending a Macromedia Director multimedia file from your Web pages, but the receiving browser wasn't able to deal with it, the <INSERT> tag would substitute the <IMG> you'd specified instead.

The <PARAM> tag is used to offer additional parameters to the <INSERT> tag—information like how many times to play a movie clip. The <PARAM> tag takes elements NAME and VALUE, which work a little like they do for certain table tags. Unfortunately, each different type of multimedia file will require different NAME and VALUE values, so you'll have to seek those out from the creator of the particular object type you're wanting to send.

Often enough, you won't need the <PARAM> tag if you simply want something to play inline once. Also, for more tips, remember that you can view the source of pages that successfully use a multimedia object in a way that's new to you.

Here's an example of the <PARAM> tag:

<INSERT DATA="ship.avi" TYPE="application/avi">

<PARAM NAME="loop" VALUE="infinite">

</INSERT>

The <IMG> tag is used within an <INSERT> definition in the same way that it is used elsewhere, except that the ALIGN attribute isn't really necessary since the <IMG> will only be used to directly replace the inserted multimedia object. You can add the <IMG> like this:

<INSERT DATA="ship.avi" TYPE="application/avi">

<PARAM NAME="loop" VALUE="infinite">

<IMG SRC="ship.gif" ALT="The Ship">

</INSERT>

Clearly, you'll often want the graphic to at least represent the multimedia file that can't be displayed (see fig. 16.4). Or, perhaps, you could cause a graphic to load that tells the user that he or she is missing out on something better.

Fig. 16.4

The <INSERT> tag in action.

Background Graphics

Let's move on from something that's barely been implemented at all (<INSERT>) to something that's been implemented in many different ways—background graphics.

The HTML 3.0 compliant way to change the background into a graphic is to use the BACKGROUND attribute for the body tag, as in the following example (see fig. 16.5):

<BODY BACKGROUND="paper.gif">

Fig. 16.5

A background graphic.

The HTML 3.0 standard (as it stands) has no other abilities to change colors of backgrounds or fonts, since HTML 3.0 will eventually rely on "style sheets" for Web page layout. As far as I know, nearly no current, popular browsers support style sheets. Plus, at the time of writing, the HTML 3.0 standard is no longer the primary concern of the W3C which, instead, is working on parts of the original standard which will now be formalized as separate standards (like tables and the <INSERT> tag).

What this means for you is if you use this HTML 3.0-compliant background graphic style, then you'll need to make sure you're not creating graphics that will offer a severe contrast with the text color used by the client browser, since there's no way for you to change the text color. This usually means you need to used light-colored (between tan and gray) background images. Netscape's more complete solution is discussed in Chapter 20.

There's an interesting little paradox with background graphics. I've constantly told you that graphic files should be as small as possible to speed their downloading over the Internet. And, the same is true for background graphics, most of time.

The exception is the fact that once a background graphic is downloaded to the Web browser, it's actually displayed a little quicker if it's physically bigger (e.g., three inches [ts] four inches, instead of two inches [ts] three inches). That's because the Web browser has to "tile" the image behind the Web page. The bigger the graphic, the fewer the tiles.

If you're using the same background graphic for all of your pages, then it's okay to send a file that's a little on the large size—both physically and in terms of kilobytes. Once the background is in the browser's cache, it will load rather quickly.

If you use a different background on every page, though, the cache effect won't help as much. In that case, you'll still want to keep your graphics fairly small.

Example: The HTML 3.0 Enhanced Graphics Page

Let's take what you've learned in this chapter and add some of these graphical, multimedia enhancements to a fairly standard Web page. We'll make this the About page for BigCorp, complete with an exciting multimedia logo, text wrapped around graphics, and a tasteful background graphic.

From your template, create a new document and add the text of Listing 16.2.

Listing 16.2 Enhancing a Page with HTML 3.0 Tags

<BODY>

<BODY BACKGROUND="note_back.gif">

<INSERT DATA="logo.moov" TYPE="video/quicktime">

<IMG SRC="logo.gif" ALT="BigCorp">

</INSERT>

<H3>A little About Bigcorp</H3>

<H4><I>I sat on my father's knee, looking at his hands and knew I had to make

a better life...</I></H4>

<P>It was 100 years ago that Remmington Bigbucks, founder of BigCorp, <IMG

SRC="founder.gif" ALIGN="RIGHT" ALT="Mr. Big.">first uttered those word to a

local newspaper editor in Smallville, CT, where he first started BigCorp. At

that time, it was a small, privately held corporation, with fewer employees

than it had banks trying to repossess the single factory building. Remmington

knew he needed something to save the company, which was initially formed to

promote the use of tin-can and string-based telecommunications equipment,

which seemed promising in the face of the more expensive alternative being

touted by the upstart, American Telephone and Telegraph.</P>

<H4>Success is Sight</H4>

<P>One crisp Saturday morning Mr. BigCorp was running late for the office <IMG

SRC="pda.gif" ALIGN="LEFT" ALT="PDA">(he usually was, since he relied on a

wake-up call from his secretary and neighbor, Miss Goodbody, but insisted on

using a tin-can communications system at his bedside. The rattling of the can

as it crashed against the window was often not enough of an irritant to awaken

the reportedly near-comatose Mr. BigBucks) when he was suddenly struck with an

idea for attaching little bells to the string that was strung between houses

for his telephone system. It was at that point that he realized that he didn't

have ink well, feather and parchment available to him. In a blazing moment of

prophetic insight, he invented the Personal Digital Assisant. Instantly

realizing that was futile, he conceived of the spiral-bound notepad.</P>

<P>From that moment, <IMG SRC="notepad.gif" ALIGN="RIGHT" IMG="The Notepad">

Mr. BigBucks was headed for the Big Time with BigCorp. Profits turned to company

around, stock went souring and BigCorp was recognized for it's unfailing strength

and domination of the print communications industry. Although he never realized

his dreams of a PDA (in fact, he never was really sure if he realized that he'd

invented one at all) he did single-handedly create the position of dictation

secretary. His improvements in tape recording mechanism (after an abortive attempt

at a reel-to-reel microrecorder) still affect the business world today.</P>

<HR>

<A HREF="index.html"><IMG SRC="left_arrow.gif" ALT="Back"></A>

</BODY>

The key to those ALIGNed images is to keep them relatively small, so that they are properly wrapped in text. A nice touch is to sprinkle small, transparent graphics to add interest to the text. You can see how this looks in figure 16.6.

Fig. 16.6

Some added graphical treats help a text-heavy page.

Notice in the figure that you received the <IMG> part of the <INSERT> tag, not the QuickTime movie. This makes sense, of course, because no browser at the time of writing is capable of supporting the <INSERT> tag.

Summary

The turbulent world of HTML offers us a few different (and emerging) ways to add graphical interest to our pages. While these are bound to continue to change over the next few months and years, the tags in this chapter represent some of the latest changes.

The <IMG> tag discussed previously has recently been beefed up with two new ALIGN values, LEFT and RIGHT. Not only do these align graphics to the borders of the browser window, but they also allow text to wrap around the graphics.

The <INSERT> tag is a very new addition to HTML, designed to make it easier to add multimedia elements to Web pages. Once this tag is widely accepted, it will be much easier to view video, animations, presentations, and other multimedia file formats inline.

Finally, the HTML 3.0 way to add background graphics is generally supported by popular browsers, even if the implementation may be a bit incomplete. The key is to use background graphics that don't interfere with the text color of the user's browser, which is usually set to black by default.

Review Questions

1. Of the five values for the ALIGN attribute of the <IMG> tag, which are new to you in this chapter? (LEFT, TOP, BOTTOM, MIDDLE, RIGHT)

2. True or False? The ALIGN attribute for the <IMG> tag forces text to be aligned relative to the image.

3. What word describes the way that graphics are placed (relative to text) when the ALIGN attribute isn't used?

4. What does MIME stand for? Why are the TYPE values for the <INSERT> tag described as "MIME-style?"

5. If you enclose an <IMG> tag in an <INSERT> tag, when is it actually used by the browser?

6. Why isn't there a table of values for the NAME and VALUE attributes to the <INSERT> tag?

7. Is it possible to get away with not including the <PARAM> tag in your <INSERT> definition? Why or why not?

8. Why doesn't the HTML 3.0 specification offer more control over background and text color?

9. What colors should your background graphic be? Why?

Review Exercises

10. Use the ALIGN attribute with an image map graphic. Does it work correctly?

11. Again using ALIGN, test a small image and a long paragraph of text. Experiment a bit by placing the <IMG> tag at different points in the text. Does the image alignment vary with where you place the tag? Also try this experiment without the ALIGN attribute, to see how the <IMG> appears when it's an inline graphic.

12. Test your browser's support of the <INSERT> tag by using <INSERT> to add a QuickTime or AVI movie to an HTML document.

13. Create a "background-testing" page. Using thumbnail graphics, offer your user a choice of different background images. When they click one of the thumbnails, that link should load a page that uses the same graphic as a background for the page, so the user can "test" the background.