Boldface, Italics, and Special Text Formatting
| Way back in the age of the typewriter, we were content with plain-text and an occasional underline for emphasis. Today, boldface and italic text have become de rigueur in all paper communication. Naturally, you can add bold and italic text to your web pages too. There are several tags and style rules that make text formatting possible. The tried-and-true approach to adding bold and italic formatting to text involves the <b> and <i> tags. For boldface text, you 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>. Although this approach still works fine in browsers and is supported by XHTML, it isn't as flexible or powerful as the newer CSS style rule approach to text formatting. 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 in which 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> Although you'll learn much more about CSS style rules in Part III, it's worth a little foreshadowing just so you understand the text formatting options. The font-weight style rule allows you to set the weight, or boldness, of a font using a style rule. Standard settings include normal, bold, bolder, and lighter, with normal being the default. Italic text is controlled via the font-style rule, which can be set to normal, italic, or oblique. Style rules can be specified together if you want to apply more than one, as the following example demonstrates: <p style="font-weight:bold; font-style:italic">This paragraph is bold and italic!</p> In this example, both style rules are specified in the style attribute of the <p> tag. The key to using multiple style rules is that they must be separated by a semicolon (;). You aren't limited to using font styles in paragraphs, however. The following code shows how to italicize text in a bulleted list: <ul> <li style="font-style:italic">Important Stuff</li> <li style="font-style:italic">Critical Information</li> <li style="font-style:italic">Highly Sensitive Material</li> <li>Nothing All That Useful</li> </ul> Getting back to the traditional <b> and <i> tags, you can code the same bulleted list with those tags instead of using a style rule. 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 <i> and </i> tags in the following list may seem redundant, but adhering to this good form ensures that your pages fully meet the new XHTML standards, which may save you from having to rewrite them in the future: <ul> <li><i>Important Stuff</i></li> <li><i>Critical Information</i></li> <li><i>Highly Sensitive Material</i></li> <li>Nothing All That Useful</li> </ul> You can also use the <b> tag and font-weight style rule within headings, but a heavier font usually doesn't have an effect on headings because they are already bold.
In addition to <b>, <i>, <strong>, and <em>, there are several other HTML tags for adding special formatting to text. Table 5.1 summarizes all of them (including the boldface and italic tags), and Listing 5.5 and Figure 5.5 demonstrate each of them in action.
Figure 5.5. Here's what all the character formatting from Listing 5.5 looks like.
Listing 5.5. Special Formatting Tags<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>The Miracle Product</title> </head> <body> <p> New <sup>Super</sup><strong>Strength</strong> H<sub>2</sub>O <em>plus</em> will knock out any stain, <big>big</big> or <small>small</small>.<br /> Look for new <sup>Super</sup><b>Strength</b> H<sub>2</sub>O <i>plus</i> in a stream near you. </p> <p> <tt>NUTRITION INFORMATION</tt> (void where prohibited) </p> <pre> Calories Grams USRDA /Serving of Fat Moisture Regular 3 4 100% Unleaded 3 2 100% Organic 2 3 99% Sugar Free 0 1 110% </pre> </body> </html> 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, and under ToolsToolsToo, Options, General, Fonts & Colors in Mozilla Firefox). The monospaced font may not even be monospaced for some users, though 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 else 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 5.5 would look like the following: 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 because the exact spaces are keptno <br /> tags are needed. There are fancier ways to make columns of text line up, and you'll learn all about them in Part III. 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.
|
EAN: 2147483647
Pages: 345