Sei sulla pagina 1di 20

<body></body>

</h2><h2> Movie List


<ul></ul><ol></ol> 1. The Notebook
<li></li><li> </li> 2. The Conjuring
<li> </li><li></li> • Titanic
Movie List • Ghost in the ship
The Notebook
The Conjuring
Titanic
Ghost in the ship
 You can list out your items, subjects or menu
in the form of a list.

 HTML gives you three different types of lists.


a) <ul> - unordered list.
b) <ol> - ordered list.
c) <dl> - definition list.
 When would you use each type of list?
Unordered list?
Ordered List?
Definition List?
 An unordered list is a collection of related items
that have no special order or sequence.

 Also called as “bulleted list”

 This list is created by using <ul> tag.

 Each item in the list is marked with a bullet.

 The bullet itself comes in three forms: squares,


discs, and circles.
<body>
<h2>Movie List</h2>
<ul> Movie List
<li>The Notebook</li> •The Notebook
<li>The Conjuring</li> •The conjuring
•Titanic
<li>Titanic</li>
•Ghost in the ship
<li>Ghost in the ship</li>
</ul>
</body>
 You can use type attribute to specify the type of
bullet you like.

 By default it is a disc

 Following are the possible way:


o <ul type="square">
o <ul type="disc">
o <ul type="circle">

 Use unordered lists for:


1.Name of Sections
2.List of Friends
3.Christmas Gifts List
 the items are numbered instead of bulleted.

 also called as “numbered list”

 Represented with <ol> tag


<body></body>
</h2><h2>Movie List Movie List
<ol></ol>
1. The Notebook
</li><li>The Notebook 2. The Conjuring
</li><li>The Conjuring 3. Titanic
</li><li>Titanic 4. Ghost in the ship
</li><li>Ghost in the
ship
 You can use type attribute to specify the type of
numbers you like.

 By default its is a generic numbers (1,2,3).

 Following are the other possible way:


o <ol type="I"> - Upper-Case Numerals.
o <ol type="i"> - Lower-Case Numerals.
o <ol type="a"> - Lower-Case Letters.
o <ol type="A"> - Upper-Case Letters.

 Use ordered lists for:


1. Table of contents
2. Sets of sequential sections of text
3. Cooking Procedure
 the ideal way to present list of terms, or other
names

 Definition List makes use of following three


tags.
o<dl> - Defines the start of the list
o<dt> - A term
o<dd> -Term definition
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>

HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol
 Use the Definition list for:
Glossaries
Dictionaries
<body>
<h2>Movie List</h2>
<ol>
<li>The Notebook</li> Movie List
<li> The Conjuring</li> 1. The Notebook
</ol> 2. The Conjuring
<ul> • Titanic
<li>Titanic</li> • Ghost in the ship
<li>Ghost in the ship</li>
</ul>
</body>
HTML Source Code
<html></html> Christmas Gifts
<head></head> These are the top three gifts I would
<title> </title> like to receive this Christmas:
<body></body> A new laptop
<h2> </h2> An iPhone
<li></li><li></li> A trip to Disneyland
<li></li><ul></ul>

Output
<html>
<head>
<title> Christmas Gifts </title>
</head>
<body>
<h2>These are the top three gifts I would like to
receive this Christmas:</h2>
<ul>
<li>A new laptop</li>
<li>An iPhone</li>
<li>A trip to Disneyland</li>
</ul>
</body>
</html>
6 Members each group

 Demonstrate the importance of using HTML


Lists in designing WebPages through:

a) Jingle
b) Role playing
Research the following:
 HTML Links
 HTML Images
 HTML Multimedia