Chapter 4

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>