 |
|
|
|
||
|
|
|
CONTENTS
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. 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.. <HTML> Combining Text FormatsYou should note, as well, that browsers 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 is 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 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.
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 we've used in this chapter and see how we'd format them in HTML. The overall heading, of course, is the chapter title, so we'd display it using the <H1> tag. The first main section is the one titled "Sprucing Up Your Text," so we'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." we'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 wed go back to an <H2> tag for its title, and so on. The following HTML document shows how we'd format all the section titles for this chapter (notice how we don't need to use a <P> tag to display headings on separate lines; that's handled automatically): <HTML> A Few More Formatting FeaturesHandling Preformatted TextRemember when we told you in the last chapter that Web browsers ignore white space (multiple spaces and tabs) as well as carriage returns? Well, we 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 we'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 we've surrounded the second poem with <PRE> and </PRE>. 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.
<HTML> 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 we'll show you here; see Chapter 6) 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: <HTML> In the list of books, we added the <BR> tag to the end of each line (except the last one; we don't need it there). Inserting Horizontal Lines<HR> (which stands for "horizontal rule") produces a line across the page, which is a handy way to separate sections of your document. (browser accepts a few extra attributes for the <HR> tag. more about 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:
|
|
Make KacMac your home page Add URL - Information Center - Contact us - Terms of Service - Privacy Policy - Advertising |  |
|
Copyright © 2004 KacMac. All rights reserved. |
