Edtech Home About Classrooms Classes Lessons and FAQs
Educational Technologies Center for Life Sciences

Exercise - Creating two kinds of lists
And an intro to tag attributes

Step 1. Go back to your document and, somewhere within BODY tags, enter this list. Since by now we know that we need to add HTML tags, just type in the tags as you go.

    <UL>
    <LI>apples
    <LI>oranges
    <LI>grapes
    <LI>bananas
    </UL>

Step 2. Save the file again and open it in IE.

  • apples
  • oranges
  • grapes
  • bananas

You have created an "unordered" list, which inserts bullets before each entry. This is one of the most common list styles, and is used when the sequence is not important.

Step 3. You can change the style of the bullets in an unordered list by using the "type" attribute. Try specifying a circle, then try a square.

    <UL type="circle"> OR <UL type="square">
    <LI>apples
    <LI>oranges
    <LI>grapes
    <LI>bananas
    </UL>

Step 4. Save and reload in Netscape.

  • apples
  • oranges
  • grapes
  • bananas

Step 5. Return to the text document and change the <UL> (unordered list) tags at the top and bottom to <OL> (ordered list). Remove the reference to bullet type.

    <OL>
    <LI>apples
    <LI>oranges
    <LI>grapes
    <LI>bananas
    </OL>

Step 6. Save the file again (text-only) and reload the file again in Netscape.

  1. apples
  2. oranges
  3. grapes
  4. bananas

By changing the enclosing tags from <UL> to <OL> you created an "ordered" list, which numbers the entries. This numbering is automatic, so that if you later add or delete entries, the browser will renumber the items for you.

Step 7. You can change the numbering system to alphabetic by using type = "A" for upper case or "a" for lower case. Roman numerals are "I" or "i".

    <OL type="A">
    <LI>apples
    <LI>oranges
    <LI>grapes
    <LI>bananas
    </OL>

© 2004 - E. Barbara Meyer - EdTech Center - Life Sciences - University of Illinois - Urbana, IL USA