Patterns again

Writing for the Web

Where are we?

You know the structure of an HTML page. You know about headings, paragraphs, indenting, emphasis, and other stuff. You know some basic CSS styling.

Let’s look at HTML tags that make lists. There are two types of lists: unordered and ordered.

Unordered lists

Unordered lists look like this:

• An item
• Another item
• Yet another item

They’re called “unordered” because they just show bullets in front of each item, rather than numbers.

The list above can be made like this:

<ul>
  <li>An item</li>
  <li>Another item</li>
  <li>Yet another item</li>
</ul>

Figure 1. An unordered list

Pattern: Lists

Notice that the <li> tags are nested inside the <ul> tags. It’s important to get the nesting right.

Also notice the indenting. The visual layout of the code matches the nesting of the HTML tags. The indenting makes the page easier to change. If you need to add things in the middle of the list, for example, the indenting will help you figure out exactly where your new data needs to go.

Exercise: Unordered list of dog breeds

Find a list of dog breeds on the Web. Create a Web page with a list of five of your favorites. List them alphabetically.

Upload your page to your server, and add a link below.

(Log in to enter your solution to this exercise.)

Exercise discussion

Comment by Kieran on September 9, 2009 - 2:17pm.

There's a breed list at http://en.wikipedia.org/wiki/List_of_dog_breeds

Comment by Renata on September 15, 2009 - 10:53am.

I'm gettibg

Comment by lamelasi on September 24, 2009 - 1:40pm.

Here's the URL to my list of favorites:

http://zippy.co.nr/coredogs/clientcore/web-page-with-text/making-lists/u...

Comment by smowens on October 2, 2009 - 7:24pm.

http://www.acryliceagle.com/coredogs/unordered-list.html

Ordered lists

The code for an ordered list is very similar. Change the <ul> to an <ol>, and you’ve got it.

<ol>
  <li>An item</li>
  <li>Another item</li>
  <li>Yet another item</li>
</ol>

Figure 2. An ordered list

Pattern: Lists

This looks like:

1. An item
2. Another item
3. Yet another item

Nested lists

Lists can be nested, that is, one list can be entirely inside another list. Here’s some code.

<ul>
  <li>19th century
    <ul>
      <li>1836: Eunice (mastiff) crowned Bitch of New South Wales.</li>
      <li>1840:
        <ol>
          <li>Isaac (lab) eats 15 pounds of figs at Moreton Bay.</li>
          <li>Thark (sheltie) barks for 17 hours nonstop. Riots in Port Jackson.</li>
        </ol>
      </li>
      <li>1895: Booblo (Welsh terrier) marks Barton as future PM.</li>
    </ul>
  </li>
  <li>20th century
    <ul>
      <li>1915: Groft (border collie) rescues sausages under fire.</li>
      <li>1967: Lilabeth (portuguese water dog) directs shark to prime ministerial snack.</li>
      <li>1975:
        <ol>
          <li>Goofer (collie) bites PM.</li>
          <li>Goofer (collie) bites PM again.</li>
          <li>Kerr (govenor general) bites PM.</li>
          <li>Goofer (collie) becomes PM.</li>
    </ul>
  </li>
</ul>

Figure 3. Nested lists

Here’s how it renders:

• 19th century
  • 1836: Eunice (mastiff) crowned Bitch of New South Wales.
  • 1840:
    1. Isaac (lab) eats 15 pounds of figs at Moreton Bay.
    2. Thark (sheltie) barks for 17 hours nonstop. Riots in Port Jackson.
  • 1895: Booblo (Welsh terrier) marks Barton as future PM.
• 20th century
  • 1915: Groft (border collie) rescues sausages under fire.
  • 1967: Lilabeth (portuguese water dog) directs shark to prime ministerial snack.
  • 1975:
    1. Goofer (collie) bites PM.
    2. Goofer (collie) bites PM again.
    3. Kerr (govenor general) bites PM.
    4. Goofer (collie) becomes PM.

Figure 4. Rendered nested lists

Notice that:

• Lists can be nested to any depth.

• Ordered lists can be nested inside unordered lists. The reverse is also true; unordered lists can be nested inside ordered lists.

• Inner lists are completely contained within <li> tags of outer lists.

• The indenting is essential in figuring this out. Not for the computer, but for a person trying to update the list.

Styling lists

You can style lists with CSS. You can apply all of the font styles we looked at earlier: font-family, color, and so on.

List bullets

You can change the bullets in unordered lists. The “bullets” are the symbols on the left of each list item. Change them with list-style-type, like this:

list-style-type: circle;

You can use disc, circle, square, or none.

Here’s some code. You can see it in action.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Styling lists</title>
    <style type="text/css">
      li {
        list-style-type: square;
      }
    </style>
  </head>
  <body>
    <h1>Styling lists</h1>
    <ul>
      <li>Affenpinscher</li>
      <li>Afghan hound</li>
      <li>Airedale terrier</li>
      <li>Akita</li>
    </ul>
  </body>
</html>

Figure 5. Styling list items

Going deeper

SitePoint has a nice CSS list reference page, if you want to know more about styling lists.

Summary

In this lesson, you learned:

• The basic structure of an HTML page.

• A set of basic HTML tags, including headings, paragraphs, emphasis, and lists.

• How HTML entities can be used for special symbols (like ©) as well as to show HTML code.

• The importance of correct indenting in helping Webers do their work accurately.

• How to use CSS to style fonts and change list bullets.

What now?

You know how to make Web pages with text. You know how to make them look good, with colors, fonts, and other things.

But what about the words themselves? The next lesson is about writing for the Web.

Patterns again

Writing for the Web