Skip to main content.

Web Based Programming Tutorials

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

How to use HTML 3.2

Chapter 13 -- Using the Netscape Extensions

Chapter 13

Using the Netscape Extensions

CONTENTS



When the original version of Netscape was introduced, it contained a number of extensions to the HTML language. These extensions quickly became popular with both Web surfers and Web designers because they added functionality to the Web that standard HTML could not provide. Because of Netscape's popularity, many of these extensions are in widespread use, and have become the de facto standard on the Web. Many of the original Netscape 2.x extensions have since been incorporated into the HTML 3.2 standard.

In this chapter, you'll learn about a few of the original Netscape extensions that have not been incorporated into the official HTML 3.2 specification, as well as extensions that are now a part of HTML 3.2.

How to Use Netscape's Formatting Extensions

The most popular of the original Netscape extensions were the ones used to make formatting text in HTML more flexible. Many of the original extensions have since been incorporated into the HTML 3.2 standard, and are therefore discussed elsewhere in this book. However, some formatting extensions still remain unofficial, and many are in widespread use. You may choose to incorporate these extensions into your HTML document, but keep in mind that if you do, many non-Netscape browsers will not recognize the formatting you have specified.

Tip Sheet

  1. One of the most commonly used Netscape Extensions is the <CENTER> tag. Although using the ALIGN=CENTER attribute is generally preferred, there are some situations where you'll want to center items such as tables on the page. To use the <CENTER> tag, open an existing HTML document in Notepad and type <CENTER> at the point where you'd like the centering to begin.

    Figure 13.2 :

  2. Type </CENTER> at the point where you'd like the centering to end. When this HTML document is viewed by a Netscape browser, or any other browser that supports the <CENTER> tag, everything that falls between the <CENTER> and </CENTER> tags will appear centered in the browser. This includes paragraphs, headlines, images and tables. The <CENTER> tag is now part of the HTML 3.2 standard.

    Figure 13.3 :

  3. You can also create blinking text. This is a con-troversial Netscape tag, because the effect it cre-ates is considered annoying by many people. Try it out yourself and make your own decision. To make any text blink, surround it with <BLINK> and </BLINK> tags.

    Figure 13.4 :

  4. The Netscape extensions also give you greater control over the size of fonts as they appear in the browser. You can spec-ify an absolute font size by typing <FONT SIZE= followed by a number from 1 to 7. The default font size is 3. The new font size will stay in effect until a </FONT> tag appears. For example, to make text in a paragraph appear slightly larger than normal, type <FONT SIZE=5>This text is bigger than the rest.</FONT>.

    Figure 13.5 :

  5. Instead of using absolute font sizes, you can specify font size relative to a base font value using the + and - signs in front of a value. The default base font size is 3. For example, to achieve the same effect in the previous step using relative font sizes, you would type <FONT SIZE=+2>This text is bigger than the rest.</FONT>.

    Figure 13.6 :

  6. You can even change the font used. With the <FONT FACE> tag, you can render any font you name, but that font (and Navigator 3) must be installed on the client to be rendered properly.

    Figure 13.7 :

  7. You can change the value of the base font size using the <BASEFONT> tag. For example, to change the default font size from 3 to 5, type <BASEFONT SIZE=5>.

    Figure 13.8 :

How to Extend Your Lists with Netscape

In Chapter 7 you learned how to use lists in HTML to present compact, concise information. Netscape allows you to extend lists considerably. You can change the appearance of bullets in unordered lists and change the numbering style of ordered lists. You can even switch between numbering styles in the middle of a list.

Tip Sheet

  1. You can change the appearance of the bullets used in an unordered list. First, open the HTML document containing your list and look for the <UL> tag, which marks the beginning of the list.

    Figure 13.10 :

  2. Add the attribute TYPE= to the <UL> tag, followed by either disc, square, or circle to indicate the type of bullet used. For example, to make the bullets in your list appear as squares, you would type <UL TYPE=square>.

    Figure 13.11 :

  3. You can also change the numbering scheme for ordered lists. By default, ordered lists start at 1, and the number increases incrementally by one for each list item. To change the type of numbering used, open your HTML document and locate the <OL> tag, which marks the beginning of the ordered list.

    Figure 13.12 :

  4. To change the numbering scheme of your list to capital letters (A,B,C, and so on), add the attribute TYPE=A to the <OL> tag. The items in your list will use capital letters instead of numbers in front of each list item.

    Figure 13.13 :

  5. You can also use lowercase letters by typing TYPE=a inside the <OL> tag. Typing TYPE=I uses uppercase Roman numerals (I,II,III) as the numbering scheme. Finally, you can use lowercase Roman numerals by typing TYPE=i inside the <OL> tag.

    Figure 13.14 :

  6. Netscape's extensions allow you to use the TYPE and VALUE attributes in individual <LI> line item tags. For example, in an unordered list, you could alternate the bullet style for each item by specifying a bullet type in each <LI> tag.

    Figure 13.15:

How to Extend Horizontal Rules

In Chapter 5 you learned how to create a horizontal rule in HTML. Horizontal rules, which are specified with an <HR> tag, are useful for breaking apart sections of your HTML document. Netscape supports a number of useful extensions to the <HR> tag, giving you greater control over the format of horizontal rules in your documents.

Tip Sheet

  1. Open the HTML document containing the horizontal rule, and locate the <HR> tag.

    Figure 13.17:

  2. You can change the thickness of the horizontal rule by using the SIZE attribute, measured in pixels. The default size is 2 pixels. For example, to change the width of the horizontal tag to 8 pixels, you would type <HR SIZE=8>.

    Figure 13.18 :

  3. By default, a horizontal rule stretches across the entire width of the browser window. You can change the width of any horizontal rule using the WIDTH attribute inside the <HR> tag. To specify an exact width, indicate the number of pixels. For example, to set the width of a horizontal rule to 200 pixels, type <HR WIDTH=200>.

    Figure 13.19 :

  4. You can also define the width of a horizontal rule as a percentage of the visible screen. For example, to set the width of the horizontal rule to be one-half of the screen, type <HR WIDTH=50%>.

    Figure 13.20:

  5. If you've changed the width of a horizontal rule to be less than the default full-screen size, you can also specify how the horizontal rule is aligned on the page. By default, horizontal rules are centered on the page, but by adding the ALIGN attribute to the <HR> tag, you can align the rules to the left or right margin. For example, to create a horizontal rule that is one-third the width of the visible screen and is aligned with the left margin, you would type <HR WIDTH=33% ALIGN=LEFT>.

    Figure 13.21:

  6. Netscape also allows you to display your horizontal rule as a solid line instead of the normal beveled '3-D' bar. To turn off the fancy shading effects for the horizontal rule, add the NOSHADE attribute to your <HR> tag. For example, to create a solid horizontal rule that is 5 pixels thick, you would type <HR SIZE=5 NOSHADE>.

    Figure 13.22:

How to Use Client-Side Image Maps

In Chapter 12, you learned how to create clickable image maps using CGI and server-based map files. Although this process is popular, there are many drawbacks. First, normal image maps require increased interaction with the server. Whenever the user clicks on part of the image, the server must be contacted to determine where that portion of the image links to. This can slow things down considerably, depending on where the server is in relation to the user and the amount of user traffic on that server at any given time. Also, normal image maps cannot be used for HTML documents that are accessed locally or on a LAN. They only work via the HTTP protocol on the World Wide Web. Finally, users do not receive visual feedback on the link destination with image maps as they do with normal hypertext links.

Netscape 2.0 (and higher) now supports client-side image maps. The crucial difference is that all the link and region instructions-the map files-are now stored directly in the HTML document. The browser takes care of all the work locally. Client-side image maps are only supported by a few browsers. Fortunately, there's a way to set up your image maps with both a client-side and a normal server version, so that your image maps will work with all browsers.

Tip Sheet

  1. Select the graphic to be used as the image map. As with normal image maps, the graphic should be clearly divided into easily distinguishable regions.

    Figure 13.24:

  2. Open the HTML document in which you'd like to place the client-side image map, and place the cursor at the point in the document where you'd like the image map to be displayed.

    Figure 13.25 :

  3. Place the image using the standard image tag. For example, to insert an image named lawnbutn.gif, type <IMG SRC="lawnbutn.gif">.

    Figure 13.26 :

  4. Inside the <IMG> tag, add the USEMAP= attribute, followed by the name of a map enclosed by quotes and prefaced with a pound sign (#). The name of the map can be anything you like. You'll create the actual map in the next step. For example, to point to a map named buttonbar, type USEMAP="#buttonbar" inside the <IMG> tag.

    Figure 13.27 :

  5. Now you'll create the actual map inside your HTML document using the <MAP> tag. On a new line, type <MAP NAME="buttonbar"> and press Enter.

    Figure 13.28 :

  6. Each clickable region is defined using an <AREA> tag. If you define two regions that overlap, Netscape will use the first region specified when determining which link to use. To define the first region in your map, type <AREA>.

    Figure 13.29 :

  7. The <AREA> tag has three required attributes. The first is the SHAPE attribute. Currently, the only supported shape in client-side image maps is the rectangle. To define a rectangle, type SHAPE="RECT" inside the <AREA> tag.

    Figure 13.30 :

    Figure 13.31 :

  8. The next step is to define the coordinates of your rectangle. Determine the x and y coordinates of the upper-left and lower-right corners of your rectangle and type them in using the COORDS= attribute. For example, if your rectangle started at the upper-left corner of the image (coordinates 0,0) and extended 80 pixels wide and 40 pixels down, you would type COORDS="0,0,79,39" inside the <AREA> tag.

    Figure 13.32 :

  9. Now you need to provide the URL of the link that is activated when the user clicks in this region. Inside the <AREA> tag, type HREF=, followed by the name of the URL in quotation marks. You can use either a full URL or a relative URL. For example, to link to another HTML document in the same directory as the active document, type HREF="newdoc.html".

    Figure 13.33:

  10. In some cases, you might want to define a clickable region with no hyperlink. Instead of using the HREF attribute, type NOHREF. When a user clicks on this region, no action will be performed.
  11. Create <AREA> tags for each of the remaining clickable regions you want to define.

    Figure 13.34:

  12. Type </MAP> to finish the image map definition.

    Figure 13.35 :

  13. Your client-side image map will now work with Netscape browsers. However, if you want your image map to work with other browsers, you'll need to make it function as a normal image map as well. The first step is to add the ISMAP attribute to the IMG tag. Netscape browsers will use the map specified in the USEMAP attribute. Other browsers will ignore USEMAP and use ISMAP instead, treating this image as a server-based clickable image map.

    Figure 13.36 :

  14. To make your image map work as a server-side map, you will also need to enclose it with an anchor element that links to a map file stored on the server. Obviously, you will also need to create the map file itself. Refer back to Chapter 12 for instructions on creating a server-based image map. The accompanying screen shot shows what a dual image map reference might look like.

    Figure 13.37:

  15. Save your HTML document and test the client-side image map with your Netscape browser.

    Figure 13.38: