Scribd
Upload
14 views

Lesson HTML List

Uploaded by

Peterson Tchoutezo Ymele
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

Lesson HTML List

Uploaded by

Peterson Tchoutezo Ymele
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Lesson 5: Ordered List, Unordered List, Description List,

hyperlink, audio and video insertion


At the end of this lesson-
1. You will be able to create ordered list.
2. You will be able to create unordered list.
3. You will be able to create description list.
4. You will be able to create hyperlink on the web page.
5. You will be able to create hyperlink with image on the web page.
6. You will be able to add audio and video on the web page.

INTRODUCTION:
Sometimes information of web page needs to be published in a list or list form. That is, list items
need to be numbered or expressed in bullet point form. Also web pages have link with other pages
and we can add audio and video on them. In this lesson we are going to present them.

II-TYPES OF LIST IN HTML

There are three types of lists in HTML. They are-

 Ordered List
 Unordered List
 Description List
1- Ordered List:

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
In this case the <li>… </li> tags are written as nested within the <ol>… </ol> tag. The order
of the list items is determined by the “type” attribute in the <ol>… </ol> tag. If no “type”
attribute is specified then a Numbered list is created.

Use of “type” attribute in ordered list or <ol>…</ol>:


Use of “start” attribute in ordered list or <ol>…</ol>:
By default, an ordered list will start counting from 1. If you want to start counting from a
specified number, you can use the start attribute:
For example, in case of type = “1”, if start = “3”, ordering or numbering will start from 3.

In the case of type = “A”, if start = “3”, ordering will start from C.

See the following HTML code and output of ordered lists:


See the following HTML code for creating following different ordered lists:

1 <html>

2 <body>

3 <ol start="5">

4 <li>Coffee</li>

5 <li>Tea</li>

6 <li>Milk</li>

7 </ol>

8
9 <ol type="A" start="4">

10 <li>Coffee</li>

11 <li>Tea</li>

12 <li>Milk</li>

13 </ol>

14 </body>

15 </html>

2- Unordered List:
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
In this case the <li>… </li> tags are written as nested within the <ul>… </ul> tag. Bullet
point of the list items is determined by the “type” attribute in the <ul>… </ul> or <li>..</li>
tag. If no “type” attribute is used then the list item will be marked to a bullet disk default.

Use of “type” attribute in unordered list or <ul>..</ul> or <li>.. <li> tags:


Use of “start” attribute in unordered list or <ul>..</ul> or <li>.. <li> tags:
This can be done by using the “style” attribute instead of the “type” attribute. Syntax of style
attribute-

<ul style=”property:value; ” >


here property is list-style-type and value is disc, circle, square, none.

See the following HTML code for creating following different unordered lists:
3- Nested List:
When a list inside another list then it is called Nested List. In this case, the ordered list may
contain an unordered list and the unordered list may contain an ordered list. Again, an ordered
list may contain an ordered list and an unordered list may contain an unordered list.

See the following HTML code for creating following nested list:

1 <html>

2 <body>

3 <ol type="1">

4 <li>Website Structure </li>

5 <ul type="square">

6 <li>Linear</li>
7 <li>Tree</li>

8 <li>Web linked</li>

9 <li>Hybrid</li>

10 </ul>

11 <li>Website Type </li>

12 <ol type="i">

13 <li>Static</li>

14 <li>Dynamic</li>

15 </ol>

16 </ol>

17 </body>

18 </html>

See the following HTML code for creating following nested list:

1 <html>

2 <body>

3 <ol type="1" start="107">

4 <li> English First Paper</li>

5 <ul type="square">

6 <li> True/False</li>

7 <li> Fill in the gap</li>

8 </ul>
9 <li> English Second Paper</li>

10 <ul type="circle">

11 <li> Grammar Section</li>

12 <ol type="a">

13 <li>Article</li>

14 <li>Narration</li>

15 <li>Preposition</li>

16 </ol>

17 <li> Writing Section</li>

18 </ul>

19 </ol>

20 </body>

21 </html>

4- Description List:
HTML also supports description lists. A description list is a list of terms, with a description of
each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term.

See the following HTML code for creating following description list:
1 <html>

2 <body>

3 <h2>A Description List</h2>

4 <dl>

5 <dt>Coffee</dt>

6 <dd>black hot drink</dd>

7 <dt>Milk</dt>

8 <dd>white cold drink</dd>

9 </dl>

10 </body>

11 </html>

III- Hyperlink:
You might know that hyperlink which is a powerful means of browsing from web pages and
websites. It is developed for sending the readers or those who will perform surfing from one
web page to another without opening a new tab or window. This is in general term said to as
link and is given a reference to jump to another page or document or from one part of the
same page to another using a hypertext. The Anchor tag (<a>) in HTML can be defined as a
means to create a hyperlink.

Anchor can link your current page on which the text is being converted to hypertext via <a>
(anchor tag) to another page. This anchoring from one page to another is made possible by the
attribute “href”, which can be abbreviated as (hypertext reference).

Syntax:
<a href= “url” > link text/image </a>
The href attribute specifies the destination address of the link. The link text or image is the
visible part (Visit our HTML tutorial). Clicking on the link text or image will send you to the
specified address.

Types of hyperlink: Three types of hyperlink. They are-


 Global: Linking with different websites.
 Local: Linking with different web pages of the same website.
 Internal: Linking with different sections of the same web page.
Attributes used in anchor(<a>) tag:

Example-1: Link text is “GOOGLE” and URL is http://www.google.com . HTML code-

1 <html>

2 <body>

3 <a href="http://www.google.com"> GOOGLE </a>

4 </body>

5 </html>

Anchor tags can be used to create hyperlink through images also. Here’s a code snippet to
show how to perform that.

Example-2: Link image is “logo.png” and URL is http://www.google.com . HTML code-


1 <html>

2 <body>

3 <a href="http://www.google.com"> <img src="logo.png"> </a>

4 </body>
5 </html>

IV- HTML code for adding audio:

1 <!DOCTYPE html>

2 <html>

3 <body>

4 <audio controls>

5 <source src="audio-file-name.mp3" type="audio/mpeg">

6 </audio>

7 </body>

8 </html>

V- HTML code for adding video:

1 <!DOCTYPE html>

2 <html>

3 <body>

4 <video width="320" height="240" controls>

5 <source src="video-file-name.mp4" type="video/mp4">

6 </video>

7 </body>

8 </html>
Lesson Evaluation-
I- Interview questions
a. What is hyperlink?-explain.
b. “Today hyperlink is an important element on web page” -explain.
c. “To create hyperlink ‘href’ attribute is mandatory” -explain.
d. Explain <img> tag.
e. ” ‘src’ attribute is mandatory for <img> tag” -explain.
II- Practical
1- Look the text bellow and answer the following question:

Write the HTML code for showing the above TEXT on the home page of your college’s
website.

2- Look the text bellow and answer the following question:

Write HTML code for showing the above list on the web page.

3- Read the stem and answer the following question:

Write HTML code for showing the above list on the web page.

4- Read the stem and answer the following question:


1. Bangla
2. English
[3.] ICT
Write HTML code for showing the above list on the web page.
Read the TEXT and answer the following question:
List of Subjects:
c.Physics

d.Chemistry

e.Bangla

f.English

Write HTML code for showing the above list on the web page.

Multiple Choice Questions:


1. How many types of HTML List?
a) 2 b) 3 c) 4 d) 5

2. Ordered lists start with which tag?


a) <ul> b) <ol> c) <li> d) <dl>

3. Unordered list starts with which tag?


a) <ul> b) <ol> c) <li> d) <dl>

4. Which one is the attribute of HTML List?


a) type b) src c) href d) face

5. Tags used to create ordered list are-


i. <li> ii. <ol> iii. <ul>
Which one is correct?

a) i & ii b) i & iii c) ii & iii d) i, ii & iii

6. Tags used to create list are-


i. <li> ii. <ol> iii. <ul>

Which one is correct?

a) i & ii b) i & iii c) ii & iii d) i, ii & iii

You might also like