Wednesday, September 30, 2009

Non Nerd HTML 7 - LISTS

The Previous Tutorial covered the basics of using images in an HTML document. In this tutorial we are going to talk about lists.

The previous few tutorial sessions have been dealing with rather tricky things. Now we are going to introduce something that is really simple. But don't underestimate the power of lists. As with many aspects of HTML we are going to discover a whole host of uses of lists when we move into styling and beyond into scripting.

Okay, easy lesson. Lists:

We have two kinds of lists in HTML:

  1. Ordered list - Mark-up - <ol></ol> - Renders - like this list we are in, with numbers
  2. Un-ordered list - Mark-up - <ul></ul> - Renders - with bullets.

Below you can see how to create an un-ordered list. The new tag <li></li> is used to contain the "list item" hence "li"

<ul>
<li>This is one item</li>
<li>This is another</li>
<li>And another</li>
</ul>

You would create an ordered list the same way, except with the <ol></ol> tags.

Right, that was plain and simple. As I said before, once we get to CSS you will find there is a lot you can do with the lists. For now, make sure you learn the two kinds and play around with them. You can make 'nested lists'...lists within lists. See if you can figure that out.

This section leads on to naturally to Tables, and so the next section will be an HTML introduction to Tables.

One other thing. I believe strongly in giving credit where it is due, and for this tutorial I need to keep parsing the HTML so that when I write tags here they don't just get taken as part of the document. To do that I need to parse it. One can do that by hand, but honestly, I don't remember more than about 5 different ones, so I use a tool on this page