Chapter 13

Advanced HTML 3.2

CONTENTS

• HTML Level 2
• Wilbur, a.k.a. HTML 3.2
• Netscape Extensions to HTML
• Microsoft Internet Explorer Extensions to HTML
• Future Extensions to HTML
• Some HTML Tips and Tricks
• Advanced HTML Check

The level 0 and 1 HTML reviewed in the preceding chapter offers a basic set of features that can provide a wide range of expression. Many other features rapidly have entered the HTML standardization process above these levels. HTML at level 3.2 (code name: Wilbur) was finalized in May 1996, formalizing many widely deployed rendering techniques. Wilbur includes new elements, SCRIPT and STYLE, which are transition elements to future client-side scripts and style sheets. These elements are just "holders" for future work in HTML; browsers don't yet have to support them, but shouldn't "choke" or display the attributes of these elements if encountered.

The proliferation of different brands of browsers and the differences in the kinds of tags each browser supports makes a web implementer's task a bit more difficult now than in the early days of the Web. A web development team should consider enacting a policy for HTML compliance for implementing their web-stating precisely what version of HTML will be acceptable in the web's implementation.

This chapter provides a comprehensive review of the features that levels above 2 and 3 bring to HTML. The next chapter presents in-depth specifications and tutorials about the FORM, TABLE, and FRAME elements.

This chapter also reviews extensions to HTML provided by Netscape, Microsoft, and other browser manufacturers. Many of these HTML extensions are not yet in the formal specification of HTML at any level, but they may provide useful features for developers focusing on users browsing the Web using the Netscape Navigator browser.

HTML Level 2

The basic HTML covered in Chapter 12 constitutes a language set that just about every Web browser will recognize (level 0 is mandatory for a Web browser; most browsers also will recognize level 1 HTML if they have the capability to render character formatting). Above these levels of basic HTML, the widespread use of graphical browsers such as Netscape, Microsoft Explorer, and Mosaic has inspired new features for HTML that extend hypertext in a profound way by adding features that provide more ways to interact with the user. One of these features, forms, is specified in level 2 HTML and is available to users of Netscape, Microsoft, Mosaic, and other browser brands. Forms are used to collect information from users, as well as to implement new methods of interactive, Web-based communication.

Level 2 HTML specifies no additions to HTML levels 0 and 1 for document structure and comment elements or HEAD elements. The only new BODY element that level 2 specifies is the FORM element.

Forms are used to present an interface consisting of fill-in-the blank boxes, checklists, radio buttons, or other features to gather input from a user. The FORM element brackets an input data form; the elements INPUT, SELECT, OPTION, and TEXTAREA are used to set up areas within the form for input.

A form sets up a set of paired variable name fields and value fields. The variable name is supplied in the form. The user filling out the form supplies or selects the variable values (except for variables with hidden values), and default values can be coded into the form.

Each form has a method and action associated with it. The method specifies how the data from the form is to be handled in processing. The action identifies the executable program or script that will process the data from the form. Chapter 14 presents a more detailed forms tutorial, and Part IV describes the gateway programming used to implement the interactivity possible behind these forms.

Wilbur, a.k.a. HTML 3.2

There never really was an HTML 3.0 specification. In March 1995, the W3C provided a draft of HTML 3.0 that was avidly debated and examined. This draft was never finalized, however. The HTML materials at http://www.w3.org/pub/WWW/MarkUp/Wilbur/ state that "the difference between HTML 2.0 and HTML 3.0 was so large that standardization and deployment of the whole proposal proved unwieldy." By spring 1996, Web developers were still without formal guidance on many new HTML elements; the specification authorities had to search for a compromise.

As the HTML 3.0 draft specification aged, browser manufacturers worked feverishly to extend HTML and get their browser-specific features accepted in the developer community. Seeking a formal specification, the W3C met in the spring of 1996 with a variety of vendors, including IBM, Microsoft, Netscape Communications Corporation, Novell, SoftQuad, Spyglass, and Sun Microsystems, to create a compromise specification of HTML other than the cumbersome HTML 3.0 draft. Designated HTML 3.2, code named Wilbur, this version formally specified features that have been widely deployed in various brands of Web browsers, including tables, applets, text flow, superscripts, and subscripts.

Wilbur's HTML Structure and Comment Elements

Level 3.2 specifies only one addition in the HTML element over previous levels: the Version attribute. For example:

<HTML Version="-//IETF//DTD HTML 3.2//EN">

This is a way that you can define the version of the HTML you are preparing. Because this syntax is fairly arcane and unwieldy and because many browsers don't recognize the Version attribute anyway, I don't recommend using the Version attribute. If you are using an HTML editor that places it automatically, that's fine, but it is usually not worth putting in by hand.

Wilbur's HEAD and Related Elements

Wilbur introduces some new elements that help you provide metainformation about a document in its HEAD:

LINK  Wilbur also doesn't get specific about extensions to the Rel attribute of the LINK element. Rel is used to define a series of values for a browser toolbar or other buttons. Listing 13.1 shows some sample values of this attribute that have been discussed but not yet formalized.

Listing 13.1. Examples of values for the Rel attribute.

Rel = home; defines the home page link relative to this document
Rel = toc; table of contents link
Rel = index; an index
Rel = glossary; the glossary of terms
Rel = copyright; the copyright statement
Rel = up; the parent document
Rel = next; the next document to visit in a "tour"
Rel = previous; the previous document in a "tour"
Rel = help; a link to a help document or service
Rel = bookmark; a link to a list of key links for the document
Rel = stylesheet; a stylesheet to control the rendering of the current document (http://www.w3.org/hypertext/WWW/Style/).

SCRIPT  Again, this is an element just getting set for the next version of HTML. It is reserved for future use with scripting languages, such as JavaScript and others that will be sure to follow.

STYLE  Provides a way for the author of a document to define rendering information that will work with style sheets. In Wilbur, this element is really just a reservation of an element name; Wilbur gives it no attributes.

Wilbur's BODY and Related Elements

The HTML Editorial Board accepted many of the innovations that were compatible with standard HTML that Netscape had developed previously, particular in extending the BODY element. These Netscape attributes had been in use widely, but were formalized with Wilbur.

The new attributes of the BODY element follow:

Alink  Specifies the color of the active link (the color that appears while the user is selecting it).

Background  Specifies the URL of the graphic that will be tiled as the background of the page. Users will not see this background for noncompliant browsers, if image loading is turned off, or if they have overridden the background images in their preferences.

BGColor  Allows the user to specify a solid background color. The color is specified using a hexadecimal color code:

#RRGGBB

Here, RR, GG, and BB are the hexadecimal digits specifying the Red, Green, and Blue values of the color. For example:

black = #000000
blue = #0000FF
red = #FF0000
yellow red = #FF4500
white = #FFFFFF

The value of color attributes also can be specified by these color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Link  Specifies the color of the document's hotspots.

Text  Specifies the color of the document's text.

Vlink  Specifies the color of visited links.

Wilbur Knows Applets

Wilbur also recognizes another innovation that already was history by the time the standard was finished: the APPLET element, which embeds programs written using the Java programming language (see Chapter 18, "Development and Language Environments"). An APPLET element can have PARAM elements inside it to pass the values of parameters to the Java program. The general format to place an APPLET in an HTML document follows:

<APPLET
    Codebase = "path to directory containing class files"
    Code     = "name of class file"
    Width    = "width of applet in pixels"
    Height   = "height of applet in pixels">
    <PARAM Name="parameter name" Value="value of parameter">
    <PARAM Name="parameter name" Value="value of parameter">
</APPLET>

For example:

<APPLET
   Codebase  =
"http://java.sun.com/applets/applets/TumblingDuke/"

   Code      = "TumbleItem.class"
   Width     = "400"
   Height    = "95">
   <PARAM Name="maxwidth" Value = "100">
   <PARAM Name="nimgs"    Value = "16">

   <PARAM Name="img"      Value =
          
"http://java.sun.com/applets/applets/TumblingDuke/images/tumble">
</APPLET>

Note that Java-enabled browsers ignore all the non-PARAM element text inside an APPLET element. So you could include a special message in the APPLET element explaining to users that they don't have a Java-enabled browser and therefore can't use the feature.

Wilbur's Appearance Elements

Wilbur also adopted many new appearance elements:

DIV  Defines a paragraph of text. Its one attribute is Align, with values right or left.

MAP  Defines client-side imagemaps (see Chapter 15, "Multimedia," for a tutorial). MAP elements contain AREA elements that relate areas on the image to URLs. AREA elements have the following attributes.

AREA Attributes

Coords  Identifies the coordinates of the outline of the shape. Here are example lines that define a rectangle, polygon, and circle:

<AREA Shape="rect" Coords="left,top,right,bottom" Href="URL" >

<AREA Shape="poly" Coords="x1,y1,x2,y2,...xn,yn" Href="URL" >

<AREA Shape="circle" Coords="x,y,radius" Href="URL" >

Href  Identifies the URL associated with the hotspot.

Nohref  Identifies that the hotspot has no resource associated with it.

Shape  Can be circle, rect, or poly.

Web developers who like controlling the appearance of documents love the FONT element, which lets you change font size (the Size attribute) or color (the Color attribute). You can specify the font size in relative terms (for example "-3"-three sizes down from what it is now) or on a scale from 1 (smallest) to 7 (largest). You also can change both font size and color. For example:

<FONT Color="aqua" Size="1">little aqua</FONT>
<FONT Color="black" Size="7">big black</FONT>
<FONT Color="teal" Size="+1">bigger teal</FONT>
<FONT Color="red" Size="-2">smaller red</FONT>

You also can control how headings appear with the Align attribute of the header elements H1…H6. The Align attribute can have a value of left, right, or center. For example:

<H4 Align="left">Heading 4 Align left</H4>
<H4 Align="center">Heading 4 Align center</H4>
<H4 Align="right">Heading 4 Align right</H4>

The same Align attribute was added to the paragraph element, P:

<P Align="right">

This is a right-aligned paragraph. Note that you put the Align attribute in the paragraph start tag and you can omit the paragraph end tag if you want (</P>).

To make item numbering more fancy, UL and LI have a Type attribute. For UL, the Type can be disc, square, or circle. For OL, the Type is the numbering style:

To increase control over list appearance, OL has the Start attribute, which lets you initialize the sequence number. The value of this attribute can be used on LI elements in the list to reset the value. This lets you have numbered lists with custom-made numbers or letters.

Wilbur also includes some extensions to elements that help you organize or separate blocks of text. These elements include CENTER and HR.

CENTER  Centers text.

DIV  Represents containers, or sections, of a document. Its attribute Align (with values left, right, or center), for example, can be used to set the alignment of all the elements it contains.

HR  Puts a horizontal line on the page. This element gained many new attributes.

New HR Attributes

Align="left|right|center"  Specifies the alignment of horizontal lines that are less than the full width of the page. Example 5 in Figure 13.1 is a 5 pixel bar that is 10 percent of the display wide and aligned to the right.

Figure 13.1 : Examples of HR elements with varying attributes.

Noshade  Turns off shading to create a solid bar. Example 2 in the figure is a 1-pixel solid bar that runs the whole width of the display.

Size="number"  Specifies how thin the line should be in pixels. Example 1 is 15 pixels thick and runs the whole width of the display.

Width="number|percent"  Specifies the width of the line, expressed as width in pixels (number, as in example 3, which is 100 pixels wide) or a relative width as a percent of the current display width (not page width). Example 4 is 33 percent of the display width. These lines are by default centered (default can be overridden with the Align attribute).

Wilbur introduced new logical information-marking elements:

ACRONYM  Acronyms in the document

AU  The name of an author

DEL  Deleted text (when documents are amended)

DFN  The defining instance of a term

INS  Inserted text (when documents are amended)

LANG  The (human) language currently defined

PERSON  Names of people

Q  A short quotation

Wilbur also introduced new physical information-marking elements:

BIG  Big print relative to current font

SMALL  Smaller print relative to current font

STRIKE  strike-through text style

SUB  A subscript

SUP  A superscript

U  Underlined text

Wilbur added new attributes to the IMG element:

Align="top|middle|bottom|left|right"  You can align the text that follows an IMAGE element in a document (top, middle, bottom) or place an image flush with the left or right side of a document.

Border="value"  Specifies the thickness of the border around images.

Usemap="name"  Specifies the name of the client-side imagemap to use.

Vspace="value"; Hspace="value"  Controls the blank space above and below (Vspace) and to the left and right (Hspace) of an image.

Width="value" Height="value"  Specifies the width and height of the image in pixels. Speeds up processing if given because Netscape can lay out the page before images download.

The Table

Perhaps the most important new element in Wilbur is TABLE, which is used to define tables. Tables play an important role in the layout of Web pages according to grid design techniques. For example:

<TABLE Border>
   <CAPTION>August Standings</CAPTION>
   <TR><TH Rowspan="2"><TH Colspan="2">Totals</TR>
   <TR><TH>Wins<TH>Losses</TR>
   <TR><TH Align="left">White Sox<TD>22<TD>55</TR>
   <TR><TH Align="left">Tigers<TD>84</TD><TD>8</TD></TR>
</TABLE>

This would be rendered, in a level 3 browser, something like this:

        August Standings
+-------------------------------+
|           |      Totals       |
|           |-------------------|
|           |  Wins   |  Losses |
|-----------+---------+---------|
| White Sox |   22    |    55   |
|-----------+---------+---------|
| Tigers    |   84    |     8   |
+-------------------------------+

The next chapter presents the TABLE element syntax and a more elaborate sample table showing other options available.

Wilbur's Named Entities

Wilbur gives names to entities that previously had been available only through numeric codes in most browsers. These include the &copy; = COPYRIGHT SYMBOL (") and &reg; = REGISTERED SIGN (‚) entities. There is still no special entity (or numeric code) for a trademark symbol. But you now can make your own trademark symbol by using the superscript element Nerf<SUP>(tm)</SUP> to get Nerf‰.

Netscape Extensions to HTML

Netscape Communications Corporation (http://www.netscape.com/), the manufacturer of the Netscape Navigator browser (also known as the Mozilla browser, with its newest release being known as Atlas), has added many extensions to the standard set of HTML at levels 2 and 3. Many of these extensions were included in the official HTML 3.2 specification. This section summarizes the additions Netscape has made that have not (yet) made the official specification: frames, dynamic updating, and some text-appearance extensions.

Netscape Frames

Perhaps Netscape thought that frames would be the next big thing in web page design when it introduced them to its Netscape Mozilla 2.0 browser. Frames provide a way to organize a web page into a variety of independently scrollable panels. This is a powerful way to divide up the space of a page-perhaps too powerful, because frames seldom are used well. Moreover, the frame model breaks many of the cues and expectations that users of Web pages have relied on for navigation: the reliability of the current URL window, Back and Forward buttons on the browser, adding a URL to a bookmark list, and printing a page. Frames break all these expectations. Frames are another good idea that was not well thought out that has entered Netscape's version of HTML. (Netscape perhaps should have learned its lesson with its much-maligned BLINK element, which, like cigarettes, can never be used in a healthy manner.) The FRAME element is more like alcohol, however-it can be used well in moderation and in specialized cases. Netscape's own example at http://www.netscape.com/comprod/products/navigator/version_2.0/frames/eye/index.html is a very good use of frames. Microsoft Internet Explorer also supports frames. Although I don't recommend using frames, the next chapter describes the syntax and use of frames in more detail, including a demonstration of how frames work.

Netscape Dynamic Updating

Netscape versions after 1.1 support ways for documents to contain information that is updated on a periodic or frequent basis. These mechanisms, called server push and client pull, are based on the MIME multipart mechanism and the proposed HTML 3.0 META tag.

The idea of server push is that the server can continuously display new information to the user's browser without requiring the user to reload the page. This is similar to client pull, which is the same thing except that the client has instructions to load a new resource after a specified amount of time. (See http://www.netscape.com/assist/net_sites/pushpull.html for a detailed discussion.)

The most common use of client pull is a redirection page. You use the META element in the document HEAD and the Http-equiv attribute to connect the META element to a particular protocol response that is generated by the HTTP server hosting the document.

You can use the redirect technique to automatically "send" a user from one URL to another, for example. The key line needs to be in the HEAD element. For example:

<META Http-equiv="refresh" Content="3; Url=http://www.december.com/html/level0.html">

This causes browsers displaying an HTML document with this statement in its HEAD to automatically switch to the document http://www.december.com/html/level0.html after three seconds. You could make this document "click through" to the other document by setting this refresh time to 0. Note that you have to be careful to not put a set of quotation marks around the URL where you want to send the user. The URL is really part of the Content attribute of the META element used with the Http-equiv attribute.

Of course, you can have a document refresh itself after a period of time. For example, the document with this statement in its HEAD reloads after 10 seconds:

<META Http-equiv="refresh" Content="10">

You can chain HTML documents together with this technique to create a slide show. For example, the first "slide" could contain this line:

<META Http-equiv="refresh" Content="10;
Url=slide2.html">

The second slide then could contain this:

<META Http-equiv="refresh" Content="10; Url=slide3.html">

and so on. You could end the last slide with a reference to the first slide in the sequence to create a constantly looping slide show.

It's not clear where server push and client pull techniques will go. Network programming languages such as Java can solve many of the same problems more elegantly and in a more general way. And, because these techniques still are limited for the most part only to Netscape brand browsers, developers carefully should consider whether the effect they give is worth their cost.

Netscape Text Appearance

Wilbur accepted many of Netscape's early innovations in text appearance. Netscape browsers recognize the Type attribute for elements of unordered list elements with the possible values disc, circle, or square:

Type="circle"
Type="disc"
Type="square"

Netscape adds the Type attribute to the LI elements of the ordered list element. These attributes can have the same values as for the ordered list Type attribute itself:

A = capital letters
a = small letters
I = capital Roman numerals
1 = numbers (default)

You can manipulate the numbering on an ordered list with the Value attribute:

<LI Value="6">

Netscape provides more possible values for the Align attribute of the IMG element. Netscape browsers recognize the following:

absbottom
absmiddle
baseline
bottom
left
middle
right
texttop
top

Microsoft Internet Explorer Extensions to HTML

Not to be outdone by Netscape, Microsoft (http://www.microsoft.com/) is now an aggressive player in the Internet software market. As a result, it has tried to carve out a market share for its browsers by providing some extensions to HTML that only its browsers render. Microsoft's innovations largely are in multimedia display: animation, sound, and movies.

The MARQUEE element creates a scrolling text marquee. Its attributes follow:

Align="top|bottom|middle"
Behavior="scroll|slide|alternate"  scroll = continuous movement, slide = display once and then sit there, alternate = slide in and reverse out
BGColor  Color of background behind text
Direction="left|right"
Height  Height in pixels of marquee
Hspace  Pixels to leave as buffer left and right of marquee
Loop="how many times to scroll"
Scrollamount="pixels/time"
Scrolldelay="milliseconds between scroll movements"
Vspace  Pixels to leave as buffer above and below marquee
Width  Width in pixels of marquee

The BGSOUND element plays a soundtrack when the document is displayed. Its attributes follow:

Loop="number of times to replay file"
Src="url of sound file"

Microsoft adds new attributes for IMG used for inline movies:

Controls  When present, adds VCR-like controls to the movie image
Dynsrc="URL of the AVI movie"
Loop="number of times to play the movie"
Start="mouseover|fileopen"  When movie begins to play, fileopen is the default

Microsoft browsers recognize some new BODY attributes:

BGProperties="fixed"  If present, this freezes the background image defined in Background to the browser window so that it does not scroll with the text
Leftmargin="pixels of left margin indent"
Topmargin="pixels of buffer at top of pag"
Internet Explorer also recognizes some other extensions to TABLE body and cell colors (Netscape's Atlas browser also supports these):
<TABLE Bgcolor="color" >
<TR Bgcolor="color" >
<TH Bgcolor="color" >
<TD Bgcolor="color" >

Future Extensions to HTML

After Wilbur (HTML 3.2) will come Cougar, the next version of HTML. Cougar will support OBJECT elements, client-side scripting, style sheets, and extensions to fill-out forms (see http://www.w3.org/pub/WWW/TR/). There's great hope in style sheets as an advance in swinging the pendulum of HTML evolution away from specialized physical formatting elements. Also, mathematicians still wait for an equation-rendering capability on the Web.

Style Sheets

The basic idea of a style sheet in HTML is that users can separate appearance considerations from the semantic structuring of a document (which is the point of SGML-based languages like HTML anyway). Using a style sheet, you should be able to set all the text H3 headings to a certain color, such as aqua, for example. You'd do this by using a named collection of representation information called a style sheet. Your document could conform to remote style sheets using the LINK element in the HEAD of the document, as shown in this example:

<HTML>
  <HEAD>
    <TITLE>title</TITLE>
    <LINK Rel="stylesheet" Type="text/css"
      Href="http://www.houseofstyle.com/standard" TITLE="Plain">
  </HEAD>
  <BODY>
    <H3>This headline is aqua</H3>
    <P>
    This paragraph is not.
  </BODY>
</HTML>

Or, you could import and then modify a style sheet like this:

<STYLE TYPE="text/css"> @import url(http://www.houseofstyle.com/basic); H3 { color: aqua } </STYLE>
The goal is that a flexible system for inheriting look and feel across pages of a web or among systems of webs will become a reality with style sheets and conforming browsers. This idea of common look and feel is a central theme in the design techniques and discussion in this book. A proposed use of style sheets to implement an alternative to the Netscape FRAME element also is being drafted.

Math

The MATH element was proposed in HTML 3.0 to represent mathematical expressions. For example, the integral from a to b of f(x) would be represented by this:

<MATH>&int;a_^b^{f(x)} dx</MATH>

Predefined Icon Entities

Another dream for a future version of HTML is to have a library of icons built into conforming browsers, available only by using an entity reference. Little symbols for pages, calculators, archives, disks, displays, faxes, forms, trash, telephones, office supplies, and computer equipment have been proposed.

Micropayments

Of course, the dream of all web developers is to be able to just sit back and let their webs rake up the cash-sort of like a virtual slot machine. This isn't going to be possible unless the coin of cyberspace changes from credit card numbers to something more liquid and easily spent: micropayments. A Micro Payment Transfer Protocol (MPTP) has been proposed as a way to broker transactions on the Web. There's an enormous amount of work to be done before any kind of PAYMENT elements are placed on web pages. But look for more ways that the Web can provide support for all kinds of human relationships in the future.

Some HTML Tips and Tricks

HTML really isn't all that hard to learn; it actually is the easiest part of web development. You'll learn more about HTML through practice and experience. This section includes a list of tips and tricks that can help you build your repertoire.

Some HTML Tips

First and always, view HTML development in the context of the total process of web development. Just "coding HTML" has about as much to do with creating meaning on the Web as typing has to do with creating effective business communications. HTML is just syntax; the hardest work is what I talked about in Part II-the tireless process of figuring out what you want to do on the Web and for whom, and then shaping your message to effectively meet the needs of this audience.

Second, learn from other developers. Just about every browser has a selection you can use to view the HTML source of a document. In Netscape, this is the View/Document Source selection. When the Netscape browser displays the HTML source, it also places the HTML elements, attributes, and attribute values in different font colors. This makes it easy to pick out the content from the HTML structure of the document. You can cruise the Web, look for documents that you like, and see how the developers implemented them.

Third, make some templates for yourself. There's no sense in always having to reenter the basic parts of an HTML document into every file you create. Moreover, when your web has a look and feel that requires a complicated structure, put that structure in a file and copy and modify it for each page. Note that this way of hand-crafting a common look and feel is usually only effective for smaller webs. When your web gets larger, you'll want to consider automated means to generate the look and feel for your web. I talk about automated means to achieve this in Chapter 17, "Implementation Tools."

Fourth, seek professional help. If you're not a graphics designer, hire one to do a good job on your graphics instead of putting out shoddy work. In particular, there are many techniques to work with graphics and other multimedia (I cover these in Chapter 15). If you really don't have the patience to learn HTML, you probably should hire someone to do the routine work of writing HTML for your web. The plethora of people who have taught themselves HTML means that you should be able to hire someone to write HTML for a fairly low wage. Implementation should be the least worry on your mind when creating excellent web content.

Fifth, don't be blinded by science. Just because the XYZ Browser Company comes up with the KOOLDUDE HTML element that animates all the text on the page on a fuchsia background automatically doesn't mean that you have to use it. Don't use every new HTML element that comes along just to show that you are "with it." Distinguish yourself by the character of your content.

Some HTML Tricks

I maintain a page of HTML tricks at http://www.december.com/html/demo/tricks.html as part of the HTML Station. I add to this page in a question and answer format. Here are some of the most popular questions and answers:

Graphics

Question  How do you make a "column" on a page as a background image?
-Column Envy in Cleveland

Answer  The secret is in the image; you don't actually have to make a vertical bar. Instead, make a long horizontal image with the left pixels colored and the right pixels transparent or white, as shown in Figure 13.2.

Figure 13.2 : An image to implement a column on a web page.

Then use this "bar" as the background image, as in the example shown in Figure 13.3.

Figure 13.3 : A sample column on a web page.

When the image is tiled onto the page, it appears as a vertical bar with blank space to the right. Note that there is another vertical bar to the right of the white space; you need to make the white space in the image big enough for most monitors.

Question  The column looks neat, but how do you make a grid as a background image?-Gridless in Georgia

Answer  Again, the secret is in the image; you don't actually have to make a grid to cover the whole page. Instead, make a single square and then this will be tiled throughout as the background image, as in the example in Figure 13.4. When the image is tiled onto the page, it appears as an infinite grid (it extends as far as users make their browsers).

Figure 13.4 : A sample grid on a web page.

Question  Sometimes I see images on web pages that seem "transparent." Am I going insane, or is there a way to make images appear transparent?
-Seeing Things in Harvey, Michigan

Answer  The trick is in making the graphic transparent. A GIF, for example, can allow the background color of a web page to "show through." The way to do this is to obtain a program called giftrans. Chuck Musciano has a great tutorial on giftrans at http://members.aol.com/htmlguru/transparent_images.html. PC and Mac users should get Lview Pro or a transparency plugin for Photoshop.

URLS

Question  I think I'm going to go insane. There's no tilde (~) key on my keyboard, and many URLs have tildes in them. How am I ever going to access those resources?
-Clueless in Seattle

Answer  No need to get committed yet. You can use the escape code sequences (listed in Appendix B, "HTML Language Reference") to substitute for any character in a URL. You use a percent (%) sign followed by the hexadecimal ASCII code for the symbol. For a tilde, this is %7E.

Question  I'm tired of typing http://www.blah.com/ every time I want to access the blah web site. Is there some way I can reduce what I have to type?
-Exhausted in Escondido

Answer  Yes. Using a Netscape browser, choose the Open Location option (the Open URL icon from the toolbar or the File/Open Location selection) and enter blah. By default, the browser prepends the http://www. and appends the .com to your request. You also can just enter an http URL without the http:// prefix. Note that this shortcut won't work when writing out a URL in HTML. Also, your extreme fatigue might be a sign of chronic depression. Please see the American Psychological Association's Web site at helping.apa.org and get in touch with a qualified professional.

Animations

Question  I'm tired of having a boring, static title appear on the browser when someone looks at my home pages. How can I spice up the title?
-Listless in Louisiana

Answer  Well, you can try the technique of making the title of your HTML page move across the browser title bar. It involves placing multiple TITLE elements in the HTML file HEAD section. The browser displays each of the titles in sequence, leading to the appearance of an animation on the top of the browser. Not all browsers will show this animation, however; instead, they might just display the first title you have in your file-not that this technique is actually poor HTML style, because you have multiple TITLE elements when you should only have one. Versions of some browsers now don't support this.

Question  I'm tired of the same boring, static images appearing on my home pages. How can I spice them up?
-Jaded in Jackson

Answer  There's a technique of animating GIF files that is a good way to get animations on your pages. You can find out how to make your own GIF animations in an http://www.reiworld.com/royalef/gifmake.htm tutorial.

Access

Question  I can't stand the idea that just anyone can read my web pages. Is there some way to allow only some people to view them?
-Protective in Peoria

Answer  Yes, you could use a technique of using a password to allow access to your pages. The feature is called htaccess. You can get a tutorial on htaccess at http://hoohoo.ncsa.uiuc.edu/docs/tutorials/user.html (for NCSA Web servers).

Advanced HTML Check

• Advanced HTML at levels 2 and 3 and higher gives the web developer a way to implement forms and tables-two very useful features in developing a web.
• Forms are used to present an interface consisting of fill-in-the-blank boxes, checklists, radio buttons, or other features to gather input from a user. The next chapter presents a tutorial on how forms interact with gateway programs to accomplish results.
• Tables are very useful features to line up items on an HTML page. The TABLE element allows developers to create tables containing rows, columns, headers, and data. Data cells can be extended across several columns or rows. Data cells can contain images, forms, or another table. The next chapter presents a tutorial on tables.
• Netscape extensions to HTML allow for frames and dynamic document loading, as well as some text-appearance extensions.
• Future browsers may render more features from level 3 HTML, including mathematical equations and more document-handling features such as style sheets.