 |
 |
Chapter 5From Buck-Naked to Beautiful:
|
| Text style | Begin tag |
End tag |
| Bold | <B> |
</B> |
| Italic | <I> |
</I> |
| Underline | <U> |
</U> |
| Monospace | <TT> |
</TT> |
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>
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/
Combining Text Formats
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>
Accessorizing: Displaying Special Characters
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 |
|
Symbol |
Character Reference |
Entity name |
< |
< |
< |
> |
> |
> |
¢ |
¢ |
¢ |
£ |
£ |
£ |
¥ |
¥ |
¥ |
© |
© |
© |
® |
® |
® |
° |
° |
° |
¼ |
¼ |
¼ |
½ |
½ |
½ |
¾ |
¾ |
¾ |
× |
× |
× |
Sectioning Your Page with Headings
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>
A Few More Formatting Features
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.
Handling Preformatted Text
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! |
|
<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>
Them's the Breaks: Using <BR> for Line Breaks
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.
Inserting Horizontal Lines
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 Least You Need to Know
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:
- The four main tags for text styles are <B> for bold, <I> for italic, <U> for underline, and <TT> for monospace. You're free to combine these tags to apply multiple styles to the same text.
- You can use special codes (either character references or entity names) to display non-standard characters such as ¢ and ¥. See the table in the back of the book for a list of these codes.
- If you have multiple sections in your page, use the heading tags-<H1> through <H6>-to format the section titles and set up an outline structure.
- You can display white space and carriage returns in preformatted text by enclosing it with the <PRE> and </PRE> tags.
- To create a line break, use the <BR> tag.
- To run a horizontal line across the page, use the <HR> tag.
