Click and drag to scroll left and right to view all 15 figures.
<!-- figure 4.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>First unordered list item</li>
<li>Second unordered list item</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>First ordered list item</li>
<li>Second ordered list item</li>
</ol>
<h2>Definition List</h2>
<dl>
<dt>The first term</dt>
<dd>First term definition description</dd>
<dt>The second term</dt>
<dd>Second term definition description</dd>
</dl>
</body>
</html>
<!-- figure 4.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Common list attributes</h2>
<h4>List 1 Part 1</h4>
<ol>
<li>First ordered list item</li>
<li>Second ordered list item</li>
<li>Third ordered list item</li>
</ol>
<h4>List 1 Part 2</h4>
<ol start="4">
<li>First ordered list item</li>
<li>Second ordered list item</li>
<li>Third ordered list item</li>
</ol>
<h4>A different list</h4>
<ol start="A">
<li>First ordered list item</li>
<li>Second ordered list item</li>
<li>Third ordered list item</li>
</ol>
</body>
</html>
<!-- figure 4.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Nested Unordered List</h3>
<ul>
<li>First item</li>
<ul>
<li>First item, first sub-item</li>
<li>First item, second sub-item</li>
</ul>
</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<h3>Nested Ordered List</h3>
<ol>
<li>First item
<ol type="a">
<li>First item, first sub-item</li>
<li>First item, second sub-item</li>
</ol>
</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>
<!-- figure 4.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>A basic table</h2>
<table summary="This table provides the inventory of fruits in stock">
<caption>Fruits Inventory</caption>
<tr>
<td></td>
<th>Item</th>
<th>Bought</th>
<th>Sold</th>
<th>Balance</th>
</tr>
<tr>
<td>1.</td><th>Apples</th><td>300</td><td>200</td><td>100</td>
</tr>
<tr><td>2.</td><th>Bananas</th><td>250</td><td>150</td><td>100</td></tr>
<tr><td>3.</td><th>Grapes</th><td>400</td><td>200</td><td>200</td></tr>
</table>
</body>
</html>
<!-- figure 4.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Columns grouping</h3>
<table>
<colgroup>
<col span="2" class="first-two">
<col class="next_col">
</colgroup>
<tr>
<th>ID_No</th>
<th>Name</th>
<th>Age</th>
<th>Height</th>
</tr>
<tr><td>10001</td><td>James Normal</td><td>28</td><td>6ft 1in</td></tr>
<tr><td>10002</td><td>Amanda Holmes</td><td>24</td><td>5ft 6in</td></tr>
</table>
</body>
</html>
<!-- figure 4.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Columns grouping</h3>
<table>
<colgroup span="2" class="first-two"></colgroup>
<colgroup class="next_col"></colgroup>
<tr>
<th>ID_No</th>
<th>Name</th>
<th>Age</th>
<th>Height</th>
</tr>
<tr><td>10001</td><td>James Normal</td><td>28</td><td>6ft 1in</td></tr>
<tr><td>10002</td><td>Amanda Holmes</td><td>24</td><td>5ft 6in</td></tr>
</table>
</body>
</html>
<!-- figure 4.13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Table cells merging</h3>
<table border="1">
<caption><em>Obesity statistics</em></caption>
<tr>
<th rowspan="2"></th>
<th colspan="2">Average</th>
<th rowspan="2">Obese <br>%</th>
</tr>
<tr>
<th>Age</th>
<th>Weight</th>
</tr>
<tr>
<th>Males</th>
<td>45</td>
<td>13st</td>
<td>41%</td>
</tr>
<tr><th>Females</th><td>35</td><td>11st</td><td>33%</td></tr>
</table>
</body>
</html>
<!-- figure 4.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Table</h3>
<table>
<caption><em>Fruits Inventory</em></caption>
<thead>
<tr><th></th><th scope="col">Bought</th><th scope="col">Sold</th><th scope="col">Balance</th></tr>
</thead>
<tbody>
<tr>
<th scope="row">Apples</th>
<td>300</td>
<td>200</td>
<td>100</td>
</tr>
<tr><th scope="row">Banana</th><td>250</td><td>150</td><td>100</td></tr>
<tr><th scope="row">Grapes</th><td>400</td><td>200</td><td>200</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td>950</td><td>550</td><td>400</td></tr>
</tfoot>
</table>
</body>
</html>
<!-- figure 4.16 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Table scope</h1>
<table summary="This table provides the inventory of fruits in stock">
<caption>Fruits Inventory</caption>
<tr>
<td></td>
<th scope="col">Item</th>
<th scope="col">Bought</th>
<th scope="col">Sold</th>
<th scope="col">Balance</th>
</tr>
<tr>
<td>1.</td><th scope="row">Apples</th><td>300</td><td>200</td><td>100</td>
</tr>
<tr>
<td>2.</td><th scope="row">Bananas</th><td>250</td><td>150</td><td>100</td>
</tr>
<tr>
<td>3.</td><th scope="row">Grapes</th><td>400</td><td>200</td><td>200</td>
</tr>
</table>
</body>
</html>
<!-- figure 4.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Accessibility, id and headers</h3>
<table border="1">
<tr>
<th rowspan="2" id="c">Coursework</th>
<th rowspan="2" id="t">Tests</th>
<th rowspan="2" id="e">Exams</th>
</tr>
<tr>
<th id="t1" headers="t">1</th>
<th id="t2" headers="t">2</th>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
</tr>
<tr>
<td headers="c">20%</td>
<td headers="t t1">10%</td>
<td headers="t t2">10%</td>
<td headers="e e1">30%</td>
<td headers="e e2">30%</td>
</tr>
</table>
</body>
</html>
<!-- figure 4.20 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>External links</h3>
<p>Popular links:</p>
<ul>
<li><a href="http://www.movies.com">Movies</a></li>
<li><a href="http://www.fishing.com">Fishing</a></li>
<li><a href="http://www.yogalessons.com">Yoga Lessons</a></li>
<li><a href="http://www.youtube.com">YouTube</a></li>
</ul>
</body>
</html>
<!-- figure 4.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Within-site links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="download.html">Download</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="sotre.html">Store</a></li>
</ul>
</body>
</html>
<!-- figure 4.23 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Types of video style</h2>
<a href="#instruction_video">Instructional video</a><br>
<a href="#situation_video">Situation video</a><br>
<a href="#scripted_video">Scripted enactment</a><br><br>
<h3 id="instruction_video">Instruction video</h3>
<p>The main aim of this style is to share or deliver information.
Examples of usage include in news broadcast and video documentary.</p>
<p><a href="#">Top</a></p>
<h3 id="situation_video">Situation video</h3>
<p>In a situated video style, viewers are given the sense that they are
watching an action from the corner of the room.</p>
<p><a href="#">Top</a></p>
<h3 id="scripted_video">Scripted enactment</h3>
<p>A video of this style is used for re-enacting a situation that is not practical
to capture as it happens in real-life; or a situation that is made up.</p>
<p><a href="#">Top</a></p>
</body>
</html>
<!-- figure 4.25 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Types of video style</h2>
<a href="#instruction_video">Instructional video</a><br >
<a href="#situation_video">Situation video</a><br />
<a href="#scripted_video">Scripted enactment</a><br ><br >
<p><a name="instruction_video"></a></p>
<h3>Instruction video</h3>
<p>The main aim of this style is to share or deliver information.
Examples of usage include in news broadcast and video documentary.</p>
<p><a href="#">Top</a></p>
<p><a name="situation_video"></a></p>
<h3>Situation video</h3>
<p>In a situated video style, viewers are given the sense
that they are watching an action from the corner of the room.</p>
<p><a href="#">Top</a></p>
<p><a name="scripted_video"></a></p>
<h3>Scripted enactment</h3>
<p>A video of this style is used for re-enacting a situation that
is not practical to capture as it happens in real-life; or a
situation that is made up.</p>
<p><a href="#">Top</a></p>
</body>
</html>
<!-- figure 4.26 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Email link</h3>
<p>Email me at: <a href="mailto:joe@example.com">joe@example.com</a></p>
<a href="mailto:joe@example.com">Email us</a>
</body>
</html>