Download presentation
Presentation is loading. Please wait.
1
HTML
2
HTML Lists There are three types of lists: Ordered List Unordered List
Definition List
3
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: The first list item The second list item The third list item
4
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>
5
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
6
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>
7
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
8
Definition List (cont.)
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> 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>
9
Definition List (cont.)
<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: Coffee - black hot drink Milk - white cold drink
10
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
11
HTML Block Elements Block elements normally start (and end) with a new line when displayed in a browser. Examples: <h1>, <p>, <ul>, <table>
12
HTML Inline Elements Inline elements are normally displayed without starting a new line. Examples: <b>, <td>, <a>, <img>
13
HTML Grouping Tags Tag Description <div> Defines a div
<span> Defines a span
14
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
15
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
16
HTML Layout – using <div>
<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 style="background-color:#EEEEEE;height:200px;width:80%;float:right;"> Content goes here <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright 2012 </body> </html>
17
HTML Layout – using <div> (cont.)
Similar presentations
