Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

The Complete Idiot's Guide to Creating an HTML Web Page

Chapter 10 -- Fooling Around with the Netscape Extensions

Chapter 10

Fooling Around with the Netscape Extensions


CONTENTS





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:

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:

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.

Font Size Fun in HTML 3.0
The HTML 3.0 specification doesn't support the <FONT> tag. Instead, it uses <BIG> for larger text (larger, that is, than whatever the current font size is) and <SMALL> for smaller text. You can also use <SUB> to get subscripts and <SUP> to get superscripts. By the way, Netscape 2.0 supports these new tags, so they may be the best way to produce different font sizes.

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.

If you use this value…
You get this color…
#000000
Black
#FFFFFF
White
#FF0000
Red
#00FF00
Green
#0000FF
Blue
#FF00FF
Magenta
#00FFFF
Cyan
#FFFF00
Yellow

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.

Changing Link Colors
Netscape also has extensions that enable you to specify colors for the links you include in your page. Here's how it works:
<BODY LINK="#nnnnnn" VLINK="#nnnnnn" ALINK="#nnnnnn">
Use LINK to specify the color of new links (links the reader has never clicked on before); use VLINK to set up a color for visited links; use ALINK to set up a color for active links. (An active link is a link you've clicked on and are waiting for the page to display.)

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:

Type
Numbering scheme
Example
1
Standard numbers
1, 2, 3
a
Lowercase letters
a, b, c
A
Uppercase letters
A, B, C
i
Small Roman numerals
i, ii, iii
I
Large Roman numerals
I, II, III

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.

Netscape and HTML 3.0 Agree for Once!
You'll be happy to know that the <IMG> tag's HEIGHT and WIDTH attributes are also endorsed by HTML 3.0. This means they'll be adopted by most browsers before too long, so you can use them with impunity.

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.

How the Rest of the Web World Centers Stuff
Netscape's <CENTER> tag is a nice, simple way to shift things to the middle of a page. The folks who created HTML 3.0 preferred to complicate things, for some reason (ah, bureaucracy). Their solution was to create a new ALIGN attribute for the <P> tag and the heading tags. For example, to center the next paragraph, you use the following variation on the <P> tag theme:
<P ALIGN=CENTER>
Similarly, you can center, say, an <H1> heading like so:
<H1 ALIGN=CENTER>
The only advantage to this approach is that you can also use either LEFT or RIGHT with the ALIGN attribute.

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:

<HR> ExtensionWhat It Does
<HR WIDTH=x>Sets the width of the line to x pixels.
<HR WIDTH=x%>Sets the width of the line to x percent of the screen.
<HR SIZE=n>Sets the thickness of the line to n units (where the default thickness is 1 unit).
<HR ALIGN=LEFT>Aligns the line with the left margin.
<HR ALIGN=CENTER>Centers the line.
<HR ALIGN=RIGHT>Aligns the line with the right margin.
<HR NOSHADE>Displays the line as a solid line (instead of appearing etched into the screen).

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: