Fun with Lists

  • Three kinds of lists:
    • Unordered Lists (<ul><li>...</li></ul>)
    • Ordered Lists (<ol><li>...</li></ol>)
  • Lists are critical, because:

People don't like to read!

  • Lists structure information into succinct chunks
  • They are also how menus are contstructed
    The Dreamweaver interface is very useful here: Window>Properties
    lists
  • Unordered lists <ul> are 'bullet' lists
    • Most frequently used list type
    • Link Collections
    • Short, nonsequenced groups of text
    • Emphasizing high points (of presentation, etc.)
  • Two-part tag
    • <ul>...</ul> says is unordered list
    • <li>...<li> is generic list element
    • Proper Syntax:
      <ul>
          <li>First Item</li>
          <li>Second Item</li>
      </ul>
      (Note nesting)
    • You can insert line breaks <br> to add lines without bullet points:
      <ul>
          <li><strong>First Item</strong><br>
      sub point, but not sub list </li>
          <li>Second Item</li>
      </ul>
            
      • First Item
        sub point, but not sub list
        •    
      • Second Item
        and so on

    • List properties (list items) :
      • Type
        • Bulleted list (<ul> tag)
        • Numbered list (<ol> tag)
        • Directory list (<dir> tag)
        • Menu list (<menu> tag)
      • Style
        • Unordered
          • Bullet
          • Square
          • Image <li style="list-style-image: url(../../common/resources/structure/bullet.gif)">
        • Ordered
          • Number
          • Alphabet
          • Roman
  • Ordered Lists <ol> are useful where order is important:
    • Tables of contents
    • Instruction sequence (checklist)
    • Sequential text
  • Two-part tag
    • <ol>...</ol> says is ordered list
    • <li>...<li> is generic list element
    • Proper Syntax:
      <ol>
          <li>First Item</li>
          <li>Second Item</li>
      </ol>
    • Type
      1. Arabic numerals (default) Type = "1"
      2. Capital Letters Type = "A"
      3. Lowercse Letters Type="a"
      4. Capital Roman Numerals Type="I"
      5. Lowercase Roman Numerals Type="i"
    • Start designates starting number Start=2002
      Start count <ol start="2002">
      1. Last year
      2. This year
      3. Next year