there are three types of lists: ordered list unordered list definition list
TRANSCRIPT
HTML
HTML Lists
There are three types of lists: Ordered List Unordered List Definition List
Ordered List
An ordered list starts with the <ol> tag
Each list item starts with the <li> tag
The list items are marked with numbers.
Sample Output:1.The first list item2.The second list item3.The third list item
Ordered Lists (cont.)
This is the HTML code of the above output:
<ol><li>The first list
item</li><li>The second list
item</li><li>The third list
item</li></ol>
Unordered List
An unordered list starts with the <ul> tag
Each list item starts with the <li> tag
The list items are marked with numbers.
Sample Output:• The first list item• The second list item• The third list item
Unordered List (cont.)
This is the HTML code of the above output:
<ul><li>The first list
item</li><li>The second list
item</li><li>The third list
item</li></ul>
Definition List
A definition list is a list of items, with a description of each item.
<dl> tag defines a definition list. <dt> tag defines the item in the list <dd> tag describes the item in the
list
Definition List (cont.)
Sample HTML code of definition list:
<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>
<dl><dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt><dd>- white cold
drink</dd></dl>
Definition List (cont.)
Output of the above code:
<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>
Coffee- black hot drink
Milk- white cold
drink
HTML List Tags
Tag Description<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list
HTML Block Elements
Block elements normally start (and end) with a new line when displayed in a browser.
Examples: <h1>, <p>, <ul>, <table>
HTML Inline Elements
Inline elements are normally displayed without starting a new line.
Examples: <b>, <td>, <a>, <img>
HTML Grouping Tags
Tag Description
<div> Defines a div
<span> Defines a span
HTML <div> Element
a block element that can be used as a container for grouping other HTML elements
can be used to set style attributes to large blocks of content
Also used for document layout
HTML <span> Element
an inline element that can be used as a container for text
can be used to set style attributes to parts of the text
HTML Layout – using <div>
<html><body style="margin-top:0;">
<div style="100%"><div style="background-color:#FFA500;"><h1 style="margin-bottom:0; margin-left:10">Main Title of Web Page</h1></div><div style="background-color:#FFD700;height:200px;width:20%;float:left;"><b>Menu</b><br />HTML<br />CSS<br />JavaScript</div><div style="background-color:#EEEEEE;height:200px;width:80%;float:right;">Content goes here</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">Copyright 2012</div></div>
</body></html>
HTML Layout – using <div> (cont.)