HTML Lists
HTML Lists
| ||||
Introduction
| ||||
In HTML there are three types of list ordered, unordered and definition lists. With the name itself you might be understanding that what is list. Yes you are thinking in the right way.
| ||||
It is the list of anything e.g. list of items, list of books.
| ||||
Hope now you are clear about the List element of the HTML. Now the question is that, can you create the list of items in the web page? Certainly not, But do not worry with the help of this small chapter you can create any type of lists on the your web page very easily. And it will take few of your minutes to learn. So lets Begain!
| ||||
Unordered Lists
| ||||
An unordered list is a list of items. The list items are marked with bullets (typically small black circles), it does not have numbers in the list.
An unordered list starts with the <ul> tag and end with </ul>. list items are defined in between <ul> & </ul>. Each list item is surrounded by the <li> & </li> tag. | ||||
<ul> tag is used for unordered list. Between <ul> & </ul> you have to enter list of items.
| ||||
<li> tag is used for list item. Each list item is surrounded by <li> & </li> tag.
| ||||
Format:
| ||||
<ul> <li> item1 </li> <li> item2 </li> .......<li> itemn </li></ul>
| ||||
| ||||
Just write/copy this example inside the body of the HTML file and save the file and open in the browser and see how it looks.
| ||||
So now you have learned how to create the unordered list in the web page.
|
Ordered List
| ||||||
An ordered list is also a list of items. The list items are marked with numbers not with the bullets.
| ||||||
An ordered list starts with the <ol> tag and end with </ol>. list items are defined in between <ol> & </ol>. Each list item is surrounded by the <li> & </li> tag.
| ||||||
<ol> tag is used for ordered list. Between <ol> & </ol> you have to enter list of items.
| ||||||
<li> tag is used for list item. Each list item is surrounded by <li> & </li> tag.
| ||||||
Format:
| ||||||
<ol> <li> item1 </li> <li> item2 </li> .......<li> itemn </li></ol>
| ||||||
| ||||||
Just write/copy this example inside the body of the HTML file and save the file and open in the browser and see how it looks.
| ||||||
So now you have learned how to create the ordered list in the web page. More over if you are looking for more options then you can have list containing Roman numbers, alphabets in the list instead of numbers (1,2,3...n). Ordered list have an attribute called type="value".
| ||||||
And you know how to define the attribute of any element inside it. type attribute have different values.
| ||||||
Format:
| ||||||
<ol type="value"> <li> item1 </li> <li> item2 </li> .......<li> itemn </li></ol>
| ||||||
|
Definition List
| ||||
A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc. | ||||
<dl> tag is used for definition list. Between <dl> & </dl> you have to enter list of items.
| ||||
<dt> tag is used for list item terms. Each list item is surrounded by <dt> & </dt> tag.
| ||||
<dd> tag is used for the definition-list definition.
| ||||
Format:
| ||||
<dl> <dt> Term1 </dt> <dd> Term definition.<dd> .......<dt> itemn </dt>....</dl>
| ||||
| ||||
Just write/copy this example inside the body of the HTML file and save the file and open in the browser and see how it looks.
| ||||
So now you have learned how to create the ordered list in the web page. Now you have done a lot in the list now you saw how simple list are.
|
Example
|
Now lets do some Practical.
|
Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.
|
Example:
|
<html>
<head> <title> Lists </title> </head> <body> Unordered List <ul> <li>Text Book</li> <li>Note Book</li> </ul> Ordered List with numbers <ol> <li>Text Book</li> <li>Note Book</li> </ol> Ordered List with Roman numbers <ol type="i"> <li>Text Book</li> <li>Note Book</li> </ol> Ordered List with small character <ol type="a"> <li>Text Book</li> <li>Note Book</li> </ol> Definition List <dl> <dt>Books</dt> <dd>Books are the great friends.</dd> <dt>Pen</dt> <dd>Pen is the biggest power.</dd> </dl> </body> </html> |
Page in browser will look like:
 |
Now you have seen how in HTML, three types of list ordered, unordered and definition lists are created.
|
Comments
Post a Comment