Google
HTML COURSE FOR EASY LEARNING
Homepage lesson-2 lesson-3 lesson-4 lesson-5 lesson-6 lesson-7 lesson-8 lesson-9 lesson-10
previous

next

This course is developed for the  online community who are willing to learn online in the leisure periods,  the web designing course,and this is the first step in  learning the web designing. Every one can easily  learn this  by sitting before their personal computers and practice themselves.ok wish you good luck.



LESSON-8 LISTS IN html

This chapter explains how to write the html code for displaying lists on a webpage.. There are a various types of lists that can be created; the important are 1) ordered (numbered) and 2) unordered (bulleted)..
The common tags used in this chapter:-
<LI>, <OL>, <UL>, <MENU>, <DIR>, <DL>, <DT>, <DD>,
A SIMPLE UNORDERED LIST
<ul> <li>a man</li> <li> a cat</li> <li>a bird</li> </ul>
The above code will give the following result.

A SIMPLE ORDERED LIST
<ol> <li>a man</li> <li> a cat</li> <li>a bird</li> </ol>
The above code will give the following result.
  1. a man
  2. a cat
  3. a bird

the �TYPE� attribute is used with lists. For Unordered lists there are three types 1) disk 2) circle 3) square these three are types of bullets appear before the web page lists.. Five types of attributes are used for ordered lists. TYPE=�1� 1 2 3 4 TYPE=�A� A B C .. TYPE=�I� I II III IV V TYPE=�a� a b c TYPE=�i� i ii iii �.

Follow the examples:-
Unordered List:-
<ul type=�circle�> <li>rama</li> <li>krishna</li> <li>bhagavan</li> </ul>
result of the above code
  • rama
  • krishna
  • bhagavan

Ordered List:- <ol type=�1�> <li>govinda</li> <li>hari</li> <li>siva</li> </ol>
result of the above code
  1. govinda
  2. hari
  3. siva

Complex List:- <ol type=�1�> <li>govinda</li> <ul type=�circle�> <li>rama</li> <li>krishna</li> <li>bhagavan</li> </ul> <li>hari</li> <ol type=�1�> <li>govinda</li> <li>hari</li> <li>siva</li> </ol> <li>siva</li> <ul type=�circle�> <li>rama</li> <li>krishna</li> <li>bhagavan</li> </ul> </ol>
the result of the above code will be as follows:-
  1. govinda
    • rama
    • krishna
    • bhagavan
  2. hari
    1. govinda
    2. hari
    3. siva
  3. siva
    • rama
    • krishna
    • bhagavan

Definition Lists
Definition lists display a list of paired terms and definitions. Line breaks between each item should be automatically generated and the definition shown indented, definition lists do not make use of the <LI></LI> list item element. Instead the <DT></DT> tag is used to indicate the definition term and <DD></DD> tags contain the corresponding definition. A definition list should be enclosed in a pair of <DL></DL> tags. Example of code:-
Some definitions:
<DL> <DT>acceleration </DT> <DD>The rate of change in speed</DD> <DT>velocity</DT> <DD>the distance divided by time(distance in kms and time in seconds).</DD> </DL>
acceleration
The rate of change in speed
velocity
the distance divided by time(distance in kms and time in seconds).

Directory and Menu Lists
Similar to unordered lists with the exception that they should not be nested and the list item marker, <LI> does not take any attributes. They are typically used to create a list of short items, usually up to 20 characters in length. A directory list should be enclosed in a pair of <DIR> </DIR>tags. A menu list should be enclosed in a pair of <MENU></MENU> tags.
Examples of code:-
<DIR> <LI>ganesh</LI> <LI>hari</LI> <LI>sankar</LI> <LI>murali</LI> </DIR>
<MENU> <LI>ganesh</LI> <LI>hanuman</LI> <LI>sri ram</LI> <LI>vishnu!</LI> </MENU>
the result of the above two codes:-
  • ganesh
  • hari
  • sankar
  • murali
    •
  • ganesh
  • hanuman
  • sri ram
  • vishnu!
    •



    previous

    end of LESSON-8

    next

    Copyright © easyfreehtml. All rights reserved.
    Hosted by www.Geocities.ws

    1