HTML/XHTML:Lists

Introduction
There are times when you want to add a list of terms or references to your page.

We can do this either as an unordered (bulleted) or ordered (numbered) list.
 * cat
 * dog
 * mouse
 * 1) Family
 * 2) Work

Theory:Lists
The syntax is as follows:
 * For an unordered (bulleted) list the tags &lt;ul> and &lt;/ul> surround the list
 * For an ordered (numbered) list the tags &lt;ol> and &lt;/ol> surround the list
 * &lt;li> and &lt;/li> are used for each line in the lists

So full syntax for a list is as follows;

Which will produce List Item 1List Item 2

and for an ordered list;

Which will produce

My priorities
 * 1) Family
 * 2) Work
 * 3) study

Ordered List attributes
Html also has a selection of other list types. These are listed below.

Table: HTML list types

For example;

producesList Item 1List Item 2

The starting value of the list can be changed using the start attribute

For example;

Golf Tennis </ol>

Unordered list (Bullet) attributes
You can change the look of the bullets using the type attribute

or using styles

Examples



Create a new web page links.htm as..

Save then viewing in the web browser this should look something like; <div style="border: 1px solid #808080; width: 80%; margin-right:auto;margin-left:auto; background-color: #FBFFFF;font-size: larger;"> <p style="font-size:1.5em">**’s search links <p style="font-size:1.2em">New Zealand   accessnz </li> searchnz</li> NZ Search Guide</li> </ul> <p style="font-size:1.2em">International  google</li> Microsoft bing</li> yahoo</li> </ol>

Now add the &lt;a href..&gt; tags to link to the search engines.  For example <div style="border: 1px solid #808080; width: 80%; margin-right:auto;margin-left:auto; background-color: #FBFFFF;font-size: larger;">

URL's are
 * http://www.accessnz.co.nz ,
 * http://search.attitude.net.nz/nz_search_engines.html ,
 * http://www.searchnz.co.nz ,
 * http://www.google.com ,
 * http://www.bing.com ,
 * http://www.yahoo.com