Fourth Chapter Lesson-8: Ordered List, Unordered List, Description List

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.

 

Ordered List: An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default.

Use of “type” attribute in ordered list: 

type attributeUses
type=”1″The list items will be numbered with numbers (default). For example- 1,2,3,4….
type=”a”The list items will be numbered with lowercase letters. For example- a,b,c,d…..
type=”A”The list items will be numbered with uppercase letters. For example- A,B,C,D….
type=”i”The list items will be numbered with lowercase roman numbers. For example- i,ii,iii,iv….
type=”I”The list items will be numbered with uppercase roman numbers. For example- I,II,III,IV….

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

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:

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

 

Unordered List: An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default.

Use of “type” attribute in unordered list: 

type attributeUses
type=”disc”
  • Sets the list item marker to a bullet disk (default)
type=”circle”
  • Sets the list item marker to a circle
type=”square”
  • Sets the list item marker to a square

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

 

Nested List: When a list inside another list then it is called Nested List.

See the following HTML code for creating following nested list:

 

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:

 

Lesson Evaluation-

Knowledge Based Questions:

Comprehension Based Questions:

Creative Questions:

Read the stem and answer the following question:

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

Read the stem and answer the following question:

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

Read the stem and answer the following question:

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

Read the stem and answer the following question:

  • 1. Bangla
  • 2. English
  • 3. ICT

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

Read the stem and answer the following question:

List of Subjects:

  • c.Physics
  • d.Chemistry
  • e.Bangla
  • f.English

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

Multiple Choice Questions:

 


Written by,

Leave a Reply

Your email address will not be published. Required fields are marked *