Learn Advanced and Basic HTML - Lesson 7

1
Learn HTML BasicsLesson No 07

• Publisher Attitude Academy

2
Chapter Summary Html List Tag
Example of an unordered list, an ordered
Description list in HTML

• Unordered List
• Item
• Item
• Item
• Item

• Ordered List
• First item
• Second item
• Third item
• Fourth item

• Description List
• First item
• Second item
• 2. Third item
• Fourth item

Tag Description
ltulgt Defines an unordered list
ltolgt Defines an ordered list
ltligt Defines a list item
ltdlgt Defines a description list
ltdtgt Defines the term in a description list
ltddgt Defines the description in a description list
3
Unordered Order Lists
(1) An unordered list starts with the ltulgt tag.
Each list item starts with the ltligt tag. The list
items will be marked with bullets (small black
circles)
ltbodygt lth2gtUnordered List with Default
Bulletslt/h2gt ltulgt ltligtCoffeelt/ligt
ltligtTealt/ligt ltligtMilklt/ligt lt/ulgt lt/bodygt
(2) An ordered list starts with the ltolgt tag.
Each list item starts with the ltligt tag. The list
items will be marked with numbers
ltbodygt lth2gtOrdered Listlt/h2gt ltolgt
ltligtCoffeelt/ligt ltligtTealt/ligt
ltligtMilklt/ligt lt/olgt lt/bodygt
4
HTML Description Lists
HTML also supports description lists. A
description list is a list of terms, with a
description of each term. The ltdlgt tag defines
the description list, the ltdtgt tag defines the
term (name), and the ltddgt tag describes each
term 
ltbodygt lth2gtA Description Listlt/h2gt ltdlgt
ltdtgtCoffeelt/dtgt ltddgt- black hot drinklt/ddgt
ltdtgtMilklt/dtgt ltddgt- white cold
drinklt/ddgt lt/dlgt lt/bodygt
5
Nested HTML Lists
List can be nested (lists inside lists)
ltbodygt lth2gtA Nested Listlt/h2gt ltulgt
ltligtCoffeelt/ligt ltligtTea ltulgt ltligtBlack
tealt/ligt ltligtGreen tealt/ligt lt/ulgt
lt/ligt ltligtMilklt/ligt lt/ulgt lt/bodygt
6
Ordered HTML Lists - The Type Attribute
A type attribute can be added to an ordered list,
to define the type of the 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
7
Numbers Example
ltbodygt lth2gt Ordered List with Numbers lt/h2gt ltolgt
ltligtCoffeelt/ligt ltligtTealt/ligt
ltligtMilklt/ligt lt/olgt lt/bodygt
Uppercase Letters Example
ltbodygt lth2gtOrdered List with Letterslt/h2gt ltol
type"A"gt ltligtCoffeelt/ligt ltligtTealt/ligt
ltligtMilklt/ligt lt/olgt lt/bodygt
8
Lowercase Letters Example
ltbodygt lth2gtOrdered List with Lowercase
Letterslt/h2gt ltol type"a"gt ltligtCoffeelt/ligt
ltligtTealt/ligt ltligtMilklt/ligt lt/olgt lt/bodygt
Uppercase Roman Numbers Example
ltbodygt lth2gtOrdered List with Roman
Numberslt/h2gt ltol type"I"gt ltligtCoffeelt/ligt
ltligtTealt/ligt ltligtMilklt/ligt lt/olgt lt/bodygt
9
Lowercase Roman Numbers Example
ltbodygt lth2gtOrdered List with Lowercase Roman
Numberslt/h2gt ltol type"i"gt ltligtCoffeelt/ligt
ltligtTealt/ligt ltligtMilklt/ligt lt/olgt lt/bodygt
10
PRACTICAL IMPLEMENTATION
11

• Visit Us Attitude Academy