Creating web pages IX

In this installment, we'll cover formatted lists, stuff like this:

• This is a list element.
  • This is a second list inside the first list.
  • Another line in the nested list.
• This is the last list element.

To create bulleted lists like this, use the <ul> and </ul> tags around the list, and a <li> tag before each list element.

Here is the code that produced the above list:

<ul>
<li>This is a list element.
  <ul>
  <li>This is a second list inside the first list.
  <li>Another line in the nested list.
  </ul>
<li>This is the last list element.
</ul>

What if you want numbers instead of bullets?

1. This is a list element.
   1. This is a second list inside the first list.
   2. Another line in the nested list.
2. This is the last list element.

To do that, just replace the <ul> and </ul> tags with the <ol> and </ol> tags, like this:

<ol>
<li>This is a list element.
  <ol>
  <li>This is a second list inside the first list.
  <li>Another line in the nested list.
  </ol>
<li>This is the last list element.
</ol>

If you want to specify Roman numerals or lowercase letters for indented levels, no problem:

1. This is a list element.
   1. This is a second list inside the first list.
      1. A third level.
      2. This could go on and on...
   2. Another line in the nested list.
2. This is the last list element.

The type of character used is specified by the "type" attribute supplied to the <ol> tag. "1" produces ordinary Arabic numerals, "I" produces Roman numerals, and "a" produces lower case letters.

Here is the code that produced the above list:

<ol type="1">
<li>This is a list element.
  <ol type="I">
  <li>This is a second list inside the first list.
    <ol type="a">
    <li>A third level.
    <li>This could go on and on...
    </ol>
  <li>Another line in the nested list.
  </ol>
<li>This is the last list element.
</ol>

I think that the next tutorial will probably be on tables.