HTML 2.0 is a standard created after the fact. What I mean is that HTML was already in wide use when the standard was finally written. As a result, there tend to be a few different ways to do the same things. You'll take a look at most of them, and I'll try to explain the theory behind each. I'll also recommend one or two options that best do what you're interested in accomplishing-and just leave the rest of the options for you to consult if the occasion ever demands.
One of the first things you might have wondered when you were entering text in Chapter 6 is, "How can I change the size of the text?" HTML 2.0 doesn't have any explicit tags or commands for changing the font size within a document (although Netscape HTML does). Instead, it relies on the implicit header tags to do this.
Header tags are containers, and unlike many other HTML tags, they double as paragraph tags. Ranging from level 1 to level 6, headers allow you to create different levels of emphasized headlines to help you organize your documents. The following is an example; see figure 7.1 for the results:
<H1>Header Level One is the largest for headlines or page titles</H1>
<H2>Level Two is a little smaller for major subheads</H2>
<H3>Level Three is again smaller, for minor subheads</H3>
<P>This is regular text.</P>
<H4>Level Four is about the same size as regular text, but emphasized</H4>
<H5>Level Five: again emphasized, but smaller than regular text</H5>
<H6>Level Six is generally the smallest header</H6>
You cannot include a header tag on the same line as regular text, even if you close the header tag and continue with unaltered text. A header tag has the same effect as a <P>, in that it creates a new line after its "off" tag. The following:
<H1>This is a header</H1> And this is plain text.
offers the same results as:
<H2>This is also a header</H2>
<P>And this is also plain text</P>
In both cases, the Web browser will place the header text and
plain text on different lines, with the header text appearing
larger and the plain text appearing "normal" in size.
| Note |
The HTML standard technically requires that using a particular header level requires that the larger header tags be used previously. So, for instance, if you use an <H2> tag, you should have an <H1> tag somewhere before it. Very few browsers (if any) actually require this and, for the most part, HTML designers use header tags as simply a way to change the size of text for emphasis. That's how I use them, even going so far as to use <H5> or <H6> for "fine print" on my pages. If you're an absolute stickler for standards, though, realize that it's more correct to only use header tags for true headers in your documents, and then only in order (i.e., <H1>, <H2>, <H3>, and so on). |
Now, with the addition of the header tags, you're suddenly able to add a level of organization to your pages that was lacking previously. Using the horizontal line and emphasis tags you saw in Chapter 6, it's possible to create a very useful text-oriented HTML document with what you now know.
Let's start just with headers and regular text. Load your HTML template into a text editor and save it as a new HTML document (headers.html or something similar). Then fill in the template's body section using both header containers and paragraph containers (see Listing 7.1).
Listing 7.1 headers.html The Template's HTML Body Section
<BODY>
<H1>Welcome to my home on the Web</H1>
<P>Hi there! My name is Mark Williamson, and I'm an active participant
in the Web. Aside from my Internet journeys I'm also a big fan of the
science-fiction writer Wilhelm Norris, and I love collecting models of
television spacecraft. As far as the boring stuff goes, I work as a Macintosh programmer in Carmel, California.</P>
<H2>My Work</H2>
<P>I've recently moved from programming in a Microsoft Windows
environment to a Macintosh environment, and I must admit that I've been more than a little overwhelmed. Fortunately I've had good help from local user groups and my co-workers...plus, they've introduced me to some exceptional tools for Mac programming.</P>
<H3>ProGraph</H3>
<P>If you've never worked in a visual programming environment, you're
in for a treat. With my background in Windows and UNIX C programming, I was surprised how quickly I picked up this object-oriented concept. I definitely recommend it!</P>
<H3>MetroWerks</H3>
<P>I can't imagine I even need to say anything about this. It's hands-down the best C and C++ development environment ever created for Macintosh. In my opinion, it's the best created for any platform!</P>
<H5>This document contains opinions that are my own and do not
necessarily reflect those of my employer.</H5>
</BODY>
Entering text and using header tags in this way allows us to create a document that has more of the feel of a well-outlined magazine article, or even a chapter in a book. You may have noticed that this book uses different-sized headlines to suggest that you're digging deeper into a subject (smaller headlines) or beginning a new subject (bigger headlines). HTML allows you to do the same thing with the header tag (see fig. 7.2).
Figure 7.2 : Inserting header containers between paragraphs makes for a more readable page.
Implicit tags are those that allow the browser to choose, within limitations, how the marked-up text will be displayed. Header tags are actually an example of an implicit tag, since the HTML designer has no control over how much bigger or smaller a header tag will be. Although most browsers will render header tags in somewhat similar ways, others (for instance, nongraphical browsers) have to come up with another system for emphasis, such as underlining or highlighting the text.
Because HTML was originally created with the overriding mission of being displayed on nearly any computer system, implicit tags for emphasis were a necessity. HTML allows the designer to decide what text will be emphasized. But only explicit tags tell the Web browser how to render that text.
Explicit tags are also often called physical tags, since they very specifically tell the Web browser how you want the text to physically appear. The browser is given no choice in the matter.
The basic explicit tags are containers that let the user mark
text as bold, italic, or underlined (see Table 7.1).
| Tags | Meaning |
| <B>, </B> | Bold text |
| <I>, </I> | Italic text |
| <U>, </U> | Underlined text |
| Note: |
Not all browsers will render underlined text (notable among them is Netscape Navigator), because hypertext links are also often displayed as underlined, which could potentially be confusing. |
With these tags, the browser really has no choice-it must either display the text as defined or, if it can't do that, then it must add no emphasis to the text. This is both good and bad for you as the designer. If you prefer that text not be emphasized at all if it can't be italic, for example, then you should use the <I> tag.
Another feature of explicit (physical) tags is that they can generally be used in combination with other tags. As you'll see in the next section, this isn't always a good idea with implicit tags. For instance, most graphic browsers will render the following example by applying both tags to the text (see fig. 7.3).
Figure 7.3 : Most browsers can render two physical tags applied to the same selection of text.
<H1><I>Welcome Home!</I></H1>
<B><I>This is bold and italic</I></B>
Implicit styles are often called logical styles, since
they allow the browser some freedom in how it will display the
text. These tags, like the header tags, are generally relative
to one another, depending on the browser being used to view them.
See Table 7.2 for some of the common implicit (logical) tags
| Tags | Meaning | Generally Rendered as… |
| <EM>, </EM> | Emphasis | Italic text |
| <STRONG>, </STRONG> | Strong emphasis | Bold text |
| <TT>, </TT> | Teletype | Monospaced text |
Table 7.2 includes a section that tells you how these tags are often rendered in graphical Web browsers. There's no rule for this, though, and the tags don't necessarily have to be rendered in that way.
There are two other distinctions between these tags and the physical tags (such as bold and italic) that you've already discussed. First, these logical tags will always be rendered by any Web browser that views them. Even text browsers (which are unable to show italic text) will display the <EM> or <STRONG> tags by underlining, boldfacing, or highlighting the text.
Second, these tags are generally not effective when used together.
Where <B><I>text</I></B>
will sometimes offer useful results, <EM><STRONG>text</STRONG></EM>
rarely will. Combining these tags with other tags (such as header
tags or physical tags) is often either ineffective or redundant.
| Note |
My warning about combining logical tags isn't always applicable, even though it's a good rule to follow. Netscape Navigator, for instance, will render both <EM> and <STRONG> tags simultaneously with others. (Used together, the tags would result in bold, italicized text in Navigator.) |
Here's a great way to kill two birds with one stone. With this example you can get a feel for using both the physical and the logical tags discussed above. At the same time, you can also test these tags in your browser to see how they're displayed. (If you have more than one browser, test this example in all of them. That way you can see how different browsers interpret logical tags.)
To begin, load your template file in a text editor, and rename it something intuitive, like tagtest1.html. Then, enter the text between the body tags as it appears in Listing 7.2.
Listing 7.2 tagtest1.html HTML Body Tags Text
<BODY>
<P>
This is a test of the <B>bold tag</B><BR>
This is a test of the <STRONG>strong emphasis tag</STRONG><BR>
</P>
<P>
This is a test of the <I>italics tag</I><BR>
This is a test of the <EM>emphasis tag</EM><BR>
</P>
<P>
This is a test of the <B><I>bold and italics tags together</I></B><BR>
This is a test of the <STRONG><EM>strong and emphasis tags together</EM>
</STRONG><BR>
</P>
<P>
While we're at it, does <U>underlined text</U> appear in this browser?<BR>
And what does <TT>teletype text</TT> look like?<BR>
</P>
</BODY>
| Note |
Remember that using <STRONG> and <EM> together is not recommended in the HTML 2.0 standard. We did it just as an example to see how it renders in your browser. |
When you've finished entering this text, save the file again in your text editor, then choose the Load File command in your Web browser to display the HTML document. If you have other Web browsers, see how those respond to the tags, too (see fig. 7.4).
Figure 7.4 : Implicit and explict HTML codes in internet Explorer for Windows 95.
At the beginning of this chapter, I mentioned that the proliferation of HTML tags took place before the standard was ever conceived of-which might explain some of the tags that we discuss in this section. For the most part, these tags are implicit (logical) and aimed directly at certain areas of expertise. At the same time, however, the bulk of these tags will look exactly the same in a Web browser.
One of the early, more common uses for HTML was for documenting
computer programs and offering tips or advice to computer programmers.
Part of the HTML 2.0 standard, then, offers some implicit (logical)
HTML tags that allow HTML designers to mark text in a way that
makes it easier to present computer programming codes. Those tags
are in Table 7.3.
| Tags | Meaning | Generally Rendered as… |
| <CODE>, </CODE> | Programming lines | Monospaced (like <TT>) |
| <KBD>, </KBD> | Keyboard text | Monospaced |
| <SAMP>, </SAMP> | Sample output | Monospaced |
| <VAR>, </VAR> | Variable | Italic |
Notice that the majority of these tags are often displayed in exactly the same way-in the default monospaced font for the browser. Then why use them?
First, not all browsers will necessarily follow the "general"
way. Some browsers will actually render these tags in slightly
different ways from one another, so that <SAMP>,
for instance, might appear in a slightly larger font than <CODE>.
| Note |
These tags had more meaning with earlier browsers like Mosaic, which used to allow users to define their own fonts and sizes for specific tags. In an era where browsers give the designer control over actual font families and sizes (see Chapters 19 and 21), these tags are used less and less. |
Second, using these tags is a great way to internally document your HTML pages, so that you can tell at a glance what certain text is supposed to be. This will help you later when you return to the document to update it or fix errors-especially as the document becomes more complex.
Along the same lines as the HTML "programmer's" tags,
you have available certain implicit tags that work as typographer's
or publisher's codes. As shown in Table 7.4, these codes often
work in ways similar to others you've already seen-with a few
twists.
| Tags | Meaning | Generally Rendered as… |
| <CITE>, </CITE> | Bibliographical citation | Italic text |
| <BLOCKQUOTE>, </BLOCKQUOTE> | Block of quoted text | Indented text |
| <DFN>, </DFN> | Term definition | Regular text |
| <ADDRESS>, </ADDRESS> | Street or e-mail address | Italic text |
Again, notice that the <CITE> tag isn't going to be rendered any differently from the italics, emphasis, or variable tags you've seen previously. The <DFN> tag is often not rendered as any special sort of text at all, whereas the <ADDRESS> tag is identical in function to the italics tag.
So the best use for these tags (with the exception of the <BLOCKQUOTE> tag) is as internal documentation of your HTML documents. Remember, of course, that some browsers may render them slightly differently from what is suggested in Table 7.4.
The only really new tag in the Table 7.4 is the <BLOCKQUOTE> tag. This tag usually indents the left margin of regular text in the browser window, just as you might find a blocked quotation formatted in a printed document.
Also as part of the tag, <BLOCKQUOTE> generally adds a return or one extra line on either side of the tag, so no paragraph tags are needed. Paragraph tags should, however, be used to contain text on either side of the blockquote.
Although the <ADDRESS> tag is similar to italics or emphasis, I've thrown in an example of using it correctly. Remember to include a line break after each line of the address.
To begin this example, create and save a new HTML document from the template you created in Chapter 6. Enter Listing 7.3 between the body tags.
Listing 7.3 emphasis.html The <BLOCKQUOTE> and <ADDRESS> Tags
<BODY>
<P>I believe it was Abraham Lincoln who once said (emphasis is mine):
<BLOCKQUOTE>Four score and seven years ago our <B>forefathers</B> brought
forth on this continent a new nation, conceived in <I>liberty</I> and
dedicated to the proposition that all men are created <EM>equal</EM>.
</BLOCKQUOTE>
It was something like that, wasn't it?
</P>
<P>If you liked this quote, feel free to write me at:<BR>
<ADDRESS>
Rich Memory<BR>
4242 Sumtin Street<BR>
Big City, ST 12435<BR>
</ADDRESS>
</P>
</BODY>
Notice that an off paragraph tag isn't required before you get into the address tag-remember, <ADDRESS> works very much as italics does, and the <BR> tag is designed to work as well inside a paragraph container as it does outside one. So you can put the paragraph tag after the address, to contain both address listing and the text in the same paragraph.
What does all of this look like? Take a look at figure 7.5. <BLOCKQUOTE>, unlike some of the tags you've looked at, really does offer unique abilities that make it worth using in your documents.
Figure 7.5 : Blockquote and address HTML tags.
Are you ready to break some of the rules of HTML that I've been harping on over the last two chapters? That's what you're about to do-in fact, you're going to break two. I've said over and over that the HTML 2.0 standard is not designed for layout. In fact, you haven't even learned how to put two blank lines between paragraphs.
I've also said that spaces and returns in between tags (like the paragraph tag) don't matter. Well, there is at least one exception to this rule: the <PRE> tag.
The <PRE> (preformatted text) tag is designed to allow you to keep the exact spacing and returns that you've put between the on and off tags. The basic reasoning behind this tag is the notion that every once in a while you'd like your text to stay exactly as you put it-for instance, in a mathematical formula, or if you create a table. While there are other ways to do both tables and math, they don't fall under the HTML 2.0 standard. On top of that, you can use <PRE> for a number of other reasons: lists, lining up decimals for dollar figures, and even poetry.
Consider the following example:
<P>Oh beautiful, for spacious skies,
For amber waves of grain.
For purple mountains' majesty,
Above the fruited plains.</P>
Sure it's a familiar refrain, but it won't look so familiar in a browser if you leave it between paragraph tags. Instead, you can use the <PRE> tag to keep things exactly the way you want them:
<PRE>Oh beautiful, for spacious skies,
For amber waves of grain.
For purple mountains' majesty,
Above the fruited plains.</PRE>
In a browser, it'll look exactly the way you want it to (see fig. 7.6).
Figure 7.6 : Paragraph versus preformatted text.
You may have noticed that the preformatted text is in a monospaced font-it will always be that way. Otherwise, the <PRE> tag works pretty much like the paragraph font, except that it lets you decide where the line breaks and spaces will appear. Look at the following example:
<PRE>I simply want to make this <B>really</B> clear to you.
</PRE>
With the above code, the browser will display this line in nearly exactly the same way as it would using the <P> tag, except that it will be in a monospaced font, and the extra spaces and extra return will appear as well. In fact, there will be two blank lines below the line of text-one for the return, and one for the </PRE> tag itself.
You can even use the <PRE> tags to create extra lines in a document without typing any text between them. This example adds two blank lines to a document:
<PRE>
</PRE>
For each additional blank line you want to add, just press Enter
after the first tag one time.
| Note |
There is one potential drawback to the <PRE> tag. It doesn't allow the browser screen to wrap text automatically-instead, users need to expand their browser window if you use particular long lines within a <PRE> container. Just keep this in mind, and make sure your lines of text are reasonably short so that all browsers can view them without scrolling. |
Let's take a look at a couple of different reasons why you might want to use the <PRE> tag in your HTML documents. Start by loading your template and choosing the Save As command in your text editor to save the file as pre_test.html, or something similar.
Now between the body tags, let's create an example that uses some
of the benefits of preformatting-the ability to center text and
choose your own margins, for example. How? Let's format some screenplay
dialogue (see Listing 7.4).
| Tip |
Text between <PRE> tags is easier to align if you hit Enter after the on tag, then start typing. Doing so will add an extra line, though. |
Listing 7.4 pre_test.html Create Your Own Layout
<BODY>
<P>
<TT>
<B>(Int) Rick's Apartment, Late Afternoon</B><BR>
Rick is busying himself with his personal computer when Linda walks through the door from the kitchen. Startled, Rick bolts upright from his chair and swats frantically at the keyboard trying to make something disappear. Linda moves closer to the computer.</TT></P>
<PRE>
Linda
(confused)
What were you doing?
Rick
Just the finances.
Linda
But you already printed checks
last Sunday.
Rick
I know. But Tuesday is when I, uh,
enter my gambling debts. (Sighs deeply.)
Honey, I'm in big trouble.
</PRE>
</BODY>
It takes a little tapping on the space bar, but with the <PRE> tag you can create some fairly elaborate layouts for getting your point across-especially when layout is just as important as the text itself. In a browser, it comes out looking like a big-budget picture script (see fig. 7.7).
Figure 7.7 : The <PRE> tag at work.
In the same way that you created the film script using the <PRE>
tag, you can also format a primitive table using the <PRE>
tag along with some others. The key to making this work correctly
is alignment. Realize that each space taken up by a character
of an invisible tag (like <B>)
will not appear in the browser's display, so you'll need to compensate.
| Tip |
One way to keep the columns in a table straight is to type your table first, and then add emphasis tags afterward. |
Load your template and save it as pre_tbl.html. Now enter Listing 7.5 between the body tags.
Listing 7.5 pre_tbl.html Creating Spaces and Tables
<BODY>
<PRE>
</PRE>
<HR>
<H2>Price Per Item in Bulk Orders</H2>
<PRE>
Quantity XJS100 RJS200 YJS50 MST3000
1-50 $40 $50 $75 $100
50-99 $35 $45 $70 $95
100-200 $30 $40 $65 $90
200+ $25 $35 $55 $75
</PRE>
<H5>Prices do not include applicable sales taxes.</H5>
</BODY>
You may need to play with the spacing a bit to line everything
up. Save the HTML document, then choose the Open File command
in your browser to proof it. Keep playing with it until it looks
right.
| Tip |
If you use a more advanced text editor or word processor, fight your urge to use the Tab key to align <PRE> elements. Use the spacebar instead. |
Once you have everything aligned correctly, it's actually a fairly attractive and orderly little table (see fig. 7.8).
Figure 7.8 : Use the <PRE> tag to create a table.
| Note |
You may be tempted to use <B> or another emphasis tag for the column heads in your table. Realize, however, that it is nearly impossible to align columns so that they will appear correctly in every browser when one row is bold and other rows are plain text. Different browsers make bold text a fraction wider than regular text, making the row increasingly misaligned. Even if it looks good in your browser, chances are it won't work in all of them. |
HTML 2.0 offers us both explicit (physical) and implicit (logical) tags with which to mark up text. The explicit tags are designed to do something specific to the text, such as turn it bold or italic. If a browser can't do what's asked, it doesn't do anything.
Implicit tags are more general commands, such as Emphasis or Strong Emphasis. While most browsers will show these tags in a similar way, there's no specific rule. Each individual browser will display an implicit tag somehow, but not always in the same way that other browsers do it.
There are a good number of implicit tags, many of which duplicate certain types of emphasis. These are good for internally documenting HTML documents, though, since the tags are generally designed for some specific task-such as displaying computer programming code or certain typographical elements.
The <PRE> tag is also a very useful tag, although it breaks some of the rules for other tags. It allows you to maintain the spaces and returns you've entered between the two tags. This lets you preformat your HTML documents so that tables and other elements are displayed correctly.