Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • Tell Us What You Think!
  • Put Your HTML Page Online Today
  • I. Your First Web Page
  • Hour 1. Understanding HTML and XML
  • Hour 2. Create a Web Page Right Now
  • Hour 3. Linking to Other Web Pages
  • Hour 4. Publishing Your HTML Pages
  • II. Web Page Text
  • Hour 5. Text Alignment and Lists
  • Hour 6. Text Formatting and Font Control
    • Boldface, Italics, and Special Formatting
    • Font Size and Color
    • Choosing a Typeface
    • Special Characters
    • Summary
    • Q&A
    • Workshop
  • Hour 7. Email Links and Links Within a Page
  • Hour 8. Creating HTML Forms
  • III. Web Page Graphics
  • Hour 9. Creating Your Own Web Page Graphics
  • Hour 10. Putting Graphics on a Web Page
  • Hour 11. Custom Backgrounds and Colors
  • Hour 12. Creating Animated Graphics
  • IV. Web Page Design
  • Hour 13. Page Design and Layout
  • Hour 14. Graphical Links and Imagemaps
  • Hour 15. Advanced Layout with Tables
  • Hour 16. Using Style Sheets
  • V. Dynamic Web Pages
  • Hour 17. Embedding Multimedia in Web Pages
  • Hour 18. Interactive Pages with Applets and ActiveX
  • Hour 19. Web Page Scripting for Non-Programmers
  • Hour 20. Setting Pages in Motion with Dynamic HTML
  • VI. Building a Web Site
  • Hour 21. Multipage Layout with Frames
  • Hour 22. Organizing and Managing a Web Site
  • Hour 23. Helping People Find Your Web Pages
  • Hour 24. Planning for the Future of HTML
  • VII. Appendixes
  • A. Readers' Most Frequently Asked Questions
  • B. HTML Learning Resources on the Internet
  • C. Complete HTML 4 Quick Reference
  • D. HTML Character Entities

Boldface, Italics, and Special Formatting

Way back in the age of the typewriter, we were content with plain text and an occasional underline for emphasis. Today, boldface and italicized text have become de rigueur in all paper communication. Naturally, you can add bold and italic text to your Web pages too.

For boldface text, put the <b> tag at the beginning of the text and </b> at the end. Similarly, you can make any text italic by enclosing it between <i> and </i>.

You can nest one type of formatting inside another. For instance, if you want some text to be both bold and italic, put <b><i> in front of it and </i></b> after it. To avoid confusing some Web browsers, be careful to close the tags in the opposite order you opened them in. For example, don't do this:

<b>Bold, <i>bold and elegant,</b> or just plain elegant.</i>

Instead, do it this way:

<b>Bold, <i>bold and elegant,</i></b><i>or just plain elegant.</i>

Similarly, you should always close any <b>, <i>, or other formatting tags that occur within an <li> list item or heading before you end the </li>. Most of the <b> and </b> tags in the following list may seem redundant, but adhering to this good form ensures that your pages fully meet the new XHTML and XML standards, which may save you having to rewrite them in the future.

<ul>
<li><b>Bold Men</b></li>
<li><b>Bold Women</b></li>
<li><b>Cool Cats</b></li>
<li>and Others</li>
</ul>

You can also use italics within headings, but boldface usually won't show in headings because they are already bold.

In addition to <b>, <i>, <em>, and <strong>, there are several other HTML tags for adding special formatting to text. Table 6.1 summarizes all of them (including the boldface and italic tags), and Figures 6.1 and 6.2 demonstrate each of them in action.

Figure 6.1 Each of the tags in Table 6.1 is used in this mock advertisement.

Figure 6.2 Here's what all character formatting from Table 6.1 and Figure 6.3 looks like.

Table 6.1. HTML Tags That Add Special Formatting to Text

The <tt> tag usually changes the typeface to Courier New, a monospaced font. (Monospaced means that all the letters and spaces are the same width.) However, Web browsers let users change the monospaced <tt> font to the typeface of their choice (under Tools, Internet Options, Fonts in Microsoft Internet Explorer 5 and Edit, Preferences, Fonts in Netscape Navigator 4 or higher). The monospaced font may not even be monospaced for some users, although the vast majority of people stick with the standard fonts that their browsers come set up with.

The <pre> tag causes text to appear in the monospaced font, but it also does something unique and useful. As you learned in Hour 2, multiple spaces and line breaks are normally ignored in HTML files, but <pre> causes exact spacing and line breaks to be preserved. For example, without <pre> the text at the end of Figure 6.3 would look like the following:

Figure 6.3 The <font> tags give you control over the size, color, and typeface of any text.

calories grams usrda /serving of fat moisture regular
3 4 100% unleaded 3 2 100% organic 2 3 99% sugar free 0 1 110%

Even if you added <br /> tags at the end of every line, the columns wouldn't line up properly. However, when you put <pre> at the beginning and </pre> at the end, the columns line up properly—no <br /> tags are needed.

There are fancier ways to make columns of text line up, and you learn all about them in Hour 15, "Advanced Layout with Tables." The <pre> tag gives you a quick and easy way to preserve the alignment of any monospaced text files you might want to transfer to a Web page with a minimum of effort.

up<pre>




</pre>down

Share This