In the early, pre-text stages of the Web-page production process, your page is essentially naked. It passes its days exposed to the elements, shivering and teeth-chatteringly cold. Brrr. To put some color in your page's cheeks and prevent it from catching its death, you need to clothe it with the text you want everyone to read.
These new text garments may be warm, but they aren't much to look at. I mean, face it, a plain-text Web page just doesn't present your prose in the best light. I'm definitely talking Worst Dressed List here.
However, this really doesn't matter for those times when you're just kicking around the Web house. At this stage, you're the only one who sees your Web page, so you usually don't care how it looks. But what about when it's time to go out on the town? What do you do when you want the rest of the Web world to see your creation? Heck, you can't send your Web page out into cyberspace looking like that!
Before your page has its coming-out party, you need to dress it up in clothes appropriate for the occasion. You need, in short, to format your text so it looks its best. This chapter will be your Web page fashion consultant as it examines the various ways you can use HTML to beautify your words.
The first of our Web page makeover chores will be to examine some tags that alter the look of individual words and phrases. The next few sections fill you in on the details.
The good news about text formatting is that most
browsers only support four kinds: bold, italic,
monospace,
and underline. (Underlining is relatively new, so not all
browsers may support it. However, the latest versions of the Big
Three-Netscape, NCSA Mosaic, and Internet Explorer-are all on
friendly terms with underlining.) The bad news is that HTML has
about a billion different tags that produce these styles. However,
I'll take mercy on you and only let you in on the easiest tags
to use. The following table shows the tags that produce each of
these formats.
| Text style | ||
| Bold | ||
| Italic | ||
| Underline | ||
| Monospace |
Here's a sample HTML document that shows each of these styles in action. The figure shows how the styles look when viewed with Internet Explorer.
<HTML> <HEAD> <TITLE>Yer Basic Text Formatting Styles</TITLE> </HEAD> <BODY> <U>My Excellent Bookstore Adventure</U> <P> The other day, I went to a unique bookstore called <TT>Mary, Mary, Quite Contrary</TT>. There were <I>tons</I> of unexpected delights, including, believe it or not, a <B>Self-Helpless</B> section! For real. I saw titles like <I>Got a 50-Cent Head? Here's How To Get a Ten Dollar Haircut!</I> and <I>A Few Geese Shy of a Gaggle-And Proud Of It!</I> </BODY> </HTML>
A Web page showing the four basic text formatting styles.
Keep in mind that this book's disk includes all the HTML examples you'll read about in the book. (For instructions on installing the disk, see the appendix called "The Goodies on the Disk" at the back of this book.) This will help make your Web-building chores easier because you can use the examples to get started with your own pages. To get your mitts on the example I used above, look for the file named BOOKSTOR.HTM on the disk. If the disk is missing or damaged, or if you don't have a Windows system, you can get the examples from my Web site at the following URL:
http://www.mcfedries.com/books/cightml/
You should note, as well, that most (but by no means all) modern browsers are perfectly happy to let you combine these text styles. So, for example, if you need bold italic text, you can get it by throwing the <B> and <I> tags together, like so:
<B><I>This'll give you, like, bold italic text</I></B>
You might think because HTML is composed in text-only documents (documents that include only the characters and symbols you can peck out from your keyboard), non-standard characters such as ¢ and ¥ would be taboo. It's true that there's no way to add these characters to your page directly, but the Web wizards who created HTML thought up a way around this limitation. Specifically, they came up with special codes (called-a name only a true geek would love-character entities) that represent these and other oddball symbols.
These codes come in two flavors: a character reference and an entity name. Character references are basically just numbers, while the entity names are friendlier symbols that describe the character you're trying to display. For example, you can display the cents sign (¢) using either the ¢ character reference, or the ¢ entity name, as shown here:
Got a 50¢ Head? Here's How To Get a $10 Haircut!
or
Got a 50¢ Head? Here's How To Get a $10 Haircut!
The next table lists a few other popular characters
and their corresponding codes. You'll find a more complete list
at the back of the book-see the "HTML Codes for Cool Characters"
appendix.
| Using Entity Names? Proceed with Caution |
You should know that, as I write this, the exact makeup of all the entity names is not yet set in stone (although it's pretty darn close), so many browsers don't support them yet. If you use entity names, you might want to run your page through a few popular browsers to make sure things look reasonable. |
Like chapters in a book, many Web page creators divide their contents into several sections. To help separate these sections and so make life easier for the reader, you can use headings. Ideally, these headings act as mini-titles that convey some idea of what each section is all about. To make these titles stand out, HTML has a series of heading tags that display text in larger, bold fonts. There are six heading tags in all, ranging from <H1>-which uses the largest font-down to <H6>-which uses the smallest font.
What's with all the different headings? Well, the idea is that you use them to outline your document. As an example, consider the headings I've used in this chapter and see how I'd format them in HTML.
The overall heading, of course, is the chapter title, so I'd display it using the <H1> tag. The first main section is the one titled "Sprucing Up Your Text," so I'd give its title an <H2> heading. That section contains three subsections, "Yer Basic Text Formatting Styles," "Combining Text Formats," and "Accessorizing: Displaying Special Characters." I'd give each of these titles an <H3> heading. Then I come to the section called "Sectioning Your Page With Headings." This is another main section of the chapter, so I'd go back to an <H2> tag for its title, and so on.
The following HTML document (look for HEADINGS.HTM on the disk) shows how I'd format all the section titles for this chapter, and the next figure shows how they appear in Netscape (notice how I don't need to use a <P> tag to display headings on separate lines; that's handled automatically):
<HTML> <HEAD> <TITLE>A Text Formatting and Headings Extravaganza</TITLE> </HEAD> <BODY> <H1>From Buck-Naked to Beautiful: Dressing Up Your Page</H1> <H2>Sprucing Up Your Text</H2> <H3>Yer Basic Text Formatting Styles</H3> <H3>Combining Text Formats</H3> <H3>Accessorizing: Displaying Special Characters</H3> <H2>Sectioning Your Page With Headings</H2> <H2>A Few More Formatting Features</H2> <H3>Handling Preformatted Text</H3> <H3>Them's the Breaks: Using <BR> for Line Breaks</H3> <H3>Inserting Horizontal Lines</H3> </BODY> </HTML>
Examples of HTML's heading tags.
I'll finish off this chapter by taking you through three more formatting tags that should serve you in good stead throughout your career as a Web engineer. You use these tags for displaying preformatted text, inserting line breaks, and displaying horizontal lines. The next few sections give you the details.
Remember when I told you in the last chapter that Web browsers ignore white space (multiple spaces and tabs) as well as carriage returns? Well, I lied. Sort of. You see, all browsers normally do spit out these elements, but you can talk a browser into swallowing them whole by using the <PRE> tag. The "PRE" part is short for "preformatted," and you normally use this tag to display preformatted text exactly as it's laid out. Here, "preformatted" means text in which you use spaces, tabs, and carriage returns to line things up.
Let's look at an example. Here's an HTML document
where I've set up two chunks of text in a pattern that uses spaces
and carriage returns. The first bit of doggerel doesn't make use
of the <PRE> tag, but I've surrounded the second poem with
<PRE> and </PRE>. The next screen shows the results.
Notice that the lines from the first poem are strung together,
but that when the browser encounters <PRE>, it displays
the white space and carriage returns faithfully.
| < PRE > Text Is Ugly! |
You'll notice one other thing about how the browser displays text that's ensconced within the <PRE> and </PRE> tags: it formats the text in an ugly monospaced font. There is, unfortunately, no way to avoid this. |
<HTML>
<HEAD>
<TITLE>The <PRE> Tag</TITLE>
</HEAD>
<BODY>
<H3>Without the <PRE> Tag:</H3>
Here's
some ditty
Specially done
to lay it out all
Formatted and pretty.
Unfortunately, that is all
This junk really means
Because I admit I
couldn't scrawl
Poetry for
beans.
<P>
<H3>With the <PRE> Tag:</H3>
<PRE>
Here's
some ditty
Specially done
to lay it out all
Formatted and pretty.
Unfortunately, that is all
This junk really means
Because I admit I
couldn't scrawl
Poetry for
beans.
</PRE>
</BODY>
</HTML>
How preformatted text appears in Netscape.
As you saw in the last chapter, you use the <P> tag when you need to separate your text into paragraphs. When a browser trips over a <P> tag, it starts a new paragraph on a separate line and inserts an extra, blank line after the previous paragraph. However, what if you don't want that extra line? For example, you might want to display a list of items with each item on a separate line and without any space between the items. (Actually, there are better ways to display lists than the method I'll show you here; see Chapter 6 "A Fistful of List Grist for Your Web Page Mill.")
Well, you could use the <PRE> tag, but your text would appear in the ugly, monospaced font. A better solution is to separate your lines with <BR>, the line break tag. When a browser encounters <BR> it starts a new line, but it doesn't toss in an extra, blank line. Here's an example (it's the file named LINEBRKS.HTM on the disk):
<HTML> <HEAD> <TITLE>Yer Basic Text Formatting Styles</TITLE> </HEAD> <BODY> <H2>My Excellent Bookstore Adventure</H2> <HR> The other day, I went to a unique bookstore called <TT>Mary, Mary, Quite Contrary</TT>. There were <I>tons</I> of unexpected delights, including, believe it or not, a <B>Self-Helpless</B> section! For real. Here's a list of just some of the great titles I saw: <P> Got a 50¢ Head? Here's How To Get a $10 Haircut!<BR> A Few Geese Shy of a Gaggle--And Proud Of It!<BR> The Seven Habits of Highly Ineffective Couch Potatoes<BR> Dieting? No, Sorry, You're <I>Way</I> Too Late For That!<BR> "Dumb and Dumber": A Yahoo Way of Knowledge </BODY> </HTML>
In the list of books, I added the <BR> tag to the end of each line (except the last one; I don't need it there). As you can see in the following figure, Netscape dutifully displays each line separately, with no space in between.
Use the <BR> tag to force a line break in your text.
The eagle-eyed among you noticed a horizontal line
extending across the Netscape screen shown above. What gives?
Well, while you weren't looking, I surreptitiously inserted an
<HR> tag into the HTML text. <HR> (which stands for
"horizontal rule") produces a line across the page,
which is a handy way to separate sections of your document. (Netscape,
as usual, accepts a few extra attributes for the <HR> tag.
I'll let you in on them in Chapter 10.)
| Web Page Fashion Tips |
The HTML elements I discussed in this chapter (and many of the ones I'll be talking about in subsequent chapters) can make a Web page actually look worse if you misuse or overuse them. If you're interested in making your pages look their best, be sure to read Chapter 12, "The Elements of Web Page Style," where I discuss the dos and don'ts of Web page design. |
This chapter showed you a few ways to dress up your Web page for a night on the town. Let's take a fond look back at some of the chapter's more memorable moments: