Click and drag to scroll left and right to view all 23 figures.
<!-- figure 3.1 -->
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h1>This a level 1 heading</h1>
<h2>This a level 2 heading</h2>
<h3>This a level 3 heading</h3>
<h4>This a level 4 heading</h4>
<h5>This a level 5 heading</h5>
<h6>This a level 6 heading</h6>
</body>
</html>
<!-- figure 3.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Line breaks, Theme breaks, and Comments</h2>
<!-- This part explains the use of the line-break element in paragraph -->
<p>This content is in a paragraph element, <br>and the line-break element is used to
place this part of it on a separate line.</p>
<!-- This part explains the use of the horizontal rule element -->
<hr>
<!-- This part explains the use of the line-break element in div -->
<div>This content is in a div element, <br>and the line-break element is used to place
this part of it on a separate line.</div>
</body>
</html>
<!-- figure 3.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style>
body { padding:10px; }
</style>
</head>
<body>
<h3>Word-break opportunity</h3>
<p>This is a.very.long.sentence.that.will.not.break.unless.instruction.is.given.to.do.so.</p>
<p>This is a.<wbr>very.<wbr>long.<wbr>sentence.<wbr>that.<wbr>will.<wbr>not.<wbr>break.<wbr>unless.<wbr>instruction.<wbr>is.<wbr>given.<wbr>to.<wbr>do.<wbr>so.</p>
</body>
</html>
<!-- figure 3.12 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Superscript and Subscript</h2>
<p>Superscript and Subscript</p>
<p>The 21<sup>st</sup> century is from 2001 to 2100.</p>
<p>The result of 10<sup>3</sup> is 1000.</p>
<p>The chemical formula for sulfuric acid is H<sub>2</sub>SO<sub>4</sub</p>
</body>
</html>
<!-- figure 3.14 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Importance, Emphasis, and Relevance</h2>
<p>When considering your options, it is <strong>crucial</strong> to think of the consequences.</p>
<p>I <em>believe</em> t in the need to <em>address <em>air pollution</em></em>.</p>
<p>The mark element is used to <mark>highlight</mark> text that is relevant to a context.</p>
</body>
</html>
<!-- figure 3.16 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Boldface and Italic type</h2>
<p>Each <b>keyframe</b> in animation is important.</p>
<p>The Latin name for clove-tree is <i>Caryophyllus aromaticus</i>.</p>
</body>
</html>
<!-- figure 3.18 -->
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Quotations and Citations</h2>
<blockquote cite="www.goodreads.com/work/quotes/3275794-to-kill-a-mockingbird">
<p>They're certainly entitled to think that, and they're entitled to full respect for
their opinions... but before I can live with other folks I've got to live with
myself. The one thing that doesn't abide by majority rule is a person's
conscience.</p>
</blockquote>
<p>As Oscar Wilde said, <q>Be yourself; everyone else is already taken.</q> in animation is important.</p>
<p><cite>Fly Fishing</cite>, by J.R Hartley</p>
</body>
</html>
<!-- figure 3.20 -->
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Definitions and Abbreviations</h2>
<p><dfn>The World Wide Web</dfn>, commonly known as the Web, is an
information system of interlinked hypertext/hypermedia documents
that runs on the Internet.</p>
<p>The 44th president of the <abbr title="United States of America">USA</abbr>
is Barack Obama.</p>
</body>
</html>
<!-- figure 3.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Small text</h3>
<p>Call us on 0001 012343330 <small>(£1.99 for 1 minute)</small></p>
<p>Single license: £299 <small>(VAT not included)</small>
<p>Group license: £539 <small>(VAT not included)</small>
<p>Thank you for downloading our software. We hope you enjoy experimenting with it.
<small>(Disclaimer: Please note that we are not liable for any loss of data due to
the use of the software)</small></p>
<p><small>Copyright © 2007-2015 Wild Tango Ltd.</small></p>
</body>
</html>
<!-- figure 3.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Text modification</h2>
<p>The speaker for the event will be <del>James Bloggs</del>
<ins>Henry Bloggs</ins></p>
<p>The speaker for the event will be <s>James Bloggs</s> Henry Bloggs</p>
</body>
</html>
<!-- figure 3.26 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Display of computer code and output</h2>
<p>This is normal text. <code>This is computer code.</code> This is normal text.</p>
<p>This is normal text. <samp>This is sample output text.</samp> This is normal text.</p>
<p>Type the following command: <kbd>insert</kbd><br />
Then press Enter.</p>
</body>
</html>
<!-- figure 3.28 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Preformatted text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ipsum
sem, nec euismod libero porttitor eu. Nulla ut urna a ligula tincidunt condimentum
quis sit amet diam. Morbi sed magna odio. Nam non ultricies eros. Phasellus sagittis,
ipsum sed laoreet fermentum, lacus velit tincidunt lacus, ut dignissim ipsum tellus
nec mi.
<pre>
In neque quam, pretium vitae neque vitae,
tincidunt dignissim augue. Proin dui leo,
tempus non nisl nec, maximus pulvinar lorem.
Mauris convallis ipsum ac ullamcorper venenatis.
</pre>
Praesent feugiat varius urna, id convallis turpis efficitur vel. Integer et ipsum
metus. Pellentesque id lectus rutrum ante bibendum facilisis ut a neque.Cras
vehicula lobortis justo. Ut congue dapibus odio, in cursus nisl consectetur quis.
Aenean volutpat volutpat vehicula. Phasellus tempor purus sed commodo posuere.
</p>
</body>
</html>
<!-- figure 3.30 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Author's details, Dates, and Times</h3>
<address>
Our address is:<br>
Monar Publishing House<br>
1004 London Avenue<br>
London<br>
W33 9NN<br>
United Kingdom
</address>
<p>The lecture is on: <time datetime="2015-05-15 14:00">5th May 2015 at 2pm</time>.</p>
</body>
</html>
<!-- figure 3.32 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Details and summary</h2>
<details>
<summary>Click for more info</summary>
<p>This information is only revealed because it has been requested. This
information is only revealed because it has been requested. This information
is only revealed because it has been requested. This information is only revealed
because it has been requested. This information is only revealed because it has
been requested.</p>
</details>
</body>
</html>
<!-- figure 3.35 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<dialog open>
<p>Hello to you from the box!</p>
<button>Close</button>
</dialog>
</body>
</html>
<!-- figure 3.37 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<button type="menu" menu="filemenu">Products</button>
<menu id="filemenu" type="popup">
<menuitem label="New...">
<menuitem label="Open...">
<menuitem label="Save">
</menu>
</body>
</html>
<!-- figure 3.38 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Special characters</h3>
<div>
Copyright symbol: © © ©
Yen sign: ¥ ¥
Pound sign: £ &POUND;
Registered sign: ® ®
HTML start tag: <html>
HTML close tag: </html>
</div>
</body>
</html>
<!-- figure 3.40 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Non-breaking spaces</h3>
<p>This line has no non-breaking spaces at the beginning.</p>
<p> This line has 5 non-breaking spaces at the beginning</p>
</body>
</html>
<!-- figure 3.43 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Text directionality</h2>
<p>This text uses the default dir value of ltr.</p>
<p dir="ltr">This text uses specified dir value of ltr.</p>
<p dir="rtl">This text uses specified dir value of rtl.</p>
<p>חיים הוא מסתורין W3C!</p>
<p dir="rtl">חיים הוא מסתורין W3C!</p>
<p>"Life is a W3C mystery!" in Hebrew is חיים הוא מסתורין W3C!</p>
<p><bdo dir="rtl">חיים הוא מסתורין <bdi>W3C</bdi>!</bdo></p>
<p><bdo dir="rtl">The result of wrongly overriding the bidi algorithm.</bdo></p>
</body>
</html>
<!-- figure 3.46 -->
<!DOCTYPE html>
<html>
<head>
<title>I am the title</title>
</head>
<body>
<h3>Ruby text</h3>
<ruby>
<rb>红</rb><rb>龙</rb><rb>是</rb><rb>活</rb><rb>过</rb><rb>来</rb><rb>了</rb><rb>!</rb>
<rt>紅</rt><rt>龍</rt><rt>是</rt><rt>活</rt><rt>過</rt><rt>來</rt><rt>了</rt><rt>!</rt>
</ruby>
</body>
</html>
<!-- figure 3.48 -->
<!DOCTYPE html>
<html>
<head>
<title>I am the title</title>
</head>
<body>
<h3>Ruby text</h3>
<ruby>
<rb>红</rb><rb>龙</rb><rb>是</rb><rb>活</rb><rb>过</rb><rb>来</rb><rb>了</rb><rb>!</rb>
<rp>(</rp><rt>紅</rt><rt>龍</rt><rt>是</rt><rt>活</rt><rt>過</rt><rt>來</rt><rt>了</rt>><rt>!</rt><rp>)</rp>
</ruby>
</body>
</html>
<!-- figure 3.49 -->
<!DOCTYPE html>
<html>
<head>
<title>I am the title</title>
</head>
<body>
<h3>Ruby text</h3>
<ruby>
<rb>红</rb><rb>龙</rb><rb>是</rb><rb>活</rb><rb>过</rb><rb>来</rb><rb>了</rb><rb>!</rb>
<rtc>
<rt>紅</rt><rt>龍</rt><rt>是</rt><rt>活</rt><rt>過</rt><rt>來</rt><rt>了</rt><rt>!</rt>
</rtc>
<rtc>
<rt>Hóng</rt><rt>lóng</rt><rt>shì</rt><rt>huó</rt><rt>guò</rt><rt>lái</rt><rt>le</rt><rt>!</rt>
</rtc>
</ruby>
</body>
</html>