by Stig Erik Sandø
Netscape is. By most standards, there is nothing more to say. Netscape is probably the hippest, coolest, dandiest, most loved, and most hated Web browser of them all. Every self-respecting Net surfer has noticed imposing Ns and Netscape logos everywhere, and three out of four surfers may have noticed the renowned N in the corner of their very own browsers.
Why does the Netscape Navigator (hereafter just called Netscape)
generate such strong feelings and cause such a big furor? It is,
after all, just another Web browser, right? Basically, Netscape
is "just another browser," or at least it started out
that way in October 1994 when Mosaic Communications released the
first beta version. Netscape was then (and still is) a very good
browser that did its job with style and seldom crashed. It was
faster and easier to use than NCSA Mosaic, which was the hot browser
at the time. There was no trouble in paradise, and everyone was
happy until March 1995, when some new and useful HTML enhancements
were added to Netscape; for example, a tag to center text and
pictures. All in all, a centered header or a picture is really
quite nice. The fact that the accepted standards lacked a general
center tag was the problem. Netscape Communications Corporation
(which was its new name) had not proposed the additions to the
Web committees and subcommittees and gone through a lengthy process
until the additions became part of the accepted standard, which
is about as close you can come to committing deadly sins on the
Net. All other browser vendors had more or less grudgingly agreed
to wait for HTML 3.
| NOTE |
Hypertext Markup Language (HTML), an easy-to-use layout language, is the foundation of nearly every Web page. With millions of Web pages and dozens of computer architectures and operating systems, it is of vital importance that HTML is standardized so your computer and your software can display all Web pages properly, and that the rest of the world is also able to enjoy your Web pages fully. HTML currently has two accepted standards: HTML 1.0 and HTML 2.0. As of September 1996, the current discussed standard is HTML 3.2 and all references to HTML 3 in this chapter are to the HTML 3.2 Working Draft (September 9, 1996). The discussion is not moving very fast and might not be very interesting to the average Web user. However, a big part of the Web, and the Net itself, has evolved from discussions in various committees and subcommittees, and this dialog is generally considered to be the best way of reaching good standards on the Net. The latest HTML standards and documents connected to Web standards can be found at the WWW Consortium's Web pages at http://www.w3.org/. |
Netscape has implemented a variety of new HTML extensions in its latest versions, which have more or less revolutionized Web design, providing sites all over the Net with new and intriguing possibilities not available in HTML 2. As of September 1996 the newest version of Netscape, 3, includes among other things a news- and mail-reader, an HTML editor, and support for Java applets, JavaScript, and many other plug-ins. Other browsers, such as Microsoft Internet Explorer (MIE) and Spyglass Mosaic, to name a few, have adopted many of Netscape's extensions, and many of these extensions one can be fairly certain that most browsers will accept.
However, extension users must be careful to allow people with older versions of Netscape and other not-so-dandy browsers to access the information created with the extensions. The cheeky chaps at Netscape have more or less created their own standard, and HTML 3 is, as of September 1996, not yet completed.
Sound advice and good technical information will enable you to create trendy Web pages and ensure everyone of a satisfactory result, regardless of the browser being used.
The basis of all HTML is the structure of the document, something it has inherited from its "foundation," the Standard Generalized Markup Language (SGML). HTML is defined by an <HTML> element, which again is divided into a <HEAD> and a <BODY> element. The <HEAD> element is generally used for the document title, special commands for the browser, and simple input fields. The <BODY> element is quite simply your document with all the text and pictures.
Netscape extends a few of the typical <HEAD> elements in HTML. Netscape 1.0 adds a PROMPT attribute to the <ISINDEX> element, which enables you to get rid of the dreadful standard message:
This is a searchable index. Enter keyword(s)
<ISINDEX> is mainly used with CGI scripts that accept the GET method and is not of much use in forms. MIE supports the PROMPT attribute, and it is part of HTML 3. Listing 27.1, searchable.html, shows an example of basic HTML structure and how to use the PROMPT attribute.
Listing 27.1. searchable.html.
<HTML> <head> <title>This is THE gourmet-database</title> <isindex prompt="Please enter the name of the delicious food you wish our cook to serve:"> </head> <body> <P>Welcome to the Restaurant at the End of the Universe. </P> </body> </HTML>
Netscape 1.1 introduced the <META> elements, which give commands directly to the browser. Including the following line in the <HEAD> causes the document to refresh itself in 10 seconds:
<meta http-equiv="Refresh" content=10>
You have just given the browser an order, which it has to obey. If you like the idea of ordering other people's browsers around, you can order other browsers to do even more. Let's say that you want all browsers peeking into your newly created virtual bathroom on the Web to peek into your neighbor's bathroom. Just include a rather complex tag such as this in your bathroom .html file:
<META HTTP-EQUIV="Refresh" CONTENT="42; URL=http://www.neighbour.se/bathroom.html">
You're actually telling the browser that after 42 seconds it should
tiptoe along and look in bathroom.html at www.neighbour.se.
| CAUTION |
You must place all <META> tags in your <HEAD> element and before any text or images. If you want to order the browser to load another URL, give the full address to the URL, not a relative URL |
The HTTP-EQUIV and CONTENT tags translate their contents into an HTTP response header, which you might use directly from your CGI scripts. The format is given as the values of
HTTP-EQUIV: CONTENT
The previously mentioned bathroom redirecter produces an HTTP response header, which would look like this:
Refresh: 42; URL=http://www.neighbour.se/bathroom.html
The <BODY> element is the main element of HTML and contains all the text and graphics. Netscape 1.1 added attributes to the BODY tag, which enable you to choose background color, background images, and the color of the text. The different <BODY> attributes are part of the proposed HTML 3, and both Spyglass and MIE support the attributes. A peek at the HTML reveals this format:
<BODY BACKGROUND="image_url" BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb">
You thought the META stuff was difficult? This code seems even more confusing, but you're in luck; the format is simpler than it looks. The attributes in the preceding <BODY> element can be summarized as follows:
To specify the colors accurately for the preceding attributes you need the tricky "#rrggbb"s, which really are hexadecimal red-green-blue codes for the color. An example of a valid value is #f0a543 where f0 is the amount of red, a5 is the amount of green, and 43 is the amount of blue; the result is a shiny, happy orange color. Don't worry; a sane system supposedly lurks behind the scheme. Play around with the numbers, and you might get lucky. (The maximum number of combinations is only 16.8 million.) You might even understand the system.
A good way to find colors, for example, is to search the Net for a color table that has the color in a more readable language, as well as the matching hex number. You can also check if your favorite drawing program supports this system and has a color picker (most do), or just grab the color of a Web page you like with a peek at the HTML source. If you are certain that all your visitors will be using Netscape 2.0 or higher, you can write the color directly, as shown in the following example:
<BODY BGCOLOR="orange">
Voilˆ, a bright orange color. Naming colors may work for Netscape 1.1, MIE, and Spyglass, but even then you can name only the most basic colors. I recommend the use of hex numbers to maintain portability. Listing 27.2, bodysnatcher.html, is an example of a full document with BODY attributes and a META tag.
Listing 27.2. bodysnatcher.html.
<HTML>
<head>
<title>A body more or less..</title>
<META HTTP-EQUIV="Refresh" CONTENT="42; URL=http://localhost/nextbody.html">
</head>
<body bgcolor="#808000" text="#000000" link="#ff0000"
alink="#ffff00" vlink="#0000ff">
<h1>The snatching of a body</h1>
<P>Once upon a time someone took a closer look at
a body with olive background, black
text, and an anchor to
the <a href="index.html">index</a> which is red
when the document it links to has not been visited,
is yellow when you click it and finally becomes blue
when you have visited the document it links to. When you've looked at
the page for 42 seconds it goes off to
find <b>http://localhost/nextbody.html</b>
</P>.
</body>
</HTML>
The core and value of Web sites are the information they provide, but the presentation has become almost as important. The new Netscape extensions to HTML give users much more control of the appearance of text and other information.
Earlier in the chapter, I mentioned that HTML 2.0 lacks decent tags to align pictures and text. Netscape's controversial <CENTER> tag enables everyone to center text, pictures, and other elements. The problem with Netscape's <CENTER> tag was that it did not fit 100 percent into HTML's structure.
HTML 3 defines the alignment of elements as an attribute and not as an element. Here is an example of an html 3-compatible tag:
<p align=center>
Netscape allows the following ALIGNs: LEFT, RIGHT, and CENTER. Netscape supports this form of aligning in paragraphs <P>, divisions <div>, horizontal rulers <HR>, and headers <Hx>.
I recommend that instead of using the <CENTER> tag, you use the more powerful division tag <DIV> with an appropriate ALIGN attribute. The tag
<DIV ALIGN=center>
is in practice equal to Netscape's <CENTER> tag. As of April 1996 only Netscape 2 and later supports the <DIV> tag, but most browsers will probably support it soon. To get the expected result from most browsers, you can use both tags, as shown in the following example:
<DIV ALIGN=center><CENTER>Text, Pictures and other centered elements</CENTER></DIV>
The implementation in other browsers varies widely. Some stay close to the philosophy in HTML 3, others copy Netscape's extensions directly, and others wait patiently for HTML 3 to be an accepted standard.
The regular text is pretty daft, and one sometimes wishes to spice it up. Luckily, Netscape gives you the opportunity to manipulate the size of your fonts directly, and the latest version lets you color the text, too. The <FONT> tag in Netscape 2 and later and the proposed HTML 3 currently has two attributes: SIZE and COLOR. The format is
<font size=value color="#rrggbb">
The COLOR value accepts the same values as the various color attributes used in the <BODY> tag. The default SIZE value is 3, and the SIZE attribute accepts values between 1 and 7. You can also use positive and negative values, such as +1 and -2, as size values, which adjusts the font size relative to the size of the base font.
Normal font here and <font size="+3" color="#ffffa3"> very large colored font here</font>
You probably noticed that you can make every letter in different sizes and colors, but take my advice...don't!
You can also specify how you want the general font in the document to be with the <BASEFONT> tag:
<basefont size=value color="#rrggbb">
Netscape extends text formatting beyond the capability to merely format font sizes and colors. The browser accepts several fast and easy tags for formatting text where the actual size is relative to your settings and your browser.
These tags are supported by Netscape 1.1 and later and HTML 3, but not yet by many other browsers. The subscript and superscript tags may be very useful and are apparently the crude beginnings of a <MATH> element, which is sorely needed. Listing 27.3, texted.html, makes all these new extensions a bit clearer.
Listing 27.3. texted.html.
<html>
<head> <title>Catching the bus</title> </head>
<body bgcolor="#ffffff">
<basefont size=3 color="#000000">
<div align=right>
<h2 align=center>Centered Hitchhiking</h2>
<p align=left>This text is aligned to the left</p>
<p>This text is aligned right in Netscape 2.0 because
of the <DIV>-tag, but is on the
left side in Netscape v1.22</P>
<p align=center>These <big>BIG</big> letters and these
<small>small</small> letters are centered.</p>
<p>The formula of water in blue <small>(only Netscape 2.0)</small>
is <font size="+2" color="#0000ff">H<sub>2</sub>O</font></p>
</body>
</html>
With Netscape's extensions you get even more control of your lists than HTML 2. The basic unnumbered list <UL> has a different bullet for every indented level. Now you can choose the type of bullet with the TYPE attribute, which accepts disc, circle, and square. To produce an unordered list with circled bullets, you use
<UL TYPE=circle>
The numbered list <OL> also has a TYPE attribute. The allowed TYPEs include
If this variety is not enough for you, you can start your list with values other than 1 by using the START attribute in the <OL>:
<OL START=4>
starts counting on 4, and based on the TYPE, you get D, d, IV, iv, or 4.
You may also change the TYPE in the list element <LI>. The list tag <LI> accepts the same TYPEs as the list it is part of (for example, you may specify discs and other markers for an unnumbered list <UL>). An <LI> in a numbered list can also specify a specific value, but this changes the counting for all subsequent items. To specify a list element <LI> with the value 3, type the following:
<LI VALUE=3>
HTML 3 supports all of these extensions and some browsers have adopted some of the attributes; for example, MIE supports the VALUE in <LI> elements. These extensions are nice and dandy, but avoid making your information dependent on them due to the different representation in the various browsers. If you need different bullet shapes and want your HTML to be portable, try using the image element <IMG> with appropriate images. Listing 27.4, enlisted.html, contains a more extensive example of the list tags.
Listing 27.4. enlisted.html.
<html> <head> <title>A few small lists</title> </head> <body bgcolor="#ffffff"> <basefont size=3 color="#000000"> <h2 align=center>Available Jobs</h2> <big>Pentagon:</big> <ul type=square> <li> HTML-designer </li> <li type=circle> OO-Wizard </li> <li type=disc> CGI-programmer </li> </ul> <hr> <h2 align=center>Where to go?</h2> <big>Nice places (in order):</big> <ol type=I> <li> Norwegian Fjords </li> <li> Stonehenge</li> <li value=2> Bermuda </li> <li> Taj-Mahal </li> </ol> </body> </html>
The <HR> element defines a horizontal ruler, which most browsers draw as a shaded line. Netscape has added these extra attributes to the <HR> tag:
HTML 3 supports all of these attributes and major browsers such as MIE and Spyglass Mosaic also accept them.
Listing 27.5, rulersofWeb.html, sums up the rulers quite nicely.
Listing 27.5. rulersofWeb.html.
<html>
<head> <title>To rule or not to rule</title> </head>
<body bgcolor="#ffffff">
<basefont size=3 color="#000000">
<h2 align=center>Rule the world, please</h2>
<P>Basic ruler:</p>
<hr>
<P>A halfscreen centered ruler:</p>
<hr width="50%" align=center>
<P>A noshaded 10 pixels thick ruler,
aligned right and with a width of 125 pixels:</p>
<hr size=10 width=125 align=right noshade>
</body>
</html>
The Web's capability to combine text and images has probably made it the most popular application of the Net. For example, pretty ladies, flashy logos, and small, colorful buttons seem to be just about everywhere. Netscape has several new tags and new attributes for already existing tags that facilitate the use of images in documents. Unfortunately, the Net is still painfully slow, and image loading takes most of the time. The following section suggests a few tricks that you can try to help your users access your images more quickly.
The core of images in HTML is the <IMG> element, and Netscape has made this element one of the most extensive. Here is the format of the <IMG> element:
<IMG SRC="image_url" ALIGN=alignment WIDTH=value HEIGHT=value BORDER=value VSPACE=value HSPACE=value ALT="text" LOWSRC="image_url" USEMAP=#map ISMAP>
The SRC attribute names the URL of the image and is the main part of the <IMG> element. The ALIGN attribute extends the TOP, MIDDLE, and BOTTOM values in HTML 2 to quite a few new values:
The floating alignment in LEFT and RIGHT are so useful that you'll soon want to jump to the end of the picture with a simple tag. Netscape allows you to do so by extending the <BR> tag with a CLEAR attribute. The <BR> tag usually inserts a regular line break, but the CLEAR attribute can add a vertical jump that you specify and is very useful when you are working with images.
The CLEAR attribute currently accepts three values:
This system is not very difficult to use, as Listing 27.6 clearly shows. It loads myWebPictures/sheep.gif, aligns it to the left, and prints some text.
Listing 27.6. sheepy.html.
<html>
<head> <title>Sheepish look</title> </head>
<body bgcolor="#ffffff">
<basefont size=3 color="#000000">
<h2 align=center>Sheep</h2>
<p align=center>As defined by: Oxford Advanced Learner's Dictionary</p>
<img src="myWebPictures/sheep.gif" align=left>
<b>sheep</b>:
<ol type=i>
<li>grass-eating animal with thick fleecy coat, kept in
flocks for its flesh as food and for its wool.</li>
<li>(idm) <b>like 'sheep</b> too easily influenced or led by others</li>
</ol>
</body>
</HTML>
The image sizing is built into Netscape with the <IMG> attributes HEIGHT and WIDTH. These attributes allow you to resize your picture and give the size either in pixels or as a percentage of the browser window. Whatever size you give it, Netscape and other good browsers stretch and squeeze the picture until it has the proportions you want.
Another benefit of this feature is that Netscape does not have
to query the server for the size of every image when it creates
the layout. Because the browser does not need to connect to the
server to check the size of the images, the page can load more
quickly.
| NOTE |
Remember that the image sizing feature is no excuse for putting larger images on your pages. Keep your images as small as possible! |
Most browsers and HTML 3 have adopted these sizing attributes, and you should use them whenever possible.
Somewhere along the line you might want to let your images link to bigger, better, and meaner places. If you try
<a href="searchable.html"><img src="myWebPictures/sheep.gif"></a>
you get a colored border around your image. Everyone knows that a color border is clickable and always leads to some fun, but if you already have a well-designed page where "looks are everything," you might want to make the border unique. Netscape and most other browsers enable you to change the size of your border in pixels with the BORDER attribute. If you want a border but want it invisible, just set the BORDER attribute to zero. To make an invisible link to searchable.html on the sheep picture write the following line:
<a href="searchable.html"><img src="myWebPictures/sheep.gif" border=0></a>
When you let your text flow around your images, which creates a very nice effect, you may notice that the text is clinging to the image. A little extra space, or Lebensraum, for your images can improve the look and make the text more readable. Most browsers support the horizontal HSPACE and vertical VSPACE space attributes.
<a href="searchable.html"> <img src="myWebPictures/sheep.gif" border=0 hspace=8 vspace=4> </a> <P>Lots and lots of text that has been moved 8 pixels away from both sides of the image, and 4 pixels away from the bottom and the top of the image.</P>
| NOTE |
HTML 3 supports the border attribute and the two SPACE attributes |
If you're worried about the slow Net and that people will never see the giant-size pictures you have on your page, one more trick might help you. This trick is not used very much, which is a pity, and unfortunately, it works only with Netscape and has yet to be included in HTML 3.
Suppose you have a huge picture that takes eons to download even if you have set the WIDTH and HEIGHT attributes correctly, like this picture of a big sheep:
<img src="myWebPictures/bigsheep.jpg" height=410 width=282 ALT="My giant sheep">
Consider adding a smaller picture for people to watch while the huge one downloads. When all other text and pictures are loaded, Netscape downloads the big picture and puts it in its rightful position. To implement this magic, include the LOWSRC attribute in your <IMG> tag, pointing to the image you want to load first:
<img src="myWebPictures/bigsheep.jpg" height=410 width=282 lowsrc="myWebPictures/sheep.gif" ALT="My giant sheep">
| NOTE |
Remember that both pictures use the same image size. If you don't specify the size, Netscape uses the LOWSRC's image size. Specify the large picture's size and the LOWSRC picture will be stretched and squeezed to fit the area. The LOWSRC attribute can point to any image of any size. |
Netscape also supports interlaced GIFs, animated GIFs (GIf89a), JPEGs, and other image formats.
Image mapping is one of the impressive features that gives the Web a true feeling of a point-and-click interface. The problem until now is that all image maps had to depend on CGI scripts on the server. Netscape 2.0 has made image mapping easier with its implementation of client-side image maps, which the browser, instead of a remote server, parses and interprets. The best part of this feature is the simplicity, and it allows everyone to create outstanding image maps. All you have to do is to define a "map," and include the USEMAP attribute in your <IMG> tag.
The syntax of the USEMAP attribute is
<IMG SRC="image_url" USEMAP="map_url#mapname">
where #mapname specifies the name of the map in the map file. The <MAP> element describes the different regions and parts of the image. The default syntax of a <MAP> element is
<MAP NAME="name"> <AREA [SHAPE="rect"] COORDS="x,y,.." [HREF="reference"] [NOHREF]> </MAP>
So far, Netscape has implemented only one SHAPE-RECT-which
is a rectangle whose coordinates are specified as "left,
top, right, bottom." The HREF attribute points to
a URL relative to the file that contains the map. To
use another URL as base, include a <BASE HREF="url">
in the document. The NOHREF tells the browser that clicking
in the specified NOHREF region does not lead to any action,
which enables you to make a "hole" in an otherwise hot-linked
area. If a region is not specified at all it will not lead to
an action.
| TIP |
If you define regions that overlap other regions (like a hole in an otherwise hot-linked area) declare the smaller region (like the hole) first. The general rule is that if two or more areas overlap, the first region defined in the map takes precedence over subsequent regions. |
Listing 27.7, buttons.html, shows how to use buttons in a real-life, client-side image map for Netscape 2 and later.
Listing 27.7. buttons.html.
<html> <head> <title>Buttons which was used in Real Life</title> </head> <body bgcolor="#000000" text="#fffff0" link="#ffff00" vlink="#00ff00" alink="#00ff00"> <P align=center> <img border=0 alt="Main Buttons" usemap="buttonmap.html#mainlinks" src="myWebPictures/mainbut.gif"> </P> <base href="http://www.ii.uib.no/~stig/NetscapeChapter/"> <map name="mainlinks"> <area shape="rect" coords="1,1,90,28" href="index.html"> <area shape="rect" coords="1,28,90,56" href="information.html"> <area shape="rect" coords="1,56,90,84" href="tome.html"> <area shape="rect" coords="1,84,90,112" href="trivia.html"> <area shape="rect" coords="1,112,90,140" href="newspaper.html"> <area shape="rect" coords="1,140,90,168" href="world.html"> <area shape="rect" coords="0,0,91,169" nohref> </map> </body> </HTML>
Notice how the <BASE> tag specifies the base URL, which all the following relative URLs use. When the <BASE> tag has not been used, the browser will use the document's URL.
A table is a collection of cells divided into rows and
columns. An HTML table consists of several containers for your
data. Netscape 1.1 implemented the tables in the proposed HTML
3 specification. Simply stated, tables are probably the most powerful
Web design tools you can use on your Web pages.
| CAUTION |
When you use tables, you have the opportunity to make a lot of mistakes. The best advice is to stick rigorously to the syntax. Tables are constantly under development, both by Netscape, other browsers, and in HTML 3, so new tags and attributes might show up. Unfortunately many browsers don't support tables fully, and your pages might in some cases be totally unreadable. |
The basic table tag is <TABLE>, which contains the whole table. The table tag has several attributes:
The table row tag <TR> defines all rows and may define specific attributes for all cells in that row. All table cells are either left-aligned, normal data cells <TD> or centered, bold table headers <TH>. You can also give the table a caption in a <CAPTION> tag. All table tags share the following attributes:
Listing 27.8, aNiceTable.html, shows how to create a table that contains basic information. You must understand how to create a table because Listing 27.9, newspaper.html, combines all I've shown so far and makes heavy use of tables.
Listing 27.8. aNiceTable.html.
<html>
<head> <title>A nice table</title> </head>
<body bgcolor="#ffffff">
<table border=10 align=right>
<caption align=top><font size="+3"
color="#005500">Fiscal Budget</font></caption>
<tr> <th> </th> <th>March</th> <th>April</th>
<th>May</th> <th>Total</th> </tr>
<tr valign=top>
<td><b>Money In:</b></td> <td>15.8</td>
<td>16.8</td> <td>16.6</td> <td> </td>
</tr>
<tr valign=top>
<td><b>Money Out:</b></td> <td>5.7</td>
<td>1.2</td> <td>10.3</td> <td> </td>
</tr>
<tr valign=top>
<td><b>Difference:</b></td> <td>10.1</td>
<td>15.6</td> <td>6.3</td> <td nowrap>32.0</td>
</tr>
</table>
<h2 align=center>An easy table</h2>
<P>
In Netscape 2.0, this table is right-aligned, but
in Netscape 1.1 it is left-aligned.
Apart from that they're equal. As you can see, it
is now possible to create spreadsheets and other tables with relative ease.
Several other good examples of
tables are available at
<a href="http://www.netscape.com/">Netscape's</a> Homepages.
</P>
</body>
</HTML>
Listing 27.9, newspaper.html, uses most of what has been described in this chapter to create the newspaper Sheep Times. An intriguing part of newspaper.html is the small subtable with a border that is placed within a data cell. Creating a newspaper is just one of the many things you can do with tables.
Listing 27.9. newspaper.html.
<html>
<head> <title>A REAL Newspaper</title> </head>
<body bgcolor="#ffffff">
<div align=center> <center>
<img src="myWebPictures/stimes.gif">
<table bordeR=0 width="100%" cellpadding=4>
<tr>
<td><a href="index.html"><img src="myWebPictures/arrowxmb.gif" border=0
alt="Back"></a></td>
<td><b>Issue 12</b></td>
<td><b>Woolmonth</b></td>
<td><b>$0.00</b></td>
<td><b>Netscape-Enhanced</b></td>
<td align=right><a href="aNiceTable.html">
<img src="myWebPictures/arrowxma.gif" border=0 alt="Forward"></a></td>
</tr>
<tr>
<td colspan=6> </td>
</tr>
<tr valign=top>
<td rowspan=5 colspan=4>
<img src="myWebPictures/sheep2.gif" align=left
alt="His Royal Sheepiness" border=2 hspace=10
vspace=5>
<P><big>His Royal Sheepiness proposes to the Web</big></P>
<font size="-1">
<P>This morning His Sheepiness proposed to his
beloved Net. The romance has
been known for several months, but His Sheepiness has been to shy to
propose to his beloved. We hope that they both will live long, prosper
and grow fine wool.</P>
<P align="right"><b>Read more on Page 12</b></P></font>
</td>
<td colspan=2>
<table border=1>
<tr><td><b>In this issue:</b></td></tr>
<tr><td colspan=2><img src="myWebPictures/ballxgre.gif"
hspace=8>Lamb-Psychology</td></tr>
<tr><td colspan=2><img src="myWebPictures/ballxpin.gif"
hspace=8>Sheep-cults</td></tr>
<tr><td colspan=2><img src="myWebPictures/ballxgre.gif"
hspace=8>Where the wool go</td></tr>
<tr><td colspan=2><img src="myWebPictures/ballxpin.gif"
hspace=8>News and Rumours</td></tr>
</table>
</td>
</tr>
</table>
</center> </div>
</body>
</HTML>
Netscape 2.0 introduced frames to Web users. Frames allow you
to split your browser window into several separate, independent
regions. The possibilities of frames are nearly endless. You may
now, for example, have a constant set of quick links in one part
of the window, normal browsing in another part of the window,
and a totally different set of tools in some other region of the
window. Frames enable you to, among other things, target links
to other regions, create new windows, and retrieve multiple documents.
When you use frames with JavaScript functions, they can become
very powerful.
| CAUTION |
Frames are not part of the proposed HTML 3 standard and the whole concept of frames is under development in one of the many Web specifications at the WWW-Consortium. |
The code for implementing frames is fairly easy and resembles the table syntax. Frames are generated by <FRAMESET> tags, <FRAME> tags, and FRAME documents. You need a main page that sets up the frames and loads the framedocuments into the different parts of the window.
The main container is the <FRAMESET>, which defines the <FRAME> information area. The tag has two attributes COLS and ROWS; each defines a list of comma-separated values that may be in pixels, percentages, or the special, relative-sized * sign that depends on the other values for its size. All values are scaled to a total of 100 percent. For example, the following line divides the screen in three parts:
<FRAMESET COLS="100,*,30%">
The first column has a width of 100 pixels, the last column has a width of 30 percent of the width of the browser window, and the column in the middle uses the rest of the space.
You put <FRAME> tags, which define names of the different frames and their content, into the <FRAMESET> area. The <FRAME> tag has the following attributes:
Another special tag is the <NOFRAMES> tag that contains information that browsers with frames ignore. Listing 27.10, framed.html, is a frame document that calls Listing 27.11, framedata.html, into its three frames. To allow other browsers to read the content, framed.html gives an anchor to the framedata.html file.
Listing 27.10. framed.html.
<FRAMESET COLS="150,*">
<NOFRAMES>
<html>
<head> <title>A framed document</title> </head>
<body bgcolor="#ffffff">
<h1 align=center>You've been framed</h1>
<P>This document should be read by a
frame-capable browser. The document which is
framed may be <a href="framedata.html">found</A>
even if you don't have the latest
version of Netscape.</P>
</body>
</html>
</noframes>
<frameset rows="100%">
<frame src="framedata.html" name="frame1">
<frame src="framedata.html" name="frame2">
</frameset>
</frameset>
Listing 27.11. framedata.html.
<html>
<head> <title>A framed document</title> </head>
<body bgcolor="#ffffff">
<h1 align="center">Frames may be useful</h1>
<P>You've now created a frame and put a document in it.
You should now have two frames,
with this document in both. Congratulations</P>
</body>
</HTML>
Now when you have the power to create windows or frames within the browser, you soon might want to specify into which frame a document should be loaded or targeted. You can add the following attribute to elements that load other documents:
TARGET="window_name"
You may add TARGETs to anchors, the <BASE> tag, the <AREA> tag (Imagemaps), and <FORM> tags. Any window_name that begins with an alphanumeric character is valid.
Some TARGET names are special and have a special effect; all the special TARGET names begin with an underscore.
If you use frames, always remember to have a <NOFRAMES> area where people with other browsers can read the information.
Java is the trendiest stuff on the Web nowadays, and Netscape has included Java in its browsers for most UNIX flavors, the Macintosh, Windows 95, and Windows NT. Java is a full programming language with special libraries for the Web that was developed by Sun Microsystems. On the Web, you can find several compiled byte codes (Java classes), which are often referred to as Java applets. You can use on your home page applets you find on the Web.
Netscape and other Java-capable browsers have their own <APPLET> tag, which has the following syntax:
<APPLET CODEBASE=codebaseURL CODE=appletFile ALT=alternateText NAME=appletInstanceName WIDTH=pixels HEIGHT=pixels ALIGN=alignment VSPACE=pixels HSPACE=pixels> <PARAM NAME=appletAttribute1 VALUE=value> <PARAM NAME=appletAttribute2 VALUE=value> . . . </APPLET>
The attributes you must include are CODE, HEIGHT, and WIDTH. The others are optional. Refer to a Java manual for more information on the parameters and other attributes not explained earlier in this chapter. To create your own Java applets, you need a Java compiler, which is now available on most computers with 32-bit architecture (most UNIX flavors, Windows 95/NT, and some Macs). You can learn more about Java at Sun's Java pages at http://java.sun.com/ or in the newsgroup hierarchy comp.lang.java.
Another great invention is JavaScript, which is a programming language in your browser. JavaScript is easier to use than Java and has some nifty features that may be of use to anyone who makes Web pages. You can get more information about JavaScript either at Netscape's home page at http://www.netscape.com/or in the newsgroup comp.lang.javascript.
Netscape has created even more additions to HTML. Among them is the dreaded and much hated <BLINK> tag. Don't even think of using it.
Netscape has also added an ENCTYPE attribute to the <FORM> tag that allows you to write forms that take a file as input. This feature is quite useful for larger systems with the Web as their interface.
<FORM ENCTYPE="multipart/form-data" ACTION="url_to_fileParser" METHOD=POST> Send: <INPUT NAME="inputfile" TYPE="file"> <INPUT TYPE="submit" VALUE="Send File Flying"> </FORM>
| NOTE |
With the ENCTYPE attribute you can specify with which MIME format the form's content should be encoded. The attribute is mainly for CGI programmers who want to use other encoding methods than the standard encoding. Don't mess with it if you're not sure what you're doing |
To print characters in HTML documents that are not part of the main ASCII character set, HTML uses what is called entities. HTML 2 defined a list of entities that enabled me, among other things, to put the character ¿ at the end of my name with the entity Ø. Netscape has introduced two new entities, which also have been adopted by HTML 3:
Netscape's browser is in constant development, and updated information is available at Netscape's home page at http://www.netscape.com/. You should check this site frequently.
Netscape has so far been by virtually all standards the best and most powerful Web browser around, and the cheeky chaps at Netscape have introduced many new and eminent concepts to the Web. Unlike other notable browsers, Netscape is made for virtually all computer platforms, which again makes it available to everyone and not just people running Windows 95. This makes Web pages written with the help of Netscape's HTML extensions available to just about every Web surfer, ranging from top-notch scientists with beefy UNIX workstations to tea-drinking landladies with Macintoshes.
The extensions to HTML and the Web that have come from Netscape are rapidly becoming tomorrow's standards, and taking advantage of the many extensions to make a tremendous page should not be considered a sin. Be careful when you use the newest and hippest extensions, because not everyone is using the funkiest browser, and letting the browser-challenged get an unreadable Web page will not serve much of a purpose. The best advice if you want to use some effort on your Web design and have a fairly beefy machine is probably to grab a couple of browsers and install them on your computer and check what your pages look like with other browsers before you put your pages on the Web. Due to the vast difference between Netscape 1.x and Netscape 2.x/3.x, getting both versions is a good solution if you want to make sure everyone gets a satisfactory result.
Filling your hard disk with 20 different browsers to check just a couple of HTML files is, however, not a very good solution. Using the hints and guidelines in this chapter will probably let your pages be understood by most (if not all) browsers in existence and provide the best possible end result for everyone. Make an option for other browsers whenever you use the coolest and most fancy stuff-frames, tables, Java, and JavaScript to name a few-because there is nothing people hate more than the message
"Sorry, you cannot access this page because you don't have a browser that supports all the fancy extensions I have filled my incredible and gigacool pages with"
Most of the Netscape extensions have been adopted by proposed HTML 3 standard and the different HTML specifications, which means that eventually other browsers will try to catch up with the standard Netscape has set. This makes your immensely good and Netscape-extended Web pages available to an even larger audience and lets everyone enjoy them. So don't be afraid to use the many good extensions in your Web pages, but give the people that have not downloaded Netscape yet a chance to enjoy your Web pages, too.