2. Block and Inline elements
• Block elements contain an entire large region
of content.
• Examples:
paragraphs, lists, table cells
• Inline elements affect a small amount of
content. Must be nested inside a block
element.
• Examples:
bold text, images, SPAN
4. Ordered List
• HTML provide several tags for displaying list.
• <ol type=“a”>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ol>
• type = “a”, “1”, “A”, “i”, “I”
• start = “25”
5. Unordered List
• HTML provide several tags for displaying list.
• <ul style=“list-style-type: disc;”>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
• Type = “disc”, “square”, “circle”, “decimal”,
“Iower-alpha”, “katakana”, “armenian”,
“hiragana”
6. Nested Unordered List
• Example
• <ul>
<li> Four </li>
<li> Five
<ul>
<li> Four </li>
<li> Five </li>
<li> Six </li>
</ul>
</li>
<li> Six </li>
</ul>
7. Nested Unordered List
• Example
• <ol>
<li> One </li>
<li> Two
<ol>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ol>
</li>
<li> Three </li>
</ol>
8. EXAMPLE
• <ol>
<li> One </li>
<li> Two
<ol start=“5”>
<li> One </li>
<li> Two
<ol type=“i” start=“7”>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ol>
</li>
<li> Three </li>
</ol>
</li>
<li> Three </li>
</ol>
8
9. Images
• Images are major part of websites.
• Example:
<body>
<h1> HTML Image </h1>
<img src=“images/sciss.png” width=“240”
height=“240” alt=“Picture of scissors”
title=“Running with these is not
recommended.” />
</body>
9
10. Link on a Images
<a href=“index.html” target=“_blank”><img
src=“images/image1.jpg”
width=“250”
height=“250”
alt=“alternative text”
/></a>
10
11. 11
<TABLE>
Table
(made up of rows)
<TR>
Row
(made up of data cells)
<TH>
Heading Data Cell
(Can contain paragraphs,
images, lists, forms, tables)
<TD>
Data Cell
(Can contain paragraphs,
images, lists, forms, tables)
12. TABLES
• Tables are very useful feature in HTML.
• Example:
<h1>HTML Tables</h1>
<table>
<caption>My Favorite Albums</caption>
<tr>
<th> Title </th>
<th> Artist </th>
<th> Comment </th>
</tr>
<tr>
<td> Electric Lady Land </td>
<td> Jimi Hendrix </td>
<td> Revolutionary </td>
</tr>
</table>
12
14. TABLE Attributes
• CELLPADING
– Determines the distance between the border of a cell and
the contents of the cell
– Example: <TABLE CELLPADDING = “3”>
• CELLSPACING
– Determines the empty spacing between the borders of
two adjacent cells
– Example: <TABLE CELLSPACING = “1”>
14
15. <TH> & <TD> Attributes
• COLSPAN
– No. of rows the current cell should extend itself downward
– Example: <TD COLSPAN = “2”>
• ROWSPAN
– The number of columns the current cell should extend
itself
– Example: <TD ROWSPAN = “5”>
15