In Association with Amazon.in   Flipkart

Saturday, November 24, 2012

HTML Types Of Lists

HTML offers several mechanisms for specifying lists of information. All lists must contain one or more list elements. Lists may contain:
HTML  List are of 3 types
1) Ordered List
2) Unordered List
3) Definition List
1) Ordered List:- An ordered list, created using the <ol> element, should contain information where order should be emphasized, as in a recipe:
list with numbers( 1,2,3 (or) a,b,c,.. (or) A,B,C,.. (or) i,ii.iii,… (or) I,II,III,…)
<ol> tag (Order list)
<li> tag (List Item)
Example for Ordered List:
<body>
       <ol >
              <li> Java </li>
              <li> ASP </li>
              <li> PHP </li>
       </ol>
</body>
 o/p:----------------------------------------

  1. Java
  2. ASP
  3. PHP

Example for Ordered List with Start Number and/or Type attributes:
<body>
       <ol start=10>
                <li> Java </li>
                 <li> ASP </li>
                    <li> PHP </li>
       </ol>
</body>
Example for Ordered List with type of Numbering
<html>
       <head>
       </head>
<body>
       <ol Type="A">                     
              <li> Java </li>
              <li> ASP </li>
              <li> PHP </li>
       </ol>
</body>
</html>
Note : You can use a,i,I for the Type.

Unordered List: List with bullets only.
Unordered List with 3 types :
  • Circle
  • Square
  • Disk
Example for Un-Ordered List with type of Bullet
<body>
       <ul Type="circle">
              <li> PHP </li>
              <li> JAVA </li>
       </ul>
</body>
o/p:----------------------------

  • PHP
  • JAVA

Note : In Unordered list Default bullet is Disk. We can write OL in UL. We can write OL in OL. We can write UL in OL. We can write UL in UL.
Example for Un-Ordered List within Ordered List
<html>
<head>
</head>
<body>
<ol>
<li> Databases </li>
<ul>
<li>  Oracle </li>
<li>  SQL Server </li>
</ul>
<li> Programming </li>
<li> Testing </li>
</ol>
</body>
</html>


Definition List:
A definition list is not a list of single items. It is a list of items.
A definition list starts with a <dl> tag (definition list).
Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description).
Example using Definition List
<body bgcolor=violet>
<strong>
Drinks
</strong>
<hr color=brown>
    <dl>  
                <dt> Pepsi</dt>
                         <dd>Cool Drink </dd>
                         <dd>Contains Alcohol </dd>
                <dt> Boost </dt>
                       <dd>Health Drink</dd>
                       <dd>Contains Chocolate</dd>              
    </dl>
</body>
o/p:-------------------------
Drinks

 
Pepsi
Cool Drink
Contains Alcohol
Boost
Health Drink
Contains Chocolate
 

No comments:

Post a Comment


Related Posts Plugin for WordPress, Blogger...