Using List Items

Information on a web page can be displayed many different ways. At times you may want to display a list of some kind, like the table of contents on our index.htm page. These lists can be used to display sequential procedures, relative importance, collections of related data etc.

We are going to show two of the more common list types, numbered and bulleted. Each of these list types causes the text or List Item <LI> to be indented from the left margin.

Odered Lists

An ordered list or numbered list is used to create a sequentially numbered list. By default the numbering starts with 1. Two tags must be used with this list type; <OL> & <LI>. The <OL> starts the list. Each item in the list starts with <LI> and is closed with </LI>. After all items in the list are displayed, close the list with </OL>


<OL>
     <LI>The Sections of a HTML Page</LI>
     <LI>A basic Home Page</LI>
     <LI>Adding text in paragraphs</LI>
     <LI>Formatting Text</LI>
     <LI>Formating Headers</LI>
     <LI>Text Positioning</LI>
     <LI>Using Rules</LI>
     <LI>Creating Links to other documents</LI>
     <LI>Adding Graphics</LI>
     <LI>Adding a Email address link</LI>
     <LI>Using Lists</LI>
     <LI>Required information</LI>
     <LI>Using Tables</LI>
</OL>



Example

Unordered lists

An unordered list <UL> will place a dot or bullet in front of the list item. The table of contents for this tutorial is an unordered list.



<UL>
     <LI>The Sections of a HTML Page</LI>
     <LI>A basic Home Page</LI>
     <LI>Adding text in paragraphs</LI>
     <LI>Formatting Text</LI>
     <LI>Formating Headers</LI>
     <LI>Text Positioning</LI>
     <LI>Using Rules</LI>
     <LI>Creating Links to other documents</LI>
     <LI>Adding Graphics</LI>
     <LI>Adding a Email address link</LI>
     <LI>Using Lists</LI>
     <LI>Required information</LI>
     <LI>Using Tables</LI>
</UL>

Example



Using graphic bullets or icons with lists

If just the Unordered list tag <UL>with no list items <LI>is used, a graphics bullets may be inserted before the list item. This will still give the indentation that list give, but allows the list to be dressed up a bit. By looking around on the net, you can find many bullets, balls, pins etc. Notice the line break at the end! If this is not included then the individual line items will run together on one line. Not what was intended.



<UL>
     <IMG SRC="ball_grn.gif" HEIGHT="20" WIDTH="20"> Sections of a HTML Page<BR>
     <IMG SRC="ball_grn.gif" HEIGHT="20" WIDTH="20"> A basic Home Page</BR>
     <IMG SRC="ball_grn.gif" HEIGHT="20" WIDTH="20"> Adding text in paragraphs<BR>
     <IMG SRC="ball_grn.gif" HEIGHT="20" WIDTH="20"> Formatting Text<BR>
     <IMG SRC="ball_grn.gif" HEIGHT="20" WIDTH="20"> Formating Headers<BR>
     <IMG SRC="ball_grn.gif" HEIGHT="20" WIDTH="20"> Text Positioning<BR>
     <IMG SRC="ball_grn.gif" HEIGHT="20" WIDTH="20">Using Rules<BR>
</UL>



Our example will yield this as a result

These lists may also be nested, that is open an unordered list, then open a second unordered list. This will cause a graphic circle to be displayed versus a black dot. If you do nest these lists, be sure to close both lists.

Home