February 23, 2018

HTML Study Notes – Part 2

19. <img>

<img src=”L920.jpg” alt=”Lumia 920″ width=”150″ height=”300″>

20. Float <img>

<p>

<img src=”img1.gif” style=”float:left“> A paragraph with an image. The image will float to the left of this text.

</p>

<p>

<img src=”img1.gif” style=”float:right“> A paragraph with an image. The image will float to the right of this text.

</p>

21. <img> maps

<img src=”categories.gif” width=”145″ height=”126″ alt=”categories” usemap=”#categorymap”>

<map name=”categorymap”>
<area shape=”rect” coords=”0,0,10,122″ alt=”News” href=”news.htm”>
<area shape=”circle” coords=”220,74,33″ alt=”reviews” href=”reviews.htm”>
<area shape=”circle” coords=”120,50,8″ alt=”devs” href=”devs.htm”>
</map>

22. <table>

<table border=”1″>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

23. gouping and style table elements

<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>
</head>
<body>
<table border=”1″>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

<p><b>Tip:</b> The thead, tbody, and tfoot elements will not affect the layout of the table by default. However, you can use CSS to style these elements.</p>

</body>
</html>

24. Lists

Unordered list:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Ordered Lists:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Definition Lists:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.

25.