Brought to you by EarthWeb
IT Library Logo


nav

EarthWeb Direct

EarthWeb sites: other sites

Chapter 21

Internet Explorer Extensions

CONTENTS

Not to be outdone by Netscape and others, Microsoft Internet Explorer adds a number of HTML-type tags and attributes that further enhance your ability to layout and customize your pages. It's difficult to say which browser offers support for more off-the-wall extensions-it basically depends on who's come out with the most recent version. There's a browser war on, and you can bet that standard HTML features won't be moving fast enough for Microsoft and Netscape.

In fact, at the time of this writing, Microsoft had just released an alpha (developers-only) version of Internet Explorer 3.0, which promises to support Netscape-style frames, the HTML 3.0 <INSERT> tag, and HTML 3.0 style sheets. All of these have been discussed in earlier chapters, but it's significant to note that a major force in the industry has decided to support these tags. (Of course, I can't make any guarantees concerning the final Internet Explorer 3.0 product.)

Note
Using the extensions in this chapter probably warrants a "best viewed in Internet Explorer" or similar line of text on your page. But how can you tell if an extension is Internet Explorer only? You can track changes to Internet Explorer's HTML support, including tags created by Microsoft, at http://www.microsoft.com/ie/author/htmlspec/html_toc.htm on the Web.

Backgrounds and Fonts

Internet Explorer (IE) adds a number of extensions to the <BODY> tag, generally to affect the appearance of the background itself. IE also adds support for background sounds (sounds that are played by the browser as the page loads).

The BGPROPERTIES attribute can be used in conjunction with BACKGROUND specified by HTML 3.0. In IE-compatible browsers, this forces the background to work like a "watermark," which Microsoft defines as a background graphic that doesn't scroll. The only value for BGPROPERTIES is "fixed." The following is an example:

<BODY BACKGROUND="PATTERN.GIF" BGPROPERTIES="fixed">

As always, <BODY> is a container tag, so you'll need a </BODY> tag at then end of your HTML markup for this page.

The <BODY> tag can accept two other attributes in IE-compatible browsers: LEFTMARGIN and TOPMARGIN. Each of these accepts a value in pixels, specifying the amount of white space between the left and top sides of the browser window (respectively) and your text or graphics. For example:

<BODY LEFTMARGIN="30" TOPMARGIN="30">

<BGSOUND>

If you'd like your page to play a sound as the page loads into your user's browser, you can add that capability with the <BGSOUND> tag. You'll generally want to put it near the top of the <BODY> section of your HTML document, but that's only for your benefit-it'll load as it's recognized by the browser.

The <BGSOUND> tag is an empty tag that accepts two attributes: SRC and LOOP. SRC is used to specify the sound file that you want played. LOOP determines how many times you want the sound played, and can have a number for a value or the word "infinite" for constant playing. <BGSOUND> takes the following format:

<BGSOUND SRC="URL" LOOP="number/infinite">

An example of this might be:

<BGSOUND SRC="intro.au" LOOP="2">

In IE, the sound file can be a sound sample (.au or .wav files) or a MIDI (.mid or .midi) format sound file. Other browsers, if they support <BGSOUND>, may vary in their ability to play certain types of sounds.

Tip
Be careful with LOOP="infinite". A constantly repeated sound, especially a system sound, might confuse your user into thinking there's something wrong with his or her computer. (Or it may just annoy your user.)

Font Color and Typeface

IE adds two attributes to Netscape's <FONT> tag: COLOR and FACE. Actually, you may remember that you were able to change the overall text color in Netscape. In IE, you can change the color for a single word (or even individual letters, if you've got a lot of time on your hands).

Note
Unless everyone in the world has switched to IE by the time you read this, recognize that clever use of color and font faces can communicate something that is lost on other HTML users. When possible, use either the HTML style sheet or standard HTML markup to change font appearance and emphasize text.

To change the color of a font in the middle of your document's text, use the <FONT> container with the COLOR attribute, like this:

<FONT COLOR="#rrggbb/color name">new color text</FONT>

The COLOR attribute can accept either three two-digit hex numbers to describe a color, or a color name itself. For example, both of the following result in red text:

<FONT COLOR="#FF0000">This is red text</FONT>
<FONT COLOR="Red">This is also red text</FONT>

The FACE attribute can be used to change the actual typeface used in the IE browser window. Because different systems can offer different fonts, this attribute allows you to offer a list of font names. Each name will be tried in succession until a matching font name is found. The FACE attribute takes the following format:

<FONT FACE="name, name2, name3,...">

Look at the following example:

<FONT FACE="Arial, Helvetica, Times Roman">

Your browser will attempt to use the font Arial, and then fall back to Helvetica and Times Roman until it finds a font match on the user's computer system. If none of the fonts are found, a default font is used.

Example: A Study in Absurdity

Without being too coy here (and letting on that I'm not terribly fond of these IE tags), I'd like to create an example that not only makes use of these tags, but overuses them. One of the biggest problems with these IE tags is that they are so browser-specific that you can get yourself in trouble. Let's create a page that, when loaded in your copy of IE, will make you want to immediately unload it.

Note
If you want to download a copy of IE, you can get it from http://www.microsoft.com/ie/ie.htm. There's no UNIX version (just various Windows versions and one for Macs) which is probably a good thing. If you're like me, you'd have a hard time trying to figure out what font names to use in UNIX for the <FONT FACE> tag.

To start, create a new HTML document and enter Listing 21.1.

Listing 21.1  ie_ext.html  Fonts, Sounds, and Background with IE Extensions
<BODY BACKGROUND="logo.gif" BGPROPERTIES="fixed">
<BGSOUND SRC="beep.wav" LOOP="infinite">
<H2><FONT FACE="Script, Times">Welcome <FONT COLOR="blue">to <FONT
COLOR="green">BigCorp!</H2>
<P> <FONT COLOR="#FF00FF" FACE="Arial, Helvetica">If you've got Internet
Explorer, then you're probably having the experience of your life. There's
<FONT COLOR="red">nothing wrong with your system<FONT COLOR="#FF00FF">,
We've just added a little noise to help make your stay more pleasant!</P>
<HR>
<P> <FONT FACE="Courier, Courier New" COLOR="blue"> Click below if you're
ready to go somewhere else within our site!<BR> <UL>
<LI>Head over to our <A HREF="products.html">Product pages</A>
<LI>Learn <FONT COLOR="red">a little more <A HREF="about.html">About
BigCorp</A>
<LI>Need some help? Try <A HREF='support.html">Tech Support</A>
<LI><FONT FACE="Times, Times Roman">Wanna buy something?
<A HREF="service.html">Customer Service</A> is a click away.
</UL>
</P>
</BODY>

Take a look at figure 20.1 for an example screenshot of this listing, but a graphic can't do it justice. To truly experience this, you'll need to load it in your own copy of Internet Explorer. Also, change beep.wav to any other annoying sound you happen to have lying around and are able to copy to the same directory as your HTML document.

Figure 21.1 : This page is a poster-child for conservative use of IE HTML extensions.

IE Extensions for Tables

Internet Explorer fully implements the HTML 3.0 standard for tables (described in Chapter 15), with some additional attributes, again targeted to users that would prefer to have more control over the appearance of the table. I personally like these extensions a little more than the others we've seen from IE. Why? Because the table standard is already geared directly to the graphical browser community. These additions make them even more attractive, without to much effort. Other browsers will probably support these extensions quickly.

Most interesting is the BGCOLOR attribute, which can be used to change the background color of rows or columns. The BGCOLOR attribute accepts three two-digit hex numbers or a color name and works with the <TABLE>, <TR>, and <TD> tags (see Listing 21.2).

Listing 21.2  IE Table Extensions
<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="2">
<TR><TH>JOB</TH><TH>MONDAY</TH><TH>TUESDAY</TH><TH>WEDNESDAY</TH>
<TR BGCOLOR="#000022"><TH>Clean</TH><TD>Mike</TD><TD>Bill</TD><TD>Sue</TD>
<TR><TH>Cook</TH><TD>Sue</TD><TD>Mike</TD><TD>Bill</TD>
<TR BGCOLOR="#000022"><TH>Wash</TH><TD>Bill</TD><TD>Sue</TD><TD>Mike</TD>
</TABLE>

As you can see in figure 21.2, you can do more than just change the background color of tables for aesthetic reasons. As accountants and engineers have known for years, it's easier to communicate information in tables when you're able to shade different rows to make it clear what data is related to what other data and headers.

Figure 21.2 : Using color in IE tables.

The other attributes, BORDERCOLOR and BORDERLIGHT, are used to change the color of the border in IE tables. They must be used with the BORDER attribute to the <TABLE> tag (or the <TR> or <TD> tag if you want to change border colors in mid-table). Both accept either three two-digit hex numbers or a color name. The following is an example:

<TABLE BORDER="3" BORDERCOLOR="blue" BORDERLIGHT="lightblue">

The BORDERCOLOR value affects the top portion of IE's 3D style table border. The BORDERLIGHT value changes the "lower" (shadow) part of IE's border. Basically, these values just let you toy with the 3D effect on IE table borders. Listing 21.3 shows another example using the above line of code.

Listing 21.3  Border Colors with IE Tables
<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="2" BORDERCOLOR="blue"
BORDERLIGHT="lightblue">
<TR><TH>JOB</TH><TH>MONDAY</TH><TH>TUESDAY</TH><TH>WEDNESDAY</TH>
<TR><TH>Clean</TH><TD>Mike</TD><TD>Bill</TD><TD>Sue</TD>
<TR><TH>Cook</TH><TD>Sue</TD><TD>Mike</TD><TD>Bill</TD>
<TR><TH>Wash</TH><TD>Bill</TD><TD>Sue</TD><TD>Mike</TD>
</TABLE>

IE Extensions to <IMG>

Chapter 16 discussed the <INSERT> tag, designed for adding inline multimedia objects to your Web pages. IE has it's own version, which will probably be de-emphasized as <INSERT> becomes more widely accepted. It is possible, with IE-specific attributes, to add an inline video clip or VRML world with extensions to the <IMG> tag.

Note
I'd suggest using the <INSERT> tag instead of these extensions to the <IMG> tag as <INSERT> becomes more popular. Check with the W3C, Netscape, and Microsoft IE Web sites to get a feel for whether or not popular browsers are supporting <INSERT>.

DYNSRC and CONTROLS

IE accepts the attribute DYNSRC along with an URL to indicate the video clip you want displayed by the user's browser. You can also include a SRC attribute for <IMG>, thus allowing it to display a standard graphic file for browsers that don't support DYNSRC. These attributes take the following format:

<IMG SRC="graphic URL" DYNSRC="video URL">

Currently, the video URL needs to be a .avi video file. The graphic URL can be any typically accepted graphic format, like GIF or JPEG. An example would be the following:

<IMG SRC="earth.gif" DYNSRC="earth.avi">

In addition, <IMG> will also accept the attribute CONTROLS, which displays a set of video controls under a video clip, if present. CONTROLS, then, requires that the DYNSRC attribute also be present. For example:

<IMG SRC="moon.gif" DYNSRC="moon.avi" CONTROLS>

In Internet Explorer, this adds video controls to the inline clip, as shown in figure 21.3.

Figure 21.3 : An inline .avi file in IE.

LOOP and START

Two other attributes for <IMG> also affect the way your video clip will play-LOOP and START. LOOP allows you to choose the number of times that the video will play once started. START allows you to decide how it will be started.

LOOP accepts either a number or the value "infinite." For instance, in the following example, the video will play three times in a row once it is started:

<IMG SRC="earth.gif" DYNSRC="earth.avi" LOOP="3">

To start the video clip, you can use the START attribute. This takes either FILEOPEN or MOUSEOVER as its value. FILEOPEN instructs the video to begin when the page is loaded. MOUSEOVER starts the video when the user moves the mouse pointer over it. The following example will start the video clip when the mouse pointer is moved over it by the user, and play the video three times in a row:

<IMG SRC="earth.gif" DYNSRC="earth.avi LOOP="3" START="MOUSEOVER">

Summary

Not to be left out of the race, Microsoft's Internet Explorer adds HTML-like extensions much like Netscape. Also, like Netscape, many of these tags are designed to enhance designers' control over the page, or to increase their ability to deal with new multimedia technology.

With IE, this means more control over font faces, font colors, background colors, table border colors, and the addition of tags to support background sounds. Extensions to the <IMG> tag also allow you to play certain video files "inline"-that is, without a helper application.

Review Questions

  1. Which of the following is not an attribute for the <BODY> tag: BGPROPERTIES, BGSOUND, LEFTMARGIN, RIGHTMARGIN. Which of the four is an actual tag?
  2. What type of sound files can be used as a background sound?
  3. Aside from a color name, what else can the COLOR attribute to the <FONT> tag accept as a value?
  4. How often can you change the color or the font in an IE document?
  5. What is the LOOP attribute used for with background sounds?
  6. With what HTML table tags can the BGCOLOR attribute be use?
  7. What tag will eventually be substituted for the combination of the <IMG> tag and the DYNSRC attribute in IE?
  8. How is it possible to start a IE video clip by pointing the mouse at it?

Review Exercises

  1. Create a page that plays a background sound three times, while displaying a background image as a watermark.
  2. Change the colors in each letter of the word Congratulations using IE HTML extensions.
  3. Change the font of each letter in the word Welcome using IE HTML extensions.
  4. Using tables HTML tags, create a table that puts squares of different colors on the page, but without any table lines or borders.
  5. Using a border, force the border lines to disappear into the background color of an HTML table.
  6. Add an AVI video clip to your page, and have it play twice as the page loads, without showing controls.

footer nav
Use of this site is subject certain Terms & Conditions.
Copyright (c) 1996-1999 EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Please read our privacy policy for details.