For the latest information on the HTML specs, visit W3C's Web site at http://www.w3.org/pub/WWW/MarkUp/.
Copyright ©1996, Que Corporation. All rights reserved. No part of this book may be used or reproduced in any form or by any means, or stored in a database or retrieval system without prior written permission of the publisher except in the case of brief quotations embodied in critical articles and reviews. Making copies of any part of this book for any purpose other than your own personal use is a violation of United States copyright laws. For information, address Que Corporation, 201 West 103rd Street, Indianapolis, IN 46290 or at support@mcp.com.
Notice: This material is excerpted from Running A Perfect Web Site with Apache, ISBN: 0-7897-0745-4. The electronic version of this material has not been through the final proof reading stage that the book goes through before being published in printed form. Some errors may exist here that are corrected before the book is published. This material is provided "as is" without any warranty of any kind.
In the last chapter, you learned enough HTML tags to start authoring your own pages. Additionally, because these tags are known to almost every Web client program, the documents you write with them should be acceptable to all HTML 2.0-compliant Web browsers.
If you're like most Web authors though, you'll find yourself wanting finer control over your documents before too long. When you reach this point, you're ready to expand your command of HTML to include more advanced tags and tag attributes. But the control comes with a price: many of these advanced HTML entities are not understood by all browsers. Indeed, some of them can only be parsed by one browser! So as you include more advanced features, you increase the chances of "alienating" visitors from your site.
This chapter examines advanced HTML tags from three sources: the HTML 2.0 spec, which attempts to outline the currently accepted HTML standard; the proposed HTML 3.0 spec (which is formally expired, but still the basis for most future HTML work), which promises greater capacity for mathematical expressions and general layout control; and the Netscape extensions to HTML, which can only be properly rendered by the Netscape Navigator browser and other browsers which have chosen to be compatible with Netscape. In particular, you'll learn how to implement:
HTML was developed in 1990 at CERN, Europe's major research laboratory for high-energy physics. CERN's intent behind developing the World Wide Web and HTML was to facilitate a global exchange of research information among physicists. This was during a time when the Internet was still used largely for military, research, and academic purposes. The scientists at CERN probably did not anticipate that the Web would evolve into the popular application that it is today.
The evolution of the Web drove the evolution of HTML. The National Center for Supercomputing Applications (NCSA) at the University of Illinois released Mosaic, the first graphical Web client, in 1993, and its greatest claim to fame is a late night hack session which produced the <IMG> tag. Design became a greater issue as more people, desiring better looking pages, started using the Web. This shifted HTML's evolution in the direction of being a design language instead of just a way to mark up documents.
Last year, the HTML 2.0 specification was compiled and released as a Request for Comment (RFC) by the World Wide Web Consortium (W3C). The 2.0 spec sought to summarize the de facto HTML standard and describe how people should be using the HTML that was out there. Since then, the W3C and the Internet Engineering Task Force (IETF) have been considering proposals for future HTML revisions, along with the W3C.
What you are about to read is merely a summary of one instant in HTML's short but dynamic history. HTML will continue to evolve with the Web. The increasing popularity of Java and JavaScript have brought about the need for tags to build applets (Java "mini-applications") and script code right into HTML documents. Browser plug-in programs, like Macromedia's Shockwave, will drive the need for tags to embed other program items into Web pages. No doubt, in another year, the tags you are about to learn will be commonplace and newer tags will have taken their place on these pages.
For the latest information on the HTML specs, visit W3C's Web site
at http://www.w3.org/pub/WWW/MarkUp/.
As noted earlier, the HTML 2.0 spec was written to describe how HTML was being used at the time. The majority of the tags in this spec were covered in Chapter 10. Tags in the spec that were not covered in Chapter 10 are presented in the next three sections. These tags are "new" in the sense that this is the first place in the book that discusses them. They were not necessarily newly introduced as part of the HTML 2.0 spec.
To read the September 22, 1995 release of the HTML 2.0 spec, direct
your browser to http://www.w3.org/pub/WWW/Markup/html-spec/html-spec_toc.html.
If you've looked at many HTML files, you've probably seen a tag at the very beginning of the file that looks like:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
Such a tag is a Formal Public Identifier (FPI). FPIs are used to specify the set of rules that apply SGML to the markup tags in the text, and map directly to a Document Type Declaration (DTD) that exists somewhere. Most FPIs you'll see are like the one above, though there are others specific to HTML 2.0, HTML 3.0, and Netscape extensions to HTML.
You can check your documents' conformance to established DTDs by submitting
them to the HTML validation service at http://www.webtechs.com/html-val-svc/.
The site also provides information on each of the DTDs you can check against.
The 2.0 spec includes a number of tags beyond <BASE ...> and <TITLE> for the document head. Probably the most useful of these is the <META ...> tag, which is intended to contain document meta-information. <META ...> requires a name/content pair that can be specified by combinations of three attributes: HTTP-EQUIV, CONTENT, and NAME. HTTP-EQUIV is used to "simulate" an HTTP header right in the HTML document. If you don't use HTTP-EQUIV, then you should use the NAME attribute to give the meta-information a unique name. CONTENT is set equal to the meta-information itself.
An emerging application of the <META ...> tag is for bulletins - messages that Web authors can put on their sites to notify users of changes. Some <META ...> tags that set up a bulletin might look like:
<META HTTP-EQUIV="Bulletin-Text" CONTENT="You can now order from our new online catalog!"> <META HTTP-EQUIV="Bulletin-Date" CONTENT="Tues, 05-Mar-96 00:00:00">
The tags above would post a bulletin about the new online catalog at midnight on Tuesday, March 5, 1996. Web users who have bookmark management software that can receive bulletins would be notified of the new catalog by their programs.
The <META ...> tag can also be used to specify document keywords, expiration dates, and reply-to e-mail addresses. You can have as many <META ...> tags in the document head as you need.
Two other document head tags in the 2.0 spec are <NEXTID=n> and <LINK ...>. In the past, <NEXTID=n> was used to assign a unique numerical identifier (n) to a document. Nowadays it is rarely used and the spec discourages authors from including <NEXTID=n> tags in their HTML. The <LINK ...> tag takes the HREF attribute and specifies links to related documents. Related documents might include author information, indexes, glossaries, and earlier versions of the document. Just as with the <META ...> tag, you can put as many <LINK ...> tags in a document head as you like.
A handy attribute for ordered, unordered, and description lists is the COMPACT attribute, which compels a browser to render a list in the most space-efficient form that it can. To make a list compact, you simply include the COMPACT attribute in the list's starting tag. Figure 9.1 shows two versions of the same list. The first list is rendered normally and the second is compacted. The HTML to produce the second list is:
<UL COMPACT> <LI>HTML 2.0</LI> <LI>HTML 3.0</LI> <LI>VRML</LI> </UL>
Fig. 9.1 - The COMPACT attribute forces your browser to squeeze a list into the smallest amount of space possible.
The <A ...> tag picks up a few interesting, though infrequently used, attributes in the HTML 2.0 spec. The TITLE attribute is meant to suggest a title for the hyperlinked resource. REL and REV are attributes that describe a document's relationship to documents it links to or to documents that link to it, respectively.
The spec also mentions two sets of container tags: <XMP> ... </XMP> for marking up an example and <LISTING> ... </LISTING> for tagging a listing. These tag pairs were originally intended to work like <PRE> and </PRE> in that text between them was taken to contain no markup. However, not all browsers implement this intent consistently, so the spec discourages the use of these tags. You should stick with <PRE> and </PRE> instead.
The HTML 2.0 spec includes a set of tags used to produce online forms. Forms were an important step in the evolution of Web pages; they were the first means of user interactivity. Today forms are used to set up complicated database queries, conduct market research, take product orders, and collect user feedback. Once entered, form data is packaged and sent to a server for processing by a script. Scripts typically compose and return an HTML page as output.
See "Creating
Forms," (ch. 12), to learn how to construct HTML forms.
The HTML 3.0 specification is in the final stages of its development and contains some exciting proposals for expanding HTML's ability to well-formatted documents including:
The next several sections introduce many of these proposals.
Placing a <RANGE ...> tag in the document head allows you to set up a range in the document for searching. <RANGE ...> takes the CLASS attribute, which is set equal to SEARch to set up a search range, and the FROM and UNTIL attributes, which designate the beginning and end of the search range. A sample <RANGE ...> tag might look like:
<RANGE CLASS=SEARch FROM="startspot" UNTIL="endspot">
The "startspot" and "endspot" markers are set up in the body of the document using the <SPOT ID="startspot"> and <SPOT ID="endspot"> tags at the points where you want the search range to begin and end, respectively.
A number of HTML 3.0 proposals give authors greater control over page layout. One interesting proposal calls for the addition of <TAB ...> tag, which would allow you to set up your own tab stops in a document. To use a tab stop, you need to first define it using the ID attribute:
My first tab stop is <TAB ID="first"> here, followed by some other text.
The HTML above sets up the first tab stop in front of the letter "h" in the word "here." To use the tab stop, you use the <TAB ...> tag with the TO attribute:
<TAB TO="first">This sentence starts below
the word "here."
On the browser screen, the "T" in the word "This" will be aligned directly below the "h" in the word "here."
Other enhancements to layout control come in the form of new attributes to existing tags. For example, under HTML 3.0, you can center headings and paragraphs using the ALIGN=CENTER attribute in your <H1>-<H6> and <P> tags. Additionally, the CLEAR attribute will be available on many tags, giving you the ability to clear one or both margins or to leave a specific amount of space between page items.
When specifying a quantity of spacing, the units of the CLEAR attribute
can be in pixels, en spaces, or em spaces; for example, CLEAR="5 en"
or CLEAR="40 pixels."
Several new physical and logical styles are proposed in the 3.0 spec. Tables 9.1 and 9.2 summarize these additions. Closing tags are left out of the tables in the interest of space.
| Style Name | Tag | Rendering |
|---|---|---|
| Strikethrough | <S> | Text is struck through with a slash (/) |
| Big | <BIG> | Makes text bigger than its current size |
| Small | <SMALL> | Makes text smaller than its current size |
| Subscript | <SUB> | Makes text a subscript |
| Superscript | <SUP> | Makes text a superscript |
The HTML 3.0 spec says that <SUB> and <SUP> tags are only
appropriate inside the <MATH> and </MATH> container tags (discussed
below), but the Netscape Navigator browser recognizes these tags outside
of a mathematical context.
| Style Name | Tag |
|---|---|
| Abbreviation | <ABBREV> |
| Acronym | <ACRONYM> |
| Author name | <AU> |
| Deleted text | <DEL> |
| Inserted text | <INS> |
| Language context | <LANG> |
| Person's name | <PERSON> |
| Short quotation | <Q> |
Recall that logical styles are often rendered differently on different
browsers. You'll need to experiment to see how your HTML 3.0 compatible
browser renders these new styles.
Most of the new physical and logical styles are self-explanatory. Text marked with the <Q> style will appear in quotation marks appropriate to the document's language context. The <INS> and <DEL> styles are expected to be useful in the context of legal documents. The <PERSON> style marks a person's name for easier extraction by indexing programs.
The <DIV ...> and </DIV> tags work similarly to the <P> and </P> tags, except that <DIV ...> and </DIV> denote a special division of the document. The <DIV ...> tag takes the CLASS attribute, which describes the type of division being defined. Division types include abstracts, chapters, sections, and appendixes. The <DIV ...> tag can also take the attributes shown in table 9.3, allowing greater control over how that division is formatted. A sample <DIV ...> ... </DIV> container pair might look like:
<DIV CLASS=chAPTER ALIGN=JUSTIFY CLEAR=ALL> ... the text of the chapter goes here ... </DIV>
The above HTML produces a chapter that starts with clear left and right margins and that has justified text throughout.
| Attribute | Purpose |
|---|---|
| CLASS | Specifies the type of document division being marked |
| ALIGN=LEFT|RIGHT|CENTER|JUSTIFY | Sets the alignment for the entire division |
| NOWRAP | Turns off auto-wrapping of text. Text lines are broken explicitly with <BR> tags. |
| CLEAR=LEFT|RIGHT|ALL | Starts the division clear of left, right, or both margins |
You also can use the CLEAR attribute to specify spacing between the
division and any page items around it. For example, CLEAR="2 em"
leaves two em spaces between the division and the item it wraps around.
One HTML 3.0 proposal calls for an <FN ...> tag to define footnotes. To set up a footnote, you use the <FN ...> tag together with its ID attribute:
<FN ID="footnote1">HTML =
HyperText Markup Language</FN>
Then, you must tag the footnoted text with an <A ...> ... </A> tag pair that includes an HREF pointing to the footnote. For "footnote1," you could tag every instance of the acronym "HTML" with:
<A HREF="#footnote1">HTML</A>
When users clicks on "HTML," they should see the footnote telling them what HTML stands for. The spec calls for footnotes to be displayed in pop-up windows, though it isn't clear that all browsers will be able to support this.
The <note ...> tag lets you set up admonishments like notes, warnings, and cautions on your pages. The text of the admonishment appears between the <note ...> and </note> tags. Additionally, you can include an image with your admonishment using the SRC attribute of the <note ...> tag. SRC and other attributes of <note ...> are summarized in table 9.4.
| Attribute | Purpose |
|---|---|
| CLASS=note|caution|WARNING | Specifies the type of admonishment |
| SRC="url" | Provides the URL of an image to precede the admonishment text |
| CLEAR=LEFT|RIGHT|ALL | Starts the admonishment clear of left, right, or both margins |
As with the <DIV ...> tag, you can also use the CLEAR attribute to compel browsers to leave a certain amount of space between the admonishment and surrounding page items. A sample admonishment might look like:
<note CLASS=WARNING SRC="images/stopsign.gif" CLEAR=ALL>WARNING! You are about to provide your credit card number to a non-secure server!</note>
If you've ever tried to prepare a document with mathematical content for the Web, you've probably ended up with a substantial headache. Prior to HTML 3.0, mathematical symbols like Greek letters, integral signs, and vector notations had to be read in and placed as separate images in the document. Just imagine the number of <IMG ...> tags required, to say nothing about the effort it would take to align them properly! The HTML 3.0 spec calls for tags and entities to make the preparation of mathematical documents much less agonizing.
***Layout: The following paragraph needs two Greek letters inserted: an uppercase and lowercase psi as indicated by the text in square brackets. Thanks! Please replace [lowercase psi] and [uppercase psi]. The correct Greek letter looks like Indiana University's symbol.***
Under the proposal, all mathematical tags and entities need to be contained inside the <MATH> and </MATH> tags. Greek letters are to be drawn from the Symbol font and are incorporated into documents with their entity names. For example, ψ would produce a lowercase psi ([&psi]) and Ψ would produce an uppercase psi ([&Psi]). Other variables, notations, and operator symbols are built in through a large number of special tags and entities. For a complete run down on the proposals for these new tags and entities, direct your browser to http://www.hp.co.uk/people/dsr/html3/maths.html.
If you are familiar with the LaTex language for mathematical typesetting,
you should have little trouble with HTML math formatting; the two use very
similar approaches. If you don't have experience with LaTex and you will
be preparing documents with mathematical content for the Web, you can get
a jump on things by reading up on LaTex before the HTML math tags and entities
become widely supported.
The <fig ...> tag has been proposed as an alternative to the <IMG ...> tag for larger graphics. As you might expect, <fig ...> requires the SRC attribute to specify the URL of the image file to be loaded. <fig ...> can also take the attributes shown in table 9.5. The BLEEDLEFT and BLEEDRIGHT values of the ALIGN attribute align the figure all the way to the left and right edges of the browser window, respectively.
| Attribute | Purpose |
|---|---|
| SRC="url" | Gives the URL of the image file to load |
| NOFLOW | Disables the flow of text around the figure |
| ALIGN=LEFT|RIGHT|CENTER|
JUSTIFY|BLEEDLEFT|BLEEDRIGHT |
Specifies an alignment for the figure |
| UNITS=unit_of_measure | Specifies a unit of measure for the WIDTH and HEIGHT attributes (default is pixels) |
| WIDTH=width | Specifies the width of the image in units designated by the UNITS attribute |
| HEIGHT=height | Specifies the height of the image in units designated by the UNITS attribute |
| IMAGEMAP | Denotes the figure as an imagemap |
The <fig ...> tag is different from the <IMG ...> tag in that it has a companion </fig> tag. Together, <fig ...> and </fig> can contain text, including captions and photo credits, that should be rendered with the figure. Captions are enclosed with the <CAPTION> and </CAPTION> tags and photo credits are enclosed with the <CREDIT> and </CREDIT> tags. Regular text found between the <fig ...> and </fig> tags will wrap around the figure unless the NOWRAP attribute is specified.
Figure 9.2 shows an example of a photo with a caption, photo credit, and surrounding text. Listing 9.1 shows the HTML to produce the figure.
Listing 9.1 HTML for Figure 9.2
<fig SRC="drew.jpg" WIDTH=422 HEIGHT=284 ALIGN=LEFT>
<CAPTION>Drew - 5 months old,
Averill Park, NY</CAPTION>
<P><P><P>The Boxer is a handsome breed,
noted for its broad, muscular build and
unfaltering devotion to its owner. Boxers make
excellent companions and are especially good
with children. </P>
<CREDIT>Photo by Eric Ladd</CREDIT>
</fig>
Fig. 9.2 - The <fig ...> and </fig> tag pair can be used to contain captions, credits, and text to wrap around the figure.
Another feature proposed for the <fig ...> and </fig> tag pair is the ability to overlay two images. This is accomplished with the <OVERLAY ...> tag, which specifies a second image to overlay the image given in the <fig ...> tag. HTML to produce an overlay might look like:
<fig SRC="main_image.gif" WIDTH=250
HEIGHT=186 ALIGN=LEFT>
<OVERLAY SRC="overlay.gif">
<P>The image to the left is actually two images,
one on top of the other.
</fig>
The <fig ...> tag also plays a critical role in the implementation of client-side imagemaps.
See "Client-side
Imagemaps with the <fig ...> ... </fig> Tag Pair,"
(ch. 11), to learn how to implement client-side imagemaps with the <fig
...> tag.
Until now, the only means for creating tables has been to use preformatted text. HTML 3.0 calls for several table tags that make it possible to build tables on Web pages without having to convert everything to a fixed-width font. Many browsers have already implemented these tags in anticipation of the table tag proposals being accepted into the 3.0 standard.
To learn how to make tables
with preformatted text, see "Preformatted
Text," (ch. 8).
To understand the table tags better, it helps to take a moment to consider how HTML tables are structured. Tables are made out of one or more rows. These rows, in turn, are made up of cells, which can contain a data element of the table or a heading for a column of data. If you can keep this breakdown in mind as you read the next few paragraphs, the syntax of the table tags will make much more sense to you.
To start a table, you need to use the <TABLE ...> tag. <TABLE ...> has a companion closing tag </TABLE>. Together these tags contain all of the tags that go into creating a table. The <TABLE ...> tag can take the BORDER attribute, which places a border around the table. By default, a table has no borders.
To put a caption on your table, enclose the caption text in the <CAPTION ...> and </CAPTION> tags. Captions appear centered over the table. The text may be broken to match the table's width. If you prefer your caption below the table, you can include the ALIGN=BOTTOM attribute in the <CAPTION ...> tag.
Put your caption immediately after the <TABLE ...> tag or immediately
before the </TABLE> tag to prevent your caption from unintentionally
being made part of a table row or cell.
Because tables are built out of rows, you need to know how to define a row. The <TR ...> and </TR> tags contain the tags that comprise a row of the table. The <TR ...> tag can take the ALIGN and VALIGN attributes. ALIGN controls the horizontal alignment of cell contents in the row and can be set to LEFT, RIGHT, or CENTER. VALIGN controls the vertical alignment and be set to TOP, BOTTOM, or MIDDLE. Values of ALIGN or VALIGN given in a <TR ...> tag apply to each cell in the row and will override all default alignments.
With a row defined, you're ready to put in the cells that make up the row. If a cell contains a table data element, you create the cell with the <TD ...> and </TD> tag pair. The text between <TD ...> and </TD> is what appears in the cell. Similarly, you use <TH ...> and </TH> to create a header. Header cells are exactly like data cells, except that header cell contents are automatically rendered in boldface type and are aligned in the center.
There are default horizontal and vertical alignments associated with each type of cell. Both types of cells have a default vertical alignment of MIDDLE. Data cells have a default horizontal alignment of LEFT, while header cells have the aforementioned CENTER alignment. You can override any of these defaults and any alignments specified in a <TR ...> tag by including the desired ALIGN or VALIGN attribute in a <TD ...> or <TH ...> tag. Listing 9.2 shows this in a one row table.
Listing 9.2 Using VALIGN and ALIGN
<TABLE>
<TR ALIGN=RIGHT VALIGN=TOP>
<TD ALIGN=LEFT VALIGN=BOTTOM>
Larry
</TD>
<TD>
Curly
</TD>
<TD ALIGN=LEFT VALIGN=MIDDLE>
Moe
</TD>
</TR>
</TABLE>
Using indents when writing HTML to produce a table helps you keep better
track of what you're doing.
The data element "Larry" is horizontally aligned along the left edge of the cell (ALIGN=LEFT overrides the ALIGN=RIGHT in the <TR ...> tag) and vertically aligned along the bottom of the cell (VALIGN=BOTTOM overrides the VALIGN=TOP in the <TR ...> tag). In the second cell, "Curly" is aligned according to the alignments given in the <TR ...> tag, since there are no alignments specified in the second <TD ...> tag. Finally, "Moe" is horizontally aligned left (again ALIGN=LEFT overrides the ALIGN=RIGHT in the <TR ...> tag) and vertically aligned in the middle (VALIGN=MIDDLE overrides VALIGN=BOTTOM in the <TR ...> tag). Note that Moe's alignment is the same as the default alignment for any data cell, but we had to undo the alignments set forth in the <TR ...> tag to get back to the defaults.
Aligning data elements and headers in your tables may seem a bit confusing, but if you keep the following hierarchy in mind, you can master table alignment quickly:
With what you've read so far, you can construct the following table template (Listing 9.3). The template is a good starting point for building any HTML table.
Listing 9.3 Table Template
<TABLE>
<CAPTION>Caption Text</CAPTION>
<TR> <!-- Row 1 -->
<TD> ... </TD>
<TD> ... </TD>
...
<TD> ... </TD>
</TR>
<TR> <!-- Row 2 -->
<TD> ... </TD>
<TD> ... </TD>
...
<TD> ... </TD>
</TR>
...
<TR> <!-- Row m -->
<TD> ... </TD>
<TD> ... </TD>
...
<TD> ... </TD>
</TR>
</TABLE>
The template above gives you a skeleton for a table with m rows that has a caption over the top and no borders. You can adjust this structure however you like by adding or deleting the appropriate tags and attributes.
For greater control over the appearance of your tables, there are other attributes of the <TD ...> and <TH ...> tags to help you. Either tag can take the NOWRAP attribute, which disables the breaking of data elements and headers onto a new line.
Use NOWRAP with care! It can produce cells that are inordinately wide
if the cell contents aren't kept short.
By default, a cell spans (takes up) one row and one column of a table. You can alter this default by using the ROWSPAN and COLSPAN attributes in a <TD ...> or <TH ...> tag. ROWSPAN and COLSPAN are set equal to the number of rows and columns, respectively, a cell is to span. If you try to extend the contents of a cell into rows that don't exist on the table, the contents of the cell are truncated to fit the number of rows available.
To illustrate the utility of HTML tables, this section presents some examples of how to use them. The primary intent of the table tags is to give you a means of presenting tabular data without having to resort to preformatted text. Most tables that do this can be constructed from the template given above. For example, the table in figure 9.3 was produced by the HTML shown in listing 9.4.
Listing 9.4 HTML for Figure 9.3
<TABLE BORDER>
<CAPTION ALIGN=BOTTOM>Course Grades -
Spring 1996</CAPTION>
<TR> <!-- Row 1 -->
<TH>Student</TH>
<TH>Midterm</TH>
<TH>Final Exam</TH>
<TH>Course Average</TH>
</TR>
<TR> <!-- Row 2 -->
<TD>Sarah Gordon</TD>
<TD ALIGN=CENTER>89</TD>
<TD ALIGN=CENTER>95</TD>
<TD ALIGN=CENTER>92</TD>
</TR>
<TR> <!-- Row 3 -->
<TD>Tim Jackson</TD>
<TD ALIGN=CENTER>81</TD>
<TD ALIGN=CENTER>77</TD>
<TD ALIGN=CENTER>79</TD>
</TR>
<TR> <!-- Row 4 -->
<TD>Molly Sanderson</TD>
<TD ALIGN=CENTER>85</TD>
<TD ALIGN=CENTER>89</TD>
<TD ALIGN=CENTER>87</TD>
</TR>
</TABLE>
Fig. 9.3 - The HTML table tags make it easy to produce tables without using preformatted text.
Note that all grades in the table are centered below their respective column headings. This was accomplished by the ALIGN=CENTER attribute in each of the <TD ...> tags that creates a cell containing a grade. The ALIGN=BOTTOM in the <CAPTION ...> tag placed the caption below the table instead of above it.
Table cells can contain much more than just plain text. Text in data cells can be formatted with any of the formatting tags introduced in Chapter 10. In addition, you can also place images, form input fields, and even other tables inside a table cell. Figure 9.4 shows a one row table with an image in the first and third cells and a heading in the second cell. The table is produced by listing 9.5.
Listing 9.5 HTML for Figure 9.4
<TABLE>
<TR>
<TD><IMG SRC="images/w3c.gif" ALT="W3C Logo"></TD>
<TD ALIGN=CENTER><H2>The World Wide Web
Consortium and<BR>
The Internet Engineering Task Force</H2></TD>
<TD><IMG SRC="images/ietf.gif" ALT="IETF Logo"></TD>
</TR>
</TABLE>
Fig. 9.4 - Table cells may contain inline images in addition to text.
Tables are particularly handy for lining up input fields on an HTML form. Figure 9.5 shows a form that asks for the user's name and address. None of the fields are neatly aligned with each other because the words that precede them are of varying lengths.
Fig. 9.5 - Form input fields are typically not aligned because of differences in the text that precedes them.
By putting the prompting text and the fields in their own table cells, the fields will automatically be aligned. Figure 9.6 shows the same form done with tables. By using COLSPAN in the first two rows, we're even able to get the "City," "State," and "Zip" fields to fit across the same width as the fields above them. The HTML to produce figure 9.6 is shown in listing 9.6.
The <INPUT ...> tags shown in the following HTML are used to
create the form input fields. The <INPUT ...> tag is discussed in
detail in Chapter 14, "HTML Forms."
Listing 9.6 HTML for Figure 9.6
<TABLE>
<TR>
<TD>Name:</TD>
<TD COLSPAN=5><INPUT NAME="name"
TYPE="text" SIZE=30></TD>
</TR>
<TR>
<TD>Address:</TD>
<TD COLSPAN=5><INPUT NAME="address"
TYPE="text" SIZE=30></TD>
</TR>
<TR>
<TD>City:</TD>
<TD><INPUT NAME="city" TYPE="text" SIZE=11></TD>
<TD>State:</TD>
<TD><INPUT NAME="state" TYPE="text" SIZE=2></TD>
<TD>Zip:</TD>
<TD><INPUT NAME="zip" TYPE="text" SIZE=5></TD>
</TR>
</TABLE>
Fig. 9.6 - Placing form input fields in table cells is an easy way to get them to align properly.
Even after it is released, the HTML 3.0 spec will continue to evolve. Two items you should look for in the spec in the not-too-distant future are stylesheets and client-side imagemaps.
HTML stylesheets contain information on how a document or a portion of a document should be formatted, including text size, font and color, indenting, and other layout instructions. Using stylesheets will help eliminate the need to keep adding new formatting tags to HTML since any new formatting instructions can be placed in the stylesheets and not in the HTML file.
There are different proposals as to how stylesheets should be attached to HTML files. One proposal calls for using the <LINK ...> tag in the document head. By using the many attributes of <LINK ...>, you could attach the stylesheet with the HTML:
<LINK TITLE="General Purpose Style Sheet" REL="stylesheet" HREF="styles/general.style" TYPE="text/css">
HREF points to the file containing the stylesheet information and TYPE specifies the MIME type of the stylesheet ("css" stands for "cascading stylesheet").
A second proposal introduces the <STYLE> and </STYLE> container tags. These tags also go in the document head and contain specialized style information that overrides any styles brought in through the <LINK ...> tag. Yet another proposal suggests placing style information into <P> and <DIV> tags. This has the advantage of being able to easily apply different styles to different parts of the same document.
More information on stylesheets can be found at http://www.w3.org/pub/WWW/Style/.
Another interesting proposal calls for the support of client-side imagemaps. Imagemaps are multiply-linked images that take users to different URLs depending on where they click on the image. Until recently, imagemap clicks were processed by sending the coordinates of the click to the server. The server then checks a file that defines the linked regions of the map to determine what URL the client (browser) should load. Once this determination is made, the client receives the URL and loads it for presentation to the user.
There is nothing special about the computations that the server does to determine which region of the image the user clicked on. The main reason for having the server do this work is because the file defining the linked regions of the map lives there. Other than that, the client could do the computations just as easily.
The main premise behind client-side imagemaps then, is that the client can do the computations as long as it has the information defining the linked regions of the map. Having the client do the work eliminates the need to open another connection to the server (making image-map processing much faster) and it reduces the load on the server.
The trick to implementing client-side imagemaps is to find a way to
store the information that defines the linked regions in your HTML code.
This is under consideration for HTML 3.0. Check out the client-side imagemap
spec at http://www.ics.uci.edu/pub/ietf/
html/draft-seidman-clientsideimagemap-02.txt.
See "Client-side
Imagemaps," (ch. 11), to learn more about client-side imagemapping
techniques.
Both Netscape Navigator 2.0 and Microsoft Internet Explorer 1.0 support
client-side imagemaps.
As noted at the start of the chapter, some software companies program their browsers to understand tags that are not part of standard HTML. Such tags are called HTML extensions, and they are usually associated with the name of the company that devised them.
A leader in developing HTML extensions is Netscape Communications Corporation. The Netscape Navigator browser is widely used, so the extensions that Netscape introduces are usually embraced very quickly by the Web community. Most, if not all, of the Netscape extensions are submitted to W3C and the IETF as candidates for inclusion in upcoming HTML specifications.
The next few sections review the Netscape extensions to HTML, including:
Netscape has extended the <META ...> tag in the document head to include a value of "Refresh" for the HTTP-EQUIV attribute. Refresh instructs the browser to reload the same document or a different document after a specified number of seconds. The time delay and the URL of the next document, if applicable, are stored in the CONTENT attribute. The syntax for the <META ...> tag in this situation is:
<META HTTP-EQUIV="Refresh" CONTENT="n; url">
where n is the number of seconds to wait and url is the URL of the next document to load. If you want to reload the same document, just use CONTENT="n" with no URL specified.
URLs in the CONTENT attribute should be fully qualified.
This dynamic reloading of documents is called client pull. The name is appropriate because the client automatically pulls in the next document with no prompting from the user. The client pull technique has already been used on Web pages to produce simple animations and to automatically load and play sounds.
Another extended tag in the document head is the <ISINDEX> tag. The <ISINDEX> tag designates a document as searchable and gives the user an input field into which search criteria is entered. The default prompting text in front of this search field is This is a searchable index. Enter search keywords:. The PROMPT attribute is a Netscape extension of the <ISINDEX> tag that lets you change the default prompting text to whatever you like. For example, the following HTML:
See "A
One Field Form: The <ISINDEX> Tag," (ch. 14) to learn how
to use <ISINDEX> to create a searchable document.
Listing 9.7 produces the search field shown in figure 9.7.
Listing 9.7 HTML for Figure 9.7
<HEAD>
<TITLE>An Application of the PROMPT Attribute</TITLE>
<ISINDEX PROMPT="Please enter the keyword you wish
to search on:">
</HEAD>
Fig. 9.7 - The PROMPT attribute of the <ISINDEX> tag gives you control over the search field prompting text.
Many of the tags you learned back in Chapter 10 have been extended by Netscape, including:
The additional attributes to these tags are introduced in the next four sections.
Unordered list items are preceded by bullets. If you nest unordered lists, Netscape automatically changes bullet characters for each new list. The default bullet progression is from solid circle (disc) to open circle (circle) to square (square). The new TYPE attribute of the <UL> tag gives you control over which bullet character to use in nested lists. By setting TYPE equal to DISC, CIRCLE, or SQUARE, you can override the default progression and make Netscape use the bullet you want. This is illustrated in figure 9.8. The nested list in the figure uses solid circles as bullets just as the initial list does. Listing 9.8 shows the corresponding HTML.
Listing 9.8 HTML for Figure 9.8
<UL>
<LI>HTML 2.0</LI>
<LI>HTML 3.0</LI>
<UL TYPE=DISC>
<LI>Mathematical symbols</LI>
<LI>Tables</LI>
<LI>Style sheets</LI>
</UL>
<LI>Netscape extensions to HTML</LI>
</UL>
Fig. 9.8 - You can control the bullet character in unordered lists using the TYPE attribute of the <UL> tag.
The <OL> tag also picks up the TYPE attribute, but in this case, TYPE changes the numbering scheme used in the ordered list. By default, ordered list item are numbered with consecutive integers starting with "1." By setting TYPE equal to "A," "a," "I," or "i," you can change the scheme to be uppercase letters, lowercase letters, uppercase Roman numerals, or lowercase Roman numerals, respectively. Having these five numbering schemes makes it easy to replicate the standard outline format using ordered lists. Figure 9.9 illustrates this point. The HTML to produce the figure is shown in listing 9.9.
Listing 9.9 HTML for Figure 9.9
<OL TYPE="I">
<LI>Introduction</LI>
<OL TYPE="A">
<LI>Problem statement</LI>
<LI>Results of previous research</LI>
</OL>
<LI>Approach</LI>
<OL TYPE="A">
<LI>Research objectives</LI>
<LI>Equipment</LI>
<OL>
<LI>Lab equipment</LI>
<LI>Computing equipment</LI>
</OL>
<LI>Techniques</LI>
</OL>
...
</OL>
Fig. 9.9 - Creating outlines in HTML is simple with the TYPE attribute of the <OL> tag.
Another Netscape extension to the <OL> tag is the START attribute, which lets you change the starting value of the list item numbering. START=1 by default, but you can change it to any number you choose. If you're using a TYPE different from the default numbering scheme, you can still specify a different starting value using numbers. Netscape automatically converts the new starting value to the chosen numbering scheme for you. Thus, listing 9.l0 produces the list seen in figure 9.10.
Listing 9.10 HTML for Figure 9.10
<P>Users' favorite Internet applications after e-mail and the World Wide Web were: <OL TYPE="i" START=3> <LI>Usenet newsgroups</LI> <LI>FTP</LI> <LI>Telnet</LI> <LI>Internet Relay Chat (IRC)</LI> </OL>
Fig. 9.10 - The START attribute of the <OL> tag lets you begin numbering an ordered list at any value.
Finally, Netscape extends list type control all the way down to the list item level by adding the TYPE attribute to the <LI> tag. In an unordered list, using TYPE in an <LI> tag lets you change the bullet character for that list item and all subsequent items. For ordered lists, a TYPE attribute in an <LI> tag changes the numbering scheme for that list item and each one after it. The <LI> tag can also take the VALUE attribute in an ordered list. VALUE lets you change the numbering count to any other number you choose.
Netscape has added several attributes to the <HR> tag that give you control over the width, thickness, alignment, and shading characteristics of rule. The new attributes are summarized in table 9.6.
| Attribute | Purpose |
|---|---|
| WIDTH=pixels|percent | Allows you to change the width of the rule to a set number of pixels or a percentage of the browser screen width |
| ALIGN=LEFT|RIGHT|CENTER | Sets the alignment of a piece of rule (default is CENTER) |
| SIZE=n | Controls the thickness of the rule (default is 1) |
| NOSHADE | Disables the shading Netscape uses when rendering rule, producing a solid bar |
Figure 9.11 illustrates some of the new types of rules you can produce with these extensions. Listing 9.11 shows the corresponding HTML.
Listing 9.11 HTML for Figure 9.11
<HR> Normal rule<P> <HR SIZE=8 WIDTH=40% ALIGN=RIGHT> Size 8, 40% width, flush right alignment<P> <HR SIZE=12 NOSHADE> Size 12, no shading<P> <HR SIZE=16 NOSHADE WIDTH=80% ALIGN=LEFT> Size 16, no shading, 80% width, flush left alignment<P>
Fig. 9.11 - Netscape extensions to the <HR> tag let you specify width, thickness, alignment, and shading of your horizontal rule.
Since you can't know how many pixels wide every user's browser screen
is, you should always specify WIDTH in terms of a percentage rather than
a set number of pixels.
The ALIGN attribute of the <IMG ...> tag has been greatly extended by Netscape. The Netscape Navigator understands the values of ALIGN shown in table 9.7.
| Value | Effect |
|---|---|
| TOP | Aligns text following the image with the top of the image |
| MIDDLE | Aligns the baseline of text following the image with the center of the image |
| BOTTOM,BASELINE | Aligns the baseline of text following the image with the bottom of the image |
| TEXTTOP | Aligns the top of the tallest text following the image with the top of the image |
| ABSMIDDLE | Aligns the middle of the text following the image with the middle of the image |
| ABSBOTTOM | Aligns the lowest text following the image with the bottom of the image |
| LEFT | Floats the image in the left margin, allowing text to wrap around the right side of the image |
| RIGHT | Floats the image in the right margin, allowing text to wrap around the left side of the image |
TEXTTOP, ABSMIDDLE, ABSBOTTOM, and BASELINE are small modifications to the TOP, MIDDLE, and BOTTOM values of ALIGN, which you learned about in Chapter 10. What's new and interesting are the LEFT and RIGHT values of ALIGN, which produce floating images and make it easy to wrap text around an image. Figure 9.12 shows an image floated in the left and right margins with centered text in the open margin next to the image.
Fig. 9.12 - Using ALIGN=LEFT or ALIGN=RIGHT lets you float images in the left or right margins.
Beyond the new values for the ALIGN attribute, Netscape also adds three other attributes to the <IMG ...> tag. The BORDER=n attribute lets you specify the thickness of the border around your images. The default value of n is 1, but you can change it to any value you choose, including zero. Setting BORDER to zero is useful with transparent gifs because it eliminates the rectangular box that would otherwise surround the image.
Setting BORDER=0 on a hyperlinked image will remove the colored border
and users may not be able to tell that the image is linked.
Since it's possible to wrap text around a floating image, it becomes necessary to have a way to put some additional space around the image so that wrapping text doesn't bump right up against it. The HSPACE=n attribute lets you insert n pixels of white space to the left and right of the floating image. VSPACE=n works similarly to put white space above and below the image.
Don't forget the HEIGHT and WIDTH attributes introduced in Chapter
10. Technically, these attributes are Netscape extensions to the <IMG
...> tag, but their function is important enough to earn them an early
introduction.
The availability of floating images also makes it necessary to be able to break to the next line that is clear of a floating image. To address this, Netscape added the CLEAR attribute to the <BR> tag. CLEAR can be set to LEFT, to move to the first line whose left margin is clear of floating images; RIGHT, to move to the first line whose right margin is clear of floating images; or ALL, to move to the first line that is completely free of floating images.
In addition to new attributes for many existing tags, Netscape has also introduced some entirely new tags to HTML. These new tags apply in the areas of word breaking and text effects.
Text contained in the <NOBR> and </NOBR> tags will not have any line breaks in it. The tags are meant to prevent breaks at places where it is absolutely necessary to avoid them. You should keep the amount of text between these tags short, as long unbroken strings of text look awful on-screen.
The <WBR> tag can be used two ways. One way is to specify exactly where you want a line break inside the <NOBR> and </NOBR> tags. The other way is to indicate a preferred location for text breaks to the browser. <WBR> does not actually create the line break; it just says "It's okay to break the line here."
The <FONT ...> and </FONT> container tags give you control over the size and color of the text they contain. To modify the size of the text, you use the SIZE attribute in the <FONT ...> tag. SIZE can be set to any number between 1 and 7. The default text size is 3. You can also specify SIZE relative to the base font size by indicating how many sizes above (+) or below (-) the base font size you want the text to be. Thus, with a base font size of 3, the following two lines of HTML do the same thing:
<FONT SIZE=5>This text is big!</FONT> <FONT SIZE=+2>This text is big!</FONT>
Similarly, to go two sizes below 3, you could use either of the following:
<FONT SIZE=1>This text is small!</FONT> <FONT SIZE=-2>This text is big!</FONT>
The base font size is always 3, unless you change it with the <BASEFONT SIZE=n> tag. n can be any number between 1 and 7.
A popular effect you can create with the SIZE attribute is "small caps." With small caps, each letter in a word is in uppercase, but the first letter of each word is bigger than the others. Figure 9.13 shows some text in small caps as produced by the following HTML:
<FONT SIZE=+2>I</FONT> <FONT SIZE=+2>L</FONT>IKE <FONT SIZE=+2>S</FONT>MALL <FONT SIZE=+2>C</FONT>APS!
Fig. 9.13 - You can create text in small caps using the SIZE attribute of the <FONT ...> tag.
You can also change the color of text between <FONT ...> and </FONT> by using the COLOR attribute of the <FONT ...> tag. COLOR is set equal to the RGB (Red/Green/Blue) hexadecimal triplet of the color you want. Thus, the HTML:
Here is some <FONT COLOR="#FF0000">red text.</FONT>
instructs Netscape to render the words "red text." in red.
To determine the RGB hexadecimal triplet of a desired color, first
find that color in Netscape's custom color palette. You can access the
palette by choosing the General Preferences option under the Options menu
and selecting the Colors tab in the dialog box. Point your mouse to the
color you want and click on it. After clicking, the decimal Red, Green,
and Blue values should be displayed near the bottom right of the dialog
box. Use the Windows calculator in Scientific mode to convert these decimal
values to hexadecimal. Then write these three two-digit hex numbers in
sequence to produce your color triplet.
Setting Other Colors in Netscape
You can also change the colors of browser window background, body text,
unvisited hyperlinks, visited hyperlinks, and active (clicked on) links
in Netscape. The BGCOLOR, TEXT, LINK, VLINK, and ALINK attributes of the
<BODY> tag can be set equal to an RGB hexadecimal triplet to change
their colors from the default values.
Two other Netscape extensions for creating text effects are the <CENTER> ... </CENTER> and <BLINK> ...</BLINK> tag pairs. Text, headings, and images contained between the <CENTER> and </CENTER> tags are centered on the browser screen. Enclosing text in the <BLINK> and </BLINK> tags instructs Netscape to make the text blink.
The Netscape Navigator understands four attributes of the <TABLE ...> tag that are not part of the original HTML 3.0 proposal for tables. These extended attributes are listed in table 9.8
| Attribute | Purpose |
|---|---|
| WIDTH=pixels|percent | Sets the width of the table to a specific number of pixels or to a percentage of the browser window width |
| BORDER=n | Allows the use of borders of varying size |
| CELLSPACING=n | Controls the amount of space between cells (default value is 2) |
| CELLPADDING=n | Controls the amount of space between the edges of a cell and its contents (default value is 1) |
The WIDTH attribute is useful in creating tables of varying width, but the same advice that applied to the WIDTH attribute of the <HR> tag applies here: always set your WIDTH to be a percentage of the browser screen width. That way, users with browser screens of any size will all see the same, albeit scaled, effect. You may need to see the width of a certain number of pixels if you're placing an image in your table though.
Control over the border size is desirable when nesting tables. You can use the BORDER=n attribute to give your main table a wide border and your nested tables smaller borders. If space is at a premium, you can set BORDER=0 to recapture the space that is typically reserved for a border.
Remember that other browsers treat BORDER as a Boolean attribute: if
they see BORDER in the <TABLE ...> tag, they put a border on the
table. Otherwise, they don't. This can be a problem when setting BORDER=0.
Netscape understands BORDER=0 to mean "don't include a border and
give me back the space you reserved for a border." Other browsers
will look at BORDER=0 and, seeing the word BORDER in the tag, put a border
around the table - the complete opposite of what you intended!
CELLSPACING and CELLPADDING are useful in two ways. Setting them to values higher than their default opens a table up and lets the cells "breathe" with more white space. If space is tight, you can set them both to zero to get the most compact table possible.
In a table with CELLPADDING=0, the contents of the cell will be able
to touch the edges of the cell. If this is undesirable, change your CELLPADDING
to a non-zero value.
Version 2.0 of the Netscape Navigator supports an exciting new concept called frames. Using the frame tags, you can break up the browser window into separate areas that can each load its own HTML document. This is a valuable feature because it lets you put static items, like tables of contents and navigation aids, in small, yet permanent windows while still leaving a considerable amount of space for changing material. Thus, users can look at different documents in the largest frame and always have the useful static items available in smaller frames.
The first step in creating a framed document is to split the Netscape screen up into the frames that you want. You accomplish this with an HTML file that uses the <FRAMESET ...> and </FRAMESET> container tags instead of the <BODY> and </BODY> tags. <FRAMESET ...> and </FRAMESET> are not just container tags though. Attributes of the <FRAMESET ...> tag are instrumental in defining the frame regions.
The <FRAMESET ...> tag can take one of two attributes: ROWS, to split the screen up into multiple rows, or COLS, to split the screen up into multiple columns. Each attribute is set equal to a list of values that tells Netscape how big to make each row. The values can be a number of pixels, a percentage of a browser window dimension, or an asterisk (*), which acts as a wildcard character and tells the browser to use whatever space it has left. For example, the HTML:
<FRAMESET COLS="40%,20%,30%,10%"> ... </FRAMESET>
breaks the browser window into four columns. The first column has a width equal to 40% of the browser screen width, the second column 20%, the third column 30%, and the fourth column 10%. Similarly, the following HTML:
<FRAMESET ROWS="100,150,2*,*"> ... </FRAMESET>
splits the window into four rows. The first row is 100 pixels deep and the second is 150 pixels deep. The remaining space is divided between the third and fourth rows with the third row being twice as big (2*) as the fourth (*).
To produce really interesting layouts, you can nest <FRAMESET ...> and </FRAMESET> tags. Suppose you want to split the browser window into eight equal regions. You can first split the screen into four equal rows with the HTML:
<FRAMESET ROWS="25%,25%,25%,25%"> ... </FRAMESET>
This produces the screen shown in figure 9.14.
Fig. 9.14 - The Netscape Navigator window split into four equal rows.
Next you need to divide each row in half. To do this, you need a <FRAMESET ...> ... </FRAMESET> pair for each row that splits the row into two equal columns. The HTML <FRAMESET COLS="50%,50%"> ... </FRAMESET> will do the trick. Nesting these tags in the HTML above produces listing 9.12 and figure 9.15. This completes the task of splitting the window into eight equal regions.
Listing 9.12 HTML for Figure 9.15
<FRAMESET ROWS="25%,25%,25%,25%">
<!-- Break Row 1 into 2 columns -->
<FRAMESET COLS="50%,50%">
...
</FRAMESET>
<!-- Break Row 2 into 2 columns -->
<FRAMESET COLS="50%,50%">
...
</FRAMESET>
<!-- Break Row 3 into 2 columns -->
<FRAMESET COLS="50%,50%">
...
</FRAMESET>
<!-- Break Row 4 into 2 columns -->
<FRAMESET COLS="50%,50%">
...
</FRAMESET>
</FRAMESET>
Fig. 9.15 - Dividing each row in half yields the desired eight equal regions.
Not sure whether to do a <FRAMESET ...> with ROWS or COLS first?
Make a pencil and paper sketch of what you want the browser window to look
like. If you have unbroken horizontal lines that go from one edge of the
window to the other, do your ROWS first. If you have unbroken vertical
lines that go from the top of the window to the bottom, do your COLS first.
If you have both unbroken horizontal and vertical lines, it doesn't matter
which one you do first.
With your frames all set up, you're ready to place content in each one with the <FRAME ...> tag. The most important attribute of the <FRAME ...> tag is SRC, which tells Netscape the URL of the document you want to load into the frame. The <FRAME ...> tag can take the attributes summarized in table 9.9 as well. If you use the NAME attribute, the name you give the frame must begin with an alphanumeric character. The default value of SCROLLING is AUTO, which means Netscape will automatically put scroll bars in if they are needed. SCROLLING=YES means Netscape should always put scroll bars in and SCROLLING=NO means there should be no scroll bars.
| Attribute | Purpose |
|---|---|
| MARGINHEIGHT=n | Specifies the amount of white space to be left at the top and bottom of the frame |
| MARGINWIDTH=n | Specifies the amount of white space to be left along the sides of the frame |
| NAME="name" | Gives the frame a unique name so it can be targeted by other documents |
| NORESIZE | Disables the user's ability to resize the frame |
| SCROLLING=YES|NO|AUTO | Controls the appearance of horizontal and vertical scroll bars in the frame |
| SRC="url" | Specifies the URL of the document to load into the frame |
To place content in each of the eight equal regions you created earlier, you can use the HTML shown in listing 9.13. The resulting screen appears in figure 9.16.
Listing 9.13 Placing Content in Frames
<FRAMESET ROWS="25%,25%,25%,25%">
<!-- Break Row 1 into 2 columns -->
<FRAMESET COLS="50%,50%">
<FRAME SRC="one.html">
<FRAME SRC="two.html">
</FRAMESET>
<!-- Break Row 2 into 2 columns -->
<FRAMESET COLS="50%,50%">
<FRAME SRC="three.html">
<FRAME SRC="four.html">
</FRAMESET>
<!-- Break Row 3 into 2 columns -->
<FRAMESET COLS="50%,50%">
<FRAME SRC="five.html">
<FRAME SRC="six.html">
</FRAMESET>
<!-- Break Row 4 into 2 columns -->
<FRAMESET COLS="50%,50%">
<FRAME SRC="seven.html">
<FRAME SRC="eight.html">
</FRAMESET>
</FRAMESET>
Fig. 9.16 - The <FRAME ...> tag lets you place a different HTML document into each frame.
If you create a document with frames, people who are using a browser other than Netscape 2.0 will not be able to see the content you want them to see because their browsers don't understand the <FRAMESET ...>, </FRAMESET>, and <FRAME ...> tags. As a courtesy to users with "frames challenged" browsers, you can place alternative HTML code between the <NOFRAMES> and </NOFRAMES> container tags. Any HTML between these two tags will be understood and rendered by other browsers. Netscape, on the other hand, ignores anything between these tags and just works with the frame-related HTML.
The <NOFRAMES> and </NOFRAMES> tags must occur after the
initial <FRAMESET ...> tag, but before any nested <FRAMESET ...>
tags.
By now, you've probably heard some of the hype surrounding Virtual Reality Modeling Language, or VRML. VRML is a three-dimensional equivalent of HTML that allows you to render interactive 3-D environments in real time over the Web.
The VRML 1.0 spec was written by Mark Pesce, Tony Parisi, and Gavin Bell in late 1994. Since then, VRML has been updated and extended very much as HTML has. VRML 1.1 cleared up a few loose ends from the 1.0 spec. The VRML 2.0 spec, which is nearing completion, has a special focus on action and interaction.
For up-to-date information on the evolving VRML 2.0 standard, consult
the VRML FAQ at http://www.oki.com/vrml/VRML_FAQ.html
or the VRML Architecture Group Web site at http://vag.vrml.org/.
An excellent text reference on VRML is Que's Special Edition Using VRML.
VRML is objected-oriented. You create VRML objects and place them in a 3-D environment. VRML browsers let you not only see this environment, but move around in it as well. As you move, the browser must perform many complex calculations to move, scale, rotate, and shade the objects in the environment so that the rendering continues to appear three-dimensional and realistic. This is why early VRML was done on high-powered computing platforms. As algorithms have become more efficient and high-powered computers have become more readily available, VRML has worked its way out of labs and universities and into people's homes and places of work.
To view VRML documents, you need a VRML browser or a browser with a VRML plug-in. As of this writing, there are no VRML Netscape plug-ins for UNIX platforms, though with Netscape's recent acquisition of Paper Software, we should see some plug-ins at least for Irix and Solaris, and hopefully Linux. Other VRML browsers and editors for UNIX can be found at http://www.sdsc.edu/SDSC/Partners/vrml/software/browsers.html.
Once you have your objects created, you can place them in a 3-D environment using a scene assembler. Scene assemblers let you position and scale objects to create the 3-D effect. Most Web servers can serve VRML documents by using the MIME type x-world/x-vrml, but there are VRML servers available that specialize in serving VRML pages.
For technical support For our books And software contact support@mcp.com
Copyright © 1996, Que Corporation
08
- Basic HTML: Understanding Hypertext