Ordered, Unordered and Definition Lists

  BACK   HOME NEXT | Tables 1 

Table of Contents

A Nested List A List of Hyperlinks A List preceded by pictures To Center a List

An Unordered List

The Tags :

<ul>
   <li>Saturday</li>
   <li>Sunday</li>
   <li>Monday</li>
 </ul>

The Result :

  • Saturday
  • Sunday
  • Monday

An Ordered List

The Tags :

<ol>
    <li>Saturday</li>
    <li>Sunday</li>
    <li>Monday</li>
  
<ol>

The Result :

  1. Saturday
  2. Sunday
  3. Monday

Different types of ordered lists

The Tag is ::

<ol type="x">,where ( x ) can be :
  • Numbers
  • Letters ( capital / small )
  • Roman numbers ( capital / small )

For example ::

- <ol type="1">
- <ol type="A">
- <ol type="a">
- <ol type="i">

Note :

Type :

<ol Type="x"start="x">, where ( x ) can be a Start other than 1 or A or I.

Example ( 1 ) :

<ol Type="1"start="5">
<li>England
<li>France
</ol>

  1. England
  2. France

Example ( 2 ) :

<ol Type="A"start="3">
<li>England
<li>France
</ol>

  1. England
  2. France

Note :

( C ) is the letter number ( 3 )

 Top

Different types of Unordered lists

The Tag is :: <ul type="x">, where ( x ) can be :

  • Disc.
  • Circle
  • Square

Example :

<ul type="circle">
<li>Circle
</ul>

  • Circle

A nested List

One List inside another

  • America
  • England
    1. France
    2. German
    • Italy
    • Japan
  • Russia
 

A definition list

  1. <DL> denotes the beginning of a Definition / description List.
  2. Each <DT> precedes the word to be defined or described.
  3. <DD> gives the word definition or description.

Example (1)

Word / Items Definition

The Tags :

<dl> <dt>WWW</dt>
<dd>World Wide Web</dd> <dt>USA</dt> <dd>United States of America</dd> </dl>

The Result :

WWW
World Wide Web
USA
United States of America

Example (2)

Next Week Planning

Saturday
visit my uncle.
Sunday
Go to the cinema.
Monday
Read computer books.
Tuesday
Make a picnic.
Wednesday
Have a birthday party.
Thursday
Do my homework.

Example (3)

A List of Hyperlinks

The Tags :

<ol>
<a href="colors.html"><li>COLORS</a>
<a href="fonts.html"><li>FONTS</a>
</ol>

The Result :

  1. COLORS
  2. FONTS

Example (4)

A List preceded by pictures ( Balls )

The Tags :

<img src="ball2.gif"align="center">  Colors
<img src="ball2.gif"align="center">  Fonts
<img src="ball2.gif"align="center">  Links

The Result :

 Colors
 Fonts
 Links

To Center a List

If you would like to have extra spaces from the left, simply add more <UL> Tags. Remember to repeat < UL >Tags as many as < /UL> ones. Like this:

<UL>  <UL>  <UL>
Learn :
 <li>Graphic
 <li>Lists
 <li>Tables
 </UL></UL></UL> 
        Learn :
      • Graphic
      • Lists
      • Tables

A Tip :

If the above commands have a space inside their left sides, they will not work :

< ul>, < /ul> or < li>

  BACK   HOME   Top NEXT | Tables 1