Chapter 5. Working with Fonts, Text Blocks, and Lists

In the early days of the Web, text was displayed in only one font and in one size. However, a combination of HTML and CSS now makes it possible to control the appearance of text (font type, size, or color) and how it is aligned and displayed on a web page. In this chapter, you’ll learn how to change the visual display of the font—its font family, size, and weight—and how to incorporate boldface, italics, superscripts, subscripts, and strikethrough text into your pages. You will also learn how to change typefaces and font sizes. Then, after becoming conversant in these textual aspects, you’ll learn the basics of text alignment and some advanced text tips and tricks, such as the use of lists. Because lists are so common, HTML provides tags that automatically indent text and add numbers, bullets, or other symbols in front of each listed item. You’ll learn how to format different types of lists, which are part of the many ways to display content in your website.

Boldface, Italics, and Special Text Formatting

Way back in the age of the typewriter, we were content with a plain-text display and with using an occasional underline to show 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 content as well. There are several tags and style rules that make text formatting possible.

The old school approach to adding bold and italic formatting to text involves the <b></b> and <i></i> tag pairs. 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> tags. Although this approach still works fine in browsers and is supported by XHTML, it isn’t as flexible or powerful as the CSS style rules for text formatting.

Although you’ll learn much more about CSS style rules in Part III, “Advanced Web Page Design with CSS,” it’s worth a little foreshadowing just so that you understand the text formatting options. The font-weight style rule enables you to set the weight, or boldness, of a font using a style rule. Standard settings for font-weight 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>

You can also use the font-weight style rule within headings, but a heavier font usually doesn’t have an effect on headings because they are already bold by default.

Although using CSS enables you to apply richer formatting, there are a few other HTML tags that are good for adding special formatting to text when you don’t necessarily need to be as specific as CSS allows you to be. Following are some of these tags. Listing 5.1 and Figure 5.1 demonstrate each tag in action.

• <small></small>—Small text

• <big></big>—Big text; not present in HTML5 because text size is better controlled by CSS

• <sup></sup>—Superscript text

• <sub></sub>—Subscript text

• <em></em> or <i></i>—Emphasized (italic) text

• <strong></strong> or <b></b>—Strong (boldface) text

• <tt></tt>—Monospaced text (typewriter font) not present in HTML5 because font appearance is better controlled by CSS

• <pre></pre>—Monospaced text, preserving spaces and line breaks

Figure 5.1 Here’s what the character formatting from Listing 5.1 looks like.

Listing 5.1 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 ^Super<strong>Strength</strong> H₂O
      <em>plus</em> will knock out any stain, <big>big</big> or
      <small>small</small>.<br /> Look for new
      ^Super<b>Strength</b> H₂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 (look on the Options menu of your browser). The monospaced font might not even be monospaced for some users, although the vast majority of users stick with the standard fonts that their browsers show by default.

The <pre> tag causes text to appear in the monospaced font, but it also does something else unique and useful. As you learned in Chapter 2, “Understanding HTML and XHTML Connections,” 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.1 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 kept—no <br /> tags are needed. 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 minimum effort.

CSS provides you with more robust methods for lining up text (and doing anything with text, actually), and you’ll learn more about them throughout Part III.

Tweaking the Font

The <big>, <small>, and <tt> tags give you some rudimentary control over the size and appearance of the text on your pages. However, there might be times when you’d just like a bit more control over the size and appearance of your text. Before I get into the appropriate way to tinker with the font in XHTML code, let’s briefly look at how things were done prior to CSS because you might still find examples of this method when you look at the source code for other websites. Remember, just because these older methods are in use doesn’t mean you should follow suit.

Before style sheets entered the picture, the now phased-out <font> tag was used to control the fonts in web page text. For example, the following HTML will change the size and color of some text on a page:

<font size="5" color="purple">this text will be big and purple.</font>

As you can see, the size and color attributes of the <font> tag made it possible to alter the font of the text without too much effort. Although this approach worked fine, it was replaced with a far superior approach to font formatting, thanks to CSS style rules. Following are a few of the main style rules used to control fonts:

• font-family—Sets the family (typeface) of the font

• font-size—Sets the size of the font

• color—Sets the color of the font

The font-family style rule enables you to set the typeface used to display text. You can and usually should specify more than one value for this style (separated by commas) so that if the first font isn’t available on a user’s system, the browser can try an alternative. You’ve already seen this in previous chapters.

Providing alternative font families is important because each user potentially has a different set of fonts installed, at least beyond a core set of common basic fonts (Arial, Times New Roman, and so forth). By providing a list of alternative fonts, you have a better chance of your pages gracefully falling back on a known font when your ideal font isn’t found. Following is an example of the font-family style used to set the typeface for a paragraph of text:

<p style="font-family:arial, sans-serif, 'times roman'">

There are several interesting things about this example. First, arial is specified as the primary font. Capitalization does not affect the font family, so arial is no different from Arial or ARIAL. Another interesting thing about this code is how single quotes are used around the Times Roman font name because it has a space in it. However, because 'times roman' appears after the generic specification of sans-serif, it is unlikely that 'times roman' would be used. Because sans-serif is in the second position, it says to the browser “if Arial is not on this machine, use the default sans-serif font.”

The font-size and color style rules are also commonly used to control the size and color of fonts. The font-size style can be set to a predefined size (such as small, medium, or large) or you can set it to a specific point size (such as 12pt or 14pt). The color style can be set to a predefined color (such as white, black, blue, red, or green), or you can set it to a specific hexadecimal color (such as #FFB499). Following is the previous paragraph example with the font size and color specified:

<p style="font-family:arial, sans-serif, 'times roman'; font-size:14pt;
color:green">

The sample web content in Listing 5.2 and shown in Figure 5.2 uses some font style rules to create the beginning of a basic online résumé

Figure 5.2 Here’s what the code used in Listing 5.2 looks like.

Listing 5.2 Using Font Style Rules to Create a Basic Résumé

---

<?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>R&eacute;sum&eacute; for Jane Doe</title>

    <style type="text/css">
      body {
        font-family: Verdana, sans-serif;
        font-size: 12px;
      }

      h1 {
        font-family:Georgia, serif;
        font-size:28px;
        text-align:center;
      }

      p.contactinfo {
        font-size:14px;
        text-align:center;
      }

      p.categorylabel {
        font-size:12px;
        font-weight:bold;
        text-transform:uppercase;
      }

      div.indented {
        margin-left: 25px;
      }
    </style>
  </head>
  <body>
       <h1>Jane Doe</h1>
       <p class="contactinfo">1234 Main Street, Sometown,
       CA 93829<br/>
       tel: 555-555-1212, e-mail: [email protected]</p>

       <p class="categorylabel">Summary of Qualifications</p>
       <ul>
       <li>Highly skilled and dedicated professional offering a
       solid background in whatever it is you need.</li>
       <li>Provide comprehensive direction for whatever it is
       that will get me a job.</li>
       <li>Computer proficient in a wide range of industry-related
       computer programs and equipment. Any industry.</li>
       </ul>

       <p class="categorylabel">Professional Experience</p>
       <div class="indented">
              <p><span style="font-weight:bold;">Operations Manager,
              Super Awesome Company, Some City, CA [Sept 2002 –
              present]</span></p>
              <ul>
              <li>Direct all departmental operations</li>
              <li>Coordinate work with internal and external
              resources</li>
              <li>Generally in charge of everything</li>
              </ul>
         <p><span style="font-weight:bold;">Project Manager,
              Less Awesome Company, Some City, CA [May 2000 - Sept
              2002]</span></p>
              <ul>
              <li>Direct all departmental operations</li>
              <li>Coordinate work with internal and external
              resources</li>
              <li>Generally in charge of everything</li>
              </ul>
       </div>

       <p class="categorylabel">Education</p>
       <ul>
       <li>MBA, MyState University, May 2002</li>
       <li>B.A, Business Administration, MyState University,
       May 2000</li>
       </ul>

       <p class="categorylabel">References</p>
       <ul>
       <li>Available upon request.</li>
       </ul>
  </body>
</html>

---

Using CSS, which organizes sets of styles into classes—as you learned in Chapter 3, “Understanding Cascading Style Sheets”—you can see how text formatting is applied to different areas of this content. If you look closely at the definition of the div.indented class, you will see the use of the margin-left style. This style, which you will learn more about in Part III, applies a certain amount of space (25 pixels, in this example) to the left of the element. That space accounts for the indentation shown in Figure 5.2.

Working with Special Characters

Most fonts now include special characters for European languages, such as the accented é in Café. There are also a few mathematical symbols and special punctuation marks, such as the circular bullet •.

You can insert these special characters at any point in an HTML document using the appropriate codes, as shown in Table 5.1. You’ll find an even more extensive list of codes for multiple character sets at http://www.webstandards.org/learn/reference/named_entities.html.

Table 5.1 Commonly Used English Language Special Characters

For example, the word café could be written using either of the following methods:

caf&eacute;
caf&#233;

Although you can specify character entities by number, each symbol also has a mnemonic name that is often easier to remember.

HTML/XHTML uses a special code known as a character entity to represent special characters such as © and ®. Character entities are always specified starting with & and ending with ;. Table 5.1 lists the most commonly used character entities, although HTML supports many more.

Table 5.1 includes codes for the angle brackets, quotation, and ampersand. You must use those codes if you want these symbols to appear on your pages; otherwise, the web browser interprets them as HTML commands.

In Listing 5.3 and Figure 5.3, several of the symbols from Table 5.1 are shown in use.

Figure 5.3 This is how the HTML page in Listing 5.3 looks in most web browsers.

Listing 5.3 Special Character Codes

---

<?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>Punctuation Lines</title>
  </head>

  <body>
    <p>
      Q: What should you do when a British banker picks a fight
      with you?<br />
      A: &pound; some &cent;&cent; into him.
      <hr />
      Q: What do you call it when a judge takes part of a law
      off the books?<br />
      A: &sect; violence.
      <hr />
      Q: What did the football coach get from the locker room
      vending machine in the middle of the game?<br />
      A: A &frac14; back at &frac12; time.
      <hr />
      Q: How hot did it get when the police detective interrogated
      the mathematician?<br />
      A: x&sup3;&deg;
      <hr />
      Q: What does a punctilious plagiarist do?<br />
      A: &copy;
      <hr />
    </p>
  </body>
</html>

---

Aligning Text on a Page

Now that you’ve seen how to change the appearance of your content at the text level, it’s time to take it a step further and modify the blocks of text that appear on the page. It’s easy to take for granted the fact that most paragraphs are automatically aligned to the left when you’re reading information on the Web. However, there certainly are situations in which you might choose to align content to the right or even the center of a page. HTML gives you the option to align a single HTML block-level element, such as text contained within a <p></p> or <div></div> tag pair. Before we get into the details of aligning block elements, however, let’s briefly note how attributes work.

Using Attributes

Attributes are used to provide additional information related to an HTML tag. Attributes are special code words used inside an HTML tag to control exactly what the tag does. They are very important in even the simplest bit of web content, so it’s important that you are comfortable using them.

Attributes invoke the use of styles, classes, or IDs that are applied to particular tags. If you define a particular class or ID in a style sheet—as you learned in Chapter 3, “Understanding Cascading Style Sheets” then you can invoke that class or ID using class="someclass" or id="someid" within the tag itself. When the browser renders the content for display, it will look to the style sheet to determine exactly how the content will appear according to the associated style definitions. Similarly, you can use the style attribute to include style information for a particular element without connecting the element to an actual style sheet. For example, when you begin a paragraph with the <p> tag, you can specify whether the text in that particular paragraph should be aligned to the left margin, the right margin, or to the center of the page by setting the style attribute. If you want to associate that particular paragraph with an existing class or ID, you set the class or id attribute.

In the following example, each paragraph could be left-aligned:

<p style="text-align: left;">Text goes here.</p>
<p class="leftAlignStyle">Text goes here.</p>
<p id="firstLeftAlign">Text goes here.</p>

In the first paragraph, the style appears directly in the style attribute. In the second paragraph, the paragraph will be left-aligned if the style sheet entry for the leftAlignStyle class includes the text-align statement. Similarly, the third paragraph will be left-aligned if the style sheet entry for the firstLeftAlign class includes the text-align statement.

In the previous example, you might have noticed the use of lowercase for tags, attributes, and styles. The exacting XHTML standard requires tags and attributes to be lowercase; the XHTML standard also requires quotation marks around attribute values.

For example, the following code will be rendered by most popular web browsers:

<P STYLE=TEXT-ALIGN:CENTER>

However, this code does not conform to XHTML standards because the tag is uppercase, the style attribute and its value (text-align:center) is uppercase, and the value isn’t in quotation marks. If you want to stay compatible with the latest standards and software, you should always use the following instead:

<p style="text-align:center">

Aligning Block-Level Elements

To align a block-level element such as <p> to the right margin without creating a separate class or ID in a style sheet, simply place style="text-align:right" inside the <p> tag at the beginning of the paragraph. Similarly, to center the element, use <p style="text-align:center">. To align a paragraph to the left, use <p style="text-align:left">.

The text-align part of the style attribute is referred to as a style rule, which means that it is setting a particular style aspect of an HTML element. There are many style rules you can use to carefully control the formatting of web content.

The text-align style rule is not reserved for just the <p> tag. In fact, you can use the text-align style rule with any block-level element, which includes <h1>, <h2>, the other heading tags, and the <div> tag, among others. The <div> tag is especially handy because it can encompass other block-level elements and thus enable you to control the alignment of large portions of your web content all at once. The div in the <div> tag is for division.

Listing 5.4 demonstrates the style attribute and text-align style rule with both the <p> and the <div> tags. The results are shown in Figure 5.4. You’ll learn many more advanced uses of the <div> tag in Part III.

Figure 5.4 The results of using the text alignment in Listing 5.4.

Listing 5.4 The text-align Style Rule Used with the style Attribute

---

<?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>Bohemia</title>
  </head>

  <body>
    <div style="text-align:center">
      <h1>Bohemia</h1>
      <h2>by Dorothy Parker</h2>
    </div>
    <p style="text-align:left">
      Authors and actors and artists and such<br />
      Never know nothing, and never know much.<br />
      Sculptors and singers and those of their kidney<br />
      Tell their affairs from Seattle to Sydney.
    </p>
    <p style="text-align:center">
      Playwrights and poets and such horses' necks<br />
      Start off from anywhere, end up at sex.<br />
      Diarists, critics, and similar roe<br />
      Never say nothing, and never say no.
    </p>
    <p style="text-align:right">
      People Who Do Things exceed my endurance;<br />
      God, for a man that solicits insurance!
    </p>
  </body>
</html>

---

The use of <div style="text-align:center"> ensures that the content area, including the two headings, are centered. However, the text alignment of the individual paragraphs within the <div> override the setting and ensure that the text of the first paragraph is left-aligned, the second paragraph is centered, and the third paragraph is right-aligned.

The Three Types of HTML Lists

For clarity, it’s often useful to present information on a web page as a list of items. There are three basic types of HTML lists. All three are shown in Figure 5.5, and Listing 5.5 reveals the HTML used to construct them.

• Ordered list—An indented list that has numbers or letters before each list item. The ordered list begins with the <ol> tag and ends with a closing </ol> tag. List items are enclosed in the <li></li> tag pair, and line breaks appear automatically at each opening <li> tag. The entire list is indented.

• Unordered list—An indented list that has a bullet or other symbol before each list item. The unordered list begins with the <ul> tag and closes with </ul>. Like the ordered list, its list items are enclosed in the <li></li> tag pair. A line break and symbol appear at each opening <li> tag, and the entire list is indented.

• Definition list—A list of terms and their meanings. This type of list, which has no special number, letter, or symbol before each item, begins with <dl> and ends with </dl>. The <dt></dt> tag pair encloses each term and the <dd></dd> tag pair encloses each definition. Line breaks and indentations appear automatically.

Figure 5.5 The three basic types of HTML lists.

Listing 5.5 Unordered Lists, Ordered Lists, and Definition Lists

---

<?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>How to Be Proper</title>
  </head>

  <body>
    <h1>How to Be Proper</h1>
    <h2>Basic Etiquette for a Gentlemen Greeting a Lady Aquaintance</h2>
    <ul>
      <li>Wait for her acknowledging bow before tipping your hat.</li>
      <li>Use the hand farthest from her to raise the hat.</li>
      <li>Walk with her if she expresses a wish to converse; Never
      make a lady stand talking in the street.</li>
      <li>When walking, the lady must always have the wall.</li>
    </ul>
    <h2>Recourse for a Lady Toward Unpleasant Men Who Persist in Bowing</h2>
    <ol>
      <li>A simple stare of iciness should suffice in most instances.</li>
      <li>A cold bow discourages familiarity without offering insult.</li>
      <li>As a last resort: "Sir, I have not the honour of your
      aquaintance."</li>
    </ol>
    <h2>Proper Address of Royalty</h2>
    <dl>
      <dt>Your Majesty</dt>
      <dd>To the king or queen.</dd>
      <dt>Your Royal Highness</dt>
      <dd>To the monarch's spouse, children, and siblings.</dd>
      <dt>Your Highness</dt>
      <dd>To nephews, nieces, and cousins of the sovereign.</dd>
    </dl>
  </body>
</html>

---

Placing Lists Within Lists

Although definition lists are officially supposed to be used for defining terms, many web page authors use them anywhere they’d like to see some indentation. In practice, you can indent any text simply by putting <dl><dd> at the beginning of it and </dd></dl> at the end and skipping over the <dt></dt> tag pair. However, a better approach to indenting text is to use the <blockquote></blockquote> tag pair, which indents content without the presumption of a definition and allows for much more clear styling. With one set of attributes, you can set the width, height, background color, border type and color of your element area, and other visual effects.

Because of the level of control over the display of your items that you have when using CSS, there is no need to use nested lists to achieve the visual appearance of indentation. Reserve your use of nested lists for when the content warrants it. In other words, use nested lists to show a hierarchy of information, such as in Listing 5.6.

Ordered and unordered lists can be nested inside one another, down to as many levels as you want. In Listing 5.6, a complex indented outline is constructed from several unordered lists. You’ll notice in Figure 5.6 that Firefox automatically uses a different type of bullet for each of the first three levels of indentation, making the list very easy to read. This is common in modern browsers.

Figure 5.6 In Firefox, multilevel unordered lists are neatly indented and bulleted for improved readability.

Listing 5.6 Using Lists to Build Outlines

---

<?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>Vertebrates</title>
  </head>

  <body>
    <h1>Vertebrates</h1>
    <ul>
      <li><span style="font-weight:bold">Fish</span>
        <ul>
          <li>Barramundi</li>
          <li>Kissing Gourami</li>
          <li>Mummichog</li>
        </ul>
      </li>
      <li><span style="font-weight:bold">Amphibians</span>
      <ul>
          <li>Anura
            <ul>
              <li>Goliath Frog</li>
              <li>Poison Dart Frog</li>
              <li>Purple Frog</li>
            </ul>
          </li>
          <li>Caudata
            <ul>
              <li>Hellbender</li>
              <li>Mudpuppy</li>
            </ul>
          </li>
        </ul>
      </li>
      <li><span style="font-weight:bold">Reptiles</span>
        <ul>
          <li>Nile Crocodile</li>
          <li>King Cobra</li>
          <li>Common Snapping Turtle</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

---

As shown in Figure 5.6, a web browser will normally use a solid disc for the first-level bullet, a hollow circle for the second-level bullet, and a solid square for all deeper levels. However, you can explicitly choose which type of bullet to use for any level by using <ul style="list-style-type:disc">, <ul style="list-style-type:circle">, or <ul style="list-style-type:square"> instead of <ul>.

You can even change the bullet for any single point within an unordered list by using the list-style-type style rule in the <li> tag. For example, the following codes displays a hollow circle in front of the words extra and super and a solid square in front of the word special:

<ul style="list-style-type:circle">
  <li>extra</li>
  <li>super</li>
  <li style="list-style-type:square">special</li>
</ul>

The list-style-type style rule also works with ordered lists, but instead of choosing a type of bullet, you choose the type of numbers or letters to place in front of each item. Listing 5.7 shows how to use Roman numerals (list-style-type:upper-roman), capital letters (list-style-type:upper-alpha), lowercase letters (list-style-type:lower-alpha), and ordinary numbers in a multilevel list. Figure 5.7 shows the resulting outline, which is nicely formatted.

Figure 5.7 A well-formatted outline can make almost any plan look more plausible.

Although Listing 5.7 uses the list-style-type style rule only with the <ol> tag, you can also use it for specific <li> tags within a list (although it’s hard to imagine a situation in which you would want to do this). You can also explicitly specify ordinary numbering with list-style-type:decimal, and you can make lowercase Roman numerals with list-style-type:lower-roman.

Listing 5.7 Using the list-style-type Style Rule with the style Attribute in Multitiered Lists

---

<?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>Advice from the Golf Guru</title>
  </head>

  <body>
    <h1>How to Win at Golf</h1>
   <ol style="list-style-type:upper-roman">
      <li>Training
        <ol>
          <li>Mental prep
            <ol style="list-style-type:upper-alpha">
              <li>Watch golf on TV religiously</li>
              <li>Get that computer game with Tiger whatsisname</li>
              <li>Rent "personal victory" subliminal tapes</li>
            </ol>
          </li>
          <li>Equipment
            <ol style="list-style-type:upper-alpha">
              <li>Make sure your putter has a pro autograph on it</li>
              <li>Pick up a bargain bag of tees-n-balls at Costco</li>
            </ol>
          </li>
          <li>Diet
            <ol style="list-style-type:upper-alpha">
              <li>Avoid junk food
                <ol style="list-style-type:lower-alpha">
                  <li>No hotdogs</li>
                </ol>
               </li>
               <li>Drink  wine and mixed drinks only, no beer</li>
             </ol>
           </li>
         </ol>
      </li>
      <li>Pre-game
        <ol>
          <li>Dress
            <ol style="list-style-type:upper-alpha">
              <li>Put on shorts, even if it's freezing</li>
              <li>Buy a new hat if you lost last time</li>
            </ol>
          </li>
          <li>Location and Scheduling
            <ol style="list-style-type:upper-alpha">
              <li>Select a course where your spouse or boss
                  won't find you</li>
              <li>To save on fees, play where your buddy works</li>
            </ol>
          </li>
          <li>Opponent
            <ol style="list-style-type:upper-alpha">
              <li>Look for: overconfidence, inexperience</li>
              <li>Buy opponent as many pre-game drinks as possible</li>
            </ol>
          </li>
        </ol>
      </li>
      <li>On the Course
        <ol>
          <li>Tee off first, then develop severe hayfever</li>
          <li>Drive cart over opponent's ball to degrade
             aerodynamics</li>
          <li>Say "fore" just before ball makes contact
             with opponent</li>
          <li>Always replace divots when putting</li>
          <li>Water cooler holes are a good time to correct
             any errors in ball
          placement</li>
        </ol>
      </li>
    </ol>
  </body>
</html>

---

Summary

In this chapter, you learned how to make text appear as boldface or italic and how to code superscripts, subscripts, special symbols, and accented letters. You saw how to make the text line up properly in preformatted passages of monospaced text and how to control the size, color, and typeface of any section of text on a web page. You also learned that attributes are used to specify options and special behavior of many HTML tags and how to use the style attribute with CSS style rules to align text. You also discovered how to create and combine three basic types of HTML lists: ordered lists, unordered lists, and definition lists. Lists can be placed within other lists to create outlines and other complex arrangements of text.

Table 5.2 summarizes the tags and attributes discussed in this chapter. Don’t feel like you have to memorize all these tags, by the way!

Table 5.2 HTML Tags and Attributes Covered in Chapter 5

Q&A

Q. How do I find out the exact name for a font I have on my computer?

A. On a Windows or Macintosh computer, open the Control Panel and click the Fonts folder—the fonts on your system are listed. (Vista users might have to switch to “Classic View” in your Control Panel.) When specifying fonts in the font-family style rule, use the exact spelling of font names. Font names are not case-sensitive, however.

Q. How do I put Kanji, Arabic, Chinese, and other non-European characters on my pages?

A. First of all, users who need to read these characters on your pages must have the appropriate language fonts installed. They must also have selected that language character set and its associated font for their web browsers. You can use the Character Map program in Windows (or a similar program in other operating systems) to get the numerical codes for each character in any language font. To find Character Map, click Start, All Programs, Accessories, and then System Tools. If the character you want has a code of 214, use Ö to place it on a web page. If you cannot find the Character Map program, use your operating system’s built-in Help function to find the specific location.

The best way to include a short message in an Asian language (such as We Speak Tamil-Call Us!) is to include it as a graphics image. That way every user will see it, even if they use English as their primary language for web browsing. But even to use a language font in a graphic, you will likely have to download a specific language pack for your operating system. Again, check your system’s Help function for specific instructions.

Q. I’ve seen web pages that use three-dimensional little balls or other special graphics for bullets. How do they do that?

A. That trick is a little bit beyond what this chapter covers. You’ll learn how to do it yourself in Chapter 8.

Q. How do I “full justify” text so that both the left and right margins are flush?

A. You can use text-align:justify in your style declaration.

Workshop

The workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.

Quiz

1. How would you create a paragraph in which the first three words are bold, using styles rather than the <b> or <strong> tags?

2. How would you represent the chemical formula for water?

3. How do you display “© 2010, Webwonks Inc.” on a web page?

4. How would you center everything on an entire page?

5. What would you use to create a definition list to show that the word glunch means “a look of disdain, anger, or displeasure” and that the word glumpy means “sullen, morose, or sulky”?

Answers

1. You would use the following:

<p><span style="font-weight: bold">First three words</span> are bold.</p>

2. You would use H<sub>2</sub>O.

3. You would use either of the following:

&copy; 2010, Webwonks Inc.
&#169; 2010, Webwonks Inc.

4. If you thought about putting a <div style="text-align:center"> immediately after the <body> tag at the top of the page, and </div> just before the </body> tag at the end of the page, then you’re correct. However, the text-align style is also supported directly in the <body> tag, which means you can forego the <div> tag and place the style="text-align:center" style directly in the <body> tag. Presto, the entire page is centered!

5. You would use the following:

<dl>
<dt>glunch</dt><dd>a look of disdain, anger, or displeasure</dd>
<dt>glumpy</dt><dd>sullen, morose, or sulky</dd>
</dl>

Exercises

• Apply the font-level style attributes you learned about in this chapter to various block-level elements such as <p>, <div>, <ul>, and <li> items. Try nesting your elements to get a feel for how styles do or do not cascade through the content hierarchy.

• Use the text alignment style attributes to place blocks of text in various places on your web page. Try nesting your paragraphs and divisions (<p> and <div>) to get a feel for how styles do or do not cascade through the content hierarchy.

• Try producing an ordered list outlining the information you’d like to put on your web pages. This will give you practice formatting HTML lists and also give you a head start on thinking about the issues covered in later chapters of this book.