From Buck-Naked to Beautiful: Dressing Up Your Page
- Sprucing Up Your Text
- A Few Formatting Features You'll Use All the Time
- Textras: Fancier Text Formatting
This chapter is from the book
This chapter is from the book
This chapter is from the book
In This Chapter
- HTML tags for formatting characters
- How to create impressive-looking headings
- Miscellaneous text tags
- How to insert special characters in your page
- A complete makeover for your web page text
In the early, pretext 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, as described in Chapter 2, "Laying the Foundation: The Basic Structure of a Web Page."
These new text garments might 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 apparel appropriate for the occasion. In short, you need to format your text so it looks its best. This chapter is your web page fashion consultant as it examines the various ways you can use HTML to beautify your words.
Sprucing Up Your Text
The first of our web page makeover chores is to examine some tags that alter the look of individual words and phrases. The next few sections fill you in on the details.
Some Basic Text Formatting Styles
The good news about text formatting is that most browsers support only four basic kinds: bold, italic, underline, and monospace. 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. Table 3.1 shows the tags that produce each of these formats.
Table 3.1 The Basic Text Formatting Tags
|
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. Figure 3.1 shows how the styles look when viewed with Internet Explorer.
){kind=link}
<HTML> <HEAD> <TITLE>Some Basic Text Formatting Styles</TITLE> </HEAD> <BODY> <U>Supply Without the Demand</U> <P> <TT>Print-on-demand</TT> is new system that lets bookstores print out a book whenever a customer asks for one. It's <I>really</I> slick. Recently, I was in a store called <b>The Book "Seller"</B> and it had a service called <B>Print- On-Non-Demand</B> featuring books that <I>very</I> few people would ever order, much less print out. The titles included <I>The Complete Idiot's Guide to Village Idiocy</I> and <I>The 10-Minute Guide to Butt-Scanning</I>. </P> </BODY> </HTML>
Figure 3.1 A web page showing the four basic text formatting styles.
Webmaster Wisdom
Just in case you're a glutton for punishment, here's a rundown of some alternative tags you can use for these text styles:
|
Text style |
Alternative tags |
|
Bold |
<STRONG> |
|
Italic |
<EM> or <CITE> or <ADDRESS> |
|
Monospace |
<CODE> or <KBD> |
(Note that, to keep things simple, I've left out the corresponding end tags, such as </STRONG> and </EM>.) I should also mention here that you might want to think twice (or even three times) before using the <U> tag for underlining. As you can see in Figure 3.1, underlined text looks suspiciously like a link, which will only serve to confuse your readers.
Keep in mind that you can get the examples you read about from my website at the following URL: http://www.mcfedries.com/CreatingAWebPage/examples.html. This helps 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 previously, look for the file named bookstor.htm.
Combining Text Formats
You should note, as well, that 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 that because HTML is composed in text-only documents (documents that include only the characters and symbols you can peck out from your keyboard), nonstandard characters such as ¢ and x 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 (which is surely a name only a true geek would love) that represent these and other oddball symbols.
Page Pitfalls
To ensure that all browsers render your characters properly, use only lowercase letters when typing the entity names.
These codes come in two flavors: a character reference and an entity name. Character references are basically just numbers, and the entity names are friendlier symbols that describe the character you're trying to display. For example, you can display the registered trademark symbol by using either the ® character reference or the ® entity name, as shown here:
Print-On-Non-Demand®
or
Print-On-Non-Demand®
Note that both character references and entity names begin with an ampersand (&) and end with a semicolon (;). Don't forget either character when using special characters in your own pages.
Table 3.2 lists a few other popular characters and their corresponding codes. You'll find a more complete list in the tearout card in the front of this book.
Table 3.2 A Few Common Characters
|
Symbol |
Character Reference |
Entity name |
|
< |
< |
< |
|
> |
> |
> |
|
Nonbreaking space |
  |
|
|
¢ |
¢ |
¢ |
|
£ |
£ |
£ |
|
¥ |
¥ |
¥ |
|
© |
© |
© |
|
® |
® |
® |
|
° |
° |
° |
|
1/4 |
¼ |
¼ |
|
1/2 |
½ |
½ |
|
3/4 |
¾ |
¾ |
|
x |
× |
× |
Webmaster Wisdom
The table contains a bizarre entry called a "nonbreaking space." What's up with that? Remember in Chapter 2 when I told you that HTML simply scoffs at white space (multiple spaces and tabs)? Well, you use the nonbreaking space thingamajig when you want to force the browser to display white space. For example, if you want to indent the first line of a paragraph by three spaces, you'd start it like so:
This line appears indented by three spaces.
You can also use the nonbreaking space to position images, line up text, and much more.