HTML Code Tutorial

Tutor Ebook Download

Lists

There are 3 different kinds of lists which can be displayed using HTML. They are Unordered, Ordered and Definition lists. Items in a list do not require a closing tag. </li>

Unordered Lists

Unordered list:
  • The unordered list
  • The ordered list
  • The definition list


The Code:
<ul type="disc">
<li>The unordered list
<li>The ordered list
<li>The definition list
</ul>
 Unordered list:
  • The unordered list
  • The ordered list
  • The definition list


The Code:
<ul type="square">
<li>The unordered list
<li>The ordered list
<li>The definition list
</ul>

You can Test the list Codes online in this: HTML editor

List items in an unordered list are preceded by a bullet. To designate the bullet selection of DISC, SQUARE or CIRCLE older HTML versions use the type attribute.
<ul type="SQUARE"> The default bullet is DISC.

Newer versions of HTML use style sheets to set the bullet style.
Example: list-style : disc or list-style-type : disc.
To eliminate the bullet use the style sheet code: list-style : none or list-style-type : none.

Ordered Lists

Ordered list:
  1. Write a Business Plan
  2. Obtain Licensing
  3. Obtain Financing


The Code:
<ol type="1" start="5">
<li>Write a Business Plan
<li>Obtain Licensing
<li>Obtain Financing
</ol> 		Ordered list:
  1. Write a Business Plan
  2. Obtain Licensing
  3. Obtain Financing


The Code:
<ol type="a" start="5">
<li>Write a Business Plan
<li>Obtain Licensing
<li>Obtain Financing
</ol>

You can Test the list Codes online in this: HTML editor

Older HTML versions: The items of an ordered list are preceded by letters or numbers instead of bullets. The choices are integers as 1,2,3....., letters as upper or lower case A,B,C... a,b,c.... and Roman Numerals upper or lower case as I,II,III... i,ii,iii....

The type attribute determines the type. The start attribute is used to define the starting position in a list.

Newer HTML Versions In newer versions of HTML ordered list styles are set using style sheets.
Example: list-style : lower-alpha or list-style-type : integer

Some of the many choices for style or type are: integer, lower-alpha, upper-alpha, lower-roman, upper-roman.

Definition Lists

The definition list is handy for displaying a list of terms and their definitions. The definition <dd> is automatically indented below its associated term <dt>.

Definition list:
Aardvark
An anteater. Animal with a very long snout.
Orangutan
A monkey with very long arms.
Zebra
A pony with stripes.
 The Code:
<dl>
<dt>Aardvark
<dd>An anteater. Animal with a very long snout.
<dt>Orangutan
<dd>A monkey with very long arms.
<dt>Zebra
<dd>A pony with stripes.
</dl>

An easy way to remember which tag goes where: <dt> = Define Term
<dd> = Define Definition

Nesting Lists

Different types of lists can be nested or placed within each other to create sophisticated hierarchical structures.

  1. Item Ordered List
  2. Item Ordered List
    • Sub Item Unordered List
      Term Definition List
      Definition
      Term Definition List
      Definition
    • Sub Item Unordered List
    • Sub Item Unordered List
  3. Item Ordered List
  4. Item Ordered List
Definition List Term
  • Items in Definition
  • Items in Definition
  • Items in Definition
  • Items in Definition
Definition List Term
  1. Ordered Items in Definition
  2. Ordered Items in Definition
  3. Ordered Items in Definition
  4. Ordered Items in Definition
Definition List Term
Definition Normal

Tricks With Lists

Lists can be used to create menus or text site maps for your website.

You could use a list of simple headings and hyperlinks and set them in a structure similar to one of those shown above. Or you could use a combination of hyperlinks and images.

The Style Sheets:
#links ul li a{ font-family: Arial;font-style : normal ;font-size : 12pt; font-weight :bold;text-decoration : none; color :#000000}
#links ul li a:hover{ font-family: Arial;font-style : normal ;font-size : 12pt; font-weight :bold;text-decoration : none; color :#ff0000}
#links ul{ list-style:none}


The code:
<div ID="links" STYLE=";border: solid #000 2px; width :250px"> <p STYLE="font-family: Arial;font-style : italic ;font-size : 14pt; font-weight :bold;text-align : left; color :#0000FF">Table of Contents:
<ul>
<li><img src="images/heart.gif" height="25" width="24" alt="" border="0" align="center"><a href="#toppage">Unordered Lists</a>
<li><img src="images/heart.gif" height="25" width="24" alt="" border="0" align="center"><a href="#ordered">Ordered Lists</a>
<li><img src="images/heart.gif" height="25" width="24" alt="" border="0" align="center"><a href="#definition">Definition Lists</a>
<li><img src="images/heart.gif" height="25" width="24" alt="" border="0" align="center"><a href="#tricks">Tricks With Lists</a>
</ul>
</div>

Hover Property

IE7 and Mozilla browsers accept the CSS hover property for list items. This allows you to create some interesting effects when building menus and navigational links.



If you are using an IE7 or Mozilla browser, the buttons on the left will change color when you hold the mouse cursor over them.

The effect is created by using 2 different buttons.

The second button of a different color is displayed when the hover property is accessed for the list item. There is no confusing javascript - just 2 lines in the style sheet.

The HTML code:
<td id="buttons" width="190" align="center" style="background-color: #0060ff; border-right: solid #000000 2px; border-bottom: solid #000000 2px; border-left : solid #97BCF9 1px; border-top : solid #97BCF9 1px"><br>
<!--Edit Links Here-->
<ul>
<li><a href="#toppage">Page Number Two</a></li>
<li><a href="#toppage">Page Number Three</a></li>
<li><a href="#toppage">Page Number Four</a></li>
</ul><br>
</td>

The CSS code:
#buttons ul {list-style: none; text-indent: 0px; margin: 0px; padding: 0px }
#buttons li {background-image : URL(images/button15.png); background-repeat : no-repeat; width:181px; height:41px; text-align: center; padding-top: 8px}
#buttons li:hover {background-image : URL(images/button16.png); background-repeat : no-repeat; width:181px; height:41px; text-align: center; padding-top: 8px}
#buttons a { font-family:arial,serif; font-style: normal; font-weight: bold; font-size:8pt;text-decoration:none;color: #ff9900; margin: 0px; padding : 0px}
#buttons a:hover { font-family:arial,serif; font-style: normal; font-weight: bold; font-size:8pt;text-decoration:none;color: #0060ff ; margin: 0px; padding : 0px}

Copy these buttons to make it work on your web page:  
Best when placed on background color #0060ff

Note: If the list item hover property doesn't work in your IE7 browser try changing the Doctype at the top of your web page to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

You can Test the simple list Codes online in this: HTML editor

Take a quiz. Take a Quiz on this Information.

Check out our Free Frames Template Kit or try our Free Frames Kit Demo




CGI Online
How to Create a Website -Tutorial
Main Website


This Free HTML Tutorial
is provided by Net Success 2000 Plus Inc.
PO Box 1508
Somerset, KY 42502
Last Modified: September 3, 2007

HTML Codes Tutor Ebook