PHP tutorials, html tutorial, photoshop tutorial, ajax tutorials,java tutorial, web design tips tutorials, css tutorial, visual basic tutorial, dreamweaver tutorial, php tutorial, html tutorials, c++ tutorial, javascript tutorial, windows tutorials, free flash tutorials, free photoshop source codes, sql tutorial

Programming Articles

  PHP articles
  MySql articles
  Visual Basic.Net articles
  Java articles
  ASP articles
  ASP.Net articles
  Visual Basic articles
  CSS articles

Programming Tutorials

  PHP tutorials
  MySql tutorials
  Visual Basic.Net tutorials
  Java tutorials
  ASP tutorials
  ASP.Net tutorials
  Visual Basic tutorials
  HTML tutorials
  CSS tutorials

Programming Source Codes

  PHP scripts
  Visual Basic.Net scripts
  JavaScript scripts
  ASP scripts
  ASP.Net scripts
  Visual Basic scripts

Working with Lists

Date:2006-03-20

There are three main types of list.

Ordered Lists (Numbered Lists)
Unordered Lists (Unnumbered Lists)
Definition Lists

Unordered Lists

Unordered lists allow you to create lists with various bullet styles. An Unordered tag starts with the tag <UL> and end with </UL>. Between <UL> and </UL> tag we use <LI> tag. The <LI> tag is used to signify a list element. Below code demonstrates the unordered list:

<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>
</HEAD>
<BODY>
<UL> Oranges
<LI> Bananas
<LI> Apples
<LI> Chocolates
</UL>
</BODY>
</HTML>

The output is:

Bananas
Apples
Chocolates
Oranges

You can modify the look of the bullets by using the TYPE attribute in the <UL> tag. The TYPE attribute supports the following values: . For Example:

<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>
</HEAD>
<BODY>
<UL>
<LI> Bananas
<LI> Apples
<LI> Chocolates
</UL>
</BODY>
</HTML>

Ordered Lists

Ordered lists allow you to create lists with various bullet styles. An Ordered tag starts with the tag <OL> and end with </OL>. Between <OL> and </OL> tag we use <LI> tag. The <LI> tag is used to signify a list element. Below code demonstrates the Ordered list:

<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>
</HEAD>
<BODY>
<OL>
<LI> Bananas
<LI> Apples
<LI> Chocolates
<LI> Oranges
</OL>
</BODY>
</HTML>

output:

Bananas
Apples
Chocolates
Oranges

Modifying the Bullet

You can modify the look of the bullets by using the TYPE or START attributes in the <OL> tag.
The TYPE attribute supports the following values: A, a, I, i, or 1.
The START attribute specifies at what point to start counting from.

Below code demonstrates the usage of the TYPE and START attributes.

Definition lists

Definition lists allow you to create lists that are more like glossary entries than hierarchies. The basic definition list involves four tags

The <DL> tag is used to open a definition list.
The <DT> tag is used to signify a definition term.
The <DD> tag is used to signify a definition term description
And the </DL> tag is used to end the list.
For example, the following code could be used to create a definition list:
```
<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>
</HEAD>
<BODY>
<B>Food</B>
<DL>
<DT>Vegetables
        <DD>Vegetables are very good for you. They 
        contain all sorts of essential vitamins.  
<DT>Meat
        <DD>Meat contains lots of proteins that your 
        body needs.  
</DL>
</BODY>
</HTML>
```
The previous code would produce the following HTML list.
Food

Vegetables
Vegetables are very good for you. They contain all sorts of essential vitamins.
Meat
Meat contains lots of proteins that your body needs. .

Programming Articles

Programming Tutorials

Programming Source Codes

Our Partners

Working with Lists