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: The first list item The second list item 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.) <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>
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
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> <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>
HTML Layout – using <div> (cont.)