Lists
Definition of Lists
List is used mention a list of items. When we want to mention a list of items, there are two methods of doing so. We can number them as 1,2,3... etc. or we can list them one below the other without numbers.
when we list them without numbers, it is called an unordered list.
When we number them, it is called an ordered list.
when we list them without numbers, it is called an unordered list.
When we number them, it is called an ordered list.
Types of lists:
There are three types of lists:
1. Ordered Lists (<ol>)
2. Unordered List (<ul>)
3. Definition List (<dl>)
Ordered List
Lists appear with numbers are called ordered list. An ordered list as enclosed by <ol> and </ol>. Using Arabic number, letters, or roman numerals. Ordered lists are used for creating step-by-step instructions because the list items are automatically numbered by the browser.
List items in ordered and other lists are defined by using list item tag <li> and use of the closing </li>
tag is required.
<ol> Tag:
The <ol> tag has three type of attributes
1. Compact
2. Start
3. Type
1. Compact
The compact attribute requires no values under traditional HTML
ex: <ol compact = "compact">
2. Start
The <ol> element also has a start attributes that takes a numeric values to begin the list numbering.
The type attributes is a letter or a numeral, the start value must be a number.
ex: <ol type="a" start="10">
3. Type
The type attribute of following:
Symbol
|
Meaning
|
1
|
Number
|
A
|
Upper Case letter A,B,C…
|
a
|
Lower case letter a,b,c…..
|
I
|
Upper case Roman numerals I,II,III….
|
i
|
Lower
case Roman numerals I,ii,iii…..
|
Example of ordered list:
We give some following html code
<html><body>
<h1> orderlist </h1>
<h3> chocolates</h3>
<ol type="I">
<li> dairy milk </li>
<li> bournvile </li>
<li> munch </li>
</ol>
<h3> Games </h3>
<ol type="1">
<li> cricket </li>
<li> hockey </li>
<li> football </li>
</ol>
</body>
</html>
Output:
The Another example:
We give some following html code
<html>
<body>
<h1>Order list</h1>
<h3> fruit </h3>
<ol type="i">
<li> apple </li>
<li> orange </li>
<li> grapes </li>
<li> banana </li>
</ol>
<h3> vegetable </h3>
<ol type="A">
<li> carrot </li>
<li> onion </li>
<li> potato </li>
</ol>
</body>
</html>
<body>
<h1>Order list</h1>
<h3> fruit </h3>
<ol type="i">
<li> apple </li>
<li> orange </li>
<li> grapes </li>
<li> banana </li>
</ol>
<h3> vegetable </h3>
<ol type="A">
<li> carrot </li>
<li> onion </li>
<li> potato </li>
</ol>
</body>
</html>
Output:
Unordered List
An unordered list is represented by the <UL> and </UL> tags. It is used for lists of items in which the ordering is not specific.
The <UL> tag is given at the beginning and the </UL> tag is given at the end.
Each List item is given an <LI> tag.
<UL> Tags:
The type attribute can appear within the <UL> tag.
The value for type attribute :
- disc
- circle
- square
Example:
We give some following html code
<html>
<body>
<h1> Unordered list </h1>
<h3> chocolates</h3>
<ul type="square">
<li> dairy milk </li>
<li> bournvile </li>
<li> munch </li>
</ul>
<h3> Games </h3>
<ul type="disc">
<li> cricket </li>
<li> hockey </li>
<li> football </li>
</ul>
<h3> fruit </h3>
<ul type="circle">
<li> apple</li>
<li> orange </li>
<li> grapes </li>
</ul>
</body>
</html>
Output:
Definition List
A Definition list is a list of terms paired with associated.
Definition lists are enclosed within <dl> and </dl>. Each term being defined is indicated by a <dt>
element, which derived from "definition term".
Each definition itself is defined by <dd>.
Example:
We give some following html code
<html>
<body>
<h1> Definition List </h1>
<ol><li> chocolates</li>
<ul type="square">
<li> dairy milk </li>
<li> bournvile </li>
<li> munch </li>
</ul><br>
<li> fruit </li>
<ul type="circle">
<li> apple </li>
<li> orange </li>
<li> grapes </li>
</ul><br>
<h4>vegetable</h4>
<dl>
<dt>carrot</dt>
<dd>Good for health</dd>
</dl></ol>
</body>
</html>
Ouptut:
Nested Lists
It is possible to use one type of list within another type of list. There are called nested lists.
Example:
We give some following html code
<html>
<body>
<h1> Nested List </h1>
<ol><li> chocolates</li>
<ul type="square">
<li> dairy milk </li>
<li> bournvile </li>
<li> munch </li>
</ul>
<li> Games </li>
<ul type="disc">
<li> cricket </li>
<li> hockey </li>
<li> football </li>
</ul>
<li> fruit </li>
<ul type="circle">
<li> apple </li>
<li> orange </li>
<li> grapes </li>
</ul>
<body>
<h1> Nested List </h1>
<ol><li> chocolates</li>
<ul type="square">
<li> dairy milk </li>
<li> bournvile </li>
<li> munch </li>
</ul>
<li> Games </li>
<ul type="disc">
<li> cricket </li>
<li> hockey </li>
<li> football </li>
</ul>
<li> fruit </li>
<ul type="circle">
<li> apple </li>
<li> orange </li>
<li> grapes </li>
</ul>
</ol>
</body>
</html>
Output:
No comments:
Post a Comment