February 23, 2018

HTML Study Notes – Part 2

19. <img>

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

20. Float <img>


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



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


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”>

22. <table>

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

23. gouping and style table elements

<!DOCTYPE html>
<style type=”text/css”>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
<table border=”1″>

<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>


24. Lists

Unordered list:
Ordered Lists:
Definition Lists:
<dd>- black hot drink</dd>
<dd>- white cold drink</dd>

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