Online Book Reader

Home Category

HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [35]

By Root 1465 0

Basic Ordered List

Top ten dog names in the USA

  1. Max
  2. Jake
  3. Buddy
  4. Maggie
  5. Bear
  6. Molly
  7. Bailey
  8. Shadow
  9. Sam
  10. Lady

data from http://www.bowwow.com.au

The only change is the list tag itself. Rather than the

    tag, the ordered list uses the
      indicator. The list items are the same
    1. pairs used in the unordered list.

      You don’t indicate the item number anywhere; it generates automatically based on the position of each item within the list. Therefore, you can change the order of the items, and the numbers are still correct.

      This is where it’s great that XHTML is about meaning, not layout. If you specified the actual numbers, it’d be a mess to move things around. All that really matters is that the element is inside an ordered list.


      Making nested lists

      Sometimes, you’ll want to create outlines or other kinds of complex data in your pages. You can easily nest lists inside each other, if you want. Figure 4-3 shows a more complex list describing popular cat names in the U.S. and Australia.

      Figure 4-3:

      An ordered list inside an unordered list!

      Figure 4-3 uses a combination of lists to do its work. This figure contains a list of two countries: the U.S. and Australia. Each country has an H3 heading and another (ordered) list inside it. You can nest various elements inside a list, but you have to do it carefully if you want the page to validate.

      In this example, there’s an unordered list with only two elements. Each of these elements contains an

      heading and an ordered list. The page handles all this data in a relatively clean way and validates correctly.


      Examining the nested list example

      The entire code for nestedList.html is reproduced here:

      “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

      nestedList.html

      Nested Lists

      Popular Cat Names

      • USA

        1. Tigger
        2. Tiger
        3. Max
        4. Smokey
        5. Sam

      • Australia

        1. Oscar
        2. Max
        3. Tiger
        4. Sam
        5. Misty

      Here are a few things you might notice in this code listing:

      ♦ There’s a large

        set surrounding the entire main list.

        ♦ The main list has only two list items.

        ♦ Each of these items represents a country.

        ♦ Each country has an

        element, describing the country name inside the
      • .

        ♦ Each country also has an

          set with a list of names.

          ♦ The indentation really helps you see how things are connected.

          Indenting your code

          You might have noticed that I indent all the XHTML code in this book. The browsers ignore all indentation, but it’s still an important coding habit.

          There are many opinions about how code should be formatted, but the standard format I use in this book will serve you well until you develop your own style.

          Generally, I use the following rules to indent HTML/XHTML code:

          ♦ Indent each nested element. Because the tag is inside the element, I indent to indicate this. Likewise, the

        1. elements are always indented inside
            or
              pairs.

              ♦ Line up your elements. If an element takes up more than one line, line up the ending tag with the beginning tag. This way, you know what ends what.

              ♦ Use spaces, not tabs. The tab character often causes problems in source code. Different editors format tabs differently, and a mixture of tabs and spaces can make your carefully formatted page look awful when you view it in another editor.

              If you are using Aptana (and you really should consider it if you’re not

Return Main Page Previous Page Next Page

®Online Book Reader