Chapter 10

Fooling Around with the Netscape Extensions

• The Pizza Metaphor: A Warning Before You Begin
• Text Extensions
  • The <FONT>Tag
  • The <BASEFONT> Tag
  • Changing the Color of Your Page Text
  • The Dreaded <BLINK > Tag
• List Extensions
  • Using a Different Numbering Scheme in Numbered Lists
  • Changing the Bullet Type in Bulleted Lists
• Graphics Extensions
  • Specifying Image Height and Width
  • Setting the Background
• Extra Extensions
  • Centering Paragraphs
  • A Better Horizontal Rule
• The Least You Need to Know

If you'll indulge me a little bit (yes, again; you didn't realize you'd need the patience of a saint when you began this book, did you?), I'd like to approach the subject of this chapter obliquely with a little metaphoric meandering. To wit, I want you to think of the basic HTML tags you've looked at so far as the equivalent of a pizza. No, really. Think of a plain, no-frills, garden-variety pie: dough, tomato sauce, cheese, maybe a pepperoni slice or two. Tasty? Sure. Exciting? Well, not really. To give your taste buds a real workout, you need to add some substance to the pizza in the form of tomatoes, mushrooms, peppers, or whatever.

HTML is the same way. The basic tags produce good pages, to be sure, but your control over those pages is limited. To remedy this, the Netscape programmers have added a few more ingredients to the HTML pizza. These so-called Netscape extensions come in two flavors:

• Brand new tags
• Tags that improve upon existing tags

This chapter presents you with a menu of most of the Netscape extensions for your Web page dining pleasure.

The Pizza Metaphor: A Warning Before You Begin

I have no qualms about wringing a metaphor to death, so let's stick with the pizza analogy a bit longer. The best thing you can say about the basic pizza described above is that most people would be hard pressed to find fault with such a simple creation (vegetarians can do without the pepperoni on their half).

Think of what happens, however, if you start adding a few ingredients. You'll probably keep most folks happy with things like tomatoes and mushrooms, but they'll start dropping like flies once you get into exotic fare such as anchovies, pineapple, and artichokes. In other words, you can add stuff to the basic pizza, but you run the risk of offending some people's palates.

In the Web world, almost all browsers are comfortable ingesting any of the HTML tags you've looked at so far. However, many of the Netscape extensions can give unwary browsers a bad case of heartburn. There are, as you'll see, some exceptions, but you should know that if you use these extras in your Web pages, you can only be sure that those people viewing them with Netscape will see them properly. There are three ways to handle this situation:

• Create two versions of your pages: one that uses the Netscape appendages, and one that doesn't. The idea is that you show surfers the Netscape version first, but include a link to the non-Netscape page. (You see this kind of setup all the time on the Web.)
• Use only the "safe" extensions. Netscape designed many of their extras so that most browsers will simply ignore them. Using only these tags will prevent problems, but your pages may look ugly in another browser.
• Ignore non-Netscape browsers altogether. Something like 60 or 70 percent of all Web wanderers use the Netscape browser, so you can figure that a large chunk of your visitors won't have any problems.

Text Extensions

In standard HTML, the only way to display your text in a different font size is to use one of the heading tags (such as <H1>). Unfortunately, you can't use heading tags to adjust the size of individual characters, because headings always appear on a line by themselves. To fix this, Netscape created two new tags: <FONT> and <BASEFONT>, which I'll discuss in the next couple of sections. I'll also show you how to change the color of your text.

The <FONT>Tag

The <FONT> tag adjusts the size of any text placed between <FONT> and its corresponding end tag, </FONT>. Here's how it works:

<size>Affected text goes here</FONT>

The size part is a number that pinpoints how big you want the text to appear, where 3 is the size of standard-issue text. You can use any number between 1 (tiny) and 7 (gargantuan). Here's an example (see FONTSIZE.HTM on the disk):

<HTML>
<HEAD>
<TITLE>Text Extensions</TITLE>
</HEAD>
<BODY>
<H1>Using Netscape's &lt;FONT&gt; Tag</H1>
<HR>
<FONT SIZE=7>This text uses a font size of 7.</FONT><BR>
<FONT SIZE=6>This text uses a font size of 6.</FONT><BR>
<FONT SIZE=5>This text uses a font size of 5.</FONT><BR>
<FONT SIZE=4>This text uses a font size of 4.</FONT><BR>
<FONT SIZE=3>This text uses a font size of 3 (normal).</FONT><BR>
<FONT SIZE=2>This text uses a font size of 2.</FONT><BR>
<FONT SIZE=1>This text uses a font size of 1.</FONT><BR>
<HR>
<FONT SIZE=7>Y</FONT>ou can mix and match sizes:
<BR>
Here at Shyster & Son Brokerage, you'll see your investments 
<FONT SIZE=7>s<FONT SIZE=6>h<FONT SIZE=5>r<FONT SIZE=4>i
<FONT SIZE=3>n<FONT SIZE=2>k</FONT> while our commissions 
<FONT SIZE=4>g<FONT SIZE=5>r<FONT SIZE=6>o<FONT SIZE=7>w!</FONT>
</BODY>
</HTML>

The following figure shows the results as they appear in Netscape. Load this same file into any other browser (except the latest version of Internet Explorer), and all you'll see is regular text!

Example of Netscape's <FONT> extension.

The <BASEFONT> Tag

I mentioned above that the standard font size in a Netscape document is 3. This is called the base font, and it's not set in stone. To change it, use the <BASEFONT> tag:

<BASEFONT SIZE=size>

Once again, size is a number between 1 and 7 that specifies the base font size you want. For example, if you enter <BASEFONT=7> at the top of your document (the top of the body section, that is), then all the text will appear with font size 7.

You may be wondering what the heck's the big deal with <BASEFONT>. After all, couldn't you just insert a <FONT SIZE=7> tag at the top of the document? Good point. (Gee, you are paying attention, aren't you?) The beauty (if beauty is the right term) of base fonts is that they enable you to set up relative font sizes. A relative font size is one that's so many sizes larger or smaller than the base font. Here's an example:

<BASEFONT=6>
This text is displayed in the base font size. However 
<FONT SIZE=-2>these three words</FONT> were displayed in
a font size that was two sizes smaller than the base font.

The <FONT SIZE=-2> tag tells Netscape to display the text in a font size that's two sizes smaller than the base font (to get larger fonts, you'd use a plus sign (+), instead). Since I specified a base font of 6, the text up to the </FONT> tag appears with a font size of 4.

Why not simply use <FONT SIZE=4>, instead? Well, suppose you plaster your document with dozens of font changes and then, when you display it in Netscape, the fonts look too small. If you're using explicit font sizes, you have to painstakingly adjust each <FONT> tag. However, if you're using relative font sizes, you only have to change the <BASEFONT> tag.

Changing the Color of Your Page Text

Browsers display your text in basic black, which is readable but not all that exciting. To put some color in your text's cheeks, Netscape extended the <BODY> tag with a new TEXT attribute:

<BODY TEXT="#nnnnnn">

The nnnnnn part is a number that specifies the color you want to use. (Note, however, that colored text looks best on a background other than the normal, boring gray. I'll show you how to change the background color later in this chapter.) The following table lists the appropriate values for some common colors.

You also can see a "clickable palette" of colors by pointing your browser to the following site:

http://www.bga.com/~rlp/dwp/palette/palette.html

Just click on one of the color squares, and a page appears that tells you the appropriate code to use.

The Dreaded <BLINK> Tag

For some unfathomable reason, Netscape created a <BLINK> tag that causes text to blink on and off when viewed in a browser:

<BLINK>This text is @#$&% blinking!</BLINK>

The head Netscape programmer (an otherwise upstanding fellow named Marc Andreeson) claims this tag was put in "as a joke." Hah! This is, far and away, the single most annoying effect in all of HTML. Oh sure, it might sound cool (and it is-for about five seconds), but it's truly an eyesore. Also, it's been known to send Web surfers into paroxysms of rage. I beg you, I implore you: Don't use this tag!

List Extensions

If you're planning to use a lot of numbered lists or bulleted lists, Netscape offers a couple of simple enhancements that can give your pages some variety. To wit, you can specify an alternative numbering scheme in a numbered list, and you can specify a different type of bullet in a bulleted list.

Using a Different Numbering Scheme in Numbered Lists

As you learned back in Chapter 6 you enclose a numbered list with the <OL> and </OL> tags, and use <LI> at the beginning of each item. For each <LI> tag, the browser includes a number to the left of the item, where the first item is 1, the second is 2, and so on.

Netscape has an extension to the <OL> tag that enables you to define a different numbering scheme. Here's how it works:

<OL TYPE=type>

Here, type is one of the following characters:

Here's an example (see OLTYPE.HTM on the disk):

<HTML>
<HEAD>
<TITLE>Numbered List Extensions</TITLE>
</HEAD>
<BODY>
<H3>Using Netscape's &lt;OL TYPE=<I>type</I>&gt; Tag</H3>
<OL TYPE=a>
<LI>Win.
<LI>Place.
<LI>Show.
</OL>
<HR>
<OL TYPE=A>
<LI>Gold.
<LI>Silver.
<LI>Bronze.
</OL>
<HR>
<OL TYPE=i>
<LI>Miss America.
<LI>First runner-up.
<LI>Second runner-up.
</OL>
<HR>
<OL TYPE=I>
<LI>Picard.
<LI>Riker.
<LI>Data.
</OL>
<HR>
</BODY>
</HTML>

The next picture shows how Netscape handles the various types. Just so you know, other browsers will cheerfully ignore the TYPE attribute when they stumble across it.

Netscape's extension to the <OL> tag in action.

Changing the Bullet Type in Bulleted Lists

Netscape's basic bulleted-list bullet is a small circle. The best way to get a better bullet, in my not-so-humble opinion, is to use an <IMG> tag that references some cool bullet-like image. (I told you how to do this in Chapter 8.) If you prefer to leave graphics out of it, Netscape's <UL> tag for bulleted lists has an extra TYPE attribute:

<UL TYPE=type>

In this case, type can be either disc (the standard bullet), circle, or square. Here's a for-instance (look for ULTYPE.HTM on the disk):

<HTML>
<HEAD>
<TITLE>Bulleted List Extensions</TITLE>
</HEAD>
<BODY>
<H3>Using Netscape's &lt;UL TYPE=<I>type</I>&gt; Tag</H3>
<HR>
<UL TYPE=disc>
<LI>Compact disc.
<LI>Disc jockey.
<LI>Disc brake.
</UL>
<HR>
<UL TYPE=circle>
<LI>This "circle" type looks suspiciously like a square.
<LI>What's the problem, do you think?.
<LI>I guess somebody at Netscape failed geometry.
</UL>
<HR>
<UL TYPE=square>
<LI>Square root.
<LI>Three square meals.
<LI>Times square.
</UL>
</BODY>
</HTML>

And here's how it looks from Netscape's point of view. (Again, other browsers will simply shun the TYPE attribute when they see it inside a <UL> tag.)

Netscape's TYPE extension to the <UL> tag enables you to choose from any of three different bullet styles.

Graphics Extensions

You saw back in Chapter 8 "A Picture Is Worth a Thousand Clicks: Working with Images," how a few well-chosen graphics can do wonders for your pages. Netscape has some extra graphics goodies that can help your images display faster and can enhance the overall look of your page. The next two sections tell all.

Specifying Image Height and Width

When surfing Web sites that contain graphics, have you ever wondered why it sometimes takes quite a while before anything appears on the screen? Well, one of the biggest delays is that most browsers won't display the entire page until they've calculated the height and width of all the images. The ever-intrepid Netscapers realized this, of course, and decided to do something about it. "What if," they asked themselves, "there was some way to tell the browser the size of each image in advance? That way, the browser wouldn't have to worry about it and things would show up on-screen much faster."

Thus was born an extension to the <IMG> tag: the HEIGHT and WIDTH attributes:

<IMG SRC="filename" WIDTH=x HEIGHT=y>

Here, filename is, as usual, the name of the graphics file, x is the width of the graphic, and y is its height. Both dimensions are measured in pixels (which is short for picture elements), which are the tiny dots that make up the picture on your screen. For example, the graphic image named HOT.GIF that comes on this book's disk is 79 pixels wide and 43 pixels tall. How do I know? I used the LView program (the graphics viewer that comes on the disk). All you have to do is use LView to open the graphics file, and the program tells you the file's size in the title bar (if it's not visible, try maximizing the LView window). You'll see something like this:

HOT.GIF: 79x43x4

The first number (79) is the width; the second number (43) is the height; the third number (4) is the number of colors the image uses (which you can safely ignore).

Alternatively, you can express the width and height as percentages of the screen. For example, the following line displays the image BLUEBAR.GIF so its width always takes up 90 percent of the screen:

<IMG SRC="bluebar.gif" WIDTH=90%>

The advantage here is that, no matter what size screen someone is using, the graphic will always take up the same amount of room across the screen. As proof, check out the next two figures showing the BLUEBAR.GIF image with WIDTH set to 90 percent. As you can see, the image always usurps 90 percent of the available width, no matter how big the Netscape window. (Note, too, that since I didn't specify the HEIGHT, Netscape adjusts the height in proportion to the increase or decrease of the width.)

The BLUEBAR.GIF image in a relatively narrow window.

The same image in a wider window.

Setting the Background

When it appears in a browser, your Web page text and graphics float in a sea of dull, drab gray. It's about as exciting as a yawning festival. One of Netscape's most welcome extensions is the ability to change the background color your page appears on to whatever suits your style. The guts of your page appears within the body, so it makes sense that this extension is part of the <BODY> tag:

<BODY BGCOLOR="#nnnnnn">

Yes, you're right: the nnnnnn part is the same as what you saw earlier in this chapter when I talked about changing the color of text. (You can use the same values that I outlined, as well.) The next figure shows the Internet Hockey Pool page that uses a black background. Black text would, of course, be impossible to read on this background, so the author rightly chose to use white text.

A page that uses a black background.

Instead of a color, Netscape also enables you to specify an image to use as the background (similar to the way Windows lets you cover the desktop with wallpaper). This doesn't have to be (nor should it be) a large image. Netscape takes smaller graphics and tiles them so they fill up the entire screen. The secret to background images is the <BODY> tag's new BACKGROUND attribute:

<BODY BACKGROUND="filename">

Here, filename is the name of the graphics file you want to use.

In general, I recommend sticking with just a different background color. Tiled background images take longer to load, and they can make text devilishly difficult to read. On the other hand, many new browsers understand the BACKGROUND attribute, but not the BGCOLOR attribute. So a compromise solution is to create a small graphics file that displays only the background color you want to use and then reference that file using BACKGROUND.

Extra Extensions

To round out my extended coverage of Netscape's extensions, this section looks at two more innovations that should come in handy: centering text and a new, improved <HR> (horizontal rule) tag.

Centering Paragraphs

Centering text and graphics is a time-honored way to give reports and brochures a professional look and feel. To provide the same advantage to your Web pages, Netscape's <CENTER> tag gives you centering capabilities for your page headings, paragraphs, lists, and even graphics. Here's how <CENTER> works:

<CENTER>
[Headings, text, and graphics that you 
want centered go here.]
</CENTER>

The previous figure shows an example of the <CENTER> tag at work.

A Better Horizontal Rule

To conclude your look of the Netscape extensions, I'll examine various enhancements to the <HR> tag. <HR>, you'll recall, displays a horizontal rule across the page. Netscape's <HR> extensions allow you to change the line's size, width, alignment, and more. Here's a rundown:

The Least You Need to Know

This chapter took you on a tour of the various Netscape extensions to HTML. Here are a few of the tourist attractions you saw during the trip:

• Use <FONT SIZE=size> to specify a font size. To set the size for all your text, use <BASEFONT SIZE=size>.
• To get a different text color, use <BODY TEXT="#nnnnnn">. The <BODY> tag also supports the BGCOLOR attribute, which specifies the color of the background.
• You can use a different numbering scheme in your numbered lists by using <OL TYPE=type>. To get different bullets in a bulleted list, use <UL TYPE=type>.
• Your page graphics will load quicker if you specify a HEIGHT and WIDTH in the <IMG> tag.
• To center text, paragraphs, headings, and graphics, use the <CENTER> tag.