Scribd
Upload
168 views

Lec 17 (HTML List)

HTML lists are used to specify lists of information and come in three types: ordered lists which use numbers, unordered lists which use bullets, and description lists which define terms. Ordered lists are created with <ol> tags and list items with <li> tags. The type and start attributes customize the numbering. Unordered lists use <ul> tags. The list-style-type CSS property sets bullet styles. Description lists group terms and definitions with <dl>, <dt>, and <dd> tags. Lists can be nested to create sublists.

Uploaded by

Informational Videos
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
168 views

Lec 17 (HTML List)

HTML lists are used to specify lists of information and come in three types: ordered lists which use numbers, unordered lists which use bullets, and description lists which define terms. Ordered lists are created with <ol> tags and list items with <li> tags. The type and start attributes customize the numbering. Unordered lists use <ul> tags. The list-style-type CSS property sets bullet styles. Description lists group terms and definitions with <dl>, <dt>, and <dd> tags. Lists can be nested to create sublists.

Uploaded by

Informational Videos
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

HTML List

HTML Lists
▸ HTML Lists are used to specify lists of information. All lists may contain
one or more list elements. There are three different types of HTML lists:

▸ Ordered List or Numbered List (ol)

▸ Unordered List or Bulleted List (ul)

▸ Description List or Definition List (dl)

2
Ordered List
▸ In the ordered HTML lists, all the list items are marked with numbers by
default.

▸ It is also known as numbered list.

▸ The ordered list starts with <ol> tag and the list items start with <li> tag.

3
Ordered List Example

<html>

<head><title> Working With HTML List </title></head>

<body>

<!----- Ordered List --->


<ol>
<li>GM</li>
<li>Ahemd</li>
<li>Nazir</li>
<li>Aamir</li>
</ol>
</body>
</html>
4
Ordered List Type Attribute
▸ The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

5
Ordered List Type Attribute
<html>

<head><title> Working With HTML List </title></head>

<body>
<!----- Ordered List --->
<ol type="A">
<li>GM</li>
<li>Ahemd</li>
<li>Nazir</li>
<li>Aamir</li>
</ol>
</body>
</html>

6
Ordered List start attribute
▸ The start attribute is used with ol tag to specify from where to start the list
items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

7
Ordered List Type Attribute

<!----- Ordered List start attribute --->

<ol type="1" start="5">

<li>GM</li>
<li>Ahemd</li>
<li>Nazir</li>
<li>Aamir</li>
</ol>

8
Unordered List
▸ In HTML Unordered list, all the list items are marked with bullets.

▸ It is also known as bulleted list also.

▸ The Unordered list starts with <ul> tag and list items start with the <li> tag

9
Unordered List Example
<html>

<head><title> Working With HTML List </title></head>

<body>

<!----- UnOrdered List --->


<ul>
<li>Karachi</li>
<li>Hyderabad</li>
<li>Sukkur</li>
<li>Larkana</li> </ul>

</body>
</html>

10
UnOrdered List Type Attribute
▸ The CSS list-style-type property is used to define the style of the list item
marker:

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

11
UnOrdered List Type Attribute
▸ The CSS list-style-type property is used to define the style of the list item
marker:
<html>

<head><title> Working With HTML List </title></head>

<body>
<!----- UnOrdered List --->
<ul style="list-style-type:circle;">
<li>Karachi</li>
<li>Hyderabad</li>
<li>Sukkur</li>
<li>Larkana</li>
</ul>
</body></html>
12
Description Lists
▸ HTML Description list is also a list style which is supported by HTML and
XHTML.

▸ It is also known as definition list where entries are listed like a dictionary or
encyclopedia.

▸ The definition list is very appropriate when you want to present glossary, list
of terms or other name-value list.

13
Description Lists
▸ The HTML definition list contains following three tags:

▸ <dl> tag defines the start of the list.

▸ <dt> tag defines a term.

▸ <dd> tag defines the term definition (description).

14
Description Lists Example
<html>

<head><title> Working With HTML List </title></head>

<body>
<!----- Description List --->

<dl>
<dt>Karachi</dt>
<dd>Karachi is the capital city of Sindh</dd>
<dt>Lahore</dt>
<dd>Lahore is the capital city of Punjab</dd>
</dl>

</body></html>

15
Nested List
▸ A list within another list is termed as nested list.

▸ If you want a bullet list inside a numbered list then such type of list will called
as nested list.

16
Nested List Example
<!----- Nested List --->
<ol>
<li>Sindh
<ul>
<li>Karachi</li>
</ul>
</li>

<li>Punjab
<ul>
<li>Lahore</li>
</ul>
</li>
</ol>
</body></html>

17
THANKS!
Any questions?

18

You might also like