 |
 |
Chapter 5From Buck-Naked to Beautiful: Dressing Up Your Page
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. Sprucing Up Your TextThe 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. Yer Basic Text Formatting StylesThe 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.
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 FormatsYou 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 CharactersYou 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.
Sectioning Your Page with HeadingsLike 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 FeaturesI'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 TextRemember 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.
Them's the Breaks: Using <BR> for Line BreaksAs 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 LinesThe 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.)
The Least You Need to KnowThis 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:
|
