Chapter 16

HTML Extensions in Internet Explorer, Mosaic, and HTML 3.0

by Mark Brown

CONTENTS

• Microsoft Internet Explorer

  • Background Sound

  • Explorer Additions to the BODY Tag

  • FONT Tag Enhancements

  • Inline Video with the IMG Tag

  • Scrolling MARQUEEs

  • Explorer Tables

• Mosaic

• HTML 3.0

• Beyond HTML: VRML, Scripts, and Live Content

Not all the popular extensions to HTML have sprung fully formed from the forehead of Netscape Communications Corporation. HTML 3.0 proposals have been the source of many so-called Netscape enhancements, and even some of the HTML extensions most closely associated with the Netscape name came originally from other vendors. Spyglass Mosaic, for example, lays claim to having implemented client-side imagemaps first, whereas HTTP file upload was originally proposed by Xerox PARC.

Netscape is the driving force behind most of the changes to HTMLbecause it has a huge 80 percent share of the Web browser installed base. Web developers naturally follow Netscape's lead, making use of new Netscape Navigator features as they appear. Conversely, few Web sites use HTML extensions that have not yet made their way into Navigator, because they would not be visible by 80 percent of their visitors. However, that doesn't deter Microsoft from introducing new and modified HTML elements in its browser program, Internet Explorer. You may get the feeling, in fact, that Microsoft considers itself to be in a dead heat with Netscape. Each company seems determined to not only catch up with, but also outdo, the other with each new release of its software. That's good. It drives the technology.

In this chapter, you find out about HTML extensions that have not yet made their way into Netscape Navigator-at least, not as of version 2.0. Read on and you learn about the following:

• New extensions to HTML incorporated into Microsoft Internet Explorer version 2.0

• Even NCSA Mosaic holds a surprise

• Proposed HTML 3.0 elements not yet implemented by Netscape Navigator

• How VRML, browser scripting languages, live objects, and other new technologies are pushing the Web beyond HTML

Microsoft Internet Explorer

Internet Explorer, Microsoft's Web browser client, debuted as part of the initial release of the Windows 95 operating system. It was intended to serve as the built-in browser for the then brand-new Microsoft Network on-line service. Though Microsoft drew far fewer users to MSN than it intended, Internet Explorer built a following among early Win95 users, becoming the Web browser of choice (or at least, of convenience) for many of them. With the addition of a few absolutely necessary features such as tables in version 2.0-and with Microsoft's not insubstantial marketing clout behind it-Internet Explorer is shaping up as a serious challenger to Netscape Navigator. Now that it has been ported to Windows and the Macintosh, its user base is bound to expand, if for no other reason than the fact that people like to have a choice.

Version 2.0 of Internet Explorer has many features in common with Navigator 2.0. Both support tables, client pull, and client-side imagemaps, for example.

Explorer even beat Netscape to the punch with some features-named colors, for example. However, Netscape has since leapfrogged Microsoft on this feature. Where Explorer has a palette of 16 named colors, as shown in table 16.1, Navigator now has 140 (see table 15.4, p. 340).
 

Table 16.1  Named Colors in Microsoft Internet Explorer Version 2.0

In the following few pages, you examine HTML extensions that are unique to Microsoft Internet Explorer 2.0.
 

Background Sound

Explorer's new BGSOUND tag lets you create pages with background sounds. When you load a page using a BGSOUND command, the sound plays automatically, and the LOOP attribute controls how many times it plays. Sounds can consist of .wav or .au sampled sound files or MIDI (.mid) music files. Here's an elementary example:

<BGSOUND SRC="carhorn.wav">

The SRC attribute contains the URL of the source file to be played. The sound "carhorn.wav" in the preceding example plays once when the page is loaded. Here are two examples that play more than once using the LOOP attribute:

<BGSOUND SRC="carhorn.wav" LOOP=5>
<BGSOUND SRC="carhorn.wav" LOOP=INFINITE>

The first example plays five times; the second plays until you leave the page (which will probably be soon with an infinite car horn sound playing!). LOOP can have any integer value or be INFINITE; -1 is the same as specifying INNFINITE.

Explorer Additions to the BODY Tag

Explorer, like Netscape, adds the BACKGROUND, BGCOLOR, LINK, TEXT, and VLINK attributes to the BODY tag. But it also adds three more that Netscape doesn't have (at least, not yet): BGPROPERTIES, LEFTMARGIN, and TOPMARGIN.

BGPROPERTIES must be used in conjunction with the BACKGROUND attribute, and can have only one value, FIXED:

<BODY BACKGROUND="dontmove.gif" BGPROPERTIES=FIXED>

BGPROPERTIES=FIXED specifies a "watermark," which is a non-scrolling BACKGROUND. In other words, when you scroll up and down the page, the text, images, and other elements move, but the background image doesn't. This watermark can make users dizzy, so make sure you don't use it with a really busy background.

LEFTMARGIN and TOPMARGIN define left and top margins for the page in pixels, like this:

<BODY LEFTMARGIN="0" TOPMARGIN="100">

If either has a value of "0", the margin is set smack up against the edge of the window, as shown in figure 16.1.

Figure 16.1 : This page uses Explorer's TOPMARGIN and LEFTMARGIN attributes to jam the page flush against the left margin and drop it down by 100 pixels from the top.

FONT Tag Enhancements

Like Netscape, Explorer adds the BASEFONT tag, as well as the FONT tag with COLOR and SIZE attributes. But it adds one more attribute to FONT: FACE, which is used to define the font, or typeface, for the tagged text. Here's the generic format:

<FONT FACE="name [,name2] [,name3]">Text.</FONT>

The FACE attribute takes a list consisting of one or more font names. If the first named font is available on the system, it is used for the tagged text. If not, the second is used, and so on. If none of the fonts are available, the text is displayed in the default font. Here's a real-world example:

<FONT FACE="Times New Roman", "Courier New", "Frankenstein">Welcome!</FONT>

In this example, the message Welcome! would be displayed in the Times New Roman font, if available. If not, Courier New would be used, or Frankenstein if Courier New didn't exist.

Inline Video with the IMG Tag

Explorer adds these Netscape-compatible extensions to the IMG tag: ALIGN, HEIGHT, WIDTH, HSPACE, VSPACE, BORDER, ISMAP, and USEMAP. (Remember, USEMAP is the tag that allows you to create client-side imagemaps.)

But Internet Explorer 2.0 adds an additional extremely powerful feature to the IMG tag, thus enabling you to embed .avi video clips in Web pages (like the little spinning cup of coffee-a brilliant lampoon of HotJava's animated steaming coffee cup!-in fig. 16.2). Navigator lets you use the separate EMBED tag, but EMBED also requires that you install a matching plug-in application. In Explorer, .avi video playback capability is built right in.

Figure 16.2 : This sample page at http://www.microsoft.com/windows/ie/iedemo.htm demos Explorer's capability to add inline.avi videos using the new DYNSRC attribute of the IMG tag.

Several new attributes have been added to IMG to control video playback. The one that makes it all work is DYNSRC (Dynamic Source), which defines the URL of the source .avi file to play:

<IMG DYNSRC="cartoon.avi">

For non-video-capable browsers, you can include a normal SRC command to indicate an alternate GIF or JPG image to display in its place, like this:

<IMG SRC="mickey.gif" DYNSRC="cartoon.avi">

The ultimate in Web page design politeness is to include ALT text for non-graphic browsers as well:

<IMG SRC="mickey.gif" DYNSRC="cartoon.avi" ALT="Mickey Mouse 

Most stand-alone video players have a control bar, and you can add one
under a video image by using the CONTROLS attribute:

<IMG DYNSRC="cartoon.avi" CONTROLS>

Like BGSOUND, video playback can be controlled using the LOOP attribute:

<IMG DYNSRC="cartoon.avi" LOOP=5>

The preceding example plays the video five times and then stops. As with BGSOUND, the LOOP attribute can also be set to INFINITE, which is equivalent to a numeric value of -1.

START is the final new attribute for controlling video playback. You can set it equal to values of FILEOPEN and/or MOUSEOVER, like this:

<IMG DYNSRC="cartoon.avi" START=MOUSEOVER,FILEOPEN>

This video begins playing as soon as the file is loaded (FILEOPEN) and plays again any time the user moves the mouse pointer over the video image (MOUSEOVER).

Of course, you can apply all the standard IMG attributes, such as HEIGHT, WIDTH, and so on, to videos.

Here's a real-world example that combines all Explorer's video-specific playback options:

<IMG SRC="mickey.gif" DYNSRC="cartoon.avi" ALT="Mickey Mouse LOOP=2 START=FILEOPEN>

This example displays the text Mickey Mouse Cartoon on text-only browsers and the image mickey.gif on a graphic browser other than Explorer. On Explorer, it plays the video cartoon.avi as soon as it's loaded (START=FILEOPEN) twice (LOOP=2).

Scrolling MARQUEEs

You may get the impression that many of Explorer's extensions to HTML are meant to compete directly with the HotJava demos being shown by Sun Microsystems. They typically display small animations (which Explorer 2.0 can now re-create by playing inline .avi videos) and scrolling marquees. Explorer has added a new MARQUEE HTML tag just for creating the latter.

A variety of special attributes exist for controlling Explorer marquees. Here's a bare-bones MARQUEE definition:

<MARQUEE>Scrolling... Scrolling... Scrolling...</MARQUEE>

As you can see, MARQUEE is just a pair of text tags like, for example, <B></B> for bold. Any text within the <MARQUEE></MARQUEE> tags scrolls sideways.

The BEHAVIOR attribute lets you pick how the text moves. With a value of SCROLL, text scrolls in from one side and off the other. SLIDE scrolls in from one side and stops as soon as the text touches the opposite margin. ALTERNATE bounces text back and forth within the marquee.

Which way does the text move? You set that by using the DIRECTION attribute, which can have either of the values LEFT or RIGHT. (DIRECTION indicates which direction the text moves to, not the direction it comes from.) The following example uses both the BEHAVIOR and DIRECTION attributes:

<MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Watch me slide!</MARQUEE>

This example slides the text "Watch me slide!" in from the left to the right, where it stops and stays. The defaults are DIRECTION=LEFT and BEHAVIOR=SCROLL, which means that

<MARQUEE>Scrolling text</MARQUEE>

creates the same effect as

<MARQUEE BEHAVIOR=SCROLL DIRECTION=LEFT>Scrolling text</MARQUEE>

Beyond these basics, MARQUEE offers an incredible amount of control over the way your marquee looks and acts. Table 16.2 lists all the attributes that affect a marquee's appearance.
 

Table 16.2  MARQUEE Attributes

MARQUEE recognizes an additional attribute that Microsoft has apparently not documented: BORDER. BORDER=n specifies an internal border, which is normally blank but which is rendered in the LINK or VLINK color if the MARQUEE is a link.
 

Figure 16.3 : The Internet Explorer displays this MARQUEE defined by the example HTML code.

Here's a MARQUEE that uses all the options:

<FONT SIZE=7>
<A HREF="marquee.htm">
<MARQUEE BEHAVIOR=SCROLL DIRECTION=RIGHT LOOP=INFINITE BGCOLOR="red" 
HEIGHT=175 WIDTH=67% HSPACE=20 VSPACE=10 BORDER=20 SCROLLDELAY=25 
SCROLLAMOUNT=3 ALIGN=MIDDLE>Welcome to the Wonderful World of Scrolling 
Marquees!</MARQUEE>
</A>
</FONT>
Hi there

The marquee text is big because you've surrounded the MARQUEE code with <FONT SIZE=7></FONT>. This marquee scrolls (BEHAVIOR=SCROLL) the text "Welcome to the Wonderful World of Scrolling Marquees!" in from the left moving to the right (DIRECTION=RIGHT) forever (LOOP=INFINITE). The marquee window is red (BGCOLOR="red") and is-including borders and marginal space-175 pixels tall (HEIGHT=175) and two-thirds as wide as the browser window (WIDTH=67%). Outside the active marquee are horizontal margins of 20 pixels (HSPACE=20) on each side and vertical margins of 10 pixels (VSPACE=10) above and below. An additional 50-pixel wide border appears around the marquee; it appears in the LINK color because you have the whole marquee within the <A HREF="marquee.htm"></A> tags. (Note that this has the unfortunate side effect of underlining the marquee text because the Explorer preferences are set to underline text links.) The text moves every 25 milliseconds (SCROLLDELAY=25) and scrolls 3 pixels (SCROLLAMOUNT=3) at a time. The following text "Hi there" is aligned with the middle (ALIGN=MIDDLE) of the marquee, is 20 pixels away from the outside edge of the marquee border (HSPACE=20), and is in the default size because it lies outside the closing
</FONT> tag.

Figure 16.3 shows the resulting marquee (frozen in time, alas).

Explorer Tables

Internet Explorer supports the HTML 3.0 table standard, just as Netscape does. But it adds a couple of twists of its own.

You can right-align an Explorer table by adding ALIGN=RIGHT to the TABLE tag specification, like this:

<TABLE ALIGN=RIGHT>

Left alignment is, of course, the default.

The most interesting (and certainly the most colorful) Microsoft enhancement to tables is the addition of the BGCOLOR tag. You can use it to add color to an entire table and to individual cells as well. The following example creates a table with the "teal" background color:

<TABLE BGCOLOR="teal">

By adding a BGCOLOR tag to each opening TD tag, you can define a unique background color for each individual cell in a table. Here's the syntax:

<TD BGCOLOR=#ffdddd>Hello</TD>

In either command, you can use a hexadecimal color value or one of Microsoft's 16 named colors.

Figure 16.4 shows an example of color tables from Microsoft's Web site that displays a table of all 16 named colors (shown here in glorious shades of gray).

Figure 16.4 : Internet Explorer's BGCOLOR extension to the HTML TABLE elements lets you define the background color for an entire table or for individual cells.

Mosaic

NCSA Mosaic was the first graphical browser for the World Wide Web; it drove the explosive early growth of the Web. In fact, it was so pervasive in the early days of the Web's development that many people mistakenly referred to the Web itself as "Mosaic."

Originally developed at the National Center for Supercomputing Applications at the Champaign campus of the University of Illinois, both the NCSA Mosaic executable and its source code were widely distributed for free. This resulted in a proliferation of browser programs, almost all of which were based to some degree on the original Mosaic code. Many even called themselves by some variant of the "Mosaic" name. As the Web matured, others developed original browsers (with their own names) not based on the Mosaic code.

Eventually, Spyglass got the rights to develop Mosaic commercially and now supplies various versions of Mosaic for OEM distribution. Mosaic Communications Corporation-founded by Marc Andreesen, the originator of Mosaic at NCSA-had to change the name to Netscape Communications Corporation. And NCSA just kept right on turning out new versions of NCSA Mosaic.

Today, NCSA Mosaic is still distributed for free, and government and educational institutions can still obtain the source code for free, as well. It has evolved considerably and is now available for Win95, Windows, Macintosh, and UNIX platforms.

Development has slowed on NCSA Mosaic, however, and it is seldom the browser that introduces new features first. It keeps up pretty well, though, and the latest version sports such niceties as client pull, tables, the BODY BACKGROUND and BGCOLOR attributes, and the ALIGN attribute for P and Hn tags.

And the latest version of NCSA Mosaic does sport an HTML 3.0 feature not yet implemented by the two major players, Explorer and Navigator. NCSA Mosaic now includes integrated .wav sound file support. It is implemented in not one, but two ways. The first is the proposed HTML 3.0 SOUND tag, which has the format:

<SOUND SRC="audio.wav">

This tag supports two attributes:

<SOUND SRC="audio.wav" LOOP=INFINITE DELAY=5>

This example waits 5 seconds and then plays the file audio.wav in an infinite loop. A numeric value for LOOP tells SOUND how many times to play; a value of INFINITE loops forever.

In addition, NCSA Mosaic also supports the full syntax of Microsoft's BGSOUND tag.
 

HTML 3.0

The evolution of Explorer and Mosaic raises the question of additions and changes to HTML that are being proposed for the upcoming HTML 3.0 standard. Some things will be in there for sure-tables, for example. Text flow around images is another sure thing. But other potential changes haven't been implemented in any browser programs-yet!

HTML 3.0 introduces, for example, a new FIG tag for inline figures; it will provide for implementing client-side imagemaps and text flow around figures. It will almost certainly supersede all the current additions to the IMG command eventually.

HTML 3.0 will also add the capability to define math equations and formulas neatly on a Web page, which will be a real boon to educational and research sites. The proposed format is highly influenced by the TeX typesetting language.

HTML 3.0 will most likely include a static banner area for corporate logos, disclaimers, and menus; it will work in much the same way as "freezing" the header row in a spreadsheet. The page will scroll, but not the banner.

A new LINK element will provide standard navigational elements such as forward and back buttons. NOTE will add notes, cautions, and footnotes. The LH tag will let Web pages designers create "folding" lists.

Additions to forms will mean new controls, the ability to "scribble" on an image, and audio input fields. Client-side scripting of forms is also possible with a new script attribute for the FORM tag. Style sheets will add a great deal of flexibility to the appearance of Web pages, without cluttering them with a lot of superfluous markup elements.

These changes and many more are likely when HTML 3.0 is pronounced "official."

Netscape Navigator 2.0 and Microsoft Internet Explorer already implement many of the HTML 3.0 proposed changes. Indeed, in many cases, Netscape and Microsoft have been instrumental in proposing these changes. But they're not all in there yet.

What follows is a short list of proposed changes and new elements that are likely to be included in the HTML 3.0 specification. I've limited this list to elements not already discussed elsewhere in this book. In other words, everything listed here is not really being used by anyone, anywhere yet. This list is intended to be a quick overview of what is probably coming, not a reference guide to coding in HTML 3.0. That would be premature. I've listed each new element with a sample of the proposed format, though all the attributes are not necessarily explained here.

If you are interested in keeping abreast of the HTML 3.0 proposals, you can find them on the Web site of the W3 Consortium (W3C) at the following:

http://www.w3.org
 

Beyond HTML: VRML, Scripts, and Live Content

Though Web pages couldn't be created without HTML, other technologies are at work on the Web, too. In fact, many of the most impressive innovations on the Web in the near future are most likely to come from outside the framework of HTML.

VRML (Virtual Reality Modeling Language) for example, is already at work on the Web, allowing sites to move into a 3-D virtual reality realm that is rapidly evolving into a true cyberspace.
 

Scripting languages are also changing the way the Web works. JavaScript, which is built into Netscape Navigator 2.0, lets Web page designers create animations, scrolling marquees, and interactive live content that would just not be possible using HTML alone.

Sun Microsystems, the developer of Java-which is the programminglanguage on which JavaScript is based-has even introduced a Web browser program called HotJava. HotJava (free from Sun's site athttp://www.javasoft.com) is itself written entirely in Java, and is intended as a demonstration of what the language can do. HotJava can play live Java applets inline, and Sun's site features dozens of live demonstrations of the language's capabilities, including some interactive games.

Microsoft is fighting back and promises to introduce Visual Basic Script. This scripting language will open up Web page application programming to millions of Visual Basic programmers who might not be comfortable with the C-like syntax of JavaScript.

A fast, cross-platform subset of Visual Basic, Visual Basic Script will not only be shipped as a part of future versions of Microsoft Internet Explorer, it will also be distributed for free on the Internet. It can be used to develop applications and can also link to OLE objects and Java applets.

Microsoft will propose Visual Basic Script to the W3 Consortium and the IETF as an open Internet scripting language standard. The source code will even be posted on the Internet so that third parties can implement it on other platforms.

The W3 Consortium has also worked with IBM, Microsoft, Netscape, Spyglass, and Sun Microsystems to come up with a standard way of inserting live objects like movies into Web pages. If you recall, Netscape and Microsoft currently take two different approaches to this: Navigator uses the EMBED tag, and Explorer uses a new DYNSRC attribute for the IMG element.

The new standard will allow multiple implementations of the same object as, say, a Java applet, an .avi movie, and an OLE object, with the browser able to pick content that matches its capabilities. This standard will go a long way toward making every Web site accessible to every browser program, rather than requiring pages to be set up to suit a particular brand of browser.

This standard for live content is implemented using new HTML 3.0 INSERT, PARAM, and ALIAS elements. INSERT takes the place of the IMG tag, and allows the Web designer to insert a variety of objects. PARAM and ALIAS and a full set of attributes will provide a wide range of flexibility in the presentation of multimedia content. You can find the full specification at the following:

http://www.w3.org/pub/WWW/TR/WD-insert.html

Clearly, the Web is bulging at the seams of HTML, stretching it to its limit.In the future, HTML coding will just be the first step in creating a Web page. ;