Lists : Ordered List , Unordered List ,Definition List
HTML Supports several ways of arranging items in lists. The two most commonly used methods are:
- Ordered List (Numbered List)
- Unordered List (Bulleted List)
Ordered List <OL>
Ordered list also called as Numbered list, is used to represent a numbered list of item in the order of importance or the item (paragraph) is marked with a number. An ordered list must begin with the <OL> followed by an <LI> list tag.
Example:
<HTML>
<HEAD>
<TITLE> An Ordered List </TITLE>
</HEAD>
<BODY>
<H1><U> Various Computer Courses</U></H1>
<OL>
<LI> Advance Diploma in Computer Application</LI>
<LI> Diploma in Computer Application</LI>
<LI> Certificate Course in Computer Application</LI>
<LI> Diploma in Financial Accounting</LI>
<HEAD>
<TITLE> An Ordered List </TITLE>
</HEAD>
<BODY>
<H1><U> Various Computer Courses</U></H1>
<OL>
<LI> Advance Diploma in Computer Application</LI>
<LI> Diploma in Computer Application</LI>
<LI> Certificate Course in Computer Application</LI>
<LI> Diploma in Financial Accounting</LI>
<LI> Tally with GST </LI>
<LI> Desktop Publishing </LI>
<LI> Web Development</LI>
</OL>
</BODY>
</HTML>
</OL>
</BODY>
</HTML>
Attributes of <OL> tag :
TYPE : allows marking list items with different types. By default the list Item markers are set to numbers 1, 2, 3… so on. Other values of TYPE attribute are:
|
Attribute |
Description |
|
Type = A |
Capital letter eg. A, B, C……… |
|
Type = a |
Small letter eg. a, b, c,……… |
|
Type = I |
Uppercase Roman Numbers eg. I, II, III…… |
|
Type = i |
Lowercase Roman Numbers eg. i, ii, iii…… |
|
Type = 1 |
eg. 1, 2, 3…………. |
START: used for lists that need to start at values other than 1. START always specified in default numbers, and is completed based on TYPE before display, For example, If START =5 it would display ‘5’ or either an ‘E’, ‘e’, ‘V’, ‘v’, based an TYPE attribute.
Nested Order List :-
A ordered list might contain one or more ordered list that is called as Nested Order lists.
Example:
<HTML>
<HEAD>
<TITLE> Use of Nested Ordered Lists</TITLE>
</HEAD>
<BODY>
<OL TYPE = “A” START =”3”>
<LI> Hardware</LI>
<OL TYPE = “I”>
<LI> Keyboard</LI>
<LI> Mouse</LI>
<LI> Monitor</LI>
</OL>
<LI> Software</LI>
<OL TYPE = “I”>
<LI>System Software </LI>
<LI>Application Software </LI>
</OL>
</OL>
</BODY>
</HTML>
------------------------------------------------------------
Unordered List <UL>
Unordered List is also called bulleted list, used to represent list of items marked with bullets. An unordered list starts with in <UL> followed by <LI> (List Item) tag. Use of <UL> tag is very similar to <OL> tag (ordered list).
Attributes of <UL> tag:
TYPE : Allows marking list items with different types. By default the list Item markers are set to disk symbol. Other values of TYPE attribute are:
|
Attribute |
Description |
|
Type =square |
§ |
|
Type = circle |
o |
|
Type = disc |
· |
Example:
<HTML>
<HEAD>
<TITLE> Use of Unordered List </TITLE>
</HEAD>
<BODY>
Input Device:
<UL type= “square”>
<LI> Keyboard </LI>
<LI> Mouse </LI>
<LI> Scanner </LI>
<LI> OCR</LI>
<LI> OMR</LI>
<LI> Web Cam</LI>
</UL>
Output Device:
<UL type= “disc”>>
<LI>Monitor</LI>
<LI>Printer</LI>
<LI>Plotter</LI>
<LI> Speaker</LI>
<LI> Projector</LI>
</UL>
</BODY>
</HTML>
--------------------------------------------
Definition list:-
Definition lists are slightly different than the previous list types. The list items in a definition list consist of two parts: a term and a description. Browsers render definition lists by placing the term on one line and indenting the definition underneath it, creating what’s called a hanging indent.
You use three pairs of tags to create a definition list:
<dl> and </dl> tags define where the list begins and ends,
<dt> and </dt> tags define the term,
<dd> and </dd> tags define the term’s definition.
- In the body of your HTML document, enter a <dl> tag to begin your list.
- Begin your term by proceeding to the next line, indenting, and entering a <dt> tag. Follow this opening <dt> tag with the first term you intend to define and finish it with a closing </dt> tag.
- Begin the term’s definition by proceeding to the next line, indenting to be directly under the term, and then entering a <dd› tag.
- Follow this tag with the text that defines the term and close this with a </dd> tag
- End the definition list with a closing </dl> tag.
Example:-
<html>
<head>
<title>Definition Lists</title>
</head>
<body>
<h1>Lists in HTML</h1>
<dl>
<dt>The Ordered List</dt>
<dd>Created using the OL element. This list should contain information where order should be emphasized.</dd>
<dt>The Unordered List</dt>
<dd>Created using the UL element. This list should be used to express a series of significant points</dd>
<dt>The Definition List</dt>
<dd>Create using the DL element. This list should be used to define a list of terms.</dd>
</dl>
</body>
</html>
0 Comments