Although the HTML 3.0 standard as a whole has been "tabled" by the W3C, it looks like bits and pieces of it will continue to trickle out as parts of the standard are agreed upon. This can only be helped by the increased participation of the major Internet software vendors in the W3C's standardization process.
While everything from the 1995 HTML 3.0 draft won't make it, there
are probably a few HTML 3.0 specifications that will be widely
accepted by popular Web browsers. HTML needs a good way for folks
to offer math functions on their Web pages, without resorting
to clipping images from screenshots of other programs. Also in
the works is the banner element, which has some similarity to
Netscape's frame tags. Finally, you'll take a quick look at how
HTML style sheets will most likely work and, hopefully, give designers
complete control over the way a Web page displays.
| Note |
Again, you're working with a lot of theory in this chapter (and it's going to be tough to show you screen shots, since so few browsers exist that comply with HTML 3.0). If you'd like to skip ahead to something more concrete, feel free. But, as the standard emerges, hopefully this chapter will have more relevance. Of course, HTML could always change dramatically from what is being laid out here. Your best bet is to check http://www.w3.org/ for developments. |
At the time of writing, it's a bit tough to pin down exactly what the future holds for HTML 3.0 math functions. It seems certain that a nice chunk of HTML designers would appreciate the ability to create math functions in their HTML code (instead or resorting to images of complex math); but the HTML 3.0 standard has expired, and no other math-related proposals have appeared. What there is of the math functions is sketchy, but this section should give you a feel for how things might work.
The HTML 3.0 specification introduces a new tag, <MATH>, which is a container tag that supports various other tags and HTML shortrefs (shortcuts for some <MATH> tags) to help you create mathematical formulae. The <MATH> tag works something like the following:
<MATH>math formula/markup</MATH>
The actual tags used for creating <MATH> formulae are still a little scarce, since the standard isn't exactly universally accepting. Let's look at some of the more basic tags.
Among the math tags that you can put your fingers on now are the
<SUB>, <SUP>,
<BOX>, and <OVER>
tags. These tags can go a long way to represent most algebraic
and some calculus-level formulae, although the list is by no means
exhaustive.
| Note |
I haven't seen shortrefs used much elsewhere in HTML design, but they're quite common in the HTML math specifications. Shortrefs are just shorthand references for common HTML tags. |
Also, all of these but <OVER> are container tags. <SUB> and <SUP> turn text into subscripts and superscript, respectively. The shortref for <SUB> is the underscore (_), while the shortref for <SUP> is the caret (^). An example of these would be the following:
<MATH>A<SUB>2</SUB>=45<SUP>3</SUP></MATH>
Or, it could be the following, using the shortrefs:
<MATH>A_2_=45^3^</MATH>
Unfortunately, none of the popular browsers I have available to test can render these <MATH> tags. I'm using a slightly more obscure browser called UdiWWW for Windows (available on the Web at http://www.uni-ulm.de/~richter/udiwww/index.htm) to view these HTML 3.0 specific <MATH> elements in figure 18.1.
Figure 18.1: <MATH> rendering in future browsers.
The <BOX> tag is used for invisible brackets, delimiters, and integral signs, and to suggest that something is going to be placed over something else. The <OVER> tag does the actual placing, so that the following:
<MATH><BOX>f(x)<OVER>1+x</BOX></MATH>
would put f(x) over 1+x. I'm not sure that the <BOX> element is really necessary at this point, but I imagine, just like good parenthesis in any mathematical equation, <BOX> can't hurt (unless you use it in the wrong part of your equation). The following is an example where <BOX> is mandatory:
<MATH>∫_a_^b^<BOX>f(x)<OVER>1+x</BOX> dx</MATH>
The shortref for <BOX> is {, and for </BOX>, it's }. So, you could enter the above example as the following:
<MATH>∫_a_^b^{f(x)<OVER>1+x} dx</MATH>
which is almost easy to look at (unless you had my experiences with calculus in college). To see what all this might look like in a browser, glance at figure 18.2.
Figure 18.2: Integration with MTML 3.0-style math tags.
| Note |
Notice the &int symbol at the beginning of the example formula? That's the ISO entity, or special character code for an integration symbol. Other symbols relevant for math include < (less-than sign) and > (greater-than sign). For more on ISO entities, consult the Web page http://www.uni-passau.de/~ramsch/iso8859-1.html. |
Other math tags are available in the HTML 3.0 standard that perform more specific tasks. These <VEC>, <BAR>, <DOT>, <DDOT>, <HAT>, and <TILDE> tags are container tags designed to affect certain variable names or parts of a formula by placing a particular symbol over the enclosed character or text. Respectively, they add a vector, bar, dot, double-dot, hat, or tilde above the enclosed text.
An example might be the following:
<MATH><HAT>O</HAT> = <DOT>A</DOT></MATH>
which would render in a browser similar to figure 18.3.
Figure 18.3: Viewing other math tags in UdiWWW.
Two other tags allow you to create roots in your formulae: <SQRT> and <ROOT>. Both are container tags, and <ROOT> includes an empty tag, <OF>, that allows you to define the radix of the root function. The following:
<SQRT>1 + x</SQRT>
and
<ROOT>3<OF>1 + x</ROOT>
are both possible between <MATH> tags, forcing the browser to render these with a root bracket in the appropriate place, as in the following example (see fig. 18.4):
Figure 18.4: Using the <SORT> and <ROOT> tags.
<MATH><SUP>1</SUP><ABOVE>5 + 3</ABOVE></MATH>
The final tag is the <TEXT> tag, which simply allows you to add regular text within a <MATH> container. It's often combined with the <SUP> or <SUB> tags (and <ABOVE> or <BELOW>) to allow you to describe variables or formula elements, like the following:
<MATH>1<OVER><TEXT>The sum of all x's</TEXT></MATH>
If you're familiar with Netscape's frames concept at all, then the <BANNER> tag of the HTML 3.0 standard is something you might find interesting. Essentially, the <BANNER> container is used to fix a portion of your HTML page so that it doesn't scroll with the rest of the document. This gives you the ability to put a corporate logo, for instance, or navigation buttons (even an image map) in a portion of the screen that won't move, even if the rest of the document extends past the viewable page.
The question is, will <BANNER> live on? No popular browsers that I'm aware of support the tag, and it may be too similar to Netscape's frames to survive, since frames can also be used elsewhere on the page and they can access different URLs (effectively dividing a page to display more than one Web site at a time). Check http://www.w3.org/ and elsewhere before incorporating the <BANNER> element into your pages.
If you accidentally memorize how to use the <BANNER> tag, and it turns out not to be supported-well, I can hardly blame you, because it's not a terribly complicated tag. It follows the format:
<BODY>
<BANNER>
banner text and HTML markup
</BANNER>
rest of HTML page
</BODY>
The <BANNER> tag is fairly straightforward. An example of the <BANNER> tag is the following:
<BANNER>
<IMG SRC="logo.gif">
</BANNER>
<H2>Computer Technical Support</H2>
<P>The following are some of the companies that offer tech support on
the Web:</P>
<UL>
<LI> Compaq
<LI> IBM
<LI> Apple
<LI> Packard Bell
<LI> HP
<LI> NEC
<LI> Compudyne
<LI> Toshiba
<LI> Sony
</UL>
Once you have enough information on the page to cause it to scroll, you'll see that the banner section doesn't scroll along with the rest of the text.
The age-old debate in the HTML world (okay, so the debate's a year-and-a-half old) is the push and pull between designers who want control over the display of their pages and the standard-bearers who want the widest possible audience for Web pages. Up until now, it's been something of a stand-off, with companies like Netscape adding non-standard HTML-like references to their browsers' capabilities, while the standards organizations have ignored or repudiated those attempts.
The new world order of HTML standard creation may have finally changed that a bit. The W3C now comprises representatives of both camps-both the HTML standard-creators and the strongest corporate players in Web creation tools. So, the two philosophies have begun to merge, and style sheets seem to be one of their answers.
Put simply, a style sheet is a designer-suggested mechanism for the layout of a page. The magic of style sheets is that they can become almost infinitely complicated from the standpoint of the designer. You can decide minute details like character spacing, color, font families, and other desktop publishing-type decisions. At the same time, however, not rendering these decisions is up to the individual user and browser, so that minimal information is lost, and the majority of browsers can view your information from whatever platform they choose.
Let's take a cursory look at style sheets. Although part of the
now-expired HTML 3.0 standard, the current thinking in style sheets
is about three weeks old as of this writing. Will it change? I
can almost guarantee it. I'll try to pick the parts that seemed
destined to remain intact.
| Note |
There are at least four different ways to start adding style sheets to your Web documents in the current working draft. In fact, style sheets are considerably more complicated than nearly any other aspect of HTML. Why? It's my belief that this is laying the groundwork for more advanced programs to make the leap into HTML design. Right now, the power of most desktop publishing programs is lost on Web design. In a few years, as the style sheet standards formalize and come into practice, I believe you'll begin to see fewer people using text editors for Web creation, and more professional-level page layout programs being brought to the game. |
It seems to me that the <STYLE> tag is the easiest to understand when it comes to style sheets in HTML, and I'd like to talk about it first. You're in the <HEAD> section of your document now, and you'll use the <STYLE> container to define some of the style elements you want to add to our Web page. The basic format is the following:
<HEAD>
<TITLE>Doc title</TITLE>
<STYLE TYPE="MIME type">
HTML tag.class {special formatting}
...
<SPAN> {special formatting}
</STYLE>
</HEAD>
Looks like this will require some explaining. For your purposes, the TYPE attribute of the <STYLE> tag will always accept the MIME type text/css. That stands for the cascading style sheets (CSS) standard for Web style, and it is basically just a standard that defines what sort of things you can do to text, images, and background on your Web page. It defines the special formatting codes you'll use within your <STYLE> definition.
HTML tag refers to any of the HTML you've learned thus far. Nearly all of them can be given a .class which creates a unique instance of this particular tag. When that class is specified in the body portion of your document, the special formatting will be used for that particular instance of the HTML tag.
Let's look at an example:
<HEAD>
<TITLE>My Styled Page</TITLE>
<STYLE TYPE="text/css">
H1.italic { font-style: italic }
P.red_caps { color: red; font-style: small-caps }
</STYLE>
</HEAD>
Now, with these style definitions, you've created new classes of the familiar <H1> and <P> tags named italic and red_caps, respectively. When you want these special instances to occur in our HTML document, use the CLASS attribute to the standard HTML tag. Therefore, the following would create the special cases for our HTML tags within the document itself:
<H1 CLASS="italic">This header is italicized</H1>
<P CLASS="red_caps">This text should be in red, and all small-caps.</P>
| Tip |
Class names are completely of your choosing. Keep them short and descriptive and avoid spaces (use the underscore if necessary). Also avoid common HTML words and tag names, just for clarity. |
Notice that the original pseudo-code example offered another new tag, the <SPAN> tag. <SPAN> is basically a designer-defined tag that allows you to create a special case for emphasizing certain text in your document. It works just like the <EM> tag except for one small detail-it has no HTML 2.0 counterpart. So, browsers that don't recognize style sheets won't interpret the <SPAN> element in any way. If you used a pre-existing tag, other browsers would only see half of your formatting.
Consider this example. In the <HEAD> section, you define <SPAN>:
<STYLE TYPE="text/css">
SPAN { font-style: small-caps }
</STYLE>
Now, in the body of your document, you can do the following:
<P><SPAN>Welcome to</SPAN> my home page on the Web. I'm glad you could find the time to drop by and see what we've got going today.</P>
In a style sheet-capable browser, you'll see small caps used for an attractive, printed-style introduction to your paragraph. In older browsers, the text is unaffected.
Having seen how certain style elements can be defined for your Web page, you might be interested in learning all of the different style changes you can make to your documents. There are two things you should recognize about this.
First of all, the CSS style sheet definition is only one of infinite possible style sheet definitions. That means that anyone can create a style sheet definition, give it a MIME name like text/bob, and create a browser that includes all of the programming required to render the elements of that style sheet. This can get very tedious to learn and design by hand, which is part of the fodder for my argument that style sheets are the beginning of the end of simple (unassisted) HTML layout.
Fortunately for you, the W3C (along with the corporations behind popular browsers) have just announced at the time of writing that the CSS will be the first standard for style sheets. That, at least, gives you common ground to work with when you set out to design Web pages for the general public. And, of course, the magic of style sheets is that if a browser can't use them, it won't. No basic information is lost.
The second major point is this: the current working draft of the CSS style sheet definition is over 40 pages long-and it's basically full of possible style properties. That means things go much deeper than { color: red } in CSS. I'll touch on some of the high points, but if you get very deep into style sheets, you'll want to consult http://www.w3.org/pub/WWW/TR/WD-css1.html for the latest CSS Level 1 developments and changes.
Table 18.1 offers some of the more likely CSS defined style properties
and their possible values or value types.
| Property | Value | Example(s) |
| font-family | name of font | Helvetica, Serif, Symbol |
| font-size | number/percentage | 12pt, +1, 120% |
| font-weight | number/strength | +1, light, medium, extra bold |
| font-style | name of style | italic, small caps, small caps italic |
| font | combination of above | 12pt Serif medium small caps |
| color | word/hex number | red, green, blue, FF00FF |
| background | color/blend/file | paper.gif, red, black/white |
| word-spacing | number+units | 1pt, 4em, 1in |
| text-spacing | number+units | 3pt, 0.1em, +1 |
| text-decoration | word | underline, line through, box, blink |
| vertical-align | word/percentage | baseline, sup, sub, top, middle, 50% |
| text-align | word | left, right, center, justify |
| text-indent | number/percentage | 1in, 5%, 3em |
| margin | number | 0.5in, 2em |
| list-style | word/URL | disc, circle, square, lower alpha |
| white-space | pre/normal | pre, normal |
You can probably figure out what most of these do, but I want to point out something about a few of them.
The FONT property is basically a shorthand reference for the four properties that precede it in the table. You can simple use any of the related values for FONT, effectively describing its entire appearance in one tag. With any font tag, you probably want to be as generic with font names (like Helvetica or Courier) as possible, since the user's browser will have to decide what that font name's closest counterpart is on the user's system.
The possible values for COLOR include black, red, white, green, blue, yellow, brown, gray, orange, and purple. You can also add "light" or "dark" to any of these colors. Also, remember that you're acting on a particular tag (most of the time) and that color most often refers to text color. It can be used with any text-related tag, like <BLOCKQUOTE>, as in the following example:
<STYLE TYPE="text/css">
BLOCKQUOTE.helv_red { font-family: helvetica; color: red }
</STYLE>
And, you'd call it just like any other CLASS of an HTML tag:
<BLOCKQUOTE CLASS="helv_red">Blockquote class</BLOCKQUOTE>
The properties VERTICAL-ALIGN and TEXT-ALIGN give Web designers the much-desired control over centering and justifying text in a document.
The BACKGROUND property is most often used in conjunction with the <BODY> tag, although you can technically change the background of nearly element. The background can be a color, two colors (blended in the background), or a URL to a graphic file. You can also include both color and file, so that a background color is used if the file isn't found. Here's an example:
<HEAD>
<TITLE>Background Page</TITLE>
<STYLE TYPE="text/css">
BODY.back { background: "http://www.fakecorp.com/back.gif" white/blue }
</STYLE>
<HEAD>
<BODY CLASS="back">
For the most part, a style sheet should be secondary to the communicative nature of your text and graphics. Ideally, this is a page that would work for both HTML 2.0 users and users with style sheet-capable browsers. Let's put together a small style sheet and HTML page.
Save a new HTML document from your template and enter Listing 18.1.
Listing 18.1 style1.html Creating a Style Sheet
<HTML>
<HEAD>
<TITLE>Style Sheet Example</TITLE>
<STYLE TYPE="text/css">
BODY.back {background: "paper.gif" white}
H2.ital {text-style: italic}
H3.center {text-align: center}
P.center {text-align: center}
SPAN {font: 14pt sanserif small-caps; color: blue}
</STYLE>
</HEAD>
<BODY CLASS="back">
<H1>About BigCorp</H1>
<H2 CLASS="ital">Taking Over the World, One Step at a Time</H2>
<HR>
<H3 CLASS="center">About our Company</H3>
<P CLASS="center">
<SPAN>"Domination of the world</SPAN> is only the first step,"were the
immortal words of BigCorp founder, Mr. Bigbucks. "If it were that simple,
I would have a much better golf game."</P>
<P>But that's hardly the extent of BigBuck's ambition. From humble starts,he's taken on the textiles, electronics, automotive, computer and political-graft indsutries with a "kill-or-at-least-maim" attitude.</P>
</BODY>
</HTML>
Once you've got that entered, you meet up with the second half of the example. Now I just want you to load the page and see what parts (if any) of the style sheet your browser is capable of displaying. Depending on how quickly browsers begin to incorporate style sheets, a more mainstream browser (like Netscape Navigator or MS Internet Explorer) may display this page just as completely.
To view the page, use the Open File command in your browser. Then check to see how your page looks.
Let's talk a little more about some of the other new elements you can use, and how you can use a single style sheet for more than one page on your site. To use an external style sheet, you need to drop back to the <LINK> tag which was first discussed in Chapter 10.
In this case, <LINK> will serve a more specific purpose for your Web page than it has in previous discussions. Using the REL attribute for the <LINK> tag, you can add the STYLE elements from the linked page to the current page. Predefined style classes can then be used in the current HTML markup.
This version of the <LINK> tag works like this:
<LINK TITLE="link_doc_title" REL=stylesheet HREF="URL" TYPE="text/css">
The TYPE can accept any style sheet type you might be interested in using-we're sticking with CSS. The TITLE should be the same as the remote file's title and the HREF URL needs to be an URL to the document that includes the <STYLE> definition that you also want to use for the current page. An example might be:
<LINK TITLE="MY STYLE" REL=stylesheet HREF="my.style" TYPE="text/css">
So what type of file are you linking to? If you prefer, you can simply link to a common HTML file that defines the style for your Web site. Even your index page can serve as this common style page, if it includes a <STYLE> definition.
Or, you can create a document that includes nothing but a <STYLE> container and style page definitions. HTML and head/body tags aren't required since the <LINK> tag is essentially "replaced" in the current document with the <STYLE> information. And the <LINK> tag is already in the appropriate place for that <STYLE> information-between the <HEAD> tags.
With either a <LINK> tag or a <STYLE> tag defined in the head of your document, you can use not only the currently defined classes for creating styles, but also overrides to change the style of nearly any HTML tag. How does this work? It's similar to defining style classes, but you instead use the STYLE attribute with any legal HTML tag. The following is an example:
<P STYLE="text align: center"> This paragraph is centered, even if it
doesn't have a CLASS defined that centers text.</P>
The following text is <EM STYLE="color: blue">blue and emphasized</EM>.
<OL STYLE="list-style: lower-roman">
<LI> Each list element
<LI> Is numbered with lowercase
<LI> Roman numerals
</OL>
You can see where the flexibility of style sheets is almost getting out of control. Although you can call these overrides for your current style sheet, the truth is that you can use these STYLE-attributed HTML tags anytime that you want to-as long as you've defined the text/css type through a <STYLE> or <LINK> tag in the head of your document. So, if you'd prefer to generate your style elements on-the-fly, you can define a <LINK> or empty <STYLE> tag that does little more than define the TYPE as text/css.
The style sheet standard also creates another tag, the <DIV> (division) tag, that allows you to assign attributes to a particular part of your document. <DIV> is a container tag that applies different styles to anything, including images, placed between the two tags. Ultimately, it gives the designer another level of organization for your Web page. If you think of a <DIV> as one level below the <BODY> tag, you're on the right track.
The <DIV> tag works like this:
<DIV CLASS="class_name" ALIGN="direction">
...HTML markup...
</DIV>
Notice that the <DIV>
tag can accept the same CLASS
attribute that most other HTML tags can take when used with a
style sheet. This allows you to create a division of your HTML
pages that accepts particular style properties. In addition, the
<DIV> tag can take
the attribute ALIGN, which
can accept LEFT, CENTER,
RIGHT, or JUSTIFY.
| Note |
Many browsers began accepting the <DIV> tag and ALIGN attribute early in the original HTML 3.0 draft's lifespan. This is the most appropriate way to center a page or portion of the page. When possible, use this tag instead of the Netscape-specific <CENTER> tag. (More on that in Chapter 19.) |
Let's take a look at the <DIV> tag in action:
<DIV ALIGN="CENTER">
<IMG SRC="XJ906.GIF">
<H3>The XJ906 Mega-Notebook</H3>
<P>We can't be more proud of our latest addition to our notebook line-up,
the XJ906. Available with a number of processors (all daughterboard
upgradable) and many memory configurations (up to 64 MB) the most impressive aspect of the XJ906 has to be its cutting-edge approach to multimedia.</P>
<UL>
<LI>6x CD-ROM (internal, sliding-tray)
<LI>2 PCCard 2.0 slots
<LI>16-bit stereo sound and built-in speakers
<LI>Hardware MPEG support
<LI>NTSC Video In/Out Ports
<LI>Available docking station
</UL>
</DIV>
<H5>Copyright 1996.</H5>
Here, finally, is an HTML 3.0 tag you can view in the most popular browsers (see fig. 18.5). You can use the <DIV> tag with style sheets in the following example.
Figure 18.5: The <DIV> tag centers items in Netscape Navigator.
Let's incorporate everything you've learned so far about style sheets and the <DIV> tag. You'll still define a minimal style sheet in the head of your document, but you'll use overrides for the bulk of the text. You'll also use the <DIV> tag to apply styles and global alignment.
Create a new HTML document based on your template, then enter something similar to Listing 18.2.
Listing 18.2 style2.html Using the <DIV> Tag With Styles
<HTML>
<HEAD>
<TITLE>Advance Style Sheets</TITLE>
<STYLE TYPE="text/css">
H2.mycaps {font-style: small-caps}
BODY.back {background: "paper.gif" white/light blue}
SPAN {font-style: small-caps}
</STYLE>
</HEAD>
<BODY CLASS="back">
<H1 STYLE="text-align: center"> Micheal T. Williamson </H1>
<H2 CLASS="mycaps">Objective</H2>
<DIV ALIGN="CENTER">
<P STYLE="font: 14pt italics">I'm interested in a management-level position with an exceptional graphics design/Internet firm. I'm looking for a growth position that takes advantages of my writing, computer and graphic design skills.</P>
</DIV>
<H2 CLASS="mycaps">Skills</H2>
<DIV STYLE="margin: 1.5in">
<UL STYLE="list-style: square">
<LI><B>Writer.</B> Skilled as a technical and product copy writer, with
education in English, technical writing, creative writing and advertising
copy writing. Experience includes work with successful PR firms and
advertising firms.
<LI><B>Technology.</B> A Master's Degree in Management Information Systems has given me the background in computing that allows me a great understanding of the magic behind the machines. A relentless effort to stay "current" has me reading 5-10 periodicals a week related to the industry.
<LI><B>Internet.</B> The emphasis in the last few years on the Internet
played to some skills I developed in pursuit of my Master's degree, including experience with some of the earliest implementations of HTML. Since that time I've been responsible for the development of five major HTML projects, including the original BigCorp site in 1994.
</UL>
</DIV>
</BODY>
</HTML>
You get the idea. You can notice two things from this listing, both related to the style sheets and <DIV> tags discussed in this chapter. First, they are both very flexible and offer unprecedented control over page layout. Second, they can really fill up an HTML document fast. It may be best to define a style sheet and use the CLASS attribute whenever possible. Overrides for every element can be overkill-but, then again, there's a lot you can do to make you pages better looking.
A number of HTML 3.0 proposals are currently fighting for survival in the W3C and other places where HTML standards are created. With the demise of the original HTML 3.0 standard, current HTML 3.0 level components are being standardized one at a time. So, the future of math tags, the banner element, and style sheets are still up in the air.
Math tags will most likely be implemented because they fill a need in the HTML world for a convenient way to represent mathematical formulae without requiring the designer to use images created by other programs. The banner element might not be so lucky, since it has a lot in common with the frames tags proposed by Netscape.
Style sheets do look like they'll survive, but they'll also be somewhat complicated to implement. At their most basic, they offer designers unprecedented control over the look of their Web pages. At their most complicated, they'll probably require sophisticated applications (along the same lines as desktop publishing programs) for precision layout.