Chapter 15

Netscape Navigator-Specific HTML Extensions

by Eric Ladd

• A Word About Browser-Specific Extensions
  • Should You Use Them?
  • Providing Alternatives
• Embedded Objects
• Dynamic Documents
  • Client Pull
  • Server Push
• Multicolumn Text Layout
• Controlling White Space
  • HORIZONTAL and VERTICAL Spacers
  • BLOCK Spacers
• Frame Border Controls
• Text Wrapping in Multiple Line Form Windows
• Text Effects
  • Changing the Default Font Size
  • Blinking Text
  • Strikethrough and Underline Text
  • Choosing Typefaces

Netscape Communications Corporation was the first browser software company to introduce extensions to HTML-new tags and attributes to existing tags that only Netscape Navigator could render properly. The nature of these extensions was typically driven by design considerations, since the original releases of HTML provided little support for control over the on-screen layout of a document. Netscape's extended version of HTML gave content authors several new options for creating attractive layouts. End users loved the pages they saw that were "Best Viewed with Netscape Navigator," and Navigator quickly became the browser of choice.

In the time since Netscape introduced its first extensions, other companies-Microsoft, in particular-have created proprietary HTML tags that only their browsers can process. As you design and author HTML documents, you need to at least be aware of these extensions and, if appropriate, use them on your pages. This chapter investigates the Netscape-specific extensions to HTML. Microsoft-specific extensions are covered in Chapter 16, "Internet Explorer-Specific HTML Extensions."

A Word About Browser-Specific Extensions

Browser-specific HTML extensions have created quite a fervor in the Web community, not all of it good. From a business standpoint, introducing extensions was an incredibly smart move on Netscape's part. Netscape's objective was to get as many people as possible to use its browser. What better way than to make it the only browser that can be used to view really cool Web pages? By introducing extensions to standard HTML, Netscape achieved its goal and became the most popular browser in use.

From the perspective of open standards, however, extensions to HTML are a nightmare. The notion of open standards suggests that all members of the Internet community can propose ideas for how to do something, and, if the appropriate standards body agrees, the idea is then made part of the accepted standard. While Netscape and other companies typically submit their ideas for extended HTML tags to the World Wide Web Consortium, the standards body for HTML, they don't wait for the W3C's approval before implementing the extensions. Instead, they implement them, immediately hoping to gain an advantage by being "first to market." This leaves the Web community with different browsers that have different capabilities, which, in turn, creates difficulties for content providers who are left unsure which browser they should author pages for.

Another take on extended HTML comes from the HTML purists of the world who believe that HTML is a document description tool and not a design tool. For adherents to this philosophy, extensions to standard HTML for the purpose of giving authors more control over presentation is the greatest of offenses. Fortunately, this battle appears to be settling down somewhat now that style sheets are emerging onto the Web scene. As you read in the last chapter, style sheets divorce content from presentation by storing the presentation characteristics separately. This leaves HTML free to just describe the content.

Should You Use Them?

With all the controversy surrounding extensions to HTML, you may find yourself asking whether you should use them or not. Ultimately, your answer to this query should be guided by your knowledge of the user community. If you're certain that a large percentage of your audience is using Microsoft Internet Explorer, then there's probably little harm in using Microsoft-specific extensions to HTML in your documents. If your audience is using a mix of browsers, you should consider sticking with standard HTML so that every user can see your pages in the same way that any other user sees them.

Providing Alternatives

If you do use extended HTML tags, and you're not certain that 100% of your audience is using a browser that can correctly parse those tags, you should provide some type of alternative to the effect created by the extended tag so that viewers with less capable browsers can at least read your content. The idea is similar to using the ALT attribute in an <IMG> tag so that users with text-only browsers, or with image loading turned off, can see a text-based description of the image they would be able to see with a different browser.

Thankfully, most of the extended attributes include some means of providing an alternative. In some cases, as with frames, there is a specific tag you can use to create the alternative. For frames, you can use the <NOFRAMES> and </NOFRAMES> tags to contain a non-framed version of a framed document. In other cases, the extended tag will degrade into something that a less capable browser can understand. An example of this is the proposed <FIG> tag for placing figures. <FIG> and its companion closing tag </FIG> can contain HTML that is rendered if the figure cannot be displayed. A browser that doesn't understand <FIG> and </FIG> will ignore these tags, but it will process and render what it finds between them. Thus, you can place your alternative to the <FIG> tag between <FIG> and </FIG>.

Providing alternatives to extended HTML tags helps to maximize your reach when your entire audience is not using the same browser. Make sure you use them whenever you employ browser-specific extensions on your pages.

Embedded Objects

Netscape introduced the <EMBED> tag for placing multimedia content on Web pages. <EMBED> takes the SRC attribute, and SRC is set equal to the URL of the file that contains the multimedia content. You also need to specify WIDTH and HEIGHT attributes (in pixels) so that the browser knows how much space to leave on the page for the embedded content.

You can use <EMBED> to place many kinds of items on a page, including:

• Macromedia Director movies  Users with the Shockwave plug-in to Netscape are able to view Macromedia Director movies inline (see Figure 15.1). The HTML to place a Director movie might look like:
  Figure 15.1 : Click your way to a refreshing bottle of Sunny Delight at www.sunnyd.com.

  <EMBED SRC="my_movie.dcr" WIDTH=278 HEIGHT=225>

• VRML worlds  The Virtual Reality Modeling Language (VRML, rhymes with "thermal") allows you to create three-dimensional objects and place them in a VRML world that users can move through. Netscape Navigator 3.0 comes with a Live3D feature that permits inline viewing of VRML world placed on a page (see Figure 15.2) with an <EMBED> tag. The HTML to place the world you see in Figure 15.2 is
  Figure 15.2 : Co-author Jim O'Donnell created a VRML version of his Web page with rotating objects that act as hyperlinks.

  <EMBED SRC="jod6.wrl" WIDTH=400 HEIGHT=250>

• Video content  Netscape 3.0 has built-in support for the display of QuickTime and Video for Windows files. Figure 15.3 shows a QuickTime movie playing in a Web page. The movie was placed on the page with the HTML:
  Figure 15.3 : QuickTime movies play right in the browser window thanks to Netscape Navigator 3.0's inline support of the QuickTime format.

  <EMBED SRC="./italy/audio/giorno.mov" WIDTH=148 HEIGHT=192>

You can also use the <EMBED> tag to place other multimedia content as well. In some instances, Netscape will not be able to display your embedded content on its own. For these files, you should include a notice on the page informing the users what plug-in is required and where they can get it.

Dynamic Documents

Netscape pioneered the idea of dynamic documents-documents that change without any prompting from the user. You can create a dynamic document in one of two ways:

• Client Pull  In a Client Pull, the browser either reloads the current page or loads an entirely new page after a specified delay.
• Server Push  A Server Push involves the server sending new content through an HTTP connection that is held open. New content replaces old content on the browser screen, giving the appearance of a live update to the page.

Each of these approaches is discussed in the following sections.

Client Pull

Netscape extended the <META> tag in the document head to include a value of "Refresh" for the HTTP-EQUIV attribute. Refresh instructs the browser to reload the same document, or a different document, after a specified number of seconds. The time delay and the URL of the next document, if applicable, are stored in the CONTENT attribute. The syntax for the <META> tag in this situation is

<META HTTP-EQUIV="Refresh" CONTENT="n; url">

where n is the number of seconds to wait and url is the URL of the next document to load. If you want to reload the same document, just use CONTENT="n" with no URL specified.

Figures 15.4 and 15.5 show an application of Client Pull. The two pages you see were the main pages of a site used as a kiosk at the Telecom 95 conference in Geneva, Switzerland. Each page had Client Pull instructions to load the other after one minute. Thus, even if no users were at the kiosk, the display would change automatically once a minute.

Figure 15.4 : Visitors to the Sprint International Joint Venture site initially see this welcoming page.

Figure 15.5 : And a minute later, visitors see a different page with different images from the three joint venture countries being displayed.

Server Push

Server Push is the other technique for creating dynamic documents. With a Server Push, the server keeps the HTTP connection open between it and the client and periodically sends new data to the client through the open connection. The sending of new data continues until the client interrupts the connection, or until the server has no more data to send, at which point it closes the connection.

Unlike Client Pull, you cannot implement a Server Push with HTML tags. The Server Push is controlled by a script or a program running on the server. The script or program specifies what data to send to the client and when to send it.

The key to sending multiple data sets through the open connection is to create an HTTP response of MIME type multipart/x-mixed-replace, where

• multipart means that the response contains multiple parts.
• x means that the MIME type is experimental.
• mixed means that the different parts of the response could be of different MIME types.
• replace means that each new piece of data should replace the one that was sent before it.

The replace feature is critical to Server Pushes. By replacing the previous piece of data right where it was on the screen, you're able to create an animation effect. In fact, prior to the onset of animated GIFs, the most popular application of Server Push dynamic documents was to create inline animations on a Web page. To create a Server Push animation, your script or program needs to set up a multipart/x-mixed-replace response in which each part of the response is a frame in the animation. As new frames are sent, they replace the old frames and create the animation! Figure 15.6 shows how one site replicated the childhood favorite Magic 8-Ball on the Web using a Server Push.

Figure 15.6 : Can you use Server Push to create inline animations? My sources say yes.

While Server Pushes came to prominence as a way to create Web page animations, they are useful in other situations as well. Another common use of a Server Push is to send periodically updated information to a page. For example, a page with a stock ticker could receive the ticker symbols and latest prices by Server Push and display them as they roll in.

Multicolumn Text Layout

A new addition to Netscape's collection of extended HTML tags is the <MULTICOL> container tag used to create a multiple column layout similar to what you see in a printed newspaper. Prior to the <MULTICOL> tag, such layouts were possible with tables, but it was difficult to control column widths and to get each column to be about the same height.

The <MULTICOL> tag takes the three attributes shown in Table 15.1. COLS is the only mandatory attribute and is set equal to the number of columns that should comprise the layout. By default, Netscape will place a 10-pixel gutter between each column, but you can change this value by using the GUTTER attribute. GUTTER can be set to a specific number of pixels or to a percentage of the browser screen width. WIDTH controls how wide the columns are. Like GUTTER, WIDTH can be set equal to a number of pixels or a screen width percentage.

When laying out a multicolumn page, Netscape Navigator attempts to make each column the same height (see Figure 15.7). This is a fairly simple matter if the columns contain only text, but the Navigator even does well with columns that have floating images with text wrapping around them.

Figure 15.7 : A multiple column layout can include plain and formatted text, horizontal rule, and even images.

You can nest multiple column layouts as well by placing <MULTICOL> tags inside one another. Figure 15.8 shows an example from a page on Netscape's site. The HTML to produce the layout follows:

Figure 15.8 : Netscape demonstrates its browser's ability to handle nested multiple column layouts.

<MULTICOL COLS=2 GUTTER=20 WIDTH=100%>
<P><TT><B>MULTICOL</B></TT> - The <TT>MULTICOL</TT> tag is a container, 
and all the HTML between the starting and ending tag will be displayed 
in a multicolumn format. The tag can be nested. The attributes of this 
tag are <TT>COLS</TT>, <TT>GUTTER</TT>, and <TT>WIDTH</TT>. </P>
...
<P><B>Column widths</B> - Column sizes are not adjusted for optimal fit 
the way table cells are. If you specify very narrow columns and put a 
very wide unbreakable element in the column, it will overlap 
neighboring columns.</P>
<P><B>Nested Multicolumns</B> - This is an example of text in a 
nested multicolumn:
<MULTICOL COLS=3 GUTTER=8 WIDTH=100%>
Here, we've entered another <TT>MULTICOL</TT> tag into the HTML&nbsp;
to produce with a narrow gutter (8 pixels). It is possible to nest 
<TT>MULTICOL</TT> tags infinitely.
</MULTICOL>
<DL><DT>
<B>E<FONT SIZE=-1>XAMPLES</FONT></B><DD>
<A HREF="JavaScript:makeWindow()">View</A> the Investor Newsletter example.
</DL>
</MULTICOL>

You'll notice in Figure 15.8 that you can use any of the usual text formatting tags to mark up text in a multicolumn layout. This is different from tables where you can turn on an effect (like boldface) before you start the table, but the effect is not applied to elements inside the table.

Controlling White Space

Another new tag that was rolled out with Netscape Navigator 3.0 is the <SPACER> tag. <SPACER> is a standalone tag used to place white space on a page. Table 15.2 shows the attributes you can use with <SPACER>.

HORIZONTAL and VERTICAL Spacers

HORIZONTAL and VERTICAL spacers add white space in the horizontal or vertical directions only. Spacers of this type require the SIZE attribute to specify how many pixels wide or deep they should be.

One clever use of HORIZONTAL spacers is to create an indent at the start of a paragraph (see Figure 15.9). Previously, this had to be done with several non-breaking space characters (&nbsp;) or with an "invisible image" (an image that is only one color that is set to be transparent). The indent you see in Figure 15.9 was created by the HTML

Figure 15.9 : Netscape spacers are useful for inserting blank space where you need it.

<SPACER TYPE="HORIZONTAL" SIZE=50>

Vertical spacers are useful for placing additional space between block elements like paragraphs, horizontal rule, and images.

BLOCK Spacers

BLOCK spacers add white space in both the horizontal and vertical directions. When creating a BLOCK spacer, you need to use the WIDTH and HEIGHT attributes to specify the displacements in the two directions. You can also use the ALIGN attribute to float the BLOCK spacer in the left or right margin.

You can think of a BLOCK spacer as a large transparent image of the dimensions you specify in the tag. Figure 15.10 shows a BLOCK spacer floating in the right margin with text wrapping around it. The tag to create the spacer is

Figure 15.10 : A big empty area on a page may be the result of a block spacer.

<SPACER TYPE="BLOCK" WIDTH=  HEIGHT=  ALIGN="RIGHT">

Frame Border Controls

Netscape has added a few attributes to its frame-related tags to give you greater control over borders between frames. The first is the FRAMEBORDER attribute of the <FRAMESET> and <FRAME> tags. FRAMEBORDER has a default value of YES, and you can set it to a value of NO, if desired.

Inside a <FRAMESET> tag, FRAMEBORDER governs the default border value for all frames in the frameset. If you set FRAMEBORDER to NO and BORDER to 0, there will be no borders between any of the frames in the frameset. This gives a "seamless" appearance to the framed layout.

When used in a <FRAME> tag, FRAMEBORDER controls the presence of borders for the frame that the <FRAME> tag sets up. Using FRAMEBORDER at the <FRAME> tag level will override any other border attributes set in a previous <FRAMESET> tag.

The other new attribute is BORDERCOLOR. BORDERCOLOR can also be an attribute to both the <FRAMESET> and <FRAME> tags. You set BORDERCOLOR to an RGB hexadecimal triplet or an English-language color name. Using BORDERCOLOR in the <FRAMESET> tag sets the color for all frames in the frameset, while using it in a <FRAME> tag just sets that color for the frame defined by the tag.

Text Wrapping in Multiple Line Form Windows

When creating a multiple line text input window on an HTML form, you use the <TEXTAREA> and </TEXTAREA> container tags. One problem users frequently have with these windows is the issue of text wrapping. As users type their input, it's inconvenient for them to have to remember to hit Enter near the end of each line so that the line doesn't scroll off the edge of the window.

Netscape has introduced a new attribute of the <TEXTAREA> tag to alleviate this problem. By placing the WRAP attribute in a <TEXTAREA> tag, you enable automatic wrapping of text within the multiline text window. A window set up with the WRAP attribute will have no horizontal scrollbar at the bottom of it (compare Figures 15.11 and 15.12) since it should be unnecessary to scroll left or right in such a window.

Figure 15.11 : A horizontal scrollbar in the multiline text window tells you that word wrapping is not active.

Figure 15.12 : The WRAP attribute of the <TEXTAREA> tag enables word wrapping within the window, making life easier for the user.

Text Effects

The last few extensions discussed in this chapter are used to format text on screen. Most of these extensions are useful, though one of them, the <BLINK> tag, has become something of an outcast because it was used to make some really obnoxious pages.

Changing the Default Font Size

The use of the <FONT> tag with the SIZE attribute is now part of the HTML 3.2 standard. Recall that you can set SIZE equal to a value between 1 (the smallest) and 7 (the largest). You could also set the value to a positive or negative number representing how many sizes above or below the base font size you want to go. The default font size is taken to be 3, so using <FONT SIZE=+2> is equivalent to saying <FONT SIZE=5> since 5 is two greater than 3.

Netscape Navigator allows you to reassign the default font size from 3 to a different value using the <BASEFONT> tag. <BASEFONT> is a stand-alone tag that takes the SIZE attribute. In this case, SIZE is set to the value, a number between 1 and 7, that should be used as the default size.

Blinking Text

Probably Netscape's most infamous extension to HTML is the <BLINK> tag. Any text between <BLINK> and its companion closing tag </BLINK> will blink on the Netscape Navigator screen.

This may seem innocuous enough, but <BLINK> became overused and inappropriately used very quickly. By creating documents with large blocks of blinking text, page authors alienated the end users in their audiences who found it very difficult to read the blinking text. Before long, anyone who used the <BLINK> tag was immediately subjected to his or her fair share of criticism.

If you do choose to use the <BLINK> tag on your pages, please do your users the favor of thinking twice about whether it is really needed or not. If you decide that it is, keep the amount of blinking text to a minimum-no more than three to five words. Anything more than that is distracting and difficult to read.

Strikethrough and Underline Text

You can create strikethrough text and underlined text by using the <S> and <U> container tags, respectively (see Figure 15.13). Prior to Netscape Navigator 3.0, strikethrough text was also supported using the <STRIKE> and </STRIKE> tags. You can continue to use these tags for strikethrough text if you want.

Figure 15.13 : Be careful about underlined text, as users may think it's a hyperlink and try to click it.

The underline style was not supported by Netscape for some time, since underlined text tended to be confused with hyperlinked text (which is also usually underlined, but rendered in a color different from the rest of the body text). Netscape Navigator now fully supports the <U> tag and can render underlined text.

Choosing Typefaces

Beginning with release 3.0, Netscape Navigator now recognizes the FACE attribute of the <FONT> tag. FACE is set equal to a list of typefaces to use when rendering the text between the <FONT> and </FONT> tags. If the first typeface in the list is not available, the browser tries the second. If the second is unavailable, it moves on to the third, and so on. For example, the following HTML:

<FONT FACE="Helvetica,Garamond,Palatino">New typeface!</FONT>

instructs Netscape to render the text New typeface! in Helvetica, if it's available. If it isn't, the browser tries to use Garamond, followed by Palatino.

Using the FACE attribute gives you the ability to change the body text from plain old Times Roman or Courier to whichever font you want (see Figure 15.14). Changing typefaces is a great way to break up large sections of text in your documents.

Figure 15.14 : The FACE attribute of the tag lets you change typefaces throughout a document.