 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome to KTL's HTML tutorial. Today we will study lesson 11.
In our previous lesson, we studied hyperlinks.
Today we will study how to create lists in a web page.
HTML Lists
There are three types of HTML lists. 1. Unordered list, 2. Ordered list, and 3. Description list.We will learn unordered list and ordered list in this lesson.
An unordered list displays a bulleted list. Ordered list displays a numbered list.
What is the difference between an unordered list and an ordered list. In unordered list items are not in specific order. Even if we change the order of items, meaning does not change. In ordered lists we need to write list items in a specific order, otherwise, meaning changes. Let us take following example.
Items required for preparing tea:
- Tea
- Sugar
- Water
- Milk
Here let us change the order.
- Tea
- Sugar
- Water
- Milk
Meaning does not change. Therefore this should be a unordered list.
Let us take another example:
Procedure of preparing tea:
1. Take one glass of water.
2. Begin to heat it.
3. Put tea powder and sugar in it.
4. Then pour some milk.
5. After sufficient heating, pour this in a glass and drink it.
Let us change the order of items.
1. Take one glass of water.
2. Begin to heat it.
3. After sufficient heating, pour this in a glass and drink it.
4, Put tea powder and sugar in it.
5. Then pour some milk.
Here meaning is changing, which is incorrect. Therefore, this is an ordered list.
Let us first display an unordered list in the web page.
HTML unordered lists
Open a new Notepad file. In this file copy everything from first line to body tag from lesson-10.Below <body> write
<p>List of animals</p>
<ul> tag is used to create an unordered list.
Under <ul> tag give list. <li> is used to mention every item in the list.
For example <li>Dog</li> is the first item in the list. Similarly give all items in the list.
Give </ul>.
Our HTML code for unordered list is as follows:
<p>List of animals</p>
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Lion</li>
<li>Tiger</li>
</ul>
Copy above text below <body> tag. After </ul> type </body> and </html>. See figure 11-1 below for clarity. Save this file as "Lesson-11" and again as "Lesson-11.html". Double click on HTML Document. A bulleted list is displayed.
Ordered lists
Now let us generate an ordered list.<ol> tag is used for ordered list.
Below this give items in the list, that is using <li> tag.
Close <ol> tag - </ol>.
Our code will as follows:
<ol type="a">
<li>Dog</li>
<li>Cat</li>
<li>Lion</li>
<li>Tiger</li>
</ol>
Copy this in our program. Again save file as "Lesson-11" and again as "Lesson-11.html". Double click on HTML Document. A numbered list is displayed.
Type attribute for <ol>
<ol> tag has an attribute "type". This attribute is used to define type of item marker.There five values for "type" attribute.
1. type="1" - generates a list 1, 2, 3 etc. This is default.
2. type="A" - generates a list A, B, C etc.
3. type="a" - generates a list a, b, c etc.
4. type="I" - generates a list I, II, III etc.
5. type="i" - generates a list i, ii, iii etc.
Add type="a" in <ol> tag. Our text for third list will be as follows:
<ol type="a">
<li>Dog</li>
<li>Cat</li>
<li>Lion</li>
<li>Tiger</li>
</ol>
Copy this text in our program. Our final program is as show in in the following figure. Click on this figure for PDF file of source code.
 |
| Figure 11-1. HTML lists |
 |
| Figure 11-2 Types of HTML lists, unordered list, ordered list |
A bulleted list is displayed. Under that a numbered list is displayed. A list with numbering type a, b, c... is displayed.
Important points:
1. Unordered lists are bulleted lists. Ordered lists are numbered lists.2. <ul> tag is used to display an unordered list. <ol> tag is used to display an ordered list.
3. <li> tag is used to display items in a list.
4. <ol> tag has "type" attribute which is used to specify type of numbering.
Lesson-10 Lesson-12
