If you've been on the Web for any amount of time at all, chances are you've come across a page or site that suggests that its pages are "best viewed in Netscape Navigator" or something similar. Since the Netscape 1.1 version in mid-1995, the Netscape Navigator Web browser has been capable of supporting "extensions" to the HTML standard language. Extensions are essentially HTML-like commands that were originally only viewable by Navigator users.
Whether or not that was a good business decision is still being played out in the industry, although Netscape is clearly a dominant force among Web technology companies. What you should be more concerned with here in this chapter is whether or not you should use these special features-commonly called Netscapisms.
For your purposes here, I'm going to describe Netscapisms as HTML-like extensions that run counter to the theories and guidelines that govern development of the HTML standard. For instance, the tables standard that you worked with in Chapter 15 owes a great deal to Netscape's early implementation of tables. That's not a Netscapism. The <BLINK> tag (to create blinking text) and the <CENTER> tag are Netscapisms, because they don't have any proposed counterpart in the HTML standard-and, perhaps more importantly, they are tags with no function but aesthetics.
Whether or not you use these Netscapisms in your Web pages is completely up to you. I'll try to refrain from value judgments, although I must say the <BLINK> tag is annoying! Aside from that, though, I'll just leave you with the following thoughts:
| Tip |
You might want to make your HTML 2.0 site a low-graphics site, too, so that lower bandwidth users can choose that one over your highly-graphical Netscape-only site. |
You've seen tags very similar to these. Once the HTML style sheet standard has been universally accepted, it'll be time to put these guys to sleep. Each one has a style sheet alternative and, for centering and backgrounds, there are similar HTML 3.0 alternatives that have been rolled into the most popular browsers. Many browsers will still support Netscape-style centering and backgrounds (for backward compatibility, and to catch up to Netscape); but, if it seems style sheets are finally in vogue, switch over and ignore these.
The <CENTER> tag is used to center just about anything-graphics or text-in the browser windows. It works like this:
<CENTER>
...HTML markup...
</CENTER>
It's a container tag that works just about like the <DIV ALIGN="CENTER"> tag, except that the <CENTER> tag can't do anything else, while the <DIV> tag is useful for style sheets. An example of <CENTER> would be the following:
<CENTER>
<IMG SRC="logo.gif">
<P>If you're ready to visit BigCorp, click <A HREF="main.html">here
</A>.</P>
</CENTER>
This looks like figure 19.1 in a browser.
Figure 19.1: Using the <CENTER> tag in Netscape Navigator.
<BLINK> works in much the same way. As a tag, it's designed to make text more annoying by forcing a cursor-style reverse field to blink on and off on top of words contained by this tag. The following is an example:
<BLINK>Real Hot Sale Item!</BLINK>
Unfortunately, I can't show it to you in a browser, since a picture in this book can't show you the blinking. Too bad, huh?
Netscape uses a different formula (different from the style sheet method) for adding colors to the background of your pages. Using the BGCOLOR attribute for the <BODY> tag, you create a background color by specifying a 6-digit hexadecimal number. This attribute takes the following format:
<BODY BGCOLOR=#rrggbb>
...HTML document...
</BODY>
The rrggbb number represents the two-digit hexadecimal number for red, green, and blue values of the color you want added to the background of your document. An example of this is the following which would turn the background of your page black:
<BODY BGCOLOR="#000000"
Similarly, FFFFFF would be
a white background, FF0000
would be red, 00FF00 would
be green, and so on.
| Note |
Here's a quick refresher in hex numbers. Hexadecimal means base-16, as opposed to base-10 (normal counting numbers), so each column in a hex number represents a multiple of 16, not ten. The right-most column (we called it the "one's place" in grade school) needs single-digit numbers past nine in order to allow us to represent hex numbers. Unfortunately, our numbering system doesn't have single digits past nine. (Ten, which is past nine, is a two-digit number in base-10.) So, we use letters-the first six of the alphabet. An F in the right-most column represents the value 15, and an F in the 16's place represents 240 (15¥16). So, the hex number FF is equal to 255 (240+15). |
Once you've changed the background colors in your document, you
may need to change the foreground (text) colors to make them readable.
The default for most graphical browsers is black text, aside from
hypertext links. If you change your background color so that it's
also black, you'll have a communications problem.
| Tip |
There are a number of pages on the Web to help you pick Netscape colors for backgrounds and links. Try http://www.bga.com/~rlp/dwp/palette/palette.html and http://www.echonyc.com/~xixax/Mediarama/hex.html to start. |
To change the text color in Netscape HTML, you use the TEXT attribute to the <BODY> tag, which takes the following format:
<BODY TEXT="#rrggbb">
...HTML document...
</BODY>
In this code, rrggbb represents another series of three two-digit hex numbers. An example appropriate for the black background would be the following which would turn the text white:
<BODY TEXT="#FFFFFF">
It's also possible to change the colors used to represent hypertext links in Netscape HTML, using three different attributes: LINK, VLINK, and ALINK. These represent an unvisited link, a visited link, and an active link, respectively.
To change these, you'd use the following format:
<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
...HTML document...
</BODY>
Once again, the numbers are three two-digit hex numbers that represent
the red, green, and blue values of the desired color. The default
values are blue for LINK,
purple for VLINK, and red
for ALINK. These values may
also be overridden by the user if they've set different colors
in Netscape's General Preferences dialog box.
| Note |
How can you see an "active" link? If you notice, a link turns a different color right after you've clicked it-basically, just so you know you've been successful in selecting it. The ALINK value is also the color of a hypermedia link while the file is downloaded to the user's computer. |
Let's use some of the Netscapisms to create a page in the best Netscape-only tradition. You can create a new page complete with a background color, foreground color, new colors for links, and some centering. You might even use the blink tag.
Save a new HTML document from your template and enter something similar to Listing 19.1.
Listing 19.1 door.html Adding Color and Alignment to Netscape Pages
<BODY BGCOLOR=#000000 TEXT=#FFFFFF LINK="5555FF" VLINK="00FF00" ALINK="FF5555">
<CENTER>
<H2><BLINK>Welcome!</BLINK></H2>
<P>I'm glad you could make it to the labyrinth of terror! We pride ourselves here on the darker side of the Web with using some of the most hideous and amazing colors, textures and HTML extensions ever conceived
If you're interesting in entering the labyrinth, click
<A HREF="net_home.html">here</A>. If you're wondering what all the fuss is about, and everything looks pretty normal to you, then you're probably better off viewing our <A HREF="2_home.html">HTML 2.0</A> pages.</P>
<HR>
<H3><BLINK>Be Very Afraid!!!</BLINK></H3>
</CENTER>
</BODY>
Clicking one of the links (even though it probably won't actually work for you unless you change the example's URLs) should allow you to see the different link colors. Hopefully, it will be light blue before you click it, light red as you're clicking it, and bright green after it's been visited. Otherwise, the page should look something like figure 19.2, aside from the blinking.
Figure 19.2: An outrageous page as viewed through Netscape.
Again, the point of many Netscape commands is to directly affect the appearance of text. Outside of style sheets, this is something that HTML tries to avoid doing, preferring to leave the manipulation to the individual browser. But Netscape, in catering to appearance-motivated designers, lets you make those decisions for yourself. Not all of these tags are going to make it in any HTML 3.0 specifications, so if you find you must use them, I suggest warning your users that Netscape-compatibility is required.
The <NOBR> tag won't allow text to wrap when it meets with the end of the browser screen. This is occasionally useful, especially in situations where your user might be confused by a line wrap. This is a container tag that accepts text and markup between its tags. Its format is as follows:
<NOBR>test and markup</NOBR>
Now, this doesn't necessarily mean that users will need to scroll their browser window in order to see the text-in many cases, they'll just need to expand the browser window. (Or, make it considerably smaller to force the entire length of <NOBR> text to the next line.) This might be useful for addresses, programming code, a line of numbers, or similar text. The following is an example:
<NOBR>1234 Main Street * St. Louis, MO * 29000</NOBR>
The <WBR> tag is used in conjunction with the <NOBR> container for creating a line break when you know exactly where you want one to occur (if it needs to be broken by the edge of the Navigator window). It can also be used outside of the confines of the <NOBR> tag to let Netscape know where it's okay to break up a particularly long word.
<WBR> doesn't usurp the responsibilities of <BR>-it's only a suggestion. If Netscape needs to break a line of text (or a particularly long word), then it will do so. If it doesn't need to break at the <WBR>, it won't. An example would be:
<P>When I move this Web site the new address will be
http://www.fakecorp.com<WBR>/main/mperry/public/index.html. Look for a
hyperlink soon!</P>
Since Netscape Navigator would interpret that address as one word,
it allows you to suggest where it should be broken if the address
would otherwise overlap the browser window.
| Note |
For lines that always break where you want them to, the <PRE> tag is still your best bet (e.g., lines of poetry). The <BR> tag might work well, too, if you're not trying to line things up visually. |
Another ability unique to Netscape HTML (outside of style sheets) is specific control over the size of fonts. The general HTML theory is to allow a browser to decide what fonts will be larger than others, although it's safe to assume, for instance, that graphical browsers will render <H1> text larger than <H2>, etc.
Netscape, however, offers up the <FONT> and <BASEFONT> tags, which take the SIZE attribute to change the size of browser fonts, regardless of the tags used. <BASEFONT> changes the font size for an entire document relative to the default. <FONT> can then be used to set individual font sizes within the document. They're formatted like this:
<BASEFONT SIZE="number">
<FONT SIZE="(+/-) number">
You'll want to use an incremental number (for example, +2) for the SIZE attribute to the <FONT> tag when you're using the <BASEFONT> tag to set the default. The <FONT> tag can be used just about anywhere in regular text. For instance:
<BASEFONT SIZE="4">
<P>We're having a S<FONT SIZE="+1">A<FONT SIZE="+2">L<FONT SIZE="+3">A<FONT SIZE="+4">BRA<FONT SIZE="+3">T<FONT SIZE="+2">I<FONT SIZE="+1">O<FONT SIZE="+0">N!</P>
You can use <FONT> as often as you'd like. Just remember that as a general rule, the more you use it, the more annoying it is (see fig. 19.3).
Figure 19.3: Overuse of the <FONT> tag.
Let's see what Netscape's control over fonts and other interface elements allows you to accomplish on a Web page. Start with a new document from your template and enter Listing 19.2.
Listing 19.2 font.html Using the <FONT> Tag
<BODY>
<BASEFONT SIZE="4">
<H2>In the interest of science...</H2>
<P>It's been my experience lately that, in studying the concept
ASTRIOANGLANGIUM<WBR>POROPHATE as dilligently as I have, I've caused quite a stir in the scientific world. I must say that I've been surprised at how quickly the entire concept of lower-being brain transplant into humanoids has caused the world in general to take up arms against me, although I, frankly, cannot conceive of a rational explanation for it. It seems that trainable, workable, intelligent humanoids would make the perfect servants, virtually eliminating the need to keep regular humans alive. That saves precious natural resources. I would, of course, be left alive to rule this world.<P>
<P>I can only guess that the outcry is a result of my closely-guarded formula. I now release it to the world:</P>
<NOBR><FONT SIZE="+2">X + (W*T) ^ 2 / 567.34cd_constant -
(T * X^.4) / ROOT(Wy + Xy) * 70%(Ry * Ty - Rf) = Secret Formula Answer<FONT SIZE="+0"></WOBR>
<P>Go ye, then, and attempt to duplicate my work. I will destroy all of you with my brilliance!</P>
</BODY>
It might be a bit disturbing to come across this page in real life, but let's see how it renders in Netscape (see fig. 19.4). Notice the use of <WBR> in the completely made up scientific jargon word, to suggest to Netscape where it would be okay to break that word. We've also used NOBR to keep the math formula from breaking.
Figure 19.4: Font manipulation with Netscape tags.
| Note |
Just to avoid confusion, the above example does not attempt to use HTML 3.0 math tags to render the math formula. |
Plus, as an added bonus, the basefont comes across as a little too big-just to give it that mad scientist feeling.
Most of the Netscape additions that have been discussed thus far have been new tags, but Netscape also works its magic through attributes that can be added to existing HTML tags. In general, these attributes simply give you more visual control over an existing HTML tag by allowing you to choose width, height, and other special characteristics.
This tag generally returns a horizontal rule in HTML, and it still does in Netscape, but Netscape-specific attributes give you more control over the appearance of the rule.
By default, the <HR> tag displays as a shaded, engraved-looking line. Thanks to Netscape, you can change this with the SIZE, WIDTH, ALIGN, and NOSHADE attributes. They're added as follows:
<HR SIZE="number" WIDTH="number/percentage" ALIGN="direction" NOSHADE>
The numbers for SIZE and WIDTH are in pixels, while WIDTH can also accept a percentage of the available browser window that you'd like to see using the <HR> span. ALIGN can accept LEFT, RIGHT, or CENTER. The NOSHADE attribute stands on its own.
Let's look at a few examples:
<HR SIZE="5">
<HR WIDTH="75%" ALIGN="CENTER">
<HR NOSHADE>
In Netscape Navigator, these horizontal rules look like figure 19.5.
Figure 19.5: Netscape's attributes for <HR> in action.
Here's another cosmetic change that Netscape allows you to make with attributes to standard HTML 2.0 tags. The attribute TYPE can be used to change the type of bullet or number used by an <OL> or <UL> HTML list. It takes the following format:
<OL TYPE="number style">
<UL TYPE="bullet style">
For ordered lists, the TYPE value can be A for capital letters, a for lowercase letters, I for large roman numerals, or i for small roman numerals. For UL lists, the possibilities are DISC, CIRCLE, or SQUARE.
Within lists, the <LI> element can accept the attribute VALUE, which allows you to renumber lists as you go along. An example might be a list that you'd like to start with the number five:
<OL>
<LI VALUE="5"> Item numbered 5
<LI> Item numbered 6
<LI> Item numbered 7
</OL>
Used in conjunction with the TYPE attribute for the <OL> tag, the VALUE attribute would also allow you to start with different alphabetic or roman characters, such as with the following:
<OL TYPE="A">
<LI VALUE="5"> Item E
<LI> Item F
<LI> Item G
<LI VALUE="1"> Item A
<LI> Item B
</OL>
As shown in this example (results are shown in figure 19.6), you can even change the numbering/lettering values within the list, and it will pick up the counting from there.
Figure 19.6: Renumbering lists with Netscape attributes.
The <IMG> tag wins the prize for being the most heavily attributed by Netscape (at least currently). You can add the attributes ALIGN, WIDTH, HEIGHT, BORDER, VSPACE, and HSPACE to <IMG>, all of which enhance the appearance of the graphics in your Web documents.
Actually, the ALIGN attribute itself isn't new to you-it's available in both HTML 2.0 and 3.0. Netscape does have the following additional values for it, though, which can be used to more precisely align graphics and text:
You may notice that Netscape's added values are used to align the image to the text, which runs counter to our understanding of the ALIGN attribute up until now. For that reason, among others, I recommend sticking to either the HTML 2.0 or 3.0 specification for <IMG ALIGN>. Not only is the HTML version consistent, but, in most cases, these Netscape values are just overkill.
WIDTH and HEIGHT generally appear together, as in the following format:
<IMG SRC="URL" WIDTH="number" HEIGHT="number">
Both number placeholders are the desired dimensions of the graphic file. This is useful for the following two reasons:
| Tip |
Resizing graphics in this way doesn't change the size of the graphic file or the time it takes to download it. For best speed, use a graphics application to create thumbnails instead of the HEIGHT and WIDTH attributes. |
To change the size of the border (or to add one to graphics that aren't also hyperlinks), you can use the BORDER attribute. This attribute also accepts a number in pixels, so that the following example results in a rather thick border around the image, as shown in figure 19.7:
Figure 19.7: The BORDER attribute.
<IMG SRC="image.gif" BORDER="10">
Finally, remember that using the LEFT and RIGHT values for ALIGN (which are available in Netscape as well as in HTML 3.0) causes your image to change from an inline image to a "floating" image. Netscape offers the attributes VSPACE and HSPACE to add additional space around a floating image, so that text doesn't press up against the image. These attributes take the following format where number is in pixels:
<IMG SRC="URL" ALIGN="LEFT/RIGHT" VSPACE="number" HSPACE="number">
The VSPACE number "pads" the image above and below, while HSPACE adds white space to the left and right.
This example will concentrate on the added attributes and attribute values in Netscape HTML. You can do some interesting things with lists, horizontal rules, and images.
First, create a new document from your template and enter Listing 19.3.
Listing 19.3 Netscape Attributes to Common HTML Tags
<BODY>
<CENTER>
<H2>About My Family</H2>
</CENTER>
<H3>Me -- Richard Thompson</H3>
<IMG SRC="doomed.gif" ALIGN="RIGHT" HSPACE="4" VSPACE="4">
<P>Hi, I'm Richard and I'm 12 years old. I like to play baseball, hang out, listen to music and play with my best friends Bill and Mike. I guess school is okay, but I have more fun at the Y, where I'm on the Sidekickers soccer team, which won second place last year at the city tourney. I'm into computers and video games, and I spend a lot of time on the Web. My favorite game right now is Doomed, like in the picture.</P>
<H3>Dad -- Robert Thompson</H3>
<HR SIZE="3" WIDTH="50%" ALIGN="CENTER">
<P>My Dad, Bob, works at BigCorp Inc. as a Sales Manager. Basically what he sells is computer stuff, although he doesn't really do it so much unless the customers are really big serious ones like Ford or GM or something. He travels a lot, but he brings me home cool computer stuff, too. He takes off for vacations in the summer mostly, and last summer we went fishing in Oklahoma. I didn't think there was much reason to go to OK, but the fishing was cool, and we stayed in a little cabin that didn't have phones or TV.</P>
<HR SIZE="3" WIDTH="50%" ALIGN="CENTER">
<H3>Sister -- Julie Thompson</H3>
<P>My sister isn't really a whole lot like me in that she is a brat. I think we'd get along better if it wasn't for this list.<BR>
List about Julie:<BR>
<UL TYPE="SQUARE">
<LI> She's a dork
<LI> She's not good at sharing
<LI> She keeps saying that Rusty is her dog, but he's not cause she's too young
<LI> She doesn't understand anything about cars
<LI> She doesn't throw a baseball very far
</UL>
Of course there's other stuff, but I don't want to drag her through it on the Web.</P>
<HR SIZE="3" WIDTH="50%" ALIGN="CENTER">
<H3>This page looks coolest in <A HREF="http://www.netscape.com/">Netscape Navigator</A>.</H3>
</BODY>
Some of Netscape's added attributes are useful, but this is essentially a page you could create with HTML 3.0 standard elements. That's not to say that Netscape isn't good for tweaking the appearance of your page, though (see fig. 19.8).
Figure 19.8: Your Netscape enhanced example.
Client-pull is another concept that began with Netscape, but should catch on with other browsers (Microsoft Internet Explorer already supports it). The client-pull tag and attributes allow you to automatically load another HTML page after a predetermined amount of time. You can also use these tags to reload, or "refresh," the same HTML document over and over.
The client-pull concept introduces you to the <META> tag, which is used in the head of your document. For client-pull, the <META> tag takes the attributes HTTP-EQUIV and CONTENT. Client-pull follows this format:
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="seconds; URL="new URL">
</HEAD>
Unfortunately, this is a little messy compared to most HTML tags, so we'll have to wade through it. The HTTP-EQUIV attribute always takes the value REFRESH in client-pull; it only loads a new document if the CONTENT attribute includes an URL. Otherwise, it refreshes (reloads) the current document.
The CONTENT attribute accepts a number for the amount of time you want the browser to wait before the next page is loaded (or the current page is refreshed). Then it accepts a colon and the statement URL=, followed by a valid URL for the page that should be loaded automatically.
Here's an example that just refreshes the current page after waiting ten seconds:
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="10">
</HEAD>
And, in this example, we'll use client-pull to load a new page after waiting 15 seconds:
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="15; URL="http://www.fakecorp.com/index.html">
</HEAD>
One of the best uses for client-pull is as part of a "front door" page to your site. You can assume that a user's browser that accepts the client-pull commands is also capable of rendering Netscape-specific commands. Users with browsers that don't recognize client-pull can click another link on the page to allow them to view regular HTML 2.0 pages.
Netscapisms are, as defined in this chapter, Netscape-specific HTML codes that go against the "no direct manipulation" theory of standard HTML. These HTML-like tags allow you to directly control things like font size, text alignment, and image alignment.
In some cases, these Netscape ideas have been incorporated into HTML 3.0 level specifications-although not always in the same exact way. When possible, you should use the "official" HTML tags for these functions. Style sheets described in Chapter 18 are especially effective replacements for many of the Netscapisms.
When you do decide to use a Netscape-specific tag, you should be careful that you warn your users of such. Many users will not be able to view those tags, so you need to make sure that the tags are not being used to communicate something that will be lost on others. If this is the case, it may even be in your best interest to create separate HTML 2.0-compliant and Netscape-specific sites.