|
|
|||
|
|
|
|
|
EarthWeb sites:
|
|
Chapter 19Netscape HTML
CONTENTS
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. Should You Use 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:
Centering, Blinking, and Background TagsYou'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> 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> 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? Background and Foreground ColorsNetscape 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> 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.
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.
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"> 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">
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.
Example: Netscape Colors and AlignmentLet'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"> 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. Manipulating Text with Netscape HTMLAgain, 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. <NOBR> and <WBR>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
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.
The <FONT> and <BASEFONT> TagsAnother 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"> 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"> 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. Example: Putting Fonts in Their PlaceLet'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> 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.
Plus, as an added bonus, the basefont comes across as a little too big-just to give it that mad scientist feeling. Netscape Attributes for HTML TagsMost 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. The <HR> TagThis 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"> In Netscape Navigator, these horizontal rules look like figure 19.5. Figure 19.5: Netscape's attributes for <HR> in action. HTML ListsHere'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"> 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> 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"> 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> TagThe <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:
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. Example: Netscape Attributes at WorkThis 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> 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 Tags and AttributesClient-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> 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> And, in this example, we'll use client-pull to load a new page after waiting 15 seconds: <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. SummaryNetscapisms 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. Review Questions
Review Exercises
|
|
|
|
Use of this site is subject certain Terms & Conditions. Copyright (c) 1996-1999 EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Please read our privacy policy for details. |
