Advanced Features

The default for an ordered list is basic numerals but there are several different types of ordered list you can choose. All of them employ the same style property but with differing values. i.e..

<ol style="list-style-type:
decimal (default setting)"> or
lower-roman"> or
upper-roman"> or
lower-alpha"> or
upper-alpha">

It is also possible to alter the appearance of unordered lists (the default is solid bullet points) i.e.

<ul style="list-style-type:
disc (default setting)"> or
circle"> or
square">

You can even specify your own personal list image by entering:

<ul style="list-style-image: image location>

Count from any number

Sometimes you don't want to start from 1 or a or i. Fortunately it is possible to select your starting point.

All you need to do is set your start point when you begin your ordered list e.g.

<ol start="5'> or
<ol style="list-style-type: lower-roman" start="d">

Valid XHTML 1.0 Transitional

Lists

Lists are a feature of a well organized Web page. They are employed purely for the purposes of organizing data and can be an effective way to draw attention to specific information which may need to be read, absorbed and acted upon in order.

Lists can take many forms but the two basic types are unordered lists <ul> and ordered lists <ol>. A third type of list is the definition list <dl>.

Ordered Lists

  1. Select a point on your document where you'd like to place a list such as a list of your favourite trees.
  2. Give your list a title and begin it by using the <ul> tag (remember to close the tag with a </ul> tag).

    <p><img src="images/winterwolf.gif" /></p>
    <h3>My favourite Trees</h3>
    <ul>
    </ul>

    </body>
    </html>

    This is the beginning of an unordered list, a list in which the order of items has no importance.

  3. To insert a list item say a larch you would type:

    <ul>
    <li>larch</li>
    </ul>

    You can enter as many items as you want just enclose them in paired <li> tags.

  4. Save your .html file.
  5. Start your browser and click File→Open→Browse now choose your file whether it is on the server or on a floppy disk. Your Web page should now contain an unordered list of your favourite trees or whatever list you decided to make.

Unordered Lists

  1. Select a point in your .html file where you'd like to place a list such as a list of steps to identifying a tree (also called a key).
  2. Select a spot in your .html where you'd like to place an ordered list. Give your list a title as before then enter the beginning tag <ol>add its closing tag pair </ul> then enter list items in the same way you did for an unordered list e.g.:

    <ul>
    <li>larch</li>
    <li>spruce</li>
    <li>maple</li>
    </ul>
    <h3>Tree Identification Key</h3>
    <ol>
    <li>Is it Autumn or Winter? Yes→#2 No→#5</li>
    <li>Are its leaves green? Yes→#3 No→#28</li>
    </ol>

    </body>
    </html>

  3. You can enter as many items as you want and the browser will automatically number them up.

    Sometimes you may wish to count in letters or to begin at a number other than 1. Refer to the Advanced Features side-bar to the right for modifications you can make to your Lists

  4. Once you've finished your steps save the document.
  5. Start your browser and click File→Open→Browse now choose your file whether it is on the server or on a floppy disk. Your Web page should now contain a tree identification key or whatever list you decided to make.

Definition lists

  1. Definition lists are an underutilized tag. They are an excellent way to subdivide data without having to "nest" (place one inside another) lists. As their name implies they allow you to place definitions along with listed data. An example is shown below.

    There are so many different kinds of trees that they are subdivided into different families. My two favourite families are the Conifers and the Podocarps.

    Conifers (cone bearing)
    Pine
    Juniper
    Redwood
    Podocarps (pulpy fruit with a stone)
    Rimu
    Totara
    Kauri

    Select a spot in your .html where you'd like to place a definition list. Give your list a title as before then enter the beginning tag <dl>add its closing tag pair </dl>. Entering your list items uses two different tags definition term <dt> and definition description <dd>. The definition term precedes the definition descriptions e.g.:

    <h3>Tree Families</h3>
    <p>There are so many different kinds of trees that they are subdivided into different families. My two favourite families are the Conifers and the Podocarps.</p>
     
    <dl>
    <dt>Conifers</dt>
    <dd>Pine</dd>
    <dd>Juniper</dd>
    <dd>Redwood</dd>
     
    <dt>Podocarps</dt>
    <dd>Rimu</dd>
    <dd>Totara</dd>
    <dd>kauri</dd>
    </dl>
    </body>
    </html>

  2. Once you've finished your steps save the document.
  3. Start your browser and click File→Open→Browse now choose your file. Your Web page should now contain a definition list.

Next step: Tables →