Chapter 5

More Text Formatting with HTML

CONTENTS

• Character Styles
  • Logical Styles
  • Physical Styles
• Preformatted Text
• Horizontal Rules
  • HTML 3.2 Extensions to the <HR> Tag
• Line Break
• Addresses
• Quotations
• Special Characters
  • Character Entities for Special Characters
  • Character Entities for Reserved Characters
• Text Alignment
  • Aligning Individual Elements
  • Aligning Blocks of Elements
• Fonts and Font Sizes
  • Changing the Font Size
  • Changing the Font Face
• The Dreaded <BLINK>
• Other Extensions
  • Special List Formats
  • <NOBR> and <WBR>
• Summary
• Q&A

Yesterday you learned the basics of HTML, including several basic page elements and links. With that background you're ready to learn more about what HTML can do in terms of text formatting and layout. This chapter describes most of the remaining tags in HTML that you'll need to know to construct pages, including both tags in standard HTML 2.0 and HTML 3.2 as well as HTML extensions in individual browsers. Today you'll learn how to

• Specify the appearance of individual characters (bold, italic, typewriter)
• Include special characters (characters with accents, copyright and registration marks, and so on)
• Create preformatted text (text with spaces and tabs retained)
• Align text left, right, justified, and centered
• Change the font and font size
• Create other miscellaneous HTML text elements, including line breaks, rule lines, addresses, and quotations

In addition, you'll learn the differences between standard HTML and HTML extensions, and when to choose which tags to use in your pages. At the end of this chapter, you'll create a complete Web page that uses many of the tags presented in this chapter as well as the information from the previous four chapters.

This is a long chapter, covering a tags and options, and it's all going to be a bit overwhelming. But don't worry about remembering everything now; just get a grasp of what sorts of formatting you can do in HTML, and then you can look up the specific tags later. In the next chapter, we'll take a significant break and look at some of the tools and programs you can use to help you write HTML so you don't have to remember everything while you're still learning how to put pages together.

Character Styles

When you use an HTML tag for paragraphs, headings, or lists, those tags affect that block of text as a whole, changing the font, changing the spacing above and below the line, or adding characters (in the case of bulleted lists). Character styles are tags that affect words or characters within other HTML entities and change the appearance of that text so it is somehow different from the surrounding text-making it bold or underline, for instance.

To change the appearance of a set of characters within text, you can use one of two kinds of tags: logical styles or physical styles.

Logical Styles

Logical style tags indicate how the given highlighted text is to be used, not how it is to be displayed. This is similar to the common element tags for paragraphs or headings. They don't indicate how the text is to be formatted, just how it is to be used in a document. Logical style tags might, for example, indicate a definition, a snippet of code, or an emphasized word.

When you use logical style tags, the browser determines the actual presentation of the text, be it in bold, italic, or any other change in appearance. You cannot guarantee that text highlighted using these tags will always be bold or always be italic (and, therefore, you should not depend on it, either).

Each character style tag has both opening and closing sides, and affects the text within those two tags. There are eight logical style tags in standard HTML:

Got all those memorized now? Good! There will be a pop quiz at the end of the chapter. The following code snippets demonstrate each of the logical style tags, and Figures 5.1 and 5.2 illustrate how all eight tags are displayed in Netscape and Lynx.

<P>We'd all get along much better if you'd stop being so <EM>silly.</EM>
<P>You <STRONG>must</STRONG> open the can before drinking</P>
<P><CODE>#include "trans.h"</CODE></P>
<P>Type the following command: <KBD>find . -name "prune" -print</KBD></P>
<P><CODE>chown </CODE><VAR>your_name the_file</VAR></P>
<P>The URL for that page is <SAMP>http://www.cern.ch/</SAMP></P>
<P>Styles that are named on how they are used are called <DFN>character
styles</DFN></P>
<P>Eggplant has been known to cause extreme nausea in many unsuspecting
people<CITE> (Lemay, 1994)</CITE></P>

Figure 5.1: The output in Netscape.

Figure 5.2: The output in Lynx.

Physical Styles

In addition to the tags for style in the previous section, there is also a set of tags that change the actual presentation style of the text-to make it bold, italic, or monospace.

Like the character style tags, each formatting tag has a beginning and ending tag.

Standard HTML 2.0 defines three physical style tags:

<B> Bold
<I> Italic
<TT> Monospaced typewriter font

HTML 3.2 defines several other physical style tags, including:

<U> Underline
<S> Strike through
<BIG> Bigger print than the surrounding text
<SMALL> Smaller print
<SUB> Subscript
<SUP> Superscript

If you choose to use the physical style tags, particularly the newer HTML 3.2 tags, be forewarned that if a browser cannot handle one of the physical styles, it may substitute another style for the one you're using, or ignore that formatting altogether.

You can nest character tags-for example, use both bold and italic for a set of characters-like this:

<B><I>Text that is both bold and italic</I></B>

However, the result on the screen, like all HTML tags, is browser-dependent. You will not necessarily end up with text that is both bold and italic. You may end up with one or the other.

This input and output example shows some of the physical style tags and how they appear in Netscape (Figure 5.3) and Lynx (Figure 5.4).

<P>In Dante's <I>Inferno</I>, malaboge was the eighth circle of hell,
and held the malicious and fraudulent.</P>
<P>All entries must be received by <B>September 26, 1996</B>.</P>
<P>Type <TT>lpr -Pbirch myfile.txt</TT> to print that file.</P>
<P>Sign your name in the spot marked <U>Sign Here</U>:</P>
<P>People who wear orange shirts and plaid pants <S>have no taste</S>
are fashion-challenged.</P>
<P>RCP floor mats give you <BIG>BIG</BIG> savings over the competition!</P>
<P>Then, from the corner of the room, he heard a <SMALL>tiny voice</SMALL>.</P>
<P>In heavy trading today. Consolidated Orange Trucking
rose <SUP>1</SUP>/<SUB>4</SUB>
points on volume of 1,457,900 shares.</P>

Figure 5.3: The output in Netscape.

Figure 5.4: The output in Lynx.

Preformatted Text

Most of the time, text in an HTML file is formatted based on the HTML tags used to mark up that text. As I mentioned in Chapter 3, "Begin with the Basics," any extra white space (spaces, tabs, returns) that you put in your text are stripped out by the browser.

The one exception to this rule is the preformatted text tag <PRE>. Any white space that you put into text surrounded by the <PRE> and </PRE> tags is retained in the final output. With the <PRE> and </PRE> tags, you can format the text the way you want it to look, and it will be presented that way.

The catch is that preformatted text is also displayed (in graphical displays, at least) in a monospaced font such as Courier. Preformatted text is excellent for things such as code examples, where you want to indent and format lines appropriately. Because you can also use the <PRE> tag to align text by padding it with spaces, you can also use it for simple tables. However, the fact that those tables are presented in a monospaced font may make them less than ideal (you'll learn how to do real tables in Chapter 13, "Tables"). Here's an example of a table created with <PRE>. (Figure 5.5 shows how it looks in Netscape.)

<PRE>
            Diameter    Distance     Time to        Time to
            (miles)     from Sun      Orbit          Rotate
                       (millions
                        of miles)
-------------------------------------------------------------------
Mercury      3100          36        88 days        59 days
Venus        7700          67        225 days       244 days
Earth        7920          93        365 days       24 hrs
Mars         4200         141        687 days       24 hrs 24 mins
Jupiter     88640         483        11.9 years     9 hrs 50 mins
Saturn      74500         886        29.5 years     10 hrs 39 mins
Uranus      32000        1782        84 years       23 hrs
Neptune     31000        2793        165 days       15 hrs 48 mins
Pluto        1500        3670        248 years      6 days 7 hrs
</PRE>

Figure 5.5: A table created using <pre>, shown in Netscape.

When creating text for the <PRE> tag, you can use link tags and character styles, but not element tags such as headings or paragraphs. Break your lines using a return , and try to keep your lines at 60 characters or less. Some browsers may have limited horizontal space in which to display text, and since browsers cannot reformat preformatted text to fit that space, you should make sure you stay within the boundaries to prevent your readers from having to scroll from side-to-side.

Be careful with tabs in preformatted text. The actual number of characters for each tab stop varies from browser to browser. One browser may have tabs stops at every fourth character, whereas another may have them at every eighth character. If your preformatted text relies on tabs at a certain number of spaces, consider using spaces instead of tabs.

The <PRE> tag is also excellent for converting files that were originally in some sort of text-only form, such as mail messages or Usenet news postings, to HTML quickly and easily. Just surround the entire content of the article within <PRE> tags, and you have instant HTML, for example:

<PRE>
To: lemay@lne.com
From: jokes@lne.com
Subject: Tales of the Move From Hell, pt. 1
Date: Fri, 26 Aug 1994 14:13:38 +0800

I spent the day on the phone today with the entire household
services division of northern california, turning off services,
turning on services, transferring services and other such fun
things you have to do when you move.

It used to be you just called these people and got put on hold for
and interminable amount of time, maybe with some nice music, and
then you got a customer representative who was surly and hard of
hearing, but with some work you could actually get your phone
turned off.
</PRE>

The following HTML input and output example shows a simple ASCII art cow and how it appears in Netscape (Figure 5.6) and Lynx (Figure 5.7):

<PRE>
     (  )
Moo  (oo)
      \/------\
       ||     | \
       ||--W||  *
       ||    ||
</PRE>

Figure 5.6: The output in Netscape.

Figure 5.7: The output in Lynx.

Horizontal Rules

The <HR> tag, which has no closing tag and no text associated with it, creates a horizontal line on the page. Rule lines are excellent for visually separating sections of the Web page; just before headings, for example, or to separate body text from a list of items. Figure 5.8 illustrates a rule line.

Figure 5.8 : A rule line.

This input and output example shows a rule line and a list and how they appear in Netscape (Figure 5.9) and Lynx (Figure 5.10).

<HR>
<H2>To Do on Friday</H2>
<UL>
<LI>Do laundry
<LI>Send Fedex with pictures
<LI>Have lunch with Mollie
<LI>Read Email
<LI>Set up Ethernet
</UL>
<HR>

Figure 5.9: The output in Netscape.

Figure 5.10: The output in Lynx.

HTML 3.2 Extensions to the <HR> Tag

In HTML 2.0, the <HR> tag is just as you see it, with no closing tag or attributes. However, several HTML 3.2 extensions to the <HR> tag that are supported by several other browsers give you greater control over the appearance of the line drawn by <HR>.

The SIZE attribute indicates the thickness, in pixels, of the rule line. The default is 2, and this is also the smallest thickness that you can make the rule line. Figure 5.11 shows some sample rule line thicknesses.

Figure 5.11 : Examples of rule line thicknesses.

The WIDTH attribute indicates the horizontal width of the rule line. You can specify either the exact width, in pixels, or the value as a percentage of the screen width (for example, 30 percent or 50 percent), which will change if you resize the window. Figure 5.12 shows some sample rule line widths.

Figure 5.12 : Examples of rule line widths.

If you specify a WIDTH smaller than the actual width of the screen, you can also specify the alignment of that rule line with the ALIGN attribute, making it flush left (ALIGN=LEFT), flush right (ALIGN=RIGHT), or centered (ALIGN=CENTER). By default, rule lines are centered.

A popular trick used by Web designers who use these extensions is to create patterns with several small rule lines, as shown in Figure 5.13.

Figure 5.13 : An example of patterns created with several small rule lines.

This is one of those instances in which using newer features of HTML in your pages looks awful in other browsers that don't support those features. When viewed in browsers without the SIZE attribute, each of the small rule lines now covers the entire width of the screen. If you must use these rule line patterns, consider using small images instead (which will work in other browsers).

Finally, the NOSHADE attribute causes the browser to draw the rule line as a plain black line, without the three-dimensional shading, as shown in Figure 5.14.

Figure 5.14 : Rule lines without shading.

Line Break

The <BR> tag breaks a line of text at the point where it appears. When a Web browser encounters a <BR> tag, it restarts the text after the tag at the left margin (whatever the current left margin happens to be for the current element). You can use <BR> within other elements such as paragraphs or list items; <BR> will not add extra space above or below the new line or change the font or style of the current entity. All it does is restart the text at the next line. This example shows a simple paragraph where each line ends with a <BR>. Figures 5.15 and 5.16 show how it appears in Netscape and Lynx, respectively.

<P>Tomorrow, and tomorrow, and tomorrow<BR>
Creeps in this petty pace from day to day<BR>
To the last syllable of recorded time;<BR>
And all our yesterdays have lighted fools<BR>
The way to dusty death. Out, out, brief candle!<BR>
Life's but a walking shadow, a poor player,<BR>
That struts and frets his hour upon the stage<BR>
And then is heard no more. It is a tale <BR>
Told by an idiot, full of sound and fury, <BR>
Signifying nothing.</P>

Figure 5.15: The output in Netscape.

Figure 5.16: The output in Lynx.

Addresses

The address tag <ADDRESS> is used for signature-like entities on Web pages. Address tags usually go at the bottom of each Web page and are used to indicate who wrote the Web page, who to contact for more information, the date, any copyright notices or other warnings, and anything else that seems appropriate. Addresses are often preceded with a rule line (<HR>), and the <BR> tag can be used to separate the lines, for example:

<HR>
<ADDRESS>
Laura Lemay lemay@lne.com <BR>
A service of Laura Lemay, Incorporated <BR>
last revised September 30 1994 <BR>
Copyright Laura Lemay 1994 all rights reserved <BR>
Void where prohibited. Keep hands and feet inside the vehicle at all times.
</ADDRESS>

Without an address or some other method of "signing" your Web pages, it becomes close to impossible to find out who wrote it, or who to contact for more information. Signing each of your Web pages using the <ADDRESS> tag is an excellent way to make sure that if people want to get in touch with you, they can.

This simple input and output example shows an address in Netscape (Figure 5.17) and Lynx (Figure 5.18).

<HR>
<ADDRESS>
lemay@lne.com Laura Lemay
</ADDRESS>

Figure 5.17: The output in Netscape.

Figure 5.18: The output in Lynx.

Quotations

The <BLOCKQUOTE> tag is used to create a quotation. (Unlike the <CITE> tag, which highlights small quotes, <BLOCKQUOTE> is used for longer quotations that should not be nested inside other paragraphs.) Quotations are generally set off from regular text by indentation or some other method. For example, the Macbeth soliloquy I used in the example for line breaks would have worked better as a <BLOCKQUOTE> than as a simple paragraph. Here's another example:

<BLOCKQUOTE>
"During the whole of a dull, dark, and soundless day in the autumn
of the year, when the clouds hung oppressively low in the heavens,
I had been passing alone, on horseback, through a singularly dreary
tract of country, and at length found myself, as the shades of evening
grew on, within view of the melancholy House of Usher."-Edgar Allen Poe
</BLOCKQUOTE>

As in paragraphs, you can separate lines in a <BLOCKQUOTE> using the line-break tag <BR>. This input and output example shows a sample of this, and how it appears in Netscape (Figure 5.19).

<BLOCKQUOTE>
Guns aren't lawful, <BR>
nooses give.<BR>
gas smells awful.<BR>
You might as well live.<BR>
-Dorothy Parker
</BLOCKQUOTE>

Figure 5.19: The output in Netscape.

Special Characters

As you learned earlier in the week, HTML files are ASCII text and should contain no formatting or fancy characters. In fact, the only characters you should be putting in your HTML files are characters that are actually printed on your keyboard. If you have to hold down any key other than Shift, or type an arcane combination of keys to produce a single character, you can't use that character in your HTML file. That includes characters you may use every day, such as em dashes and curly quotes (and, if your word processor is set up to do automatic curly quotes, you should turn them off when you write your HTML files).

But wait a minute, I can hear you say. If I can type a character, like a bullet or an accented "a" on my keyboard using a special key sequence, include it in an HTML file, and my browser can display it just fine when I look at that file, what's the problem?

The problem is that the internal encoding your computer does to produce that character (which allows it to show up properly in your HTML file and in your browser's display) most likely will not translate to other computers. Someone else on the Net reading your HTML file with that funny character in it may very well end up with some other character, or garbage. Or, depending on how your page gets shipped over the Net, the character may be lost before it ever gets to the computer where the file is being viewed.

So what can you do? HTML provides a reasonable solution. It defines a special set of codes, called character entities, which you can include in your HTML files to represent the characters you want to use. When interpreted by a browser, these character entities are displayed as the appropriate special characters for the given platform and font.

Character Entities for Special Characters

Character entities take one of two forms: named entities and numbered entities.

Named entities begin with an ampersand (&) and end with a semicolon (;). In between is the name of the character (or, more likely, a shorthand version of that name like agrave for an "a" with a grave accent or reg for a registered trademark sign). The names, unlike other HTML tags, are case sensitive, so you should make sure to type them exactly. Named entities look something like this:

&quot;
&laquo;
&copy;

The numbered entities also begin with an ampersand and end with a semicolon, but instead of a name, they have a hash sign and a number. The numbers correspond to character positions in the ISO-Latin-1 (ISO 8859-1) character. Every character that you can type or use a named entity for also has a numbered entity. Numbered entities look like this:

&#130;
&#245;

You use either numbers or named entities in your HTML file by including them in the same place that the character they represent would go. So, to have the word "resumé" in your HTML file, you would use either:

resum&eacute;

or

resum&#233;

I've included a table in Appendix B that lists the named entities currently supported by HTML 2.0. See that table for specific characters. In addition, HTML 3.2 provides two new named character entities for the copyright (©) and registered (™) symbols: &copy; and &reg;, respectively.

Character Entities for Reserved Characters

For the most part, character entities exist so you can include special characters that are not part of the standard ASCII character set. There are several exceptions, however, for the few characters that have special meaning in HTML itself. You must also use entities for these characters.

For example, say you wanted to include a line of code in an HTML file that looked something like this:

<P><CODE>if x < 0 do print i</CODE></P>

Doesn't look unusual, does it? Unfortunately, HTML cannot display this line as written. Why? The problem is with the < (less-than) character. To an HTML browser, the less-than character means "this is the start of a tag." Because in this context the less than character is not actually the start of a tag, your browser may get confused. You'll have the same problem with the greater than character (>) because it means the end of a tag in HTML, and with the ampersand (&), meaning the beginning of a character escape. Written correctly for HTML, the line of code above would look like this:

<P><CODE>if x &lt; 0 do print i</CODE></P>

HTML provides named escape codes for each of these characters, and one for the double-quote, as well, as shown in Table 5.1.

The double-quote escape is the mysterious one. Technically, to produce correct HTML files, if you want to include a double-quote in text, you should be using the escape sequence and not typing the quote character. However, I have not noticed any browsers having problems displaying the double-quote character when it is typed literally in an HTML file, nor have I seen many HTML files that use it. For the most part, you are probably safe just using plain old " in your HTML files rather than the escape code.

Text Alignment

Text alignment is the ability to arrange a block of text such as a heading or a paragraph so that it is aligned against the left margin (left justification, the default), aligned against the right margin (right justification), or centered. In standard HTML 2.0, there are no mechanisms for aligning text; the browser is responsible for determining the alignment of the text (which means most of the time it's left-justified).

HTML 3.2 provides HTML extensions for text and element alignment, and these extensions have been incorporated into other browsers to varying degrees. In browsers that don't support some or all of the tags described in this section, you'll lose the alignment, and the text will appear aligned according to that browser's default rules. And, given the variety of support for the different tags described in this section, this probably will happen to you at some point. Keep that in mind as you design your pages to take alignment into account.

Aligning Individual Elements

To align an individual heading or paragraph, use the ALIGN attribute to that HTML element. ALIGN, which is an HTML 3.2 extension, has one of three values: LEFT, RIGHT, or CENTER.

<H1 ALIGN=CENTER>Northridge Paints, Inc.</H2>
<P ALIGN=CENTER >We don't just paint the town red.</P>

<H1 ALIGN=LEFT>Serendipity Products</H1>
<H2 ALIGN=RIGHT><A HREF="who.html">Who We Are</A></H2>
<H2 ALIGN=RIGHT><A HREF="products.html">What We Do</A></H2>
<H2 ALIGN=RIGHT><A HREF="contacts.html">How To Reach Us</A></H2>

Browsers support this type of alignment to varying degrees. Netscape 2.0 supports all three, whereas Internet Explorer and other browsers support only ALIGN=CENTER. Many other browsers may not support alignment of this sort at all.

This input and output example shows simple alignment of several headings in Netscape (Figure 5.20 shows the results):

<H1 ALIGN=LEFT>Serendipity Products</H1>
<H2 ALIGN=RIGHT><A HREF="who.html">Who We Are</A></H2>
<H2 ALIGN=RIGHT><A HREF="products.html">What We Do</A></H2>
<H2 ALIGN=RIGHT><A HREF="contacts.html">How To Reach Us</A></H2>

Figure 5.20: The output in Netscape.

Aligning Blocks of Elements

A slightly more flexible method of aligning text elements is to use the <DIV> tag, an HTML 3.2 extension. <DIV> stands for division, and includes the ALIGN attribute just as headings and paragraphs do. Unlike using alignments in individual elements, however, <DIV> is used to surround a block of HTML tags of any kind, and it affects all the tags and text inside the opening and closing tags. There are two advantages of DIV over the ALIGN attribute:

• DIV needs to be used only once, rather than including ALIGN repeatedly in several different tags.
• DIV can be used to align anything (headings, paragraphs, quotes, images, tables, and so on); the ALIGN attribute is only available on a limited number of tags.

To align a block of HTML code, surround that code by opening and closing <DIV> tags, and then include the ALIGN attribute in the opening tag. As in other tags, ALIGN can have the values LEFT, RIGHT, or CENTER.

<H1 ALIGN=LEFT>Serendipity Products</H1>
<DIV ALIGN=RIGHT>
<H2><A HREF="who.html">Who We Are</A></H2>
<H2><A HREF="products.html">What We Do</A></H2>
<H2><A HREF="contacts.html">How To Reach Us</A></H2>
</DIV>

All the HTML between the two <DIV> tags will be aligned according to the value of the ALIGN attribute. If there are individual ALIGN attributes in headings or paragraphs inside the DIV, those values will override the global DIV setting.

Note that <DIV> is not itself a paragraph type. You still need regular element tags (<P>, <H1>, <UL>, <BLOCKQUOTE>, and so on) inside the opening and closing <DIV> tags.

At the moment, the only browser that supports <DIV> is Netscape 2.0, although other browsers will most likely follow suit.

In addition to <DIV>, there is also the centering tag <CENTER>, a Netscape extension that is not part of HTML 2.0 or 3.2 (and is unlikely to be part of a future version of HTML). The <CENTER> tag acts identically to <DIV ALIGN=CENTER>, centering all the HTML content inside the opening and closing tags. You put the <CENTER> tag before the text you want centered, and the </CENTER> tag after you're done, like this:

<CENTER>
<H1>Northridge Paints, Inc.</H2>
<P>We don't just paint the town red.</P>
</CENTER>

Although <CENTER> is far more limited than the <DIV> tag, it is also more widely supported by other browsers than <DIV>. However, given that <DIV> and the ALIGN attributes are more "correct" HTML than <CENTER> is, and because <CENTER> will be obsolete in the future, it's a good idea to move to the HTML 3.2 equivalents for alignment wherever you can.

Fonts and Font Sizes

The <FONT> tag, part of HTML 3.2, is used to control the characteristics of a given set of characters not covered by the character styles. Originally, <FONT> was used only to control the font size of the characters it surrounds, but it has since been extended to allow you to change the font itself and the color of those characters.

In this section, we'll discuss fonts and font sizes. On Day 4, "Images and Backgrounds," when we talk about color in general, you'll learn about changing the font color.

Changing the Font Size

The most common use of the <FONT> tag is to change the size of the font for a character, word, phrase, or on any range of text. The <FONT>...</FONT> tags enclose the text, and the SIZE attribute indicates the size to which the font is to be changed. The values of SIZE are 1 to 7, with 3 being the default size. Look at the following example:

<P>Bored with your plain old font?
<FONT SIZE=5>Change it.</FONT></P>

Figure 5.21 shows the typical font sizes for each value of SIZE.

Figure 5.21 : Font sizes in Netscape.

You can also specify the size in the <FONT> tag as a relative value using the + or - characters in the value for SIZE. Because the default size is 3, you can change relative font sizes from -3 to +4, like this:

<P>Change the <FONT SIZE=+2>Font</FONT> size again.</P>

Here, the word Font (inside the <FONT> tags) will be two size levels larger than the default font when you view that example in Netscape.

Relative font sizes are actually based on a value that you can define using the <BASEFONT> tag, a Netscape extension. The <BASEFONT> tag also has the required attribute SIZE. SIZE can have a value of 1 to 7. All relative font changes in the document after the <BASEFONT> tag will be relative to that value.

Try to avoid using the <FONT> tag to simulate the larger-font effect of the HTML content-based tags such as the heading tags (<H1>, <H2>, and so on), or to emphasize a particular word or phrase. If your documents are viewed in browsers other than Netscape, you'll lose the font sizes, and your text will appear as if it were any other paragraph. If you stick to the content-based tags, however, a heading is a heading regardless of where you view it. Try to limit your use of the FONT tag to small amounts of special effects.

Changing the Font Face

Netscape introduced the <FONT> tag to HTML with its 1.0 browser. Microsoft's Internet Explorer, playing the same game, extended the <FONT> tag to include the FACE attribute. FACE, which for the time being is supported only by Internet Explorer, can be used to change the actual font of the text between the <FONT> tags.

FACE takes as its value a set of font names, surrounded by quotes and separated by commas. When a browser that supports FACE interprets a page with FACE in it, it will search the system for the given font names one at a time. If it can't find the first one, it'll try the second, and then the third, and so on, until it finds a font that is actually installed on the system. If it cannot find any of the listed fonts, the default font will be used instead. So, for example, the following text would be rendered in Futura. If Futura is not available, the browser will try Helvetica, and fall back on the default if Helvetica is not available.

<P><FONT FACE="Futura,Helvetica">Sans Serif fonts are fonts without
the small "ticks" on the strokes of the characters. </FONT></P>

Keep in mind if you use the FACE attribute that currently very few browsers support it, so it may be unavailable to most of your audience. Also, many fonts have different names on different systems; for example, plain old Times is Times on some systems, Times-Roman on others, and Times New Roman elsewhere. Because of the varying names of fonts and the lack of widespread support for the FACE attribute, changing the font name should only be used as an optional presentation-only feature rather than one to be relied on in your pages.

The Dreaded <BLINK>

You won't find the <BLINK> tag listed in Netscape's official documentation of its extensions. The capability to cause text to blink was included in Netscape as a hidden undocumented feature or Easter egg. Still, a good percentage of pages on the Web seem to use this feature.

The <BLINK>...</BLINK> tags cause the text between the opening and closing tags to have a blinking effect. Depending on the version of Netscape you are using, this can mean that the text itself vanishes and comes back at regular intervals or that an ugly gray or white block appears and disappears behind the text. Blink is usually used to draw attention to a portion of the page.

The problem with blink is that it provides too much emphasis. Because it repeats, the blink continues to drag attention to that one spot and, in some cases, can be so distracting that it can make it nearly impossible to absorb any of the other content of the page. The use of <BLINK> is greatly discouraged by most Web designers (including myself), because many people find it extremely intrusive, ugly, and annoying. Blink is the HTML equivalent of fingernails on a blackboard.

If you must use blink, use it very sparingly (no more than a few words on a page). Also, be aware that in some versions of Netscape, blinking can be turned off. If you want to emphasize a word or phrase, you should use a more conventional way of doing so, in addition to (or in place of) blink, because you cannot guarantee that blink will be available even if your reader is using Netscape to view your pages.

Other Extensions

This section is a catch-all for the remaining HTML extensions in common use in browsers and in pages on the Web today, including extensions to lists to change the numbering or bullet style, and tags for non-breaking text and word breaks.

Special List Formats

Normally, when you create lists in HTML, the browser determines the size and type of the bullet in an unordered list (the <UL> tag) or the numbering scheme in numbered lists (usually simply 1, 2, and so on for each item in the list). In HTML 3.2, several attributes to the list tags were added to allow greater control over how individual items are labeled.

For unordered lists (the <UL> tag), the TYPE attribute indicates the type of bullet used to mark each item. The possible values are as follows:

TYPE=DISC         A solid bullet (the default)
TYPE=CIRCLE      A hollow bullet
TYPE=SQUARE      A square hollow bullet

For example, the following code shows a list with hollow squares as the labels. Figure 5.22 shows the result in Netscape.

<UL TYPE=SQUARE>
<LI>The Bald Soprano
<LI>The Lesson
<LI>Jack, or the Submission
<LI>The Chairs
</UL>

Figure 5.22: Bullet types in Netscape.

For ordered lists (the <OL> tag), the TYPE attribute also applies but has a different set of values that indicate the numbering scheme used for the list:

For example, the following code numbers the outer list with Roman numerals (I, II, III), and the inner list with Arabic numerals (1, 2, 3). Figure 5.23 shows the result in Netscape.

<OL TYPE=I>
<LI>Income
    <OL TYPE=1>
    <LI>Wages, Salaries and other Earnings
    <LI>Interest and Dividend Income
    <LI>Gains and Losses
    </OL>
<LI>Itemized Deductions
<LI>Figuring your Tax
</OL>

Figure 5.23: Numbered list types in Netscape.

In addition, the START attribute indicates the number from which the list is to be started. The START attribute takes a number regardless of the TYPE. So, if you have an OL tag of TYPE=A with a START=3 attribute, the list starts from C and progress through D, E, and so on.

Note that because other browsers ignore the START attribute, your lists might be numbered differently in browsers that don't support HTML 3.2. To prevent such renumbering, either avoid using START altogether, or don't refer to specific list items by number in your text.

Finally, each list item tag (<LI>) also has added attributes to control list labels within a single list. The TYPE attribute can take any of the same values that it had in <UL> and <OL>. If you use numbering types in a <UL> list or bullet types in an <OL>, they will be ignored. Changing the TYPE for a list item affects that list item and all the items following it.

Within ordered lists, the <LI> tag can also have the VALUE attribute, which sets the value of this item to a particular number. This also affects all list items after this one, enabling you to restart the numbering within a list at a particular value.

Both TYPE and VALUE are ignored in other browsers, so relying on the effect they produce (for example, to mark specific items within a list as different from other items in a list) is probably not a good idea, because you will lose that emphasis in browsers that don't support these extensions.

These examples show how use of the TYPE attribute to the <OL> tag appears in both Netscape (Figure 5.24) and MacWeb, which does not yet support these new list types (Figure 5.25).

<P>Planting Instructions:</P>
<OL>
    <UL TYPE=SQUARE>
    <LI>Bare root plants should be planted immediately,
    or submerged in water until planting
    <LI>Roses should be submerged in water for 4-6 hours
    <LI>Avoid letting other plants dry out
    </UL>
<LI>Dig appropriate-sized holes in planting location
<LI>Dust with fertilizer
<LI>Plant with crown level with soil surface, firming as the hole is filled in
<LI>Water well and keep damp for the first week.
</OL>

Figure 5.24: The output in Netscape.

Figure 5.25: The output in MacWeb.

<NOBR> and <WBR>

The <NOBR>...</NOBR> tags are the opposite of the <BR> tag. The text inside the NOBR tags always remains on one line, even if it would have wrapped to two more lines without the NOBR. NOBR is used for words or phrases that must be kept together on one line, but be careful: long unbreakable lines can look really strange on your page, and if they are longer than the page width, they might extend beyond the right edge of the screen.

The <WBR> tag (word break) indicates an appropriate breaking point within a line (typically one inside a <NOBR>...</NOBR> sequence). Unlike <BR>, which forces a break, <WBR> is only used where it is appropriate to do so. If the line will fit on the screen just fine, the <WBR> is ignored.

Exercise 5.1: Create a real HTML page.

Here's your chance to apply what you've learned and create a real Web page. No more disjointed or overly silly examples. The Web page you'll create in this section is a real one, suitable for use in the real world (or the real world of the Web, at least).

Your task for this example: to design and create a home page for a bookstore called The Bookworm, which specializes in old and rare books.

Plan the Page

In Chapter 2, "Get Organized," I mentioned that planning your Web page before writing it usually makes things easier to build and to maintain. So first, consider the content you want to include on this page. Here are some ideas for topics for this page:

• The address and phone number of the bookstore
• A short description of the bookstore and why it is unique
• Recent titles and authors
• Upcoming events

Now, come up with some ideas for the content you're going to link from this page. Each title in a list of recently acquired books seems like a logical candidate. You can also create links to more information about the book, its author and publisher, its pricing, maybe even its availability.

The Upcoming Events section might suggest a potential series of links, depending on how much you want to say about each event. If you only have a sentence or two about each one, describing them on this page might make more sense than linking them to another page. Why make your reader wait for each new page to load for just a couple of lines of text?

Other interesting links may arise in the text itself, but for now, the basic link plan will be enough to start with.

Begin with a Framework

First, we'll create the framework that all HTML files must include: the document structuring commands, a title, and an initial heading. Note that the title is descriptive but short; you can save the longer title for the <H1> element in the body of the text.

<HTML>
<HEAD>
<TITLE>The Bookworm Bookshop</TITLE>
</HEAD>
<BODY>
<H1>The Bookworm: A Better Book Store</H1>
</BODY></HTML>

Add Content

Now begin adding the content. Since this is a literary endeavor, a nice quote about old books to start the page would be a nice touch. Because it's a quote, you can use the <BLOCKQUOTE> tag to make it stand out as such. Also, the name of the poem is a citation, so use <CITE> there, too.

<BLOCKQUOTE>
"Old books are best-how tale and rhyme<BR>
Float with us down the stream of time!"<BR>
- Clarence Urmy, <CITE>Old Songs are Best</CITE>
</BLOCKQUOTE>

The address of the bookstore is a simple paragraph, with the lines separated by line breaks:

<P>The Bookworm Bookshop<BR>
1345 Applewood Dr<BR>
Springfield, CA 94325<BR>
(415) 555-0034
</P>

After the address comes the description of the bookstore. I've arranged the description to include a list of features, to make the features stand out from the text better:

<P>Since 1933, The Bookworm Bookshop has offered
rare and hard-to-find titles for the discerning reader.
Unlike the bigger bookstore chains, the Bookworm offers:</P>
<UL>
<LI>Friendly, knowledgeable, and courteous help
<LI>Free coffee and juice for our customers
<LI>A well-lit reading room so you can "try before you buy"
<LI>Four friendly cats: Esmerelda, Catherine, Dulcinea and Beatrice
</UL>

Add one more note about the hours the store is open, and emphasize the actual numbers:

<P>Our hours are <STRONG>10am to 9pm</STRONG> weekdays,
<STRONG>noon to 7</STRONG> on weekends.</P>

Add More Content

After the description come the other major topics of this home page: the recent titles and upcoming events sections. Since these are topic headings, we'll label them with second-level head tags:

<H2>Recent Titles (as of 25-Sept-95)</H2>
<H2>Upcoming Events</H2>

The Recent Titles section itself is a classic link menu, as I described earlier on in this section. Here we'll put the list of titles in an unordered list, with the titles themselves as citations (the <CITE> tag):

<H2>Recent Titles (as of 25-Sept-95)</H2>
<UL>
<LI>Sandra Bellweather, <CITE>Belladonna</CITE>
<LI>Jonathan Tin, <CITE>20-Minute Meals for One</CITE>
<LI>Maxwell Burgess, <CITE>Legion of Thunder</CITE>
<LI>Alison Caine, <CITE>Banquo's Ghost</CITE>
</UL>

Now, add the anchor tags to create the links. How far should the link extend? Should it include the whole line (author and title), or just the title of the book? This is a matter of preference, but I like to link only as much as necessary to make sure the link stands out from the text. I prefer this approach to overwhelming the text. Here, I've linked only the titles of the books:

<UL>
<LI>Sandra Bellweather, <A HREF="belladonna.html">
<CITE>Belladonna</CITE></A>
<LI>Johnathan Tin, <A HREF="20minmeals.html">
<CITE>20-Minute Meals for One</CITE></A>
<LI>Maxwell Burgess, <A HREF="legion.html">
<CITE>Legion of Thunder</CITE></A>
<LI>Alison Caine, <A HREF="banquo.html">
<CITE>Banquo's Ghost</CITE></A>
</UL>

Note that I've put the <CITE> tag inside the link tag <A>. I could have just as easily put it outside the anchor tag; character style tags can go just about anywhere. But as I mentioned once before, be careful not to overlap tags. Your browser may not be able to understand what is going on. In other words, don't do this:

<A HREF="banquo.html"><CITE>Banquo's Ghost</A></CITE>

Next, let's move on to the Upcoming Events section. In the planning section we weren't sure if this would be another link menu, or if the content would work better solely on this page. Again, this is a matter of preference. Here, because the amount of extra information is minimal, it doesn't make much sense to create links for just a couple of sentences. So for this section we'll create a menu list (using the <UL> tag), which results in short paragraphs (bulleted in some browsers). I've boldfaced a few phrases near the beginning of each paragraph. Those phrases emphasize a summary of the event itself so that each paragraph can be scanned quickly and ignored if the reader isn't interested.

<H2>Upcoming Events</H2>
<UL>
<LI><B>The Wednesday Evening Book Review</B> meets, appropriately, on Wednesday evenings at PM for coffee and a round-table discussion. Call the Bookworm for information on joining the group and this week's reading assignment.
<LI><B>The Children's Hour</B> happens every Saturday at 1pm and includes reading, games, and other activities. Cookies and milk are served.
<LI><B>Carole Fenney</B> will be at the Bookworm on Friday, September 16, to read from her book of poems <CITE>Spiders in the Web.</CITE> <LI><B>The Bookworm will be closed</B> October 1 to remove a family of bats that has nested in the tower. We like the company, but not the mess they leave behind!
</UL>

Sign the Page

To finish off, sign what you have so your readers know who did the work. Here, I've separated the signature from the text with a rule line. I've also included the most recent revision date, my name as the "Web Master" (cute Web jargon meaning the person in charge of a Web site), and a basic copyright (with a copyright symbol indicated by the numeric escape &#169;):

<HR>
<ADDRESS>
Last Updated: 25-Sept-95<BR>
WebMaster: Laura Lemay lemay@bookworm.com<BR>
&#169; copyright 1995 the Bookworm<BR>
</ADDRESS>

Review What You've Got

Here's the HTML code for the page, so far:

<HTML>
<HEAD>
<TITLE>The Bookworm Bookshop</TITLE>
</HEAD>
<BODY>
<H1>The Bookworm: A Better Book Store</H1>
<BLOCKQUOTE>
"Old books are best-how tale and rhyme<BR>
Float with us down the stream of time!"<BR>
- Clarence Urmy, <CITE>Old Songs are Best</CITE>
</BLOCKQUOTE>
<P>The Bookworm Bookshop<BR>
1345 Applewood Dr<BR>
Springfield, CA 94325<BR>
(415) 555-0034
</P>
<P>Since 1933, The Bookworm Bookshop has offered rare
and hard-to-find titles for the discerning reader.
Unlike the bigger bookstore chains, the Bookworm offers:
<UL>
<LI>Friendly, knowledgeable, and courteous help
<LI>Free coffee and juice for our customers
<LI>A well-lit reading room so you can "try before you buy"
<LI>Four friendly cats: Esmerelda, Catherine, Dulcinea and Beatrice
</UL>
<P>Our hours are <STRONG>10am to 9pm</STRONG> weekdays,
<STRONG>noon to 7</STRONG> on weekends.</P>
<H2>Recent Titles (as of 25-Sept-95)</H2>
<UL>
<LI>Sandra Bellweather, <A HREF="belladonna.html">
<CITE>Belladonna</CITE></A>
<LI>Johnathan Tin, <A HREF="20minmeals.html">
<CITE>20-Minute Meals for One</CITE></A>
<LI>Maxwell Burgess, <A HREF="legion.html">
<CITE>Legion of Thunder</CITE></A>
<LI>Alison Caine, <A HREF="banquo.html">
<CITE>Banquo's Ghost</CITE></A>
</UL>
<H2>Upcoming Events</H2>
<UL>
<LI><B>The Wednesday Evening Book Review</B> meets, appropriately, on
Wednesday evenings at PM for coffee and a round-table discussion. Call
the Bookworm for information on joining the group and this week's
reading assignment.
<LI><B>The Children's Hour</B> happens every Saturday at 1pm and includes
reading, games, and other activities. Cookies and milk are served.
<LI><B>Carole Fenney</B> will be at the Bookworm on Friday, September 16,
to read from her book of poems <CITE>Spiders in the Web.</CITE>
<LI><B>The Bookworm will be closed</B> October 1 to remove a family
of bats that has nested in the tower. We like the company, but not
the mess they leave behind!
</UL>
<HR>
<ADDRESS>
Last Updated: 25-Sept-95<BR>
WebMaster: Laura Lemay lemay@bookworm.com<BR>
&#169; copyright 1995 the Bookworm<BR>
</ADDRESS>
</BODY></HTML>

So, now we have some headings, some text, some topics, and some links. This is the basis for an excellent Web page. At this point, with most of the content in, consider what else you might want to create links for, or what other features you might want to add to this page.

For example, in the introductory section, a note was made of the four cats owned by the bookstore. Although you didn't plan for it in the original organization, you could easily create Web pages describing each cat (and showing pictures), and then link them back to this page, one link (and one page) per cat.

Is describing the cats important? As the designer of the page, that's up to you to decide. You could link all kinds of things from this page if you had interesting reasons to link them (and something to link to). Link the bookstore's address to the local chamber of commerce. Link the quote to an online encyclopedia of quotes. Link the note about free coffee to the Coffee Home Page.

I'll talk more about good things to link (and how not to get carried away when you link) on Day 6, "Designing Effective Web Pages," when you learn about Dos and Don'ts for good Web pages. My reason for bringing this point up here is that once you have some content in place in your Web pages, opportunities for extending the pages and linking to other places may arise, opportunities you didn't think of when you created your original plan. So, when you're just about finished with a page, it's often a good idea to stop and review what you have, both in the plan and in your Web page.

For the purposes of this example, we'll stop here and stick with the links we've got. We're close enough to being done that I don't want to make this chapter longer than it already is!

Test the Result

Now that all the code is in place, you can preview the results in a browser. Figure 5.26 shows how it looks in Netscape. Actually, this is how it looks after you fix the spelling errors and forgotten closing tags and other strange bugs that always seem to creep into an HTML file the first time you create it. This always seems to happen no matter how good you get at it. If you use an HTML editor or some other help tool it will be easier, but there always seems to be mistakes. That's what previewing is for, so you can catch those problems before you actually make the document available to other people.

Figure 5.26 : The bookworm home page, almost done.

Looks good so far, but in the browsers I used to tested it, the description of the store and the Recent Titles sections tend to run together; there isn't enough distinction between them (see Figure 5.27).

Figure 5.27 : A problem section.

You have two choices for making them more distinct:

• Add rule lines (<HR>) in between sections.
• Change the <H2> tags to <H1> for more emphasis of the individual sections.

With design issues like this, it often comes down to a matter of preference and what looks the best in as many browsers as you can get your hands on. Either choice is equally correct, as both are visually interesting, and you haven't had to do strange things in HTML in order to get it to do what you want.

I settled on a single rule line between the description and the Recent Titles section. Figure 5.28 shows how it came out.

Figure 5.28 : The final Bookworm home page.

Get Fancy

Everything I've included on that page up to this point has been straight up HTML 2.0, so its readable in all browsers and will look pretty much the same in all browsers. Once I've got the page to this point, however, I can add HTML extensions that won't change the page for many readers, but might make it look a little fancier in browsers that do support these extensions.

So what extensions shall we use? I picked two:

• Centering the title of the page, the quote and the bookstore's address
• Making a slight font size change to the address itself

To center the topmost part of the page, we'll use the <DIV> tag around the heading, the quote, and the bookshop's address, like this:

<DIV ALIGN=CENTER>
<H1>The Bookworm: A Better Book Store</H1>
<BLOCKQUOTE>
"Old books are best-how tale and rhyme<BR>
Float with us down the stream of time!"<BR>
- Clarence Urmy, <CITE>Old Songs are Best</CITE>
</BLOCKQUOTE>
<P>The Bookworm Bookshop<BR>
1345 Applewood Dr<BR>
Springfield, CA 94325<BR>
(415) 555-0034
</P>
</DIV>

To change the font size of the address, add a <FONT> tag around the lines for the address:

<P><FONT SIZE=+1>The Bookworm Bookshop<BR>
1345 Applewood Dr<BR>
Springfield, CA 94325<BR>
(415) 555-0034
</FONT></P>

Figure 5.29 shows the final result, with extensions, in Netscape. Note that neither of these changes affect the readability of the page in browsers that don't support <DIV> or <FONT>; the page still works just fine without them. It just looks different.

Figure 5.29 : The final bookworm home page, with extensions.

When should you use HTML extensions? The general rule that I like to follow is to use extensions only when using them will not interfere with other browsers. But just as with the type of content to provide, its up to you to decide whether you'll use extensions, and if you do, which ones you'll use. You'll learn more about extensions and how to design well with them in Chapter 11, "Writing and Designing Web Pages: Dos and Don'ts."

Summary

Tags, tags, and more tags! In this chapter, you've learned about most of the remaining tags in the HTML 2.0 language for presenting text, quite of a few of the HTML extensions for additional text formatting and presentation, and put together a real-life HTML home page. You could stop now and create quite presentable Web pages. But there's more cool stuff to come, so don't put the book down yet.

Table 5.2 presents a quick summary of all the tags and extensions you've learned about in this chapter.

Q&A