12. Lists

Making a List

First lets look at the unordered list, which uses bullets, and then ordered list which uses numbers. Both these lists use the <li> tag for the items on the list.

Unordered List
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

Ordered List

<ol></ol> Creates a numbered list <li></li> Creates an item in the list, and adds a number <ul></ul> Creates a bulleted list

Here are the different types of list you can make: Ordered, Unordered, Definition, Menu, and Directory.

There are basically there are six types of list we can use. Let's start with the easiest, the unordered list it like this:First, we will build an UNORDERED list. It's mind-numbingly simple-really.

 

 

Here are some examples

Ordered List 

  1. Item 
  2. Item 
  3. Item

Outline using an Ordered List

  1. Item
    1. Item
    2. Item
    3. Item
  2. Item
    1. Item
    2. Item
    3. Item

Unordered List (bullets)

Defined List

Term
definition

Menu list

Directory List

To build a list first we ad the list tags like this:

<ul> </ul>

Them we add some items like this:

<ul>
<li>item 1
<li>item 2
<li>item 3
</ul>

To change the bullet type we add the type atribute like this:

<ul type="circle">
<li>item 1
<li>item 2
<li>item 3
</ul>

or like this:

<ul type="square">
<li>item 1
<li>item 2
<li>item 3
</ul>

or this, which is the defalut

<ul type="disc">
<li>item 1
<li>item 2
<li>item 3
</ul>

Now let's make a Definition List like this:

<dl>
<dt>Definded Term</dt>
<dd>definition 1</dd>
<dd>definition 2</dd>
<dd>definition 3</dd>
</dl>

OK so you're getting good at this. Let's try a Menu List like this:

<menu>
<li>menu item 1
<li>menu item 2
<li>menu item 3
</menu>

Only a couple more. Here's a Directory List

<dir>
<li>item 1
<li>item 1
<li>item 1
</dir>

 

If you noticed some of these list look alike that's because their name are more for the author than the reader, they just help you see what you are doing. Here's the last one, an Ordered List, and it does look different. Try it:

<ol>
<li>item 1
<li>item 2
<li>item 3
</ol>

We can also nest these list togather like this:

<ul type="square">
<li>Category 1
<ol>
<!-- Ordered List -->
<li>item 1
<li>item 2
<li>item 3
</ol>
<li>Category 2
<ol>
<!-- Ordered List -->
<li>item 1
<li>item 2
<li>item 3
</ol>
</ul>

Looks like this

In an Ordered List we and also change the start number by adding the start=? to the ol tag. We we and also change the value of a list item by adding the value=? atribute to the li tag. Like this:

<ol start=5>
<li>item 1
<li>item 2
<li>item 3
</ol>
<ol>
<li>item 1
<li value=7>item 2
<li>item 3
</ol>

You can also change the type used in an Ordered List like this:

<ol TYPE=A>
<li>item A
<li>item B
<li>item C
</ol>

 

Your assignment is to make an outline using nested ordered list that looks something like this:

  1. Category 1
    1. item
    2. item
    3. item
  2. Category 2
    1. item
    2. item
    3. item

    3. Tags Covered in this section.
    List Item <LI>
    Unordered List <UL></UL> (before each list item)
    Bullet Type <UL TYPE=DISC|CIRCLE|SQUARE> (for the whole list)
    Bullet Type <LI TYPE=DISC|CIRCLE|SQUARE> (this & subsequent)
    Ordered List <OL></OL> (before each list item)
    Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list)
    Numbering Type <LI TYPE=A|a|I|i|1> (this & subsequent)
    Starting Number <OL START=?> (for the whole list)
    Starting Number <LI VALUE=?> (this & subsequent)
    Menu List <MENU></MENU> (before each list item)
    Directory List <DIR></DIR> (before each list item)

    All list use <LI> to List Items except the Definition List
    Definition List <DL><DT><DD></DL> (<DT>=term, <DD>=definition)
    Each term and definition must be closed. Closing <LI> is optional