PageTutor.com

Another very useful little tool is a list. There are ordered lists and unordered lists.

This is an ordered list:
  1. something big
  2. something small
  3. something short
  4. something tall
         This is an unordered list:
  • something red
  • something blue
  • something old
  • something new

First, we will build an unordered list. It's mind-numbingly simple...   really.

Start with this...

<body>
What I want for Christmas
</body>
What I want for Christmas

(Technically we have not started to build the list yet. This is just a sort of heading.)

Add a pair of unordered list tags.

<body>
What I want for Christmas
<ul>
</ul>
</body>
What I want for Christmas

Add a list item.

<body>
What I want for Christmas
<ul>
<li>a big red truck
</ul>
</body>
What I want for Christmas

Add a few more...

<body>
What I want for Christmas
<ul>
<li>a big red truck
<li>a real fast speedboat
<li>a drum set
<li>a BB gun
<li>a Melanie Griffith
</ul>
</body>
What I want for Christmas

Bingo! You made a list!

How to make an ordered list? Easy! Change the <ul> tag to <ol>.

<body>
What I want for Christmas
<ol>
<li>a big red truck
<li>a real fast speedboat
<li>a drum set
<li>a BB gun
<li>a Melanie Griffith
</ol>
</body>
  1. a big red truck
  2. a real fast speedboat
  3. a drum set
  4. a BB gun
  5. a Melanie Griffith

And you thought HTML was hard. :-)

<< BACK NEXT >>
PageTutor - So, you want to make a Web Page!
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Index & Quick Reference      Barebones HTML Guide
Color Charts      ColorPicker      Upload Your Pages
Print version of this tutorial available - Get the PageTutor book & CD