Upload
meljun-cortes-mbampa
View
223
Download
0
Embed Size (px)
Citation preview
7/27/2019 MELJUN CORTES HTML Lists
1/24
HTML Lists
An ordered list:1.The first list item2.The second list item
3.The third list item
An unordered list: List item List item List item
The most common HTML lists areordered and unordered lists.
MELJUN CORTES
7/27/2019 MELJUN CORTES HTML Lists
2/24
HTML List Tags
Tag Description
Defines an ordered list
Defines an unordered list Defines a list item
Defines a definition list
Defines an item in a definition list Defines a description of an item
in a definition list
http://www.w3schools.com/tags/tag_ol.asphttp://www.w3schools.com/tags/tag_ol.asphttp://www.w3schools.com/tags/tag_ul.asphttp://www.w3schools.com/tags/tag_li.asphttp://www.w3schools.com/tags/tag_dl.asphttp://www.w3schools.com/tags/tag_dl.asphttp://www.w3schools.com/tags/tag_dt.asphttp://www.w3schools.com/tags/tag_dt.asphttp://www.w3schools.com/tags/tag_dd.asphttp://www.w3schools.com/tags/tag_dd.asphttp://www.w3schools.com/tags/tag_dd.asphttp://www.w3schools.com/tags/tag_dt.asphttp://www.w3schools.com/tags/tag_dl.asphttp://www.w3schools.com/tags/tag_li.asphttp://www.w3schools.com/tags/tag_ul.asphttp://www.w3schools.com/tags/tag_ol.asp7/27/2019 MELJUN CORTES HTML Lists
3/24
HTML Unordered Lists
An unordered list starts with
the tag. Each list item
starts with the tag.
The list items are marked with
bullets (typically small blackcircles).
7/27/2019 MELJUN CORTES HTML Lists
4/24
Example:
*Sample Codes
Coffee
Milk
7/27/2019 MELJUN CORTES HTML Lists
5/24
*Sample output:
Coffee Milk
7/27/2019 MELJUN CORTES HTML Lists
6/24
HTML Ordered Lists
An ordered list starts with the
tag. Each list item starts
with the tag.
The list items are marked with
numbers.
7/27/2019 MELJUN CORTES HTML Lists
7/24
Example:
*Sample Codes
Coffee
Milk
7/27/2019 MELJUN CORTES HTML Lists
8/24
*Sample output:
1.Coffee2.Milk
7/27/2019 MELJUN CORTES HTML Lists
9/24
HTML Definition Lists
A definition list is a list of items, witha description of each item.
The tag defines a definition list. The tag is used in conjunction
with (defines the item in the list)
and (describes the item in thelist):
7/27/2019 MELJUN CORTES HTML Lists
10/24
Example:
*Sample Codes
Coffee
- black hot drink
Milk- white cold drink
7/27/2019 MELJUN CORTES HTML Lists
11/24
*Sample output:
Coffee
- black hot drink
Milk
- white cold drink
7/27/2019 MELJUN CORTES HTML Lists
12/24
Tip:
Inside a list item you
can put text, linebreaks, images, links,
other lists, etc.
7/27/2019 MELJUN CORTES HTML Lists
13/24
Different types of ordered lists
Numbered list:
Apples
BananasLemons
Oranges
Letterslist:
Apples
Bananas
Lemons
Oranges
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_orderedhttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered7/27/2019 MELJUN CORTES HTML Lists
14/24
7/27/2019 MELJUN CORTES HTML Lists
15/24
Output:
Numbered list:
1. Apples
2. Bananas
3. Lemons
4. Oranges
Letters list:
A. Apples
B. Bananas
C. Lemons
D. Oranges
Lowercase letters list:
a. Apples
b. Bananas
c. Lemons
d. Oranges
Roman numbers list:
I. Apple
II. Bananas
III. Lemons
IV. Oranges
Lowercase Roman numbers list:
i. Apples
ii. Bananas
iii. Lemons
iv. Oranges
7/27/2019 MELJUN CORTES HTML Lists
16/24
Different types of unordered lists
Disc bullets list:
Apples
Bananas
Lemons
Oranges
Circle bullets list:
Apples
Bananas
Lemons
Oranges
Square bullets list:
Apples
Bananas
LemonsOranges
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unorderedhttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered7/27/2019 MELJUN CORTES HTML Lists
17/24
Disc bullets list:
Apples
Bananas
Lemons Oranges
Circle bullets list:
o Apples
o Bananaso Lemons
o Oranges
Square bullets list:
Apples
Bananas
Lemons
Oranges
Output:
7/27/2019 MELJUN CORTES HTML Lists
18/24
Nested list
A nested List:
Programming Language
Turbo
Turbo Basic
Turbo C
C++
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists2http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists27/27/2019 MELJUN CORTES HTML Lists
19/24
Output:
A nested List:
Programming Language
TurbooTurbo Basic
oTurbo C
C++
7/27/2019 MELJUN CORTES HTML Lists
20/24
A nested List:
Coffee
Tea
Black teaGreen tea
China
Africa
Milk
Another type ofNested list
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists2http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists27/27/2019 MELJUN CORTES HTML Lists
21/24
Output:
A nested List: Coffee
Tea
oBlack tea
oGreen tea
China
Africa
Milk
7/27/2019 MELJUN CORTES HTML Lists
22/24
Definition list
A Definition List:
Programming Language
C++
Basic Programming Language
Turbo Basic and C
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists3http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists37/27/2019 MELJUN CORTES HTML Lists
23/24
Output:
A Definition List:
Programming Language
C++
Basic Programming Language
Turbo Basic and C
7/27/2019 MELJUN CORTES HTML Lists
24/24