Chapter 2
Click and drag to scroll left and right to view all 7 figures.
<!-- figure 2.4 -->
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
</body>
</html>
<!-- figure 2.6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<base href="http://www.example.com/images/"> target="_blank">
</head>
<body>
<img src="settee.jpg">
</body>
</html>
<!-- figure 2.7 -->
<!DOCTYPE html>
<html lang="en-GB">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<!-- figure 2.9 -->
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="keywords" content="HTML, CSS, Web design">
<meta name="description" content="Interaction design with Web languages">
<meta name="author" content="Joe Bloggs">
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">
<meta http-equiv="expires" content="Fri, 21 Aug 2015 23:59:59 GMT">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="refresh" content="15">
<meta http-equiv="refresh" content="3;url=http://www.newsite.com">
</head>
<body>
</body>
</html>
<!-- figure 2.13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<header>
I am in the header element
<nav>
I am in the nav element
</nav>
</header>
<main>
I am in the main element
<article>
I am in the article element
<section>
I am in the section element
</section>
<figure>
I am in the figure element
<figcaption>
I am in the figcaption element
</figcaption>
</figure>
</article>
</main>
<aside>
I am in the aside element
</aside>
<footer>
I am in the footer element
</footer>
</body>
</html>
<!-- figure 2.16 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Block-level and inline elements</h3>
This content is not marked up.
<div>This content is in a block element.</div>
This content is not marked up.
<span>This content is in </span><span>an inline element.</span>
</body>
</html>
<!-- figure 2.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h1>Block-level and inline grouping</h1>
<div style = "color:blue">
<p>This content is in a div element.</p>
<p>This content is in the same div element.</p>
</div>
<div style = "color:blue">This content is in a span element,</span>
<span>and this content is in the next span element.</span>
<div style = "color:blue">
<span style = "color:red">This content is in a span element in a div,</span>
<span>and this content is in the next span element in the same div.</span>
</div>
</body>
</html>
Chapter 3
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>
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:[email protected]">[email protected]</a></p>
<a href="mailto:[email protected]">Email us</a>
</body>
</html>
Chapter 5
Click and drag to scroll left and right to view all 30 figures.
<!-- figure 5.2 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Forms</h3>
<form method="post" action= "http://www.test.com/register.php">
<!-- Form control elements go here -->
</form>
</body>
</html>
<!-- figure 5.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form text input</h3>
<form>
<p>Please complete the form below:</p>
<p>Username: <input type="text" name="uname" required></p>
<p>Password: <input type="password" name="password" required></p>
<p>Email: <input type="email" name="email" placeholder="e.g.,
[email protected]" required></p>
<p>Phone: <input type="tel" name="phone"></p>
<p>Personal URL: <input type="url" name="url" size="25" maxlength="35"></p>
<p>Search: <input type="search" name="term" value="bolts"></p>
<p><input type="hidden" name="subject" value="registration"></p>
</form>
</body>
</html>
<!-- figure 5.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Input pattern</h3>
<form>
Enter product code (XXX999999):
<input type="text" name="product" pattern="[A-Za-z]{3}[0-9]{6}"
title="Three upper- or lower-case letters followed by six digits.">
</form>
</body>
</html>
<!-- figure 5.6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form number input</h3>
<form>
<p>Please enter quantity required:</p>
<input type="number" name="quantity" value="0" min="0" max="100" step="3">
</body>
</html>
<!-- figure 5.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form number input</h3>
<form>
<p>Please enter quantity required:</p>
<input type="range" name="quantity" value="0" min="0" max="100">
</body>
</html>
<!-- figure 5.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form range input with values</h3>
<form>
<p>Please use slide to enter quantity:</p>
<output name="quantity">0</output>
<input type="range" name="slideInput" min="0" max="100" value="0"
oninput="quantity.value=slideInput.value">
</body>
</html>
<!-- figure 5.12 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form range and number inputs</h3>
<form>
<p>Please enter quantity in field or with slide:</p>
<input type="number" name="numberInput" min="0" max="100" value="0"
oninput="slideNumber.value=numberInput.value">
<input type="number" name="slideNumber" min="0" max="100" value="0"
oninput="numberInput.value=slideNumber.value">
</form>
</body>
</html>
<!-- figure 5.14 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form time input</h3>
<form>
<p>Please enter time: <input type="time" name="time"></p>
</form>
</body>
</html>
<!-- figure 5.16 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form date input</h3>
<form>
<p>Please enter date: <input type="date" name="date"></p>
</form>
</body>
</html>
<!-- figure 5.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form date input</h3>
<form>
<p>Please enter date and time:</p>
<p>Date and time: <input type="datetime-local" name="localdatetime"></p>
</form>
</body>
</html>
<!-- figure 5.20 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form month input</h3>
<form>
<p>Please enter month: <input type="month" name="month"></p>
</form>
</body>
</html>
<!-- figure 5.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form week input</h3>
<form>
<p>Please enter week and year: <input type="week" name="week"></p>
</form>
</body>
</html>
<!-- figure 5.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Radio buttons</h3>
<form>
Please choose one:<br>
<input type="radio" name="salutation" value="Mr" checked>Mr
<input type="radio" name="salutation" value="Mrs">Mrs
<input type="radio" name="salutation" value="Miss">Miss
<input type="radio" name="salutation" value="Ms">Ms
<input type="radio" name="salutation" value="Dr">Dr
</form>
</body>
</html>
<!-- figure 5.26 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Checkboxes</h3>
<form>
<input type="checkbox" name="commute" value="tube" checked> Tube
<input type="checkbox" name="commute" value="train" checked> train
<input type="checkbox" name="commute" value="car"> car
<input type="checkbox" name="commute" value="Motorcycle"> Motorcycle
<input type="checkbox" name="commute" value="Bicycle"> Bicycle
<input type="checkbox" name="commute" value="Walking" checked> Walking
</form>
</body>
</html>
<!-- figure 5.28 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form submit and reset buttons</h3>
<form>
<input type="submit" value="submit">
<input type="reset" value="cancel">
</form>
</body>
</html>
<!-- figure 5.30 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form image button</h3>
<form>
<p>Please enter login details:</p>
<p>Username: <input type="text" name="uname" required></p>
<p>Password: <input type="password" name="password" required></p>
<input type="image" src="submit.png" width="148 height="32" alt="submit button">
</form>
</body>
</html>
<!-- figure 5.32 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form action button</h3>
<form>
<input type="button" value="Show Message" onclick="alert('This message is
displayed using a JavaScriptfunction.')">
</form>
</body>
</html>
<!-- figure 5.34 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form file upload control</h3>
<form>
<p>Select file:</p>
<input type="file" name="imagefile" accept="image/jpeg, image/png multiple">
</form>
</body>
</html>
<!-- figure 5.36 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form color picker</h3>
<form>
Please secelt color: <input type="color" name="user_color">
</form>
</body>
</html>
<!-- figure 5.38 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form button element</h3>
<form>
<button type="submit"><img src="green_button.png" width="12"
height="12">Start</button>
<button type="submit"><img src="red_button.png" width="12"
height="12">Stop</button>
</form>
</body>
</html>
<!-- figure 5.40 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form textarea</h3>
<form>
<p>Please give us your comments below:</p>
<textarea rows="5" cols="60" name="comments"
dirname="comment.dir"></textarea>
</form>
</body>
</html>
<!-- figure 5.42 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form select control</h3>
<form>
Please select your favorite movie:
<select name="fav_movie">
<optgroup label="Sci-Fi">
<option value="startrek">Star Trek</option>
<option value="starwars" selected>Star Wars</option>
</optgroup>
<optgroup label="Animation">
<option value="shrek">Shrek</option>
<option value="toystory">Toy Story</option>
</optgroup>
</select>
</form>
</body>
</html>
<!-- figure 5.45 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form select control</h3>
<form>
Enter your favorite browser:
<input type="text" name="favBrowser" list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Safari">
<option value="Opera">
</datalist>
</form>
</body>
</html>
<!-- figure 5.47 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form progress element</h3>
<form>
<p>Progress: <progress value="30" max="100"></p>
</form>
</body>
</html>
<!-- figure 5.49 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form meter element</h3>
<form>
Voter turnout: <meter value=0.45></meter><span> 45%</span>
</form>
</body>
</html>
<!-- figure 5.51 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form output element</h3>
<form oninput="sum.value = a.valueAsNumber + b.valueAsNumber">
<p>Please enter date:</p>
<input id="a" name="a" type="range" step="any"> +
<input id="b" name="b" type="number" step="any"> =
<output name="sum" for="a b"></output>
</form>
</body>
</html>
<!-- figure 5.53 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form label element</h3>
<form>
Please enter details:
<p><label>Username: </label><input type="text" name="uname"></p>
<p><label>Password: <input type="password" name="password"></label></p>
<p><label for="email">Email: </label><input type="email" name="email"
id="email"></p>
<p><label for="email">Phone: <input type="tel" name="phone" id="phone">
</label></p>
</body>
</html>
<!-- figure 5.55 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form aria-label</h3>
<form>
<input type="text" name="search" aria-label="Search">
<button type="submit"></button>
</form>
</body>
</html>
<!-- figure 5.57 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form aria-label</h3>
<form>
<p>Please complete the form below:</p>
<fieldset>
<legend>Personal Info</legend>
<p><label for="uname">Username: </label><input type="text"
name="uname" id="uname"></p>
<p><label for="password">Password: </label><input type="password"
name="password" id="password"></p>
<p><label for="email">Email: </label><input type="email" name="email"
id="email"></p>
<p><label for="phone">Phone: </label><input type="tel" name="phone"
id="phone"></p>
</fieldset>
</form>
</body>
</html>
<!-- figure 5.59 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Forms</h3>
<form>
<p>Please complete the form below:</p>
<fieldset>
<legend>Personal Info</legend>
<label for="fname">First name:</label><input type="text" name="fname"><br>
<label for="lname">Last name:</label><input type="text" name="lname"><br>
<label for="email">Email:</label<input type="email" size="25" maxlength="35"
name="email" id="email" placeholder="e.g., [email protected]"><br>
<label for="url">Your personal URL (if any): </label><input type="url"
name="url" id="url"><br>
<input type="radio" name="sex" value="male" id="sex1"><label
for="sex1">Male</label>
<input type="radio" name="sex" value="female" id="sex2"><label
for="sex2">Female</label><br>
</fieldset>
<fieldset>
<legend>Other Info</legend>
Which of these do you own?<br>
<input type="checkbox" name="car" id="own1"><label for="own1"> Car</label>
<input type="checkbox" name="bike" id="own2"><label for="own2"> Bike</label>
<br>
<label for="fav_movie">Favorite Movie:</label>
<select name="keywords" content="stuff, some more too">
<optgroup label="Sci-Fi">
<option value="startrek">Star Trek</option>
<option value="starwars">Star Wars</option>
</optgroup>
<optgroup label="Animation">
<option value="Shrek">Shrek</option>
<option value="toystory">Toy Story</option>
</optgroup>
</select>
<br>
<label for="infor">Extra info:</label><br>
<textarea rows="4" cols="35" name="info" id="info"></textarea><br>
</fieldset>
<input type="submit" value="Submit">
<input type="reset" value="Cancel"><br>
</form>
</body>
</html>
Chapter 6
Click and drag to scroll left and right to view all 13 figures.
<!-- figure 6.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Image element</h3>
<img src="images/yacht.jpg" alt="A yacht race" title="A flotilla of yachts at
the start of a racing regatta." longdesc="yacht_race_desc.html" width="500"
height="336">
</body>
</html>
<!-- figure 6.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>Image link</h2>
<a href="http://www.w3c.org"><img src="images/yacht.jpg" width="500" height="336"
alt="A yacht race"
title="A flotilla of yachts at the start of a racing regatta."></a>
<br><br>
<a href="images/yacht.jpg"></a>
</body>
</html>
<!-- figure 6.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<figure>
<h2>Containing images</h2>
<img src="images/car_tunnel.jpg" width="500" height="336"
alt="A car in a tunnel" title="A car driving through a traffic tunnel.">
<figcaption>
A car driving through a traffic tunnel.
</figcaption>
</figure>
</body>
</html>
<!-- figure 6.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<img src="images/yacht-400.jpg"
srcset="images/yacht-600.jpg 1.5x,
images/yacht-800.jpg 2x"
alt="A yacht race"
title="A flotilla of yachts at the start of a racing regatta."
longdesc="yacht_race_desc.html"
width="400" height="268" >
</body>
</html>
<!-- figure 6.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<img sizes="100vw"
srcset="images/yacht-200.jpg 200w,
images/yacht-400.jpg 400w,
images/yacht-800.jpg 800w,
images/yacht-1600.jpg 1600w"
src="images/yacht-400.jpg"
alt="A yacht race">
</body>
</html>
<!-- figure 6.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<img sizes="(max-width: 480px) 100vw, (max-width: 800px) 70vw, 600px"
srcset="images/yacht-200.jpg 200w,
images/yacht-400.jpg 400w,
images/yacht-800.jpg 800w,
images/yacht-1600.jpg 1600w"
src="images/yacht-400.jpg"
alt="A yacht race">
</body>
</html>
<!-- figure 6.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<picture>
<source media="(min-width: 720px)" srcset="images/yacht-fullshot.jpg">
<source media="(min-width: 512px)" srcset=" images/yacht-midshot.jpg">
<img src="images/yacht-closeshot.jpg" alt="A yacht race">
</picture>
</body>
</html>
<!-- figure 6.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<picture>
<source media="(min-width: 1024px)"
srcset="images/yacht-fullshot.jpg,
images/yacht-fullshot-2x.jpg 2x,
images/yacht-fullshot-3x.jpg 3x">
<img src="images/yacht-closeshot.jpg" alt="A yacht race"
srcset="images/yacht-closeshot-2x.jpg 2x,
images/yacht-closeshot-3x.jpg 3x">
</picture>
</body>
</html>
<!-- figure 6.12 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<figure>
<picture>
<source srcset="images/yacht.webp" type="image/webp">
<source srcset="images/yacht.jxr" type="image/vnd.ms-photo">
<source srcset="images/yacht.jp2" type="image/jp2">
<img src="images/yacht.jpg" width="500" height="336" alt="A yacht race">
</picture>
<figcaption>
A yacht race in progress.
</figcaption>
</figure>
</body>
</html>
<!-- figure 6.13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Canvas element</h3>
<canvas id="oneCanvas" width="150" height="150">
Your user agent does not support the HTML5 canvas element.
</canvas>
</body>
</html>
<!-- figure 6.14 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h2>SVG element</h2>
<svg width="400" height="400">
<rect x="30" y="10" width="250" height="250" rx="20"
style="fill:#2111C0; stroke:#000000; stroke-width:2px;" />
<rect x="30" y="10" width="250" height="250" rx="20"
style="fill:#E10000; stroke:#000000; stroke-width:2px;" />
</svg>
</body>
</html>
<!-- figure 6.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Image map</h3>
<map name="picture">
<area shape="poly" href="http://www.example.com/london.html"
coords="422, 562, 433, 565, 442, 559, 449, 554, 465, 555, 468,
567, 484, 564, 493, 573, 480, 580, 496, 584, 483, 590, 475, 591,
471, 598, 468, 608, 461, 596, 454, 606, 443, 592, 436, 601, 437,
587, 426, 582, 423, 569" alt="London">
<area shape="poly" href="http://www.example.com/northeast.html"
coords="304, 11, 282, 34, 289, 49, 295, 59, 277, 74, 270, 72,
256, 96, 262, 111, 269, 111, 271, 120, 262, 126, 266, 147, 277,
144, 284, 152, 280, 164, 284, 169, 281, 175, 293, 187, 293, 197,
302, 191, 312, 196, 331, 183, 343, 191, 359, 195, 368, 187, 396,
192, 401, 182, 375, 174, 369, 162, 356, 138, 357, 125, 344, 99,
346, 92, 338, 71, 338, 51, 329, 35, 322, 39" alt="North East">
</map>
<img src="images/england_regions.png" width="640" height="790"
usemap="#picture" alt="Regions of England">
</body>
</html>
<!-- figure 6.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>iFrame Element</h3>
<iframe width="400" height="300" src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d158858.182370726!2d0.10159865000000001
!3d51.52864165!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2
!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon!5e0!3m2!1sen
!2suk!4v1437373289145">
</body>
</html>
Chapter 7
Click and drag to scroll left and right to view all 12 figures.
<!-- figure 7.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Video with subtitles</h3>
<video src="jumper.mp4">
<track kind="subtitles" srclang="en" label="English subtitles" src="jumper_en.vtt"
default>
<track kind="subtitles" srclang="de" label="Deutsch Untertitel" src="jumper_de.vtt"
default>
</video>
</body>
</html>
<!-- figure 7.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Embedded audio</h3>
<audio src="audio/sound.mp3" controls>
Your Web browser does not support HTML audio element.
</audio>
</body>
</html>
<!-- figure 7.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Embedded audio</h3>
<audio controls>
<source src="audio/sound.aac" type='audio/mp4; codecs="mp4a.40.2"'>
<source src="audio/sound.oga" type="audio/ogg">
<source src="audio/sound.mp3" type="audio/mpeg">
Your Web browser does not support HTML audio element.
</audio>
</body>
</html>
<!-- figure 7.6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Audio with embed element</h3>
<embed src="audio/sound.mp3" type="audio/mpeg" width="250" height="30">
</body>
</html>
<!-- figure 7.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Audio with object element</h3>
<object data="audio/sound.mp3" type="audio/mpeg" width="220" height="50"></object>
</body>
</html>
<!-- figure 7.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Audio with object element</h3>
<object data="audio/sound.mp3" type="audio/mpeg" width="250" height="50">
<param name="autoplay" value="false">
</object>
</body>
</html>
<!-- figure 7.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Linked video</h3>
<a href="video/video.mp4">Watch the video with a helper application</a>
</body>
</html>
<!-- figure 7.13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Embedded video</h3>
<video src="video/video.mp4" width="320" height="240" poster="images/garden.jpg"
controls>
Your Web browser does not support HTML video element.
</video>
</body>
</html>
<!-- figure 7.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Embedded video</h3>
<video width="320" height="240" poster="images/garden.jpg" controls>
<source src="video/video.mp4" type='video/ogv; codecs="theora, vorbis"'>
<source src="video/video.ogv" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/video.webm" type='video/webm; codecs="vp8, vorbis"'>
Your Web browser does not support HTML video element.
</video>
</body>
</html>
<!-- figure 7.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Video with subtitles</h3>
<video src="jumper.mp4">
<track kind="subtitles" srclang="en" label="English subtitles" src="jumper_en.vtt"
default>
<track kind="subtitles" srclang="de" label="Deutsch Untertitel"
src="jumper_de.vtt">
</video>
</body>
</html>
<!-- figure 7.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>embed and object</h3>
<object data="video/video.mp4" type="video/mp4" width="320" height="240">
<param name="autoplay" value="false">
<!-- The embed element is used as fallback -->
<embed src="video/video.mp4" type="video/mp4" width="320" height="240">
</object>
</body>
</html>
<!-- figure 7.21 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<object data="video/walk_motion.mp4" type="video/mp4" width="320" height="240">
<param name="loop" value="true">
</object>
</body>
</html>
Chapter 8
Click and drag to scroll left and right to view all 12 figures.
<!-- figure 8.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { color:red; }
p { color:red; }
</style>
</head>
<body>
<h3>Last rule principle</h3>
<p>This text is styled by the last CSS rule.</p>
</body>
</html>
<!-- figure 8.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { color:red; }
p.larger { color:green; }
div#largest p { color:blue; }
</style>
</head>
<body>
<h3>Specificity principle</h3>
<div id="larger">
<p class="largest">Example</p>
</div>
</body>
</html>
<!-- figure 8.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { color:red !important }
p.larger { color:green; }
div#largest p { color:blue; }
</style>
</head>
<body>
<h3>!important exception</h3>
<div id="larger">
<p class="largest">Example</p>
</div>
</body>
</html>
<!-- figure 8.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
* { color:red }
p { color:blue }
div p { color:orange }
#green { color:green }
</style>
</head>
<body>
<h3>Specificity levels</h3>
<div>
<p id="green" class="yellow" style="color: purple">CSS Specificity Hierarchy</p>
</div>
</body>
</html>
<!-- figure 8.12 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { color:blue; }
p { border-style:dotted; }
</style>
</head>
<body>
<h3>Property inheritance</h3>
<p>The color property is an inherited property,
so <em>the content of the em element </em> is blue
just like that of the parent p element...</p>
</body>
</html>
<!-- figure 8.14 & figure 8.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
font-family: Arial;
color: brown;
padding: 20px;
margin: 20px;
}
div.part1 {
border: 2px solid orange;
background-color: white;
}
div.part2 {
border: 2px solid orange;
background-color: white;
padding: inherit;
margin: inherit;
}
</style>
</head>
<body>
<h2>CSS Inheritance</h2>
<div class="part1">
<p>This element has been forced to inherit the padding and margin properties
of the body element</p>
</div>
<div class="part2">
<p>This element has not inherited the padding and margin properties of the
body element</p>
</div>
</body>
</html>
<!-- figure 8.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Inline style attribute</h3>
<p style="color: red">This paragraph element is styled with inline CSS, using the
style attribute.</p>
<p>This paragraph element is not styled.</p>
</body>
</html>
<!-- figure 8.19 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.first_para { color: red;
}
</head>
<body>
<h3>Inline style element</h3>
<p class="first_para">This paragraph element is styled with inline CSS, using the
style attribute.</p>
<p>This paragraph element is not styled.</p>
</body>
</html>
<!-- figure 8.20 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p{ color: blue;}
</style>
</head>
<body>
<h3>The scoped attribute</h3>
<div>
<p>This text is blue because it is styled by the CSS rule in the head element.</p>
<div>
<style scoped>
p{ color: red;}
</style>
<p>This text is red because it is styled by the CSS rule in the direct parent
div element of this paragraph element.</p>
</div>
<div>
<p>This text is blue because it is also styled by the CSS rule in the head
element.</p>
</div>
</div>
</body>
</html>
<!-- figure 8.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<link href="figure 8.23.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3>External CSS</h3>
<p>Using external CSS is the <em>recommended practice</em> for adding styles to a
website.</p>
</body>
</html>
/* figure 8.23 */
body { font-family: Arial; background-color: lightgrey; }
h3 { color: blue; }
em { color: red; }
<!-- figure 8.25 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<link href="default.css" rel="stylesheet" type="text/css" title="Default style">
<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
<link href="classy.css" rel="alternate stylesheet" type="text/css" title="Classy">
</head>
<body>
<h3>Alternative stylesheets</h3>
<p>You have a choice of multiple styles to view this page via the View menu.</p>
</body>
</html>
Chapter 9
<!-- figure 9.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
/* Solid colors */
p.one { color: rgb(255,255,255); background-color: rgb(255,0,0); }
p.two { background-color: hsl(120,100%,50%); }
p.three { color: rgb(255,255,255); background-color: rgb(0,0,255); }
/* Colors plus opacity */
p.four { color: rgb(255,255,255); background-color: rgba(255,0,0,0.5); }
p.five { background-color: hsla(120,100%,50%,0.5); }
p.six { color: #ffffff; background-color: #0000ff; opacity:0.5;}
</style>
</head>
<body>
<h3>Foreground and background color:</h3>
<p class="one">{ color: rgb(255,255,255); background-color:rgb(255,0,0); }</p>
<p class="two">{ background-color: hsl(120, 100%, 50%); }</p>
<p class="three">{ color: rgb(255,255,255); background-color:rgb(0,0,255); }</p>
<br>
<p class="four">{ color: rgb(255,255,255); background-color:rgba(255,0,0,0.5); }</p>
<p class="five">{ background-color: hsla(120,100%,50%,0.5); }</p>
<p class="six">{ color: #ffffff; background-color:#0000ff; opacity: 0.5; }</p>
</body>
</html>
Chapter 10
Click and drag to scroll left and right to view all 36 figures.
<!-- figure 10.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div { width: 400px; height: 200px; background-color: lightgrey; }
p { width: 90%; height: 50%; background-color: lightpink; }
</style>
</head>
<body>
<h3>Box width and height</h3>
<div>
<h4>About Couscous</h4>
<p>Steamed couscous is much lighter and fluffier than the one simply soaked
in hot water. Steamed with lemon and thyme, it can be used as a tasty lunch
dish or a side dish with other salads.</p>
</div>
</body>
</html>
<!-- figure 10.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.size {
background-color: pink;
text-align: center;
writing-mode: horizontal-tb;
font-family: Arial;
block-size: 300px;
inline-size: 600px;
}
</style>
</head>
<body>
<h3>Logical width and height</h3>
<div>
<p class="size">In right-to-left top-to-bottom text-flow direction, block-size
specifies height and inline-size width</p>
</div>
</body>
</html>
<!-- figure 10.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div.courg { min-width: 400px; max-width: 630px; max-height: 120px; }
div.salmon { min-width: 400px; max-width: 630px; max-height: 120px; }
</style>
</head>
<body>
<h3>Width and height limiting</h3>
<h4>Steaming Courgette</h4>
<div class="courg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
aliquet facilisis dui, non... </div>
<h4>Salmon and Vegetables</h4>
<div class="salmon">Donec a mauris sapien. Suspendisse mollis feugiat sem, eget
porta...</div>
</body>
</html>
<!-- figure 10.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div.courg { min-width: 400px; max-width: 630px; max-height: 120px;
overflow: auto; }
div.salmon { min-width: 400px; max-width: 630px; max-height: 120px;
overflow: auto; }
</style>
</head>
<body>
<h3>Width and height limiting</h3>
<h4>Steaming Courgette</h4>
<div class="courg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
aliquet facilisis dui, non... </div>
<h4>Salmon and Vegetables</h4>
<div class="salmon">Donec a mauris sapien. Suspendisse mollis feugiat sem, eget
porta...</div>
</body>
</html>
<!-- figure 10.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 250px; border: 2px solid red; }
.normal { white-space: normal; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre; }
.pre-wrap { white-space: pre-wrap; }
.pre-line { white-space: pre-line; }
</style>
</head>
<body>
<h2>White space</h2>
<p class="normal"> Phasellus sagittis, ipsum sed laoreet fermentum, lacus ...</p>
<p class="nowrap"> Phasellus sagittis, ipsum sed laoreet fermentum, lacus ...</p>
<p class="pre"> Phasellus sagittis, ipsum sed laoreet fermentum, lacus velit ...
</p>
<p class="pre-wrap"> Phasellus sagittis, ipsum sed laoreet fermentum, lacus ...</p>
<p class="pre-line"> Phasellus sagittis, ipsum sed laoreet fermentum, lacus ...</p>
</body>
</html>
<!-- figure 10.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.overflow { min-width: 400px; max-width: 630px; max-height: 120px;
min-height: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
</style>
</head>
<body>
<h3>Horizontal overflow</h3>
<h4>Steaming Courgette</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet...</div>
<h4>Salmon and Vegetables</h4>
<div class="overflow">Donec a mauris sapien. Suspendisse mollis feugiat se...</div>
</body>
</html>
<!-- figure 10.13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { border: 2px solid red; }
p.nobreak { width: 15em; overflow-wrap: normal; }
p.break {
width: 15em; overflow-wrap: break-word; }
</style>
</head>
<body>
<h2>Overflow wrap</h2>
<p class="nobreak">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean rhoncus ipsum sem, nec euismod libero porttitor eu. Nulla
ut urnaaligulatinciduntcondimentumquissitametdiam. Morbi sed magna odio.
Nam non ultricies eros.</p>
<p class="break">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean rhoncus ipsum sem, nec euismod libero porttitor eu. Nulla
ut urnaaligulatinciduntcondimentumquissitametdiam. Morbi sed magna odio.
Nam non ultricies eros.</p>
</body>
</html>
<!-- figure 10.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 175px; border: 2px solid red; }
p.none { hypens: none; }
p.manual { hypens: manual; }
p.auto { hypens: auto; }
</style>
</head>
<body>
<h3>Hyphens</h3>
<p class="none">This example demonstrates the use of the hyphens property</p>
<p class="manual">This example demonstra­tes the use of the hyphens property</p>
<p class="auto">This example demonstrates the use of the hyphens property</p>
</body>
</html>
<!-- figure 10.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.part1 {
text-align: center;
font-size: 24px;
background-color: pink;
writing-mode: horizontal-tb;
min-block-size: 300px;
max-block-size: 900px;
min-inline-size: 400px;
max-inline-size-size: 1200px;
}
</style>
</head>
<body>
<h3>Logical min and max width and height</h3>
<div>
<p class="size">In right-to-left top-to-bottom text-flow direction,
min-block-size specifies minimum height, max-block-size maximum height,
min-inline-size minimum width, and max-inline-size maximum width</p>
</div>
</body>
</html>
<!-- figure 10.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
border: solid black 1px;
background-color: lightpink;
padding: 6px;
text-align: center;
}
.one { width: calc(100% - 90px); }
.two { width: calc(100% - 200px); }
</style>
</head>
<body>
<h2>cal() function</h2>
<div class="one">One</div>
<div class="two">Two</div>
</body>
</html>
<!-- figure 10.20 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.solid { border-style: solid; }
p.dashed { border-style: dashed; }
p.dotted { border-style: dotted; }
p.double { border-style: double; }
p.groove { border-style: groove; }
p.ridge { border-style: ridge; }
p.inset { border-style: inset; }
p.outset { border-style: outset; }
</style>
</head>
<body>
<h3>Shorthand border-style</h3>
<p class="solid">{ border-style: solid; }</p>
<p class="dashed">{ border-style: dashed; }</p>
<p class="dotted">{ border-style: dotted; }</p>
<p class="double">{ border-style: double; }</p>
<p class="groove">{ border-style: groove; }</p>
<p class="ridge">{ border-style: ridge; }</p>
<p class="inset">{ border-style: inset; }</p>
<p class="outset">{ border-style: outset; }</p>
</body>
</html>
<!-- figure 10.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.all { border-style: solid; }
p.top_hori_vert { border-style: dotted solid; }
p.top_vert_bot { border-style: hidden double dashed; }
p.top_right_bot_left { border-style: none dashed dotted solid; }
</style>
</head>
<body>
<h3>Space-separated values</h3>
<p class="all">{ border-style: solid; }</p>
<p class="top_hori_vert">{ border-style: dotted solid; }</p>
<p class="top_vert_bot">{ border-style: hidden double dashed; }</p>
<p class="top_right_bot_left">{ border-style: none dashed dotted solid; }</p>
</body>
</html>
<!-- figure 10.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { border-top-style: double; }
p { border-right-style: solid; }
p { border-bottom-style: dashed; }
p { border-bottom-style: solid; }
</style>
</head>
<body>
<h3>Longhand border-style</h3>
<p>border-top-style: double; border-right-style: solid;
border-bottom-style: dashed; border-left-style: solid;</p>
</body>
</html>
<!-- figure 10.26 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.style {
writing-mode: horizontal-tb;
border: 5px solid blue;
border-block-start-style: dashed;
}
</style>
</head>
<body>
<h3>Logical longhand border-style</h3>
<div>
<p class="style">In right-to-left top-to-bottom text-flow direction,
border-block-start-style targets border top edge and styles it</p>
</div>
</body>
</html>
<!-- figure 10.28 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.one { border-style: solid; border-width: 2px; }
p.two { border-style: solid; border-width: 2px 10px; }
p.three { border-style: dashed; border-width: 0.3em thin 4px; }
p.four { border-style: ridge; border-width: thin medium thick 0.2em; }
</style>
</head>
<body>
<h3>Border width</h3>
<p class="one">{ border-style: solid; border-width: 2px; }</p>
<p class="two">{ border-style: solid; border-width: 2px 1em; }</p>
<p class="three">{ border-style: dashed; border-width: 0.2em thin 6px; }</p>
<p class="four">{ border-style: ridge; border-width: thin medium thick 0.2em; }</p>
</body>
</html>
<!-- figure 10.30 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.width {
writing-mode: horizontal-tb;
border: 1px solid darkorange;
border-block-start-width: 5px;
}
</style>
</head>
<body>
<h3>Logical border edges</h3>
<div>
<p class="width">In right-to-left top-to-bottom text-flow direction,
border-block-start-width targets border top edge and sets the border
thickness</p>
</div>
</body>
</html>
<!-- figure 10.32 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.one { border-style: solid; border-color: red; }
p.two { border-style: solid; border-color: red green; }
p.three { border-style: dashed; border-color: hsl(0,100%,50%) green rgb(0,0,255) ;}
p.four { border-style: ridge; border-color: hsla(0,100%,50%,0.3) green
rgba(0,0,255,0.3) #36d6ff; }
</style>
</head>
<body>
<h3>Border color</h3>
<p one="en-US">{ border-style: solid; border-color: red; }</p>
<p two="en-US">{ border-style: solid; border-color: red green; }</p>
<p three="en-US">{ border-style: dashed; border-color: hsl(0,100%,50%) green
rgb(0,0,255); }</p>
<p four="en-US">{ border-style: ridge; border-color: hsla(0,100%,50%,0.3) green
rgba(0,0,255,0.3) #36d6ff; }</p>
</body>
</html>
<!-- figure 10.34 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.color {
writing-mode: horizontal-tb;
border: 5px solid black;
border-block-start-color: red;
}
</style>
</head>
<body>
<h3>Logical border edges</h3>
<div>
<p class="color">In right-to-left top-to-bottom text-flow direction,
border-block-start-color targets border top edge and sets the border color</p>
</div>
</body>
</html>
<!-- figure 10.36 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.one { border-top: dashed red 2px; }
.two { border-top: solid 2px; }
.three { border-bottom: red 2px; }
</style>
</head>
<body>
<h3>border-top, border-bottom, border-right, border-left</h3>
<p class="one">{ border-top: dashed red 2px; }</p>
<p class="two">{ border-top: solid 2px; }</p>
<p class="three">{ border-bottom: red 2px; }</p>
</body>
</html>
<!-- figure 10.38 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.edge {
wrting-mode: horizontal-tb;
border: 1px solid black;
border-block-end: 5px dashed blue;
}
</style>
</head>
<body>
<h3>Logical border edges</h3>
<div>
<p class="edge">In right-to-left top-to-bottom text-flow direction,
border-block-end targets border bottom edge and applies the specified values</p>
</div>
</body>
</html>
<!-- figure 10.40 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.one { border: thick; }
p.two { border: thick dotted; }
p.three { border: 10px ridge green; }
</style>
</head>
<body>
<h3>Border property</h3>
<p class="one">{ border: thick; }</p>
<p class="two">{ border: thick dotted; }</p>
<p class="three">{ border: 10px ridge green; }</p>
</body>
</html>
<!-- figure 10.43 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
width: 400px;
border-style: solid;
border-width: 20px;
}
p.round {
border-image: url(images/star_oval.png) 30 30 30 30 round;
}
p.stretch {
border-image: url(images/star_oval.png) 30 30 30 30 stretch;
}
</style>
</head>
<body>
<p class="round">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce eget aliquet mi. Vivamus quam lectus, scelerisque id
iaculis feugiat, euismod a nulla. Nunc ex magna, sollicitudin
vel massa vitae, tristique accumsan diam. </p>
<p class="stretch">em ipsum dolor sit amet, consectetur adipiscing elit.
Fusce eget aliquet mi. Vivamus quam lectus, scelerisque id
iaculis feugiat, euismod a nulla. Nunc ex magna, sollicitudin
vel massa vitae, tristique accumsan diam. </p>
</body>
</html>
<!-- figure 10.45 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
width: 400px;
border-style: solid;
border-width: 20px;
border-image-source: url(images/star_oval.png);
border-image-slice: fill 30 30 30;
}
p.round { border-image-repeat: round; }
p.stretch { border-image-repeat: stretch; }
</style>
</head>
<body>
<h3>Border image</h3>
<p class="round">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
eget aliquet mi. Vivamus quam lectus, scelerisque id iaculis feugiat,
euismod a nulla. Nunc ex magna, sollicitudin vel massa vitae, tristique
accumsan diam. </p>
<p class="stretch">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
eget aliquet mi. Vivamus quam lectus, scelerisque id iaculis feugiat,
euismod a nulla. Nunc ex magna, sollicitudin vel massa vitae, tristique
accumsan diam. </p>
</body>
</html>
<!-- figure 10.47 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
border: 5px solid orange;
width: 300px;
border-radius: 20px;
}
</style>
</head>
<body>
<h3>Border radius</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
eget aliquet mi. Vivamus quam lectus, scelerisque id iaculis feugiat,
euismod a nulla. Nunc ex magna, sollicitudin vel massa vitae, tristique
accumsan diam.</p>
</body>
</html>
<!-- figure 10.49 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.one {
border: 5px solid orange;
width: 300px;
border-radius: 25em/1.5em;
}
p.two {
border: 5px solid orange;
width: 300px;
border-radius: 20px 15em 30px 1em / 20px 15em 30px 35em;
}
</style>
</head>
<body>
<h3>Border two radii</h3>
<p class="one">{ border: 5px solid orange; width: 300px;
border-radius: 25em/1.5em; }</p>
<p class="two">{ border: 5px solid orange; width: 300px;
border-radius: 20px 15em 30px 1em / 20px 15em 30px 35em; }</p>
</body>
</html>
<!-- figure 10.51 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.nopad { width: 260px; border: medium ridge green; }
p.haspad { width: 260px; border: medium ridge green; padding: 12px; }
</style>
</head>
<body>
<h3>Padding</h3>
<p class="nopad">This paragraph element has no padding, so there is the
minimum space possible between its content and its border.</p>
<p class="haspad">This paragraph element has padding on all sides, so
there is space possible between its content and its border.</p>
</body>
</html>
<!-- figure 10.53 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 260px; border: medium ridge green; }
p.haspad {
writing-mode: Arial;
padding-block-start: 12px;
padding-block-end: 12px;
padding-inline-start: 12px;
padding-inline-end: 12px;
}
</style>
</head>
<body>
<h3>Padding for logical edges</h3>
<p class="nopad">This paragraph element has no padding, so there is the minimum
space possible between its content and its border.</p>
<p class="haspad">This paragraph element has padding on all sides, so there is
space possible between its content and its border.</p>
</body>
</html>
<!-- figure 10.54 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { border: 2px solid blue; width: 250px; padding: 5px; }
p.one { margin: auto; }
p.two { margin: 20px 0px 0 0px; }
p.three { margin: 20px 0px 0 -20px; }
p.four { margin: 20px 0px 0 20px; }
</style>
</head>
<body>
<h3>Margin</h3>
<p class="one">margin: auto; </p>
<p class="two">margin: 20px 0 0 0px; </p>
<p class="three">margin: 20px 0 0 -20px; </p>
<p class="four">margin: 20px 0 0 20px; </p>
</body>
</html>
<!-- figure 10.56 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { border: 2px solid blue; width: 250px; padding: 5px; }
p.margin {
writing-mode: horizontal-tb;
margin-inline-start: 30px;
}
</style>
</head>
<body>
<h3>Margin via logical property</h3>
<p>No margin</p>
<p class="margin">margin-inline-start: 30px;</p>
</body>
</html>
<!-- figure 10.59 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
* { box-sizing: border-box; }
body { width: 50%; padding: 20px; }
div { text-align: center; }
.parent { width: 50%; border: 2px solid black; }
.child1 { width: 90%; padding: 20%; border: 2px solid red; }
.child2 { width: 50%; padding: 20px; border: 2px solid gold; }
</style>
</head>
<body>
<div class="parent">Parent
<p class="child1">Child 1</p>
<p class="child2">Child 2</p>
</div>
</body>
</html>
<!-- figure 10.61 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
height: 350px;
width: 350px;
border: 1px solid black;
overflow: auto;
resize: both;
}
</style>
</head>
<body>
<h3>Box Resizing</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque mollis dolor eu...</div>
</body>
</html>
<!-- figure 10.63 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { border: 1px solid black; padding: 20px; width: 150px; }
p.one { box-shadow: 5px 5px 2px 0px #4d4d4d; }
p.one_up { box-shadow: -5px -5px 2px 0px #4d4d4d; }
p.one_blur { box-shadow: 10px 10px 10px 5px #4d4d4d; }
p.one_center { box-shadow: inset 0px 0px 10px 5px #4d4d4d; }
p.one_center_no_blur { box-shadow: 0px 0px 0px 5px #4d4d4d; }
p.multi { box-shadow: inset 0 0 1em 0.5em orange, 0 0 1em 0.5em blue #4d4d4d; }
</style>
</head>
<body>
<p class="one">{ 5px 5px 2px 0px #4d4d4d; }</p>
<p class="one_inset">{ -5px -5px 2px 0px #4d4d4d; }</p>
<p class="one_blur">{ 10px 10px 10px 5px #4d4d4d; }</p>
<p class="one_center">{ inset 0px 0px 10px 5px #4d4d4d; }</p>
<p class="one_center_no_blur">{ 0px 0px 0px 5px #4d4d4d; }</p>
<p class="multi">{ inset 0 0 1em 0.5em orange, 0 0 1em 0.5em blue; }</p>
</body>
</html>
<!-- figure 10.65 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.one { outine: 1px dashed black; }
p.two { outine: 1px dashed black; border: 1px solid red; }
</style>
</head>
<body>
<h3>Outline</h3>
<p class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
a nisl scelerisque, iaculis nulla eget, sodales augue. Nunc
volutpat est sit amet massa semper varius. Morbi pellentesque
pharetra turpis ac commodo.</p>
<p class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
a nisl scelerisque, iaculis nulla eget, sodales augue. Nunc
volutpat est sit amet massa semper varius. Morbi pellentesque
pharetra turpis ac commodo.</p>
</body>
</html>
<!-- figure 10.67 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
P.one {
outline: dashed thin;
outline-offset: 5px;
border: 1px solid red;
}
</style>
</head>
<body>
<h3>Outline offset</h3>
<p class="one">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vivamus a nisl scelerisque, iaculis nulla eget, sodales augue. Nunc
volutpat est sit amet massa semper varius. Morbi pellentesque pharetra turpis
ac commodo.</p>
</body>
</html>
<!-- figure 10.69 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ul { font-family: Arial; text-align: center; }
ul li {
display: inline;
background-color: yellow;
box-shadow: 2px 2px 2px #4d4d4d;
padding: 8px;
}
ul li a { text-decoration: none; }
</style>
</head>
<body>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about_us.html">About us</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="contact_us.html">Contact us</a></li>
</ul>
</body>
</html>
<!-- figure 10.71 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ul { font-family: Arial; text-align: center; }
ul li {
display: inline;
background-color: yellow;
box-shadow: 2px 2px 2px #4d4d4d;
padding: 8px;
}
ul li a { text-decoration: none; }
li.omit { display: none; }
</style>
</head>
<body>
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li><a href="about_us.html">About us</a></li>
<li><a href="products.html">Products</a></li>
<li class="omit"><a href="downloads.html">Downloads</a></li>
<li><a href="contact_us.html">Contact us</a></li>
</ul>
</body>
</html>
Chapter 11
Click and drag to scroll left and right to view all 5 figures.
<!-- figure 11.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
height: 75px;
width: 150px;
padding: 10px;
display: inline-block;
border: 1px solid black;
background-color: pink;
text-align: center;
}
#box2 { transform: rotateZ(45deg); }
#box3 { transform: skewX(30deg); }
</style>
</head>
<body>
<h3>Transform</h3>
<div id="box1">Normal shape</div>
<div id="box2">Clockwise Rotation</div>
<div id="box3">Skewing along x-axis</div>
</body>
</html>
<!-- figure 11.4 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.box1 {
height: 200px;
width: 200px;
padding: 10px;
border: 1px solid black;
}
.box2 {
width: 50%; height: 50%;
padding: 50px;
border: 1px solid black;
transform: perspective(400px) rotateY(50deg); }
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">PERSPECTIVE</div>
</div>
</body>
</html>
<!-- figure 11.6 & figure 11.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.parent { width: 50%; padding: .5em; }
.parent.perspective { perspective-origin: 100px; perspective: 50px; }
.parent.perspective .child {
transform: rotateX(30deg);
background-color: orange;
}
.child {
margin: .5em;
width: 3em;
height: 3em;
display: inline-block;
border: 1px solid black;
}
.parent.transform .child {
transform: perspective(50px) rotateX(30deg);
background-color: grey;
}
</style>
</head>
<body>
<div class="parent perspective">
<h2>perspective property</h2>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent transform">
<h2>perspective() function</h2>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
<!-- figure 11.9 & figure 11.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
* { box-sizing: border-box; }
.wrapper { perspective: 1200px; margin: 64px auto; width: 800px; }
.inner { transform: rotateY(40deg); }
.inner figure {
width: 176px;
padding: 16px;
margin-right: 16px;
backgroud-color: rgb(250, 200, 0);
display: inline-block;
}
.inner img { max-width: 100%; }
.inner figure {
text-align: center;
margin: 8px 0;
font-family: Arial, sans-serif;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner">
<figure><img src="images/fractal_pink_spiral.jpg" alt="Abstract">
<figcaption>Abstract</figcaption>
</figure>
<figure><img src="images/pine_forest.jpg" alt="Nature">
<figcaption>Nature</figcaption>
</figure>
<figure><img src="images/surfer.jpg" alt="Sports">
<figcaption>Sports</figcaption>
</figure>
</div>
</div>
</body>
</html>
<!-- figure 11.15 & figure 11.16 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.cube {
width: 200px;
height: 200px;
margin: 75px auto;
transform: rotateX(-40deg) rotateY(30deg);
perspective-origin: 50% 50%;
perspective: 1200px;
transform-style: preserve-3d;
}
.face {
position: absolute;
width: 144px;
height: 144px;
line-height: 140px;
font-size: 60px;
text-align: center;
color: black;
background-color: rgba(235, 230, 0, 0.8);
border: 1px solid black;
box-shadow: inset 0 0 10px black; opacity: 0.8;
backface-visibility: visible;
}
.one { transform: translateZ(72px); }
.six { transform: rotateY(180deg) translateZ(72px); }
.four { transform: rotateY(90deg) translateZ(72px); }
.three { transform: rotateY(-90deg) translateZ(72px); }
.five { transform: rotateX(90deg) translateZ(72px); }
.two { transform: rotateX(-90deg) translateZ(72px); }
</style>
</head>
<body>
<div class="cube">
<div class="face one"1></div>
<div class="face six"6></div>
<div class="face four"4></div>
<div class="face three"3></div>
<div class="face five"5></div>
<div class="face two"2></div>
</div>
</body>
</html>
Chapter 12
Click and drag to scroll left and right to view all 19 figures.
<!-- figure 12.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 600px; }
p.noMove { position: static; }
</style>
</head>
<body>
<h2>Static positioning</h2>
<p>In quis nibh eget nisl pharetra varius. Mauris eget velit turpis. Vivamus erat
mauris, pretium pharetra risus eget, ornare rutrum tortor. In sollicitudin congue
porttitor. Nunc ante sem, vehicula sit amet feugiat nec, pharetra vitae velit.
Suspendisse nec ipsum congue, fermentum dolor elementum, volutpat dolor. Vivamus
lobortis id erat ac scelerisque.</p>
<p noMove="en-US">Nulla eget varius tortor, a egestas risus. Nunc interdum commodo
hendrerit. Aliquam rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin.
Duis leo neque, porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac purus
non fermentum. Fusce mattis sagittis enim, tincidunt pretium enim rutrum ac. Donec
maximus accumsan augue non efficitur. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Fusce sed nunc non ante viverra
eleifend. Maecenas egestas magna sit amet varius dictum.</p>
<p>Fusce dictum nisl ipsum, at dictum elit efficitur ut. Suspendisse cursus lorem et
maximus placerat. Donec lectus magna, fringilla vel orci a, condimentum mattis tellus.
Maecenas a sodales orci, vel iaculis nisi. Proin sagittis auctor sagittis. Vestibulum
id interdum urna. Praesent metus enim, euismod at dui eget, varius sagittis risus.
Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</body>
</html>
<!-- figure 12.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { width: 600px; }
p.moveRight {
position: relative;
top: 10px;
left: 50px;
}
</style>
</head>
<body>
<h3>Relative positioning</h3>
<p>In quis nibh eget nisl pharetra varius. Mauris eget velit turpis. Vivamus erat
mauris, pretium pharetra risus eget, ornare rutrum tortor. In sollicitudin congue
porttitor. Nunc ante sem, vehicula sit amet feugiat nec, pharetra vitae velit.
Suspendisse nec ipsum congue, fermentum dolor elementum, volutpat dolor. Vivamus
lobortis id erat ac scelerisque.</p>
<p class="moveRight">Nulla eget varius tortor, a egestas risus. Nunc interdum commodo
hendrerit. Aliquam rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin.
Duis leo neque, porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac purus
non fermentum. Fusce mattis sagittis enim, tincidunt pretium enim rutrum ac. Donec
maximus accumsan augue non efficitur. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Fusce sed nunc non ante viverra
eleifend. Maecenas egestas magna sit amet varius dictum.</p>
<p>Fusce dictum nisl ipsum, at dictum elit efficitur ut. Suspendisse cursus lorem et
maximus placerat. Donec lectus magna, fringilla vel orci a, condimentum mattis tellus.
Maecenas a sodales orci, vel iaculis nisi. Proin sagittis auctor sagittis. Vestibulum
id interdum urna. Praesent metus enim, euismod at dui eget, varius sagittis risus.
Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</body>
</html>
<!-- figure 12.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 600px; }
p.moveRight {
writing-mode: horizontal-tb;
position: relative;
offset-block-start: 10px;
offset-inline-start: 50px;
}
</style>
</head>
<body>
<h2>Relative positioning with logical offset</h2>
<p>In quis nibh eget nisl pharetra varius. Mauris eget velit turpis. Vivamus erat
mauris, pretium pharetra risus eget, ornare rutrum tortor. In sollicitudin congue
porttitor. Nunc ante sem, vehicula sit amet feugiat nec, pharetra vitae velit.
Suspendisse nec ipsum congue, fermentum dolor elementum, volutpat dolor. Vivamus
lobortis id erat ac scelerisque.</p>
<p class="moveRight">Nulla eget varius tortor, a egestas risus. Nunc interdum commodo
hendrerit. Aliquam rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin.
Duis leo neque, porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac purus
non fermentum. Fusce mattis sagittis enim, tincidunt pretium enim rutrum ac. Donec
maximus accumsan augue non efficitur. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Fusce sed nunc non ante viverra
eleifend. Maecenas egestas magna sit amet varius dictum.</p>
<p>Fusce dictum nisl ipsum, at dictum elit efficitur ut. Suspendisse cursus lorem et
maximus placerat. Donec lectus magna, fringilla vel orci a, condimentum mattis tellus.
Maecenas a sodales orci, vel iaculis nisi. Proin sagittis auctor sagittis. Vestibulum
id interdum urna. Praesent metus enim, euismod at dui eget, varius sagittis risus.
Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</body>
</html>
<!-- figure 12.6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 600px; }
h2 {
background-color: pink;
position: absolute;
top: 10px;
left: 50px;
}
</style>
</head>
<body>
<h2>Absolute positioning</h2>
<p>In quis nibh eget nisl pharetra varius. Mauris eget velit turpis. Vivamus erat
mauris, pretium pharetra risus eget, ornare rutrum tortor. In sollicitudin congue
porttitor. Nunc ante sem, vehicula sit amet feugiat nec, pharetra vitae velit.
Suspendisse nec ipsum congue, fermentum dolor elementum, volutpat dolor. Vivamus
lobortis id erat ac scelerisque.</p>
<p>Nulla eget varius tortor, a egestas risus. Nunc interdum commodo hendrerit. Aliquam
rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin. Duis leo neque,
porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac purus non fermentum.
Fusce mattis sagittis enim, tincidunt pretium enim rutrum ac. Donec maximus
accumsan augue non efficitur. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Fusce sed nunc non ante viverra eleifend.
Maecenas egestas magna sit amet varius dictum.</p>
<p>Fusce dictum nisl ipsum, at dictum elit efficitur ut. Suspendisse cursus lorem et
maximus placerat. Donec lectus magna, fringilla vel orci a, condimentum mattis
tellus. Maecenas a sodales orci, vel iaculis nisi. Proin sagittis auctor sagittis.
Vestibulum id interdum urna. Praesent metus enim, euismod at dui eget, varius
sagittis risus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</body>
</html>
<!-- figure 12.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 600px; }
h2 {
background-color: pink;
position: fixed;
top: 10px;
left: 50px;
}
</style>
</head>
<body>
<h2>Fixed positioning</h2>
<p>In quis nibh eget nisl pharetra varius. Mauris eget velit turpis. Vivamus erat
mauris, pretium pharetra risus eget, ornare rutrum tortor. In sollicitudin congue
porttitor. Nunc ante sem, vehicula sit amet feugiat nec, pharetra vitae velit.
Suspendisse nec ipsum congue, fermentum dolor elementum, volutpat dolor. Vivamus
lobortis id erat ac scelerisque.</p>
<p>Nulla eget varius tortor, a egestas risus. Nunc interdum commodo hendrerit. Aliquam
rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin. Duis leo neque,
porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac purus non fermentum.
Fusce mattis sagittis enim, tincidunt pretium enim rutrum ac. Donec maximus
accumsan augue non efficitur. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Fusce sed nunc non ante viverra eleifend.
Maecenas egestas magna sit amet varius dictum.</p>
<p>Fusce dictum nisl ipsum, at dictum elit efficitur ut. Suspendisse cursus lorem et
maximus placerat. Donec lectus magna, fringilla vel orci a, condimentum mattis
tellus. Maecenas a sodales orci, vel iaculis nisi. Proin sagittis auctor sagittis.
Vestibulum id interdum urna. Praesent metus enim, euismod at dui eget, varius
sagittis risus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</body>
</html>
<!-- figure 12.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.sidebar {
width: 100px;
height: 300px;
margin: 10px;
background: pink;
position: fixed;
top: 55px;
left: 0px;
}
.content {
width: 500px;
height: 300px;
margin: 10px;
padding-left: 130px;
overflow: auto;
}
</style>
</head>
<body>
<h2>Fixed Company</h2>
<div class="content">
<div class="sidebar">Side Menu</div>
<p><h3>About us</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam
mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam
purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus
eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor
tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis
porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum.
Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget
pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit
amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum
libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra
dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in
enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor
nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed
condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam,
accumsan id ultrices ultrices, tempor et tellus. </p>
</div>
</body>
</html>
<!-- figure 12.12 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.art1, .art2 { width: 600px; margin: 0px auto 20px auto;
background-color: lightgrey; padding: 15px; }
h2 {
background-color: lightblue;
border: 1px outset lightblue;
position: sticky;
top: 0px;
margin: 0px 0px 10px 0px;
padding: 10px;
}
</style>
</head>
<body>
<div class="art1">
<h2>Article One</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue leo
augue, et dictum eros rutrum a. Mauris tempor scelerisque urna ut viverra. In
dapibus et orci sit amet tincidunt. Phasellus ligula odio, faucibus eu vulputate
ut, malesuada a lorem. Curabitur nec ipsum lacus. Mauris consequat tortor
imperdiet, efficitur tortor id, aliquam felis. Proin varius non augue vel
efficitur. Fusce non nunc commodo, convallis risus sed, aliquam mauris.
Phasellus turpis tellus, tincidunt ac varius nec, tempor ac ante. Nulla
condimentum faucibus leo, interdum tristique enim rutrum eget. Nunc tincidunt
tristique pretium. Praesent fermentum et lorem eu laoreet. Nunc vitae felis nec
nibh sollicitudin mollis eget ut risus. Vestibulum vitae neque hendrerit enim
aliquam bibendum. Phasellus sed nibh vel urna aliquet suscipit. Vivamus at enim
pellentesque urna congue varius. Donec nisl mi, sagittis eget imperdiet nec,
laoreet at purus. Cras ante lacus, elementum ac odio sed, venenatis malesuada
nulla. Nam at tincidunt risus. Donec eget erat nec tellus volutpat tristique.
In ut auctor est, quis scelerisque nisl. Curabitur bibendum risus ac nisi
vestibulum volutpat. Etiam maximus, libero vel auctor pharetra, diam ligula
consequat nulla, in sodales urna nisl eu purus. Sed pretium sollicitudin felis
eu efficitur. Mauris nisl magna, pulvinar at nulla quis, euismod luctus diam.
Aliquam nec risus mauris. In at metus a ipsum laoreet dignissim. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Aliquam vel diam nisl. Aliquam quis convallis felis. Interdum et malesuada fames
ac ante ipsum primis in faucibus. Integer aliquam est eu commodo venenatis.
</div>
<div class="art2">
<h2>Article Two</h2>
Nisi est sit amet facilisis magna etiam tempor orci. Sapien et ligula ullamcorper
malesuada proin libero nunc consequat interdum. Consequat nisl vel pretium lectus
quam id leo in vitae. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat.
Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Penatibus et magnis
dis parturient montes. Vel facilisis volutpat est velit egestas dui id. Tristique
magna sit amet purus gravida quis blandit. Id ornare arcu odio ut sem nulla
pharetra diam. Lacus vel facilisis volutpat est velit egestas dui id. Lacinia quis
vel eros donec ac odio tempor orci. Dapibus ultrices in iaculis nunc. Vivamus arcu
felis bibendum ut. Amet mattis vulputate enim nulla. Donec pretium vulputate sapien
nec sagittis aliquam malesuada bibendum. Diam maecenas sed enim ut sem viverra
aliquet eget. Gravida dictum fusce ut placerat orci. Duis convallis convallis
tellus id interdum velit laoreet id donec. Sit amet aliquam id diam maecenas
ultricies mi eget. Augue ut lectus arcu bibendum at varius. Neque vitae tempus
quam pellentesque nec nam aliquam. Mauris a diam maecenas sed enim ut sem. Maecenas
ultricies mi eget mauris. Non odio euismod lacinia at quis risus. Parturient montes
nascetur ridiculus mus mauris vitae ultricies leo integer. Adipiscing enim eu
turpis egestas pretium aenean. Id consectetur purus ut faucibus pulvinar elementum.
Purus faucibus ornare suspendisse sed nisi lacus. Lacus luctus accumsan tortor
posuere ac ut. Cras ornare arcu dui vivamus arcu felis bibendum ut. Lacus viverra
vitae congue eu consequat ac felis donec et. Leo a diam sollicitudin tempor. Sapien
pellentesque habitant morbi tristique senectus et. Nec sagittis aliquam malesuada
bibendum arcu vitae elementum curabitur vitae. Nunc lobortis mattis aliquam
faucibus purus in massa. Velit ut tortor pretium viverra suspendisse potenti
nullam. Porta lorem mollis aliquam ut porttitor leo a diam sollicitudin. Sem
integer vitae justo eget magna. At tellus at urna condimentum mattis pellentesque
id nibh. Amet commodo nulla facilisi nullam vehicula. Posuere morbi leo molestie
at elementum eu facilisis sed. Mauris pellentesque pulvinar pellentesque habitant
morbi. Magna ac placerat vestibulum lectus mauris ultrices eros.
</div>
</body>
</html>
<!-- figure 12.14 & figure 12.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
width: 90%;
margin: 0 auto 0 auto;
}
header {
position: sticky;
top: 0px;
}
.logo {
height: 100px;
background-color: lightgrey;
text-align: center;
}
.logo h1 h1{
margin-top: 0;
padding-top: 30px;
}
nav ul {
margin: 0px;
padding: 0;
background-color: pink;
width: 100%;
}
nav ul li {
display: inline-block;
text-align: center;
width: 25%;
}
nav ul li a {
display: block;
padding: 10px 0;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
background-color: violet;
color: white;
}
</style>
</head>
<body>
<header>
<div class="logo">
<h1>The Web Company</h1>
</div>
<nav>
<ul>
<li><a href="#">Home</a>
<li><a href="#">About us</a>
<li><a href="#">Services</a>
<li><a href="#">Contact us</a>
</ul>
</nav>
</header>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor,
varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet hendrerit sapien,
non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra.
Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet, porttitor elit.
Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est.
Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra tellus a laoreet. Cras imperdiet enim
sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum,
iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis
bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor elementum
ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue
urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Suspendisse suscipit in lectus at aliquet. Integer non sem enim. Vestibulum aliquam imperdiet laoreet. In malesuada sodales augue, ut
aliquam elit tempus id. Suspendisse sed hendrerit nibh. Curabitur molestie in libero nec vulputate. Cras ut scelerisque lacus, vitae
cursus dui. Fusce ultricies lectus tincidunt, congue elit interdum, pellentesque nunc.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a
lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
</div>
</body>
</html>
<!-- figure 12.17 & figure 12.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Arial; text-align: center; }
.menubar li {
display: inline-block;
background: yellow;
padding: 10px 20px;
cursor: pointer;
position: relative;
}
.menubar li a{ color: black; text-decoration: none; }
.part1 div:hover { background: orange; }
.menubar li ul{
display: none;
padding: 0;
bax-shadow: 2px 2px 2px #4d4d4d;
position: absolute;
top: 39px;
left: 0;
text-align: left;
}
.menubar li ul li{ background: orange; color: white; display: block; }
.menubar li ul li a{ color: white; white-space: nowrap; }
.menubar li:hover ul{ display: block; }
.menubar li ul li:hover{ background: grey; }
</style>
</head>
<body>
<ul class="menubar">
<li><a href="home.html">Home</a></li>
<li><a href="about_us.html">About us</a></li>
<li><a href="products.html">Products</a>
<ul class="dropdown_menu">
<li><a href="audio_software.html">Audio software</a></li>
<li><a href="virtual_instruments.html">Virtual instruments</a></li>
<li><a href="effect_modules.html">Effect modules</a></li>
</ul>
</li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</body>
</html>
<!-- figure 12.20 & figure 12.21 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Arial; text-align: center; padding: 0px; }
.menu { display: inline-block; position: relative; }
.menubar .menu a { text-decoration: none; color: black; }
button {
padding: 10px 20px;
margin-right: 1px;
border: none;
background: yellow;
cursor: pointer;
}
.menubar .menu div {
display: none;
box-shadow: 2px 2px 2px #4d4d4d;
position: absolute;
text-align: left;
background: orange;
}
.menubar .menu div a {
display: block;
white-space: nowrap #4d4d4d;
padding: 12ox 16px;
color: white;
}
.menubar .menu:hover button { background: orange; }
.menubar .menu:hover div { display: block; }
.menubar .menu div a:hover { background: grey; }
</style>
</head>
<body>
<div class="menubar">
<div class="menu">
<button><a href="home.html">Home</a></button>
</div>
<div class="menu">
<button><a href="about_us.html">About us</a></button>
</div>
<div class="menu">
<button><a href="products.html">Products</a></button>
<div>
<button><a href="audio_software.html">Audio software</a></button>
<button><a href="virtual_instruments.html">Virtual instruments</a></button>
<button><a href="effect_modules.html">Effect modules</a></button>
</div>
</div>
<div class="menu">
<button><a href="downloads.html">Downloads</a></button>
</div>
<div class="menu">
<button><a href="contact.html">Contact us</a></button>
</div>
</div>
</body>
</html>
<!-- figure 12.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.bar {
width: 550px;
height: 120px;
background: grey;
opacity: 0.9;
position: absolute;
left: 10px;
top: 110px;
z-index: 2;
}
.peg1 {
width: 120px; height: 200px; background: gold; opacity: 0.9;
position: absolute; left: 65px; top: 70px; z-index: 3;
}
.peg2 {
width: 120px; height: 200px; background: gold; opacity: 0.9;
position: absolute; left: 225px; top: 70px; z-index: 3;
}
.peg3 {
width: 120px; height: 200px; background: gold; opacity: 0.9;
position: absolute; left: 385px; top: 70px; z-index: 1;
}
</style>
</head>
<body>
<h2>z-index</h2>
<span class="bar">z-index: 2;</span>
<span class="peg2">z-index: 1;</span>
<span class="peg2">z-index: 3;</span>
<span class="peg3">z-index: 1;</span>
</body>
</html>
<!-- figure 12.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
blockquote {
width: 200px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 10px 10px 10px 10px;
padding: 10px;
background-color: #ffc0cb;
font-style: italic;
float: right;
}
figure {
margin: 0px 10px 0px 0px;
font-style: italic;
float: left;
}
</style>
</head>
<body>
<h2>Contents floated right and left</h2>
<blockquote>"Suspendisse cursus lorem et maximus placerat."</blockquote>
<p>In quis nibh eget nisl pharetra varius. Mauris eget velit turpis. Vivamus erat
mauris, pretium pharetra risus eget, ornare rutrum tortor. In sollicitudin congue
porttitor. Nunc ante sem, vehicula sit amet feugiat nec, pharetra vitae velit.
Suspendisse nec ipsum congue, fermentum dolor elementum, volutpat dolor. Vivamus
lobortis id erat ac scelerisque.
<figure>
<img src="images/rabbit.png" alt="The rabbit" width="80" height="80">
<figcaption>The rabbit</figcaption>
</figure>
<p>Nulla eget varius tortor, a egestas risus. Nunc interdum commodo hendrerit.
Aliquam rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin. Duis
leo neque, porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac
purus non fermentum. Fusce mattis sagittis enim, tincidunt pretium enim rutrum
ac. Donec maximus accumsan augue non efficitur. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sed nunc
non ante viverra eleifend. Maecenas egestas magna sit amet varius dictum.</p>
<p>Morbi eget sem feugiat, pretium velit in, vehicula elit. Sed suscipit mi eu
lorem ultrices fringilla. Integer tempus dapibus dui, a pharetra eros aliquet
sed. Phasellus elementum neque enim, et sagittis mauris posuere a. Curabitur
non purus ut orci facilisis facilisis nec id ligula. Mauris quis ipsum sit amet
ligula congue gravida. Donec porta dui erat, non tristique nibh lobortis ut.</p>
</body>
</html>
<!-- figure 12.26 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { width: 800px; }
b { font-size: 24px; }
p {
width: 220px;
margin: 5px;
padding: 5px;
background-color: #ffc0cb;
float: left;
}
</style>
</head>
<body>
<h2>Floating element obstruction</h2>
<p><b>1.</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
hendrerit pellentesque lectus in fermentum. Proin ut sapien metus. Morbi gravida sit
amet tortor eu ultrices. Phasellus luctus commodo neque, at malesuada leo blandit at.
Ut vulputate auctor interdum.</p>
<p><b>2.</b><br>Pellentesque dictum elementum augue sit amet eleifend. Vestibulum
iaculis dolor ac auctor dapibus. Etiam rhoncus malesuada ipsum. Cras finibus ornare
arcu luctus fringilla. </p>
<p><b>3.</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
hendrerit pellentesque lectus in fermentum. Proin ut sapien metus. Morbi gravida sit
amet tortor eu ultrices. Phasellus luctus commodo neque, at malesuada leo blandit at.
Ut vulputate auctor interdum.</p>
<p class="clear"><b>4.</b><br>Integer at dignissim quam, non fringilla est. Aenean sed
risus eros. Quisque pulvinar aliquet quam, nec dapibus nisi varius id. Praesent
fringilla est enim, fringilla laoreet nisl suscipit in. </p>
<p><b>5.</b><br>Cras mauris lacus, pulvinar non condimentum ut, vulputate a ex.
Suspendisse lacinia tristique tincidunt. Morbi fermentum pulvinar orci, vitae
imperdiet lectus laoreet sollicitudin.</p>
<p><b>6.</b><br>vamus non nisi nec orci cursus faucibus sed non sapien.
Vivamus consequat condimentum purus, vel tincidunt justo commodo et. Mauris eget
tortor blandit, rhoncus tellus a, fringilla est. </p>
</body>
</html>
<!-- figure 12.28 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { width: 800px; }
b { font-size: 24px; }
p {
width: 220px;
margin: 5px;
padding: 5px;
background-color: #ffc0cb;
float: left;
}
.clearfix { clear: left; }
</style>
</head>
<body>
<h2>Floating element obstruction solved</h2>
<p><b>1.</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
hendrerit pellentesque lectus in fermentum. Proin ut sapien metus. Morbi gravida sit
amet tortor eu ultrices. Phasellus luctus commodo neque, at malesuada leo blandit at.
Ut vulputate auctor interdum.</p>
<p><b>2.</b><br>Pellentesque dictum elementum augue sit amet eleifend. Vestibulum
iaculis dolor ac auctor dapibus. Etiam rhoncus malesuada ipsum. Cras finibus ornare
arcu luctus fringilla. </p>
<p><b>3.</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
hendrerit pellentesque lectus in fermentum. Proin ut sapien metus. Morbi gravida sit
amet tortor eu ultrices. Phasellus luctus commodo neque, at malesuada leo blandit at.
Ut vulputate auctor interdum.</p>
<p class="clear"><b>4.</b><br>Integer at dignissim quam, non fringilla est. Aenean sed
risus eros. Quisque pulvinar aliquet quam, nec dapibus nisi varius id. Praesent
fringilla est enim, fringilla laoreet nisl suscipit in. </p>
<p><b>5.</b><br>Cras mauris lacus, pulvinar non condimentum ut, vulputate a ex.
Suspendisse lacinia tristique tincidunt. Morbi fermentum pulvinar orci, vitae
imperdiet lectus laoreet sollicitudin.</p>
<p><b>6.</b><br>vamus non nisi nec orci cursus faucibus sed non sapien.
Vivamus consequat condimentum purus, vel tincidunt justo commodo et. Mauris eget
tortor blandit, rhoncus tellus a, fringilla est. </p>
</body>
</html>
<!-- figure 12.30 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { width: 750px; }
b { font-size: 24px; }
div { border: 1px solid black; }
p {
width: 220px;
margin: 5px;
padding: 5px;
background: #ffc0cb;
float: left;
}
</style>
</head>
<body>
<h2>Collapsed parent-element problem</h2>
<div>
<p><b>1.</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
hendrerit pellentesque lectus in fermentum. Proin ut sapien metus. Morbi gravida
sit amet tortor eu ultrices. Phasellus luctus commodo neque, at malesuada leo
blandit at. Ut vulputate auctor interdum.</p>
<p><b>2.</b><br>Pellentesque dictum elementum augue sit amet eleifend. Vestibulum
iaculis dolor ac auctor dapibus. Etiam rhoncus malesuada ipsum. Cras finibus ornare
arcu luctus fringilla. </p>
<p><b>3.</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
hendrerit pellentesque lectus in fermentum. Proin ut sapien metus. Morbi gravida
sit amet tortor eu ultrices. Phasellus luctus commodo neque, at malesuada leo
blandit at. Ut vulputate auctor interdum.</p>
</body>
</body>
</html>
<!-- figure 12.33 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.one, .two, .three {
width: 250px;
float: left;
margin: 0px 10px 0px 5px;
}
</style>
</head>
<body>
<h2>Multi-column layout with float</h2>
<div class="one">In quis nibh eget nisl pharetra varius. Mauris eget velit turpis.
Vivamus erat mauris, pretium pharetra risus eget, ornare rutrum tortor. In
sollicitudin congue porttitor. Nunc ante sem, vehicula sit amet feugiat nec,
pharetra vitae velit. Suspendisse nec ipsum congue, fermentum dolor elementum,
volutpat dolor. Vivamus lobortis id erat ac scelerisque.</div>
<div class="two">Nulla eget varius tortor, a egestas risus. Nunc interdum commodo
hendrerit. Aliquam rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin.
Duis leo neque, porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac
purus non fermentum. Fusce mattis sagittis enim, tincidunt pretium enim rutrum ac.
Donec maximus accumsan augue non efficitur. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. </div>
<div class="three">Morbi eget sem feugiat, pretium velit in, vehicula elit. Sed
suscipit mi eu lorem ultrices fringilla. Integer tempus dapibus dui, a pharetra eros
aliquet sed. Phasellus elementum neque enim, et sagittis mauris posuere a. Curabitur
non purus ut orci facilisis facilisis nec id ligula. Mauris quis ipsum sit amet ligula
congue gravida. Donec porta dui erat, non tristique nibh lobortis ut. </div>
</body>
</html>
<!-- figure 12.35 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
columns: 3 100px;
-webkit-columns: 3 100px; /* Chrome, Safari, Opera */
-moz-columns: 3 100px; /* Firefox */
}
.article1 {
column-span: none;
-webkit-column-span: none; /* Chrome, Safari, Opera */
-moz-column-span: none; /* Firefox */
}
.article2 {
column-span: all;
-webkit-column-span: all; /* Chrome, Safari, Opera */
-moz-column-span: all; /* Firefox */
}
</style>
</head>
<body>
<div>
<h2 class="article1">This heading uses a setting of "none" for column-span</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut felis ullamcorper
ante ullamcorper auctor. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Ut vel pulvinar eros. Sed a malesuada
risus. Donec vitae turpis ut massa ullamcorper dapibus. Donec elementum purus
lectus, at posuere eros tristique et. Nulla lobortis interdum tincidunt. Aliquam
iaculis magna at mollis tincidunt. Pellentesque iaculis risus eu nisi viverra
semper. Suspendisse libero ex, semper in enim vitae, posuere aliquam ante. Proin
congue ac lacus ac placerat. Morbi eu tempus sapien. Ut congue risus odio, eu
tempor felis mattis id. Praesent sollicitudin, augue non interdum fringilla, magna
tortor tristique tellus, in varius tortor sem at diam.
</div>
<div>
<h2 class="article2">This heading uses a setting of "all" for column-span</h2>
Aenean suscipit accumsan elit, non bibendum magna fringilla a. Pellentesque mollis
metus massa, congue pretium velit ornare vel. Sed varius fringilla quam vitae
mollis. Vestibulum lobortis sit amet lectus non efficitur. Ut consequat ligula ut
lacus varius, eget iaculis purus tincidunt. Phasellus tristique interdum turpis.
In in pulvinar sapien, ut malesuada nisl. Quisque lobortis, mauris venenatis
vehicula tristique, odio magna convallis nisi, vel lacinia dui sapien eget diam.
Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Duis dictum leo ac odio dapibus, non consequat
purus iaculis. Donec placerat magna ac ultricies varius.Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae.
</div>
</body>
</html>
<!-- figure 12.37 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-gap: 25px;
-webkit-column-gap: 25px;
-moz-column-gap: 25px;
column-rule: 2px solid #0000ff;
-webkit-column-rule: 2px solid #0000ff;
-moz-column-rule: 2px solid #0000ff;
}
</style>
</head>
<body>
<div>
<h3>Investigationes demonstraverunt lectores</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus
legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt
lectores legere me lius quod ii legunt saepius.
</body>
</body>
</html>
<!-- figure 12.39 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-rule: 2px solid #0000ff;
-moz-column-rule: 2px solid #0000ff;
-webkit-column-rule: 2px solid #0000ff;
}
.article1 {
column-fill: auto;
-moz-column-fill: auto;
}
.article2 {
column-fill: balance;
-moz-column-fill: balance;
}
</style>
</head>
<body>
<h2>Investigationes demonstraverunt lectores</h2>
<div class="article1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
<br>
<h2>Investigationes demonstraverunt lectores</h2>
<div class="article2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</body>
</html>
Chapter 13
Click and drag to scroll left and right to view all 8 figures.
<!-- figure 13.2 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Times, "Times New Roman", Georgia, serif; }
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; }
p.author { font-family: "Courier New" Courier, monospace; }
</style>
</head>
<body>
<h3>Origin of All</h3>
<p class="author">by Wu Knows</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id gravida justo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas magna sapien, sodales in pretium at, semper id magna. In pretium placerat
euismod. Vivamus quam risus, finibus id placerat vitae, maximus ut urna. Mauris in
orci arcu. Integer sed enim auctor, tempor dolor ac, auctor eros. Etiam pharetra
eleifend felis, quis rutrum dui facilisis in.</p>
</body>
</html>
<!-- figure 13.4 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
@font-face {
font-family: "My Serif Bold" ;
src: url("fonts/VeraSeBd.ttf");
}
p.one { font-family: "My Serif Bold", serif; }
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; }
</style>
</head>
<body>
<h3>Font-face at-rule</h3>
<p class="one">This text is styled using the downloaded VeraSeBd font.</p>
<p class="two">This text is styled using the default local font.</p>
</body>
</html>
<!-- figure 13.6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
@font-face {
font-family: "My Serif Bold";
font-style: normal;
src: url("fonts/VeraSeBd.ttf");
unicode-range: U+000-5FF, U+3000-9FFF;
}
p.one { font-family: "My Serif Bold", serif; }
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; }
</style>
</head>
<body>
<h3>Font-face at-rule</h3>
<p class="one">This text is styled using the downloaded VeraSeBd font.</p>
<p class="two">This text is styled using the default local font.</p>
</body>
</html>
<!-- figure 13.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
@font-face {
font-family: "MyPreferredSerif";
src: local("Afta Serif"),
local("Afta Serif"),
url("fonts/AlfaSerif.eot"),
url("fonts/AftaSerif.eot?#iefix") format("embedded-opentype"),
url("fonts/AftaSerif.woff2") format("woff2"),
url("fonts/AftaSerif.woff") format("woff"),
url("fonts/AftaSerif.ttf") format("truetype"),
url("fonts/AftaSerif.svg#AftaSerif") format("svg"),
}
body { font-family: MyPreferredSerif, serif; }
</style>
</head>
<body>
<p>This is Afta Serif.</p>
</body>
</html>
<!-- figure 13.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
.one { font-family: "Indie Flower", cursive; }
</style>
</head>
<body>
<h3>Import rule</h3>
<p class="one">This text is styled using an imported Google font.</p>
<p>This text is styled using the default local font.</p>
</body>
</html>
<!-- figure 13.18 & figure 13.19 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
}
.xxsamll { font-size: xx-small; }
.small { font-size: small; }
.larger { font-size: larger; }
.percent { font-size: 200%; }
.em { font-size: 1.5em; }
</style>
</head>
<body>
<h1 class="xxsmall">xxSmall H1</h1>
<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="percent">200% H1</h1>
<h1 class="em">1.5em H1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id gravida justo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas magna sapien, sodales in pretium at, semper id magna. In pretium placerat
euismod. Vivamus quam risus, finibus id placerat vitae, maximus ut urna. Mauris in
orci arcu. Integer sed enim auctor, tempor dolor ac, auctor eros. Etiam pharetra
eleifend felis, quis rutrum dui facilisis in.</p>
</body>
</html>
<!-- figure 13.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Arial, Verdana, sans-serif; }
p.normal { font-weight: normal; }
p.bolder { font-weight: bolder; }
p.lighter { font-weight: lighter; }
p.bold { font-weight: bold; }
p.weight700 { font-weight: weight700; }
p.weight900 { font-weight: weight900; }
</style>
</head>
<body>
<h3>Font Weight</h3>
<p class="normal">This is normal.</p>
<p class="bolder">This is bolder.</p>
<p class="lighter">This is lighter.</p>
<p class="bolder">This is bold.</p>
<p class="weight700">This is 700 weight.</p>
<p class="weight900">This is 900 weight.</p>
</body>
</html>
<!-- figure 13.26 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.normal { font-style: normal; }
p.italic { font-style: italic; }
p.oblique { font-style: oblique; }
</style>
</head>
<body>
<h3>Font style</h3>
<p class="normal">This paragraph is in normal font</p>
<p class="italic">This paragraph is in italic font</p>
<p class="oblique">This paragraph is in oblique font</p>
</body>
</html>
Chapter 14
Click and drag to scroll left and right to view all 28 figures.
<!-- figure 14.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body, .author { text-align: center; }
p { text-align: justify; }
</style>
</head>
<body>
<h1>Text alignment</h1>
<p class="author">by James Hart</p>
<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. 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 14.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { background-color: lightgrey; }
img.baseline { vertical-align: baseline; }
img.bottom { vertical-align: text-bottom; }
img.top { vertical-align: text-top; }
img.middle { vertical-align: middle; }
</style>
</head>
<body>
<h3>Vertical Align</h3>
<p><img class="baseline" src="images/rabbit_white.png" alt="Rabbit"
width="50" height="50">
This image is aligned using the baseline value.</p>
<p><img class="bottom" src="images/rabbit_white.png" alt="Rabbit"
width="50" height="50">
This image is aligned using the text-bottom value.</p>
<p><img class="top" src="images/rabbit_white.png" alt="Rabbit"
width="50" height="50">
This image is aligned using the text-top value.</p>
<p><img class="middle" src="images/rabbit_white.png" alt="Rabbit"
width="50" height="50">
This image is aligned using the middle value.</p>
</body>
</html>
<!-- figure 14.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
h2 { text-align: center; }
p.blocktext {
margin-left: auto;
margin-right: auto;
width: 480px;
}
</style>
</head>
<body>
<h2>Text horizontal centering</h2>
<p class="blocktext ">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. Cras
vehicula lobortis justo. Ut congue dapibus odio, in cursus nisl consectetur quis.
Aenean volutpat volutpat vehicula. Phasellus tempor purus sed commodo posuere. Nam
non ultricies eros. 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 14.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
h2 { text-align: center; }
div {
position: absolute;
top: 50%;
padding: 20px;
transform: translateY(-50%);
}
</style>
</head>
<body>
<h2>Vertical centering</h2>
<div>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. Cras
vehicula lobortis justo. Ut congue dapibus odio, in cursus nisl consectetur quis.
Aenean volutpat volutpat vehicula. Phasellus tempor purus sed commodo posuere. Nam
non ultricies eros. Cras vehicula lobortis justo. Ut congue dapibus odio, in cursus
nisl consectetur quis. Aenean volutpat volutpat vehicula. Phasellus tempor purus sed
commodo posuere.</div>
</body>
</html>
<!-- figure 14.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
h2 { text-align: center; }
div {
position: absolute;
top: 50%;
margin-left: 300px;
margin-right: 300px;
transform: translateY(-50%);
}
</style>
</head>
<body>
<h2>Vertical and horizontal centering</h2>
<div>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. Cras
vehicula lobortis justo. Ut congue dapibus odio, in cursus nisl consectetur quis.
Aenean volutpat volutpat vehicula. Phasellus tempor purus sed commodo posuere. Nam
non ultricies eros. Cras vehicula lobortis justo. Ut congue dapibus odio, in cursus
nisl consectetur quis. Aenean volutpat volutpat vehicula. Phasellus tempor purus sed
commodo posuere.</div>
</body>
</html>
<!-- figure 14.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.indent { text-indent: 3em; }
p.outdent { text-indent: -3em; margin-left: 3em; }
</style>
</head>
<body>
<h2>Text indent and outdent</h2>
<p>Phasellus sagittis, ipsum sed laoreet fermentum, lacus velit tincidunt lacus, ut
dignissim ipsum tellus nec mi. 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. Praesent feugiat varius urna, id
convallis turpis efficitur vel. Integer et ipsum metus. Pellentesque id lectus
rutrum ante bibendum facilisis ut a neque. </p>
<p class="one">Phasellus sagittis, ipsum sed laoreet fermentum, lacus velit tincidunt
lacus, ut dignissim ipsum tellus nec mi. 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. Praesent feugiat varius urna, id convallis turpis efficitur
vel. Integer et ipsum metus. Pellentesque id lectus rutrum ante
bibendum facilisis ut a neque. </p>
<p class="one">Phasellus sagittis, ipsum sed laoreet fermentum, lacus velit tincidunt
lacus, ut dignissim ipsum tellus nec mi. 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. Praesent feugiat varius urna, id convallis turpis efficitur
vel. Integer et ipsum metus. Pellentesque id lectus rutrum ante
bibendum facilisis ut a neque. </p>
</body>
</html>
<!-- figure 14.13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.letter04em { letter-spacing: 0.4em; }
.letter-05em { letter-spacing: -0.05em; }
.word15px { word-spacing: 15px; }
.word3em { word-spacing: 3em; }
.kerningnormal { font-kerning: normal; }
.kerningnone { font-kerning: none; }
</style>
</head>
<body>
<h3>Text Spacing</h3>
<p>This paragraph has default spacing</p>
<p class="letter04em">This paragraph has 0.4em letter-spacing</p>
<p class="letter-05em">This paragraph has -0.05em letter-spacing</p>
<p class="word15px">This paragraph has 15px word-spacing</p>
<p class="word5em">This paragraph has 5em word-spacing</p>
<p class="kerningnone">AWFULLY AVANT GARDE - normal</p>
<p class="kerningnormal">AWFULLY AVANT GARDE - none</p>
</body>
</html>
<!-- figure 14.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div.unit-less { line-height: 1.2; }
div.unit { line-height: 1.2em; }
</style>
</head>
<body>
<div class="unit-less">
<h2>Line-height is applied to the text in this element using unit-less values
(i.e., just numbers)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id gravida justo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Maecenas magna sapien, sodales in pretium at, semper id magna. </p>
</div>
<div class="unit-less">
<h2>Line-height is applied to the text in this element using em unit, which is a
relative unit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id gravida justo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Maecenas magna sapien, sodales in pretium at, semper id magna. </p>
</div>
</body>
</html>
<!-- figure 14.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
h1 { text-transform: uppercase; }
h2 { text-transform: capitalize; }
p.paragraph { text-transform: lowercase; }
</style>
</head>
<body>
<h1>text heading</h1>
<h2>text subheading</h2>
<p class="paragraph">THIS IS ALL-UPPERCASE TEXT THAT IS CONVERTED TO ALL-LOWERCASE.
</p>
</body>
</html>
<!-- figure 14.19 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.first { direction: ltr; }
.second { direction: rtl; }
.third { direction: rtl; }
.fourth { direction: ltr; unicode-bidi: bidi-override; }
</style>
</head>
<body>
<h2>Text directionality</h2>
<p>This text uses the default direction value of ltr.</p>
<p class="first">This text uses specified direction value of ltr.</p>
<p class="second">This text uses specified direction value of rtl.</p>
<p>الحياة هي سر W3C!</p>
<p class="third">الحياة هي سر W3C!</p>
<p class="fourth">This text uses specified unicode-bidi and direction value of
rtl.</p>
</body>
</html>
<!-- figure 14.21 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { margin-left: 20px; }
table { border-collapse: collapse; }
td, th { padding: 5px; border: 1px solid black; }
td { width: 70px; height: 120px; vertical-align: top; }
th { text-align: left; border-bottom: 2px solid black; }
tr.dkgrey { background-color: darkgrey; }
.horizontal-tb { writing-mode: horizontal-tb; }
.vertical-lr { writing-mode: vertical-lr; }
.vertical-rl { writing-mode: vertical-rl; }
</style>
</head>
<body>
<h2>Writing Modes</h2>
<table>
<tr class="dkgrey">
<th>Value</th>
<th>Horizontal script</th>
<th>Vertical script</th>
<th>Mixed script</th>
</tr>
<tr>
<td>horizontal-tb</td>
<td class="horizontal-tb">Introduction to Writing Modes</td>
<td class="horizontal-tb">書き込みモードの概要</td>
<td class="horizontal-tb">書き込みモード2016の概要</td>
</tr>
<tr>
<td>vertical-lr</td>
<td class="vertical-lr">Introduction to Writing Modes</td>
<td class="vertical-lr">書き込みモードの概要</td>
<td class="vertical-lr">書き込みモード2016の概要</td>
</tr>
<tr>
<td>vertical-rl</td>
<td class="vertical-rl">Introduction to Writing Modes</td>
<td class="vertical-rl">書き込みモードの概要</td>
<td class="vertical-rl">書き込みモード2016の概要</td>
</tr>
</table>
</body>
</html>
<!-- figure 14.25 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.date { writing-mode: vertical-lr; text-combine-upright: digits2; }
</style>
</head>
<body>
<h3>Text combine upright</h3>
<p class="date">日付は12月31日です</p>
</body>
</html>
<!-- figure 14.27 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.under { text-decoration: underline; }
p.through { text-decoration: line-through solid red; }
p.over { text-decoration: overline blue wavy; }
p.blink { text-decoration: blink; }
p.overunder { text-decoration: overline underline double red; }
p.none { text-decoration: none; }
</style>
</head>
<body>
<h3>Text decoration</h3>
<p>This pararaph has no decoration</p>
<p class="under">This paragraph has underline decoration</p>
<p class="through">This paragraph has line-through decoration</p>
<p class="over">This paragraph has overline decoration</p>
<p class="blink">This paragraph has blink decoration</p>
<p class="overunder">This paragraph has overline and underline decoration</p>
<p><a href="bbc.co.uk" class="none">This link has no underline decoration</a></p>
</body>
</html>
<!-- figure 14.29 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
text-decoration-line: underline;
text-decoration-skip: ink;
}
</style>
</head>
<body>
<h3>Text decoration skip</h3>
<p>In this text, the underline decoration skips all descenders.</p>
</body>
</html>
<!-- figure 14.31 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
h1 { text-decoration: underline; text-underline-position: alphabetic; }
</style>
</head>
<body>
<h1>Underlying Psychology</h1>
<p>Phasellus sagittis, ipsum sed laoreet fermentum, lacus velit tincidunt lacus,
ut...</p>
</body>
</html>
<!-- figure 14.33 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
em:lang(zh) {
font-style: normal;
-webkit-text-emphasis: dot red;
-webkit-text-emphasis-position: over;
}
</style>
</head>
<body>
<h3>Text emphasis</h3>
<p>"The Red Dragon is alive again!" in <em>Traditional Chinese</em> is:
<span lang="zh">红龙<em>是活</em>过来了！</span></p>
</body>
</html>
<!-- figure 14.35 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { font-size: 24px; }
.shadow { text-shadow: 1px 1px 2px black, 0 0 1em grey; color: black; }
</style>
</head>
<body>
<h1>Text shadow</h1>
<p class="no_shadow">em ipsum dolor sit amet, consectetur adipiscing elit. Donec in
ipsum at ex ullamcorper pharetra at at dolor. Integer gravida sollicitudin
consectetur. Etiam fringilla, ligula at tincidunt interdum, metus neque
auctor tellus, feugiat sagittis elit quam et elit. </p>
<p class="shadow">em ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum
at ex ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur.
Etiam fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. </p>
</body>
</html>
<!-- figure 14.37 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.button {
font-family: Arial;
font-size: 30px;
font-weight: bold;
width: 67px;
padding: 5px 40px 5px 40px;
border: none;
border-radius: 4px;
background-color: green;
color: black;
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<p class="button">Start</p>
</body>
</html>
<!-- figure 14.39 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Times,"Times New Roman" ;}
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; }
p.author { font-family: "Courier New", Courier, monospace; }
p.author::before { content: "<<"; color: red; font-weight: bold }
p.author::after { content: ">>"; color: red; font-weight: bold }
p.cap::first-line { text-transform: uppercase }
p.first::first-letter { color: red; font-size: 150%; }
p.first::-moz-selection { color: gold; background-color: red%; }
p.first::selection { color: gold; background-color: red%; }
</style>
</head>
<body>
<h3>Pseudo-elements World</h3>
<p class="author">by Wu Knows</p>
<p class="cap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="first">Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Maecenas magna sapien, sodales in pretium at, semper id magna.
In pretium placerat euismod. Vivamus quam risus, finibus id placerat vitae, maximus
ut urna. Mauris in orci arcu. Integer sed enim auctor, tempor dolor ac, auctor eros.
Etiam pharetra eleifend felis, quis rutrum dui facilisis in.</p>
</body>
</html>
<!-- figure 14.41 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { counter-rest: section; }
h3::before { counter-increment: section;
content: "section " counter(Section) ": "; }
.intro { quotes: "^" "^" }
.intro::before { content: open-quote; }
.intro::after { content: close-quote; }
a::before {
content: url(images/favicon.ico) " TEDCO ";
font: x-small Arial, sans-serif;
color: brown;
}
a::after { content: " (" attr(id) ")": }
</style>
</head>
<body>
<h2>The content property</h2>
<p class="quote">There is nothing fundamentally wrong with building on the
contributions of others.</p>
<h3>Introduction</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quam sapien,
bibendum in enim quis, iaculis vehicula tortor. Proin luctus dapibus eleifend. Donec
sed mollis erat, at elementum libero.</p>
<h3>Discussion</h3>
<p>Duis eget magna ut nisi sollicitudin blandit. Cras nec arcu ipsum. Curabitur
placerat nec ex vel posuere. Vivamus lacus mi, lacinia sed metus et, auctor egestas
dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<h3>Conclusion</h3>
<p>Cras purus libero, feugiat ut luctus sed, aliquam in libero. Sed non aliquet
mauris. Donec pretium, mi et euismod fermentum, sem ex pharetra metus, in suscipit
massa erat at odio. </p>
<a id="That's it folks!" href="http://www.example.com">More information</a>
</body>
</html>
<!-- figure 14.43 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
a:link { color: blue; }
a:visited { purple: blue; }
a:hover { font-weight: bold; color: red; }
a:active { color: green; }
</style>
</head>
<body>
<h3>News Outlets</h3>
<div>
<p><a href="">BBC</a></p>
<p><a href="">ITV</a></p>
<p><a href="">Channel 4</a></p>
<p><a href="">Channel 5</a></p>
<p><a href="">ABC</a></p>
<p><a href="">CBS</a></p>
<p><a href="">CNN</a></p>
</div>
</body>
</html>
<!-- figure 14.45 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#extrainfo { display: none; }
#extrainfo:target { display: block; }
</style>
</head>
<body>
<h3>:target</h3>
<p><a href="#extrainfo">Extra Information</a></p>
<div id="extrainfo">
<form>
<p>Please provide additional information:<br>
<textarea rows="4" cols="5" name="info" id="info"></textarea></p>
</form>
</div>
</body>
</html>
<!-- figure 14.47 & figure 14.48 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#window {
width: 100%;
height: 100%;
background-color: regba(0, 0, 0, 0.7);
position: fixed;
left: 0;
top: 0;
display: none;
}
.box {
width: 300px;
height: 300px;
padding: 15px 20px 0 20px;
position: relative;
top: 25%;
margin: 0 auto;
font-size: 24px;
font-weight: bold;
background-color: white;
text-align: center;
border: 1px solid black;
box-shadow: inset 0 0 1em 0.5em blue, 0 0 1em 0.5em orange;
}
.close {
text-decoration: none;
font-size: 22px;
font-weight: bold;
color: white;
background-color: orange;
border: 1px solid black;
border-radius: 50%;
width: 36px; height: 2px;
padding: 7px 1px 30px 2px;
position: absolute;
top: -16px;
left: 317px;
}
.close:hover { color: black; cursor: pointer; }
#window:target { display: block; }
</style>
</head>
<body>
<h2>Lightbox with :target</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id arcu ut nunc cursus
rutrum sit amet id eros. Nunc iaculis risus lacus, nec malesuada sapien placerat sed.
Maecenas elit urna, euismod at ipsum ut, sagittis fermentum elit. Donec blandit mi
mauris, at iaculis diam gravida sit amet. Nulla vestibulum pulvinar arcu hendrerit
molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut sit amet
magna consectetur, sagittis purus id, tincidunt velit. Donec sed nunc vel metus
consectetur vulputate. Duis semper lacinia posuere. Ut vel tristique mi. Nullam tempor
erat ac vulputate sagittis. Etiam in libero vehicula, venenatis mauris non, faucibus
enim. </p>
<p class="link"><a href="#window">Click to see a lightbox</a></p>
<p>Ut non risus vel ex tincidunt lobortis ut auctor diam. Vestibulum id leo venenatis
nisi posuere bibendum. Nulla tempor eget erat a volutpat. Maecenas at mollis neque, et
ornare risus. Nam sed orci rhoncus, posuere erat in, venenatis nibh. Sed rhoncus elit
et imperdiet semper. Integer massa eros, scelerisque ac arcu et, rhoncus blandit
metus. Nam sit amet dignissim magna. Suspendisse rhoncus porttitor erat in efficitur.
Vestibulum eget ligula sodales eros porta euismod. Curabitur suscipit nulla vitae nisi
volutpat, non sagittis justo sagittis. Nullam et accumsan enim, at aliquet massa. In
nec porttitor massa.</p>
<p>Sed at enim erat. Nulla placerat odio vel finibus pulvinar. In varius, nulla vitae
euismod pharetra, justo ipsum mattis felis, cursus imperdiet dolor quam a arcu. Ut
feugiat varius nunc, nec aliquet nunc porta id. Curabitur id rhoncus lectus, viverra
auctor tellus. In hac habitasse platea dictumst. Aenean sollicitudin augue sed aliquam
feugiat. In dolor justo, blandit id ultricies ac, finibus a diam. </p>
<p>Morbi eget dapibus erat, id pharetra purus. Quisque cursus sed metus ac hendrerit.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Phasellus vitae pretium urna, nec rutrum nulla. Phasellus non sollicitudin elit.
Curabitur id varius felis, vitae vulputate justo. Praesent eget ex non lacus vulputate
sollicitudin. Curabitur quis orci tincidunt, mollis diam et, ullamcorper nisl. Ut
dictum magna at sapien gravida, id egestas est bibendum.</p>
<div class="box">
<div class="window">
<a href="#" class="close">X</a>
<p>This is a basic example of a lightbox display.</p>
<p>This window can contain any media object type, such as image or video.</p>
<p>(Clicking the X closes it.)</p>
</div>
</div>
</body>
</html>
<!-- figure 14.51 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { padding: 5px; }
p:not(.middle) { background-color: pink; }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit.</p>
<p class="middle">Integer suscipit justo fermentum, elementum purus id, tempus diam.
Vestibulum vehicula tristique consectetur. Cras imperdiet, libero sit amet pharetra
cursus, sapien dui vehicula diam, luctus facilisis justo tellus et massa.</p>
<p>Donec et porta dolor, in sollicitudin nisi. Morbi vulputate augue ac maximus
cursus. Suspendisse bibendum, ipsum nec tincidunt gravida, velit turpis condimentum m
etus, et laoreet dui sem a ipsum. Mauris bibendum turpis a lectus euismod scelerisque.
</p>
</body>
</html>
<!-- figure 14.53 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
height: 75px;
padding: 5px;
background-color: pink;
}
p:empty { background-color: grey; }
</style>
</head>
<body>
<h2>:empty</h2>
<p>Integer suscipit justo fermentum, elementum purus id, tempus diam. Vestibulum
vehicula tristique consectetur. Cras imperdiet, libero sit amet pharetra cursus,
sapien dui vehicula diam, luctus facilisis justo tellus et massa.</p>
<p><!-- This element is empty because comment is not considered content --></p>
<p><!-- This element is not empty because it contains white space --></p>
</body>
</html>
<!-- figure 14.55 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ruby { ruby-position: under; }
</style>
</head>
<body>
<h3>Ruby text positon</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 14.57 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.start { ruby-align: start; }
.center { ruby-align: center; }
.around { ruby-align: space-around; }
.between { ruby-align: space-between; }
</style>
</head>
<body>
<h3>Ruby text alignment</h3>
<ruby class="start"><rb>World Wide Web</rb><rt>W W W</rt></ruby><br>
<ruby class="center"><rb>World Wide Web</rb><rt>W W W</rt></ruby><br>
<ruby class="around"><rb>World Wide Web</rb><rt>W W W</rt></ruby><br>
<ruby class="between"><rb>World Wide Web</rb><rt>W W W</rt></ruby>
</body>
</html>
<!-- figure 14.59 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.ruby { display: ruby; }
.rb { display: ruby-base; }
.rt { display: ruby-text; }
.rtb { display: ruby-base-container; }
.rtcc { display: ruby-text-container; }
</style>
</head>
<body>
<h3>Ruby display values</h3>
<div>
<span><span>World Wide Web</span></span>
<span><span>WWW</span></span>
</div>
<br>
<div class="ruby">
<span class="rbc"><span class="rb">World Wide Web</span></span>
<span class="rtc"><span class="rt">W W W</span></span>
</div>
</body>
</html>
Chapter 15
Click and drag to scroll left and right to view all 22 figures.
<!-- figure 15.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.large { width: 480px; height: 480px; }
.medium { width: 240px; height: 240px; }
.small { width: 120px; height: 120px; }
</style>
</head>
<body>
<h1>Image sizing</h1>
<figure>
<img class="small" src="images/beach.jpg" alt="a clean_beach">
<img class="medium" src="images/beach.jpg" alt="a clean_beach">
<img class="large" src="images/beach.jpg" alt="a clean_beach">
</figure>
</body>
</html>
<!-- figure 15.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
img { image-rendering: auto; }
</style>
</head>
<body>
<h2>Image-rendering</h2>
<img src="images/pixel_stars.png" width="75" height="75">
</body>
</html>
<!-- figure 15.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#size { width: 400px; height: 268px; }
@media (min-width: 960px) { #size { width: 800px; height: 536px; } }
@media (min-width: 1200px) { #size { width: 1024px; height: 686px; } }
</style>
</head>
<body>
<picture>
<source media="(min-width: 1200px)" srcset="images/speech-fullshot.jpg">
<source media="(min-width: 960px)" srcset="images/speech-midshot.jpg">
<img src="images/speech-closeshot.jpg" alt="The president's speech" id="size">
</picture>
</body>
</html>
<!-- figure 15.6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<picture>
<style scoped media="(min-width: 960px)">
#size { width: 800px; height: 536px; }
</style>
<style scoped media="(min-width: 1200px)">
#size { width: 1024px; height: 686px; }
</style>
<source media="(min-width: 1200px)" srcset="images/speech-fullshot.jpg">
<source media="(min-width: 960px)" srcset="images/speech-midshot.jpg">
<img src="mages/speech-closeshot.jpg" width="400" height="268" id="size"
alt="The president's speech">
</picture>
</body>
</html>
<!-- figure 15.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.clipped {
-webkit-clip-path: circle(30% at 50% 50%);
clip-path: circle(30% at 50% 50%);
}
</style>
</head>
<body>
<h2>Image clipping</h2>
<img class="clipped" src="images/yacht.jpg">
</body>
</html>
<!-- figure 15.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
img {
width: 240px;
height: 240px;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h3>Horizontal image centering</h3>
<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. Cras vehicula lobortis justo.
Ut congue dapibus odio, in cursus nisl consectetur quis. Aenean volutpat volutpat
vehicula. Phasellus tempor purus sed commodo posuere.</p>
<img src="images/beach.jpg" alt="clean_beach">
<p>Nulla tincidunt ornare nisl. Morbi hendrerit magna libero, ac tempus risus dapibus
pretium. Suspendisse venenatis scelerisque nibh sed gravida. Quisque aliquet mauris
neque, vel sollicitudin nulla bibendum non.</p>
</body>
</html>
<!-- figure 15.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
img {
width: 200px;
height: 136px;
border: 1px solid #000;
background-color: grey;
margin-right: 5px;
}
.object-position { object-position: 60px 30px; }
</style>
</head>
<body>
<h3>Object positioning </h3>
<img src="images/buttercup.png" alt="buttercup flower">
<img class="object-position" src="images/buttercup.png" alt="buttercup flower">
</body>
</html>
<!-- figure 15.13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
img {
width: 200px;
height: 70px;
object-fit: contain;
}
</style>
</head>
<body>
<h3>Object positioning</h3>
<img src="images/yacht.jpg">
</body>
</html>
<!-- figure 15.16 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { background-image: url("images/wood.png"); padding: 15px; }
</style>
</head>
<body>
<h2>Background image</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. 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 15.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
background-image: url("images/wood.png");
padding: 15px;
}
</style>
</head>
<body>
<h2>Background image</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. 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 15.21 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
background-image: url("images/club_64.jpg");
background-repeat: repeat-x;
padding: 15px;
}
</style>
</head>
<body>
<h2>Background-repeat (repeat-x)</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. 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 15.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
background-image: url("images/club_64.jpg");
background-repeat: space;
padding: 15px;
}
h1, p { background-color: #988670; color: #fff; padding: 10px; }
</style>
</head>
<body>
<h2>Background-repeat (space)</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. 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 15.27 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { padding: 20px; }
div {
border: 10px solid grey;
padding: 20px;
background-image: url("images/club_32.jpg");
background-repeat: repeat-x;
}
#border { background-origin: border-box; }
#padding { background-origin: padding-box; }
#content { background-origin: content-box; }
</style>
</head>
<body>
<div class="border">
<h1>Background-origin (border-box)</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis.</p>
</div>
<br>
<div class="padding">
<h1>Background-origin (padding-box)</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis.</p>
</div>
<br>
<div class="content">
<h1>Background-origin (content-box)</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis.</p>
</div>
</body>
</html>
<!-- figure 15.29 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
border: 10px dotted black;
font-family: 10px;
font-family: lightpink;
}
div#one { background-clip:border-box; }
div#two { background-clip:padding-box; }
div#three { background-clip:content-box; }
</style>
</head>
<body>
<div class="one">
<h2>border-box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis.</p>
</div>
<br>
<div class="two">
<h2>padding-box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis.</p>
</div>
<br>
<div class="three">
<h2>content-box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis.</p>
</div>
</body>
</html>
<!-- figure 15.31 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
background-image: url("images/rose_transparent.png");
background-repeat: repeat-x;
background-size: 80px 80px;
}
h1, h2, p { text-align: center; }
</style>
</head>
<body>
<h1>Background-size (80x80px)</h1>
<p>Background image size is resized to 80x80px</p>
<br>
<h2>Actual size of image</h2>
<p>Below is the actual size of the image, which is 300x265px</p>
<p><img src="images/rose_transparent.png" alt="peach roses"></p>
</body>
</html>
<!-- figure 15.33 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
width: 800px;
height: 350px;
border: 1ps solid #000;
background-image: url("images/yacht.jpg");
background-repeat: no-repeat;
}
.cover { background-size: cover; }
</style>
</head>
<body>
<h2>Background-size (cover)</h2>
<div class="cover"></div>
</body>
</html>
<!-- figure 15.36 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { padding: 0 20px; }
div.multi {
width: 800px;
height: 400px;
background-image: url("images/rose_transparent.png"),
url("images/grey_wall.png");
background-repeat: repeat-x, no-repeat;
background-size: 60px 60px, cover;
}
div.inner {
width: 500px;
padding: 100px 150px;
color: #F9F0B5;
}
h2 { text-align: center; }
</style>
</head>
<body>
<h1>Multiple background images</h1>
<div multi="en-US">
<div inner="en-US">
<h2>Peach Roses</h2>
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.
Cras vehicula lobortis justo. Ut congue dapibus odio, in cursus nisl
consectetur quis. Aenean volutpat volutpat vehicula. Phasellus tempor purus sed
commodo posuere.
</div>
</div>
</body>
</html>
<!-- figure 15.38 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
background-image: url("images/club_64.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
padding: 15px;
}
</style>
</head>
<body>
<h1>Background-attachment</h1>
<h3>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. Cras vehicula lobortis justo.
Ut congue dapibus odio, in cursus nisl consectetur quis. Aenean volutpat volutpat
vehicula. Phasellus tempor purus sed commodo posuere.</h3>
</body>
</html>
<!-- figure 15.41 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
background-color: url("images/rose_transparent.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
padding: 0 15px;
}
</style>
</head>
<body>
<h1>Background-position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis. Pellentesque vitae metus bibendum, tincidunt
turpis sed, dignissim erat. In tincidunt nunc gravida massa blandit blandit. Nunc
cursus, diam sit amet pharetra cursus, diam felis commodo nibh, at blandit ligula
leo eu quam. Cras cursus scelerisque nibh, a iaculis lorem tincidunt vel. Phasellus
sapien tellus, fermentum in consequat ut, vehicula hendrerit tellus. Nullam
lobortis congue elementum. Maecenas vel metus bibendum, consectetur nibh id,
sollicitudin urna. Phasellus scelerisque felis vel iaculis malesuada. Nunc pulvinar
magna sed placerat eleifend. In a erat hendrerit, convallis nisi eu, ultrices justo.
Suspendisse potenti. </p>
</body>
</html>
<!-- figure 15.43 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
background-color: url("images/rose_transparent.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
padding: 0 15px;
}
</style>
</head>
<body>
<h1>Background-position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis. Pellentesque vitae metus bibendum, tincidunt
turpis sed, dignissim erat. In tincidunt nunc gravida massa blandit blandit. Nunc
cursus, diam sit amet pharetra cursus, diam felis commodo nibh, at blandit ligula
leo eu quam. Cras cursus scelerisque nibh, a iaculis lorem tincidunt vel. Phasellus
sapien tellus, fermentum in consequat ut, vehicula hendrerit tellus. Nullam
lobortis congue elementum. Maecenas vel metus bibendum, consectetur nibh id,
sollicitudin urna. Phasellus scelerisque felis vel iaculis malesuada. Nunc pulvinar
magna sed placerat eleifend. In a erat hendrerit, convallis nisi eu, ultrices justo.
Suspendisse potenti. </p>
</body>
</html>
<!-- figure 15.44 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
background: lightgrey url("images/rose_transparent_full.png")
right bottom/80px no-repeat padding-box;
border: 10px dotted black;
padding: 20px;
}
</style>
</head>
<body>
<h1>Background-position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. Maecenas imperdiet rutrum felis dapibus tristique.
Nullam consequat, tortor ut vestibulum dictum, enim enim convallis leo, ut
sollicitudin mauris urna ac turpis. Pellentesque vitae metus bibendum, tincidunt
turpis sed, dignissim erat. In tincidunt nunc gravida massa blandit blandit. Nunc
cursus, diam sit amet pharetra cursus, diam felis commodo nibh, at blandit ligula
leo eu quam. Cras cursus scelerisque nibh, a iaculis lorem tincidunt vel. Phasellus
sapien tellus, fermentum in consequat ut, vehicula hendrerit tellus. Nullam
lobortis congue elementum. Maecenas vel metus bibendum, consectetur nibh id,
sollicitudin urna. Phasellus scelerisque felis vel iaculis malesuada. Nunc pulvinar
magna sed placerat eleifend. In a erat hendrerit, convallis nisi eu, ultrices justo.
Suspendisse potenti. </p>
</body>
</html>
<!-- figure 15.46 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div#multi {
width: 800px;
height: 400px;
background: url("images/rose_transparent.png") repeat-x top left/60px 60px,
url("images/grey_wall.png"), no-repeat, top left/cover;
}
div#inner {
width: 500px;
padding: 100px 150px;
color: #F9F0B5;
}
h2 { text-align: center; }
</style>
</head>
<body>
<h2>Multiple background images</h2>
<div class="multi">
<div class="inner">
<h2>Peach Roses</h2>
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.
Cras vehicula lobortis justo. Ut congue dapibus odio, in cursus nisl
consectetur quis. Aenean volutpat volutpat vehicula. Phasellus tempor purus sed
commodo posuere.
</div>
</div>
</body>
</html>
Chapter 16
Click and drag to scroll left and right to view all 11 figures.
<!-- figure 16.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
a.button {
background-image: url("images/buttons.png");
display: inline-block;
width: 220px;
}
a#register {
background-position: 0px 0px;
height: 60px;
}
a#register:hover {
background-position: 0px -60px;
height: 60px;
}
a#register:active {
background-position: 0px -120px;
height: 50px;
}
</style>
</head>
<body>
<a class="button" id="register"></a>
</body>
</html>
<!-- figure 16.4 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.part1 {
background-image: url("images/buttons.png");
width: 220px;
height: 60px;
background-position: 0 0;
}
#register:hover { background-position: 0 -60px; height: 60px; }
#register:active { background-position: 0 -120px; height: 50px; }
</style>
</head>
<body>
<form>
<input type="image" name="regButton" id="register" alt="submit form"
src="images/transparent_image.png">
</form>
</body>
</html>
<!-- figure 16.6 & figure 16.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div { height: 50px; width: 600px; color: white; font-size: 24px; padding: 10px; }
#grad1 { background: linear-gradient(orange, black); }
#grad2 { background: linear-gradient(to left, #ffa500, black); }
#grad3 { background: linear-gradient( to right, rgb(255,165,0), rgba(0,0, 0,0.1)); }
#grad4 { background: linear-gradient(to right, hsl(39,100%,50%), hsla(0,0%, 0%,0.1)
); }
#grad5 { background: linear-gradient(45deg, orange 50%, black); }
#grad6 { background: linear-gradient(to right, red, transparent 70%, blue); }
#grad7 { background: linear-gradient(to right, grey 15%, orange 15%, orange 85%,
grey 85%); }
#grad8 { background: linear-gradient(to top right, red, orange, yellow, green,
blue, indigo, violet); }
</style>
</head>
<body>
<h1>Linear Gradient</h1>
<div id="grad1">(orange, black)</div><br>
<div id="grad2">(to left, orange, black)</div><br>
<div id="grad3">(to right, #ffa500, rgb(0,0,0))</div><br>
<div id="grad4">(to right, orange, rgba(0,0,0,0.1))</div><br>
<div id="grad5">(45deg, orange 50%, black)</div><br>
<div id="grad6">( to right, red, transparent 70%, blue)</div><br>
<div id="grad7">(to right, grey 15%, orange 15%, orange 85%, grey 85%)</div><br>
<div id="grad8">(to top right, red, orange, yellow, green, blue, indigo, violet)</div>
</body>
</html>
<!-- figure 16.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div { height: 50px; width: 600px; padding: 10px; font-size: 24px; }
span { background-color: grey; color: white; }
#grad1 { background: repeating-linear-gradient(180deg, grey, grey 7%, black 15%); }
#grad2 { background: repeating-linear-gradient(45deg, black 20px, white 50px); }
#grad3 { background: repeating-linear-gradient(-45deg, transparent, black 20px,
white 50px); }
</style>
</head>
<body>
<h1>Repeating linear gradient</h1>
<div id="grad1"><span>(180deg, grey, grey 7%, black 15%)</span></div><br>
<div id="grad2"><span>(45deg, black 20px, white 50px)</span></div><br>
<div id="grad3"><span>(-45deg, transparent, black 20px, white 50px)</span></div>
</body>
</html>
<!-- figure 16.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div { height: 70px; width: 650px; black; text-align: center; font-size: 24px; }
#gradient1 { background: radial-gradient(circle farthest-corner at 100% 0%, yellow,
darkorange 20%); }
#gradient2 { background: radial-gradient(circle farthest-side at 50% 50%, yellow,
darkorange 20%); }
#gradient3 { background: radial-gradient(circle closest-side at 50% 50%, yellow,
darkorange 20%); }
#gradient4 { background: radial-gradient(ellipse farthest-corner at 50% 50%,
yellow, darkorange 20%); }
#gradient5 { background: radial-gradient(circle farthest-side at top right, yellow,
darkorange 20%); }
#gradient6 { background: radial-gradient(circle farthest-side at 50% 50%, yellow,
darkorange, blue, grey); }
#gradient7 { background: radial-gradient(circle closest-side at 50% 50%, yellow,
darkorange, blue, grey); }
#gradient8 { background: radial-gradient(35px 35px at 50% 50%, yellow, darkorange,
blue, violet); }
</style>
</head>
<body>
<h1>Radial Gradients</h1>
<div id="gradient1">(circle farthest-corner at 100% 0%, yellow,
darkorange 20%)</div><br>
<div id="gradient2">(circle farthest-side at 50% 50%, yellow,
darkorange 20%)</div><br>
<div id="gradient3">(circle closest-side at 50% 50%, yellow, darkorange 20%)</div><br>
<div id="gradient4">(ellipse farthest-corner at 50% 50%, yellow,
darkorange 20%)</div><br>
<div id="gradient5">(circle farthest-side at top right, yellow 20%,
darkorange 20%)</div><br>
<div id="gradient6">(circle farthest-side at 50% 50%, yellow, darkorange, blue,
grey)</div><br>
<div id="gradient7">(circle closest-side at 50% 50%, yellow, darkorange, blue,
grey)</div><br>
<div id="gradient8">(35px 35px at 50% 50%, yellow, darkorange, blue, violet)</div>
</body>
</html>
<!-- figure 16.14 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#gradient {
width: 800px; height: 400px; text-align: center; font-size: 24px;
background: radial-gradient(ellipse farthest-corner at 100% 0%, yellow 5%,
darkorange);
}
</style>
</head>
<body>
<h1>Radial gradient as background</h1>
<div id="gradient">
(ellipse farthest-corner at 100% 0%, yellow 5%, darkorange)
</div>
</body>
</html>
<!-- figure 16.16 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#outerbox {
width: 1000px; border: 1px solid pink; background-color: rgba(255,192,206,0.3);
}
#gradient {
height: 500px;
width: 250px;
color: black;
text-align: center;
font-size: 24px;
background: repeating-radial-gradient(circle farthest-corner at 100% 0%,
transparent, rgba(255,192,203,0.4) 40px, rgba(255,255,255,0.2) 50px);
}
</style>
</head>
<body>
<h1>Repeating radial gradient</h1>
<div id="outerbox">
<div id="gradient">(circle farthest-corner at 100% 0%, transparent,
rgba(255,192,203,0.3) 40px, rgba(255,255,255,0.2) 50px)
</div>
</div>
</body>
</html>
<!-- figure 16.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
img {
-webkit-filter: hue-rotate(90deg) contrast(190%);
filter: hue-rotate(90deg) contrast(190%);
}
</style>
</head>
<body>
<h1>Filter</h1>
<img src="images/yacht.jpg" alt="a yacht race">
</body>
</html>
<!-- figure 16.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
width: 640px; height: 640px;
background-size: 640px 640px;
background-repeat: no-repeat;
background-image: linear-gradient(green, transparent),
linear-gradient(90deg, skyblue, transparent),
linear-gradient(-90deg, red, transparent),
url("images/rose_transparent_full.png"),
url("images/grey_wall.png"),
url("images/flora.png");
background-blend-mode: overlay, multiply, screen, difference;
}
</style>
</head>
<body>
<h1>Filter</h1>
<div></div>
</body>
</html>
<!-- figure 16.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
background-image: url("images/yacht_400.png");
background-repeat: no-repeat;
text-align: center;
width: 400px; height: 268px;
}
img { mix-blend-mode: overlay; }
</style>
</head>
<body>
<img src="images/rose_transparent_full.png">
</body>
</html>
<!-- figure 16.27 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div { position: absolute; left: 0; top: 0; }
img { mix-blend-mode: difference; }
.three { isolation: isolate; }
</style>
</head>
<body>
<div class="one"><img src="images/yacht_400.png"></div>
<div class="two"><img src="images/beach_400.png"></div>
<div class="three"><img src="images/rose_transparent_full.png"></div>
</body>
</html>
Chapter 17
Click and drag to scroll left and right to view all 18 figures.
<!-- figure 17.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ol { list-style-type: lower-latin; }
</style>
</head>
<body>
<h3>Shopping List</h3>
<ol>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Fruits and juices</li>
<li>Rice and pasta</li>
<li>Butter</li>
</ol>
</body>
</html>
<!-- figure 17.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ul { list-style-image: url("images/oval.png"); }
li { margin: 10px; }
</style>
</head>
<body>
<h3>Shopping List</h3>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Fruits and juices</li>
<li>Rice and pasta</li>
<li>Butter</li>
</ul>
</body>
</html>
<!-- figure 17.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ul { width: 475px; }
ul.one { list-style-position: inside; }
ul.two { list-style-position: outside; }
</style>
</head>
<body>
<h3>Marker outside</h3>
<ul class="one">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent maximus
iaculis lacus a eleifend.</li>
<li>Nunc accumsan euismod leo a dapibus. Mauris id condimentum velit, a lacinia
nisi. Quisque varius orci accumsan nibh feugiat.</li>
</ul>
<h3>Marker inside</h3>
<ul class="two">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent maximus
iaculis lacus a eleifend.</li>
<li>Nunc accumsan euismod leo a dapibus. Mauris id condimentum velit, a lacinia
nisi. Quisque varius orci accumsan nibh feugiat.</li>
</ul>
</body>
</html>
<!-- figure 17.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ul { width: 475px; }
ul { list-style: square inside; }
</style>
</head>
<body>
<h3>List</h3>
<ul class="illuminations">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent maximus
iaculis lacus a eleifend.</li>
<li>Nunc accumsan euismod leo a dapibus. Mauris id condimentum velit, a lacinia
nisi. Quisque varius orci accumsan nibh feugiat. </li>
</ul>
</body>
</html>
<!-- figure 17.9 & figure 17.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Arial; font-weight: bold; padding-left: 30px; }
ol {
width: 700px;
padding: 20px;
list-style-position: inside;
background-image: url("images/beach.jpg");
border-radius: 20px;
box-shadow: inset 0 0 1em 0.5em orange, 0 0 1em 0.5em blue;
}
span { float: right; }
li:nth-child(2n+1) { border-style: solid; }
ol li {
padding: 5px 100px 5px 5px;
margin: 0 10px;
background-color: #cce5ff;
border-style: none solid none solid; border-color: #b3d9ff;
}
</style>
</head>
<body>
<h1>Menu List</h1>
<ol>
<li>Full Baby Chicken Grill . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . .
<span>3.50</span></li>
<li>Chicken Tikka (Boneless) . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . .
<span>3.00</span></li>
<li>Lamb Tikka (Boneless) . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . .
<span>3.00</span></li>
<li>Sheek Kebab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . .
<span>0.60</span></li>
<li>Quarter Tandoori Chicken . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . .
<span>1.50</span></li>
</ol>
</body>
</html>
<!-- figure 17.12 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
dt { background-color: pink; font-weight: bold; }
</style>
</head>
<body>
<h2>Web Technologies</h2>
<dl>
<dt>Internet</dt>
<dd>The Internet is a global network of interconnected computer networks that
comprises millions of different types of networks linked through various types
of connection technologies, such as fibre optic cable and wireless. </dd>
<dt>Web</dt>
<dd>The Web, also known as the World Wide Web (WWW), is an application that
runs on the Internet that links HTML documents located on different powerful
computers called Web servers.</dd>
</dl>
</body>
</html>
<!-- figure 17.14 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { padding: 10px; }
.tolist { display: list-item; }
</style>
</head>
<body>
<h2>List-item display value</h2>
<div>
<span>This is the content of an inline element.</span>
<span>This is the content of another inline element.</span>
</div>
<br>
<div>
<span class="tolist">This is the content of an inline element converted to a
list-item element.</span>
<span class="tolist">This is the content of another inline element converted to a
list-item element.</span>
</div>
</body>
</html>
<!-- figure 17.16 & figure 17.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Arial, Verdana, sans-serif; color: black; font-size: 100%; }
table { margin: 0.5em; }
td, th { padding: 0.4em; border: 1px solid #000; }
th {
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: left;
border-bottom: 2px solid#000;
}
tr.dkgrey { background-color: #aeaeae; }
tr.grey { background-color: #f3f3f3; }
</style>
</head>
<body>
<h2>Best Sellers</h2>
<table>
<caption>Five Top All-time Best-selling Books</caption>
<tr class="dkgrey">
<th>Book</th>
<th>Author(s)</th>
<th>First published</th>
<th>Approx. Sales</th>
</tr>
<tr>
<th>Don Quixote</th>
<th>Miguel de Cervantes</th>
<th>1605</th>
<th>315 million</th>
</tr>
<tr class="dkgrey">
<th>A Tale Of Two Cities</th>
<th>Charles Dickens</th>
<th>1859</th>
<th>200 million</th>
</tr>
<tr>
<th>The Lord of the Rings</th>
<th>J. R. R. Tolkien</th>
<th>1954/1955</th>
<th>150 million</th>
</tr>
<tr class="dkgrey">
<th>The Hobbit</th>
<th>J. R. R. Tolkien</th>
<th>1937</th>
<th>140.6 million</th>
</tr>
<tr>
<th>Le Petit Prince</th>
<th>Antoine de Saint-Exupéry</th>
<th>1943</th>
<th>140 million</th>
</tr>
</table>
</body>
</html>
<!-- figure 17.21 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
table { margin: 0.5em; border-collapse: seperate; }
td, th { padding: 0.4em; border: 1px solid #000; }
table.one { empty-cells: show; }
table.two { empty-cells: hide; }
</style>
</head>
<body>
<table class="one">
<tr><th>Fruit</th><th>Quantity</th></tr>
<tr><th>Apples</th><th>200</th></tr>
<tr><th>Banana</th><th></th></tr>
</table>
<table class="two">
<tr><th>Fruit</th><th>Quantity</th></tr>
<tr><th>Apples</th><th>200</th></tr>
<tr><th>Banana</th><th></th></tr>
</table>
</body>
</html>
<!-- figure 17.23 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Arial, Verdana, sans-serif; color: black; font-size: 100%; }
table { margin: 0.5em; border-collapse: collapse; width: 80%; }
td, th { padding: 0.4em; border: 1px solid #000; }
table.one { table-layout: auto; }
table.two { table-layout: fixed; }
</style>
</head>
<body>
<table class="one">
<tr>
<th>Le Petit Prince</th>
<th>Antoine de Saint-Exupéry</th>
<th>1943</th>
<th>140 million</th>
</tr>
<tr>
<th>Don Quixote</th>
<th>Miguel de Cervantes</th>
<th>1605</th>
<th>315 million</th>
</tr>
<tr>
<th>The Lord of the Rings</th>
<th>J. R. R. Tolkien</th>
<th>1954/1955</th>
<th>150 million</th>
</tr>
</table>
<table class="two">
<tr>
<th>Le Petit Prince</th>
<th>Antoine de Saint-Exupéry</th>
<th>1943</th>
<th>140 million</th>
</tr>
<tr>
<th>Don Quixote</th>
<th>Miguel de Cervantes</th>
<th>1605</th>
<th>315 million</th>
</tr>
<tr>
<th>The Lord of the Rings</th>
<th>J. R. R. Tolkien</th>
<th>1954/1955</th>
<th>150 million</th>
</tr>
</table>
</body>
</html>
<!-- figure 17.25 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.table { display: table; border: 1px solid black; }
.head { display: table-row; font-weight: bold; background-color: grey; }
.row { display: table-row; }
.cell { display: table-cell; width: 150px; border: 1px solid black; }
</style>
</head>
<body>
<h2>Display table value</h2>
<div class="table">
<div class="head">
<span class="cell">ID_No</span>
<span class="cell">Name</span>
<span class="cell">Age</span>
<span class="cell">Height</span>
</div>
<div class="row">
<span class="cell">10001</span>
<span class="cell">James Normal</span>
<span class="cell">28</span>
<span class="cell">6ft 1in</span>
</div>
<div class="row">
<span class="cell">10002</span>
<span class="cell">Amanda Holmes</span>
<span class="cell">24</span>
<span class="cell">5ft 6in</span>
</div>
</div>
</body>
</html>
<!-- figure 17.27 & figure 17.28 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
form { width: 500px; }
fieldset {
border: 1px solid #c6c4c4;
border-radius: 10px;
}
legend {
text-transform: uppercase;
background-color: #e4f0f6;
border: 1px solid #d4d4d4;
border-radius: 10px;
padding: 5px 15px;
}
div { margin: 10px; }
.box { background-color: #e4f0f6; }
.field { width: 150px; float: left; text-align: right; padding-right: 10px; }
.moveleft { margin-left: 0; }
.buttons { text-align: right; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal Info</legend>
<div>
<label class="field">First name:</label>
<input class="box" type="text" name="fname" required>
</div>
<div>
<label class="field">Last name: </label>
<input class="box" type="text" name="lname">
</div>
<div>
<label class="field">Email: </label>
<input class="box" type="email" size="25" maxlength="35" name="email"
placeholder="e.g., [email protected]">
</div>
<div>
<label class="field">Personal URL (if any): </label>
<input class="box" type="url" name="website">
</div>
<div>
<span class="field">Sex: </span>
<input type="radio" name="sex" class="moveleft" value="male">
<label>Male</label>
<input type="radio" name="sex" class="moveleft" value="female">
<label>Female</label>
</div>
<div class="buttons">
<input type="submit" value="Submit">
<input type="reset" value="Cancel">
</div>
</fieldset>
</form>
</body>
</html>
<!-- figure 17.31 & figure 17.32 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
form { width: 500px; }
fieldset {
border: 1ps solid #c6c4c4;
border-radius: 10px;
padding: 15px;
}
div { margin: 10px; }
.field { width: 150px; float: left; text-align: right; }
.buttons { text-align: right; }
.box {
width: 150px;
border: 1px solid #b3b3a9;
background-color: #e4f0f6;
margin-left: 5px;
padding: 3px 3px 3px 30px;
}
.username { background:url("images/username.png") no-repeat #e4f0f6 3% 50%; }
.email { background:url("images/email.png") no-repeat #e4f0f6 3% 50%; }
.password { background:url("images/password.png") no-repeat #e4f0f6 3% 50%; }
</style>
</head>
<body>
<form>
<fieldset>
<div><label class="field">Username:</label><input class="box username"
type="text" name="username"></div>
<div><label class="field">Email:</label><input class="box email" type="email"
name="email" placeholder="e.g., [email protected]"></div>
<div><label class="field">Password:</label><input class="box password"
type="password" name="password"></div>
<div class="buttons"><input type="submit" value="Login"> <input type="reset"
value="Cancel"></div>
</fieldset>
</form>
</body>
</html>
<!-- figure 17.34 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
input:required { background-color: lightblue; }
input:foucs { background-color: yellow; }
input[type=checkbox]:checked + label { color: red; }
input[type=radio]:checked + label { color: red; }
</style>
</head>
<body>
<h3>Registration</h3>
<form>
<p>Please enter your details:</p>
<label>Ref: </label><input type="ref" value="10012" disbaled="disbaled"><br>
<label>First name: </label><input type="text" name="fname" required><br>
<label>Last name: </label><input type="text" name="lname" required><br>
<label>Email: </label><input type="email" required><br>
<label>Phone: </label><input type="phone"><br>
<input type="radio" id="male" name="sex"><label for="male">Male</label>
<input type="radio" id="female" name="sex"><label for="female">Female</label><br>
<input type="checkbox" id="conf"><label for="conf">Yes, send me
confirmation</label><br>
<input type="checkbox" id="terms"><label for="terms">Yes, I agree with the
terms</label><br>
</form>
</body>
</html>
<!-- figure 17.36 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
input#button {
width: 150px;
padding: 5px 0px 5px 0px;
background-color: #ffcc66;
border-radius: 5px;
box-shadow: 3px 3px 2px 0px #4d4d4d;
font-family: Arial;
font-size: 30px;
font-weight: bold;
color: black;
text-shadow: 2px 2px 1px blue;
}
input#button:hover {
color: blue;
background-color: orange;
}
</style>
</head>
<body>
<h3>Registration</h3>
<form>
<input type="submit" value="Submit" id="button">
</form>
</body>
</html>
<!-- figure 17.38 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
form { width: 500px; }
div { margin: 10px; }
.box { width: 150px; margin-left: 5px; }
.buttons { text-align: right; }
:default { border: 2px solid green; }
</style>
</head>
<body>
<form>
<fieldset>
<div><label>Username:</label><input class="box" type="text"></div>
<div><label>Password:</label><input class="box" type="password"></div>
<div class="buttons">
<input type="submit" value="Login">
<input type="reset" value="Cancel">
</div>
</fieldset>
</form>
</body>
</html>
<!-- figure 17.41 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
input:in-range { border: 2px solid green; }
input:out-of-range { border: 2px solid red; }
</style>
</head>
<body>
<h3>:in-range and :out-of-range</h3>
<form>
<p>Please enter your numbers:</p>
<p><input type="number" min="1" max="10"> (Enter between 1 and 10)</p>
<p><input type="number" min="1" max="10"> (Enter between 1 and 10)</p>
</form>
</body>
</html>
<!-- figure 17.43 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
input:valid { border: 2px solid green; }
input:invalid { border: 2px solid red; }
</style>
</head>
<body>
<h3>:valid and :invalid</h3>
<form>
Enter the first digit:<br>
<input type="number"><br>br>
Enter the second digit:<br>
<input type="number">
</form>
</body>
</html>
Chapter 18
Click and drag to scroll left and right to view all 6 figures.
<!-- figure 18.6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
padding: 50px;
font-size: 60px;
text-align: center;
color: darkorange;
animation-name: zooming;
animation-duration: 1.5s;
animation-delay: 1s;
animation-fill-mode: both;
animation-iteration-count: 3;
}
@keyframes zooming {
0% { transform: scale(0.1); }
50% { transform: scale(1.0) roatateZ(45deg); }
100% { transform: scale(2, 0); }
}
</style>
</head>
<body>
<div>Zooming in</div>
</body>
</html>
<!-- figure 18.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.ball {
height: 200px;
width: 200px;
background-color: orange;
border-radius: 100%;
animation: move 10s ease-in infinite alternate, pulse 1s linear
infinite alternate;
}
@keyframes move {
0% { transform: translate(0, 0); }
100% { transform: translate(600px, 0); }
}
@keyframes pulse {
0% { transform: translate(orange); }
100% { transform: translate(red); }
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>
<!-- figure 18.9 & figure 18.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#window {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
left: 0;
top: 0;
display: none;
}
.box {
width: 300px;
height: 300px;
padding: 15px 20px 0 20px;
position: relative;
top: 25%;
margin: 0 auto;
font-size: 24px;
font-weight: bold;
background-color: white;
text-align: center;
border: 1px solid black;
box-shadow: inset 0 0 1em 0.5em blue, 0 0 1em 0.5em orange;
animation: move 0.5s;
}
@keyframes move {
0% { transform: translate(-500px, 0); }
100% { transform: translate(0px, 0); }
}
.close {
text-decoration: none;
font-size: 22px;
font-weight: bold;
color: white;
background-color: orange;
border: 1px solid black;
border-radius: 50%;
width: 36px; height: 2px;
padding: 7px 1px 30px 2px;
position: absolute;
top: -16px;
left: 317px;
}
.close:hover { color: black; cursor: pointer; }
#window:target { display: block; }
</style>
</head>
<body>
<h2>Lightbox with :target</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id arcu ut nunc cursus
rutrum sit amet id eros. Nunc iaculis risus lacus, nec malesuada sapien placerat sed.
Maecenas elit urna, euismod at ipsum ut, sagittis fermentum elit. Donec blandit mi
mauris, at iaculis diam gravida sit amet. Nulla vestibulum pulvinar arcu hendrerit
molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut sit amet
magna consectetur, sagittis purus id, tincidunt velit. Donec sed nunc vel metus
consectetur vulputate. Duis semper lacinia posuere. Ut vel tristique mi. Nullam tempor
erat ac vulputate sagittis. Etiam in libero vehicula, venenatis mauris non, faucibus
enim. </p>
<p class="link"><a href="#window">Click to see a lightbox</a></p>
<p>Ut non risus vel ex tincidunt lobortis ut auctor diam. Vestibulum id leo venenatis
nisi posuere bibendum. Nulla tempor eget erat a volutpat. Maecenas at mollis neque, et
ornare risus. Nam sed orci rhoncus, posuere erat in, venenatis nibh. Sed rhoncus elit
et imperdiet semper. Integer massa eros, scelerisque ac arcu et, rhoncus blandit
metus. Nam sit amet dignissim magna. Suspendisse rhoncus porttitor erat in efficitur.
Vestibulum eget ligula sodales eros porta euismod. Curabitur suscipit nulla vitae nisi
volutpat, non sagittis justo sagittis. Nullam et accumsan enim, at aliquet massa. In
nec porttitor massa.</p>
<p>Sed at enim erat. Nulla placerat odio vel finibus pulvinar. In varius, nulla vitae
euismod pharetra, justo ipsum mattis felis, cursus imperdiet dolor quam a arcu. Ut
feugiat varius nunc, nec aliquet nunc porta id. Curabitur id rhoncus lectus,
viverra auctor tellus. In hac habitasse platea dictumst. Aenean sollicitudin augue
sed aliquam feugiat. In dolor justo, blandit id ultricies ac, finibus a diam.</p>
<p>Morbi eget dapibus erat, id pharetra purus. Quisque cursus sed metus ac hendrerit.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Phasellus vitae pretium urna, nec rutrum nulla. Phasellus non sollicitudin elit.
Curabitur id varius felis, vitae vulputate justo. Praesent eget ex non lacus vulputate
sollicitudin. Curabitur quis orci tincidunt, mollis diam et, ullamcorper nisl. Ut
dictum magna at sapien gravida, id egestas est bibendum.</p>
<div id="window">
<div class="box">
<a href="#" class="close">X</a>
<p>This is a basic example of a lightbox or modal window.</p>
<p>This box can contain any media object type, such as image or video.</p>
<p>(Clicking the X closes it.)</p>
</div>
</div>
</body>
</html>
<!-- figure 18.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
width: 50px;
height: 50px;
background-color: ornage;
transition: width 0.5s ease-out, height 0.5s ease-out;
}
div:hover {
width: 150px;
height: 150px;
cursor: pointer;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!-- figure 18.14 & figure 18.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#container {
width: 300px;
margin: 500px;
background-color: grey;
border: 2px solid black;
border-radius: 20px;
perspective: 500px;
}
#banner {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: pink;
border: 2px solid black;
border-radius: 20px;
animation-name: rotation;
animation-timing-function: linear;
animation-duration: 6s;
animation-iteration-count: infinite;
}
p {
font: bold 32px Arial, sans-serif;
text-align: center;
margin: 75px 0px;
}
@keyframes rotation {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
</style>
</head>
<body>
<div id="container">
<div id="banner"><p>Stop it!</p></div>
</div>
</body>
</html>
<!-- figure 18.17 & figure 18.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#carousel img { position: absolute; border: 1px solid lightgrey;
background-color: rgba(255,255,255,0.7); width: 213px; height: 160px; }
#image1 { transform: rotateY(0deg) translateX(180px); padding: 0 0 0 147px; }
#image2 { transform: rotateY(-72deg) translateX(180px); padding: 0 0 0 147px; }
#image3 { transform: rotateY(-144deg) translateX(180px); padding: 0 0 0 147px; }
#image4 { transform: rotateY(-216deg) translateX(180px); padding: 0 0 0 147px; }
#image5 { transform: rotateY(-288deg) translateX(180px); padding: 0 0 0 147px; }
#wrapper { perspective: 1200px; padding: 300px; height: 180px; }
#carousel {
animation-name: carousel;
animation-duration: 7s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-style: preserve-3d;
transform-origin: 180px 0 0;
}
@keyframes carousel {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
</style>
</head>
<body>
<div id="wrapper">
<div id="carousel">
<img id="image1" src="images/beach.jpg">
<img id="image2" src="images/tunnel.jpg">
<img id="image3" src="images/sunrise.jpg">
<img id="image4" src="images/yacht.jpg">
<img id="image5" src="images/south.jpg">
</div>
</div>
</body>
</html>
Chapter 19
Click and drag to scroll left and right to view all 9 figures.
<!-- figure 19.3 & figure 19.4 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#container {
width: 300px;
height: 150px;
border: 1px solid black;
display: flex;
flex-direction: row-reverse;
}
#container div {
width: 40px;
height: 40px;
border: 1px solid grey;
broder-radius: 5px;;
}
</style>
</head>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!-- figure 19.6 & figure 19.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#container { width: 300px; height: 150px; border: 1px solid black; display: flex;
flex-wrap: wrap; }
#container div { width: 40px; height: 40px; background-color: pink;
border: 1px solid grey; border-radius: 5px; }
</style>
</head>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
<!-- figure 19.8-->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.flex-container { display: flex; border: 2px solid black; }
.flex-container div {
background-color: orange;
padding: 20px;
border: 2px solid grey;
text-align: center;
}
.one { flex: 1 1 10em; }
.two { flex: 5 3 10em; }
</style>
</head>
<body>
<div class="flex-container">
<div class="one">1</div>
<div class="two">2</div>
</div>
</body>
</html>
<!-- figure 19.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.container {
width: 500px;
height: 400px;
display: flex;
flex-flow: column;
}
.header, .footer {
height: 30px;
background-color: grey;
text-align: center;
flex: none;
}
.content {
background-color: orange;
text-align: center;
flex: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="header">HEADER</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>
<!-- figure 19.12 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.flex-container { border: 1px solid black; display: flex;
justify-content: flex-start; }
.flex-container div { width: 50px; height: 50px; background-color: pink;
border: 1px solid grey; }
</style>
</head>
<body>
<div id="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
<!-- figure 19.14 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#container {
width: 300px; height: 150px; border: 1px solid black; display: flex;
flex-wrap: wrap; align-content: flex-start;
}
#container div {
width: 60px; background-color: pink; border: 1px solid grey;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
<!-- figure 19.16 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#container {
width: 300px;
height: 150px;
border: 1px solid black;
display: flex;
align-items: center;
}
#container div {
width: 60px;
border: 1px solid grey;
}
#container .one {background-color: pink; padding: 0 5px; }
#container .two {background-color: lightyellow; padding: 0 5px; }
#container .three {background-color: lightgrey; padding: 0 5px; }
#container .four {background-color: lightblue; padding: 0 5px; }
</style>
</head>
<body>
<div id="container">
<div class="one"> </div>
<div class="two">Curabitur vitae elit in odio consequat pretium vel non erat.</div>
<div class="three">Praesent dapibus elementu est, vitae fermentu nulla</div>
<div class="four"> </div>
</div>
</body>
</html>
<!-- figure 19.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#container {
width: 300px;
height: 150px;
border: 1px solid black;
display: flex;
align-items: stretch;
}
.container div { width: 60px; border: 1px solid grey; }
#container .one { background-color: pink; padding: 0 5px; align-self: flex-start; }
#container .two { background-color: lightyellow; padding: 0 5px; }
#container .three { background-color: lightgrey; padding: 0 5px; }
#container .four { background-color: lightblue; padding: 0 5px; align-self:
flex-end; }
</style>
</head>
<body>
<div id="container">
<div class="one"> </div>
<div class="two">Curabitur vitae elit in odio consequat pretium vel non erat.</div>
<div class="three">Praesent dapibus elementu est, vitae fermentu nulla</div>
<div class="four"> </div>
</div>
</body>
</html>
<!-- figure 19.20 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { color: white; }
main { display: flex; }
article { background: red; flex: 1 1 0px; order: 2; }
nav { background: green; width: 200px; order: 1; }
aside { background: green; width: 200px; order: 3; }
header { background: blue; }
footer { background: blue; }
</style>
</head>
<body>
<header>HEADER</header>
<main>
<article>ARTICLE</article>
<nav>NAV</nav>
<aside>ASIDE</aside>
</main>
<footer>FOOTER</footer>
</body>
</html>
Chapter 20
Click and drag to scroll left and right to view all 13 figures.
<!-- figure 20.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
display: grid;
width: 90%;
height: 480px;
grid-template-columns: [first] 160px [second] 1fr [last];
grid-template-rows: [first] 60px [second] 1fr [third] 60px [last];
}
.A { background-color: pink; }
.B { background-color: lightblue; }
.C { background-color: orange; }
.D { background-color: grey; }
.E { background-color: violet; }
.F { background-color: gold; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
<div class="F">F</div>
</div>
</body>
</html>
<!-- figure 20.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#grid {
width: 90%;
height: 480px;
display: grid;
grid-template-areas: "header header"
"nav main"
"footer footer";
grid-template-rows: 50px 1fr 50px;
grid-template-columns: 150px 1fr;
}
#grid header { grid-area: header; background-color: lightblue; }
#grid nav { grid-area: nav; background-color: orange; }
#grid main { grid-area: main; background-color: grey; }
#grid footer { grid-area: footer; background-color: lightblue; }
</style>
</head>
<body>
<section id="grid">
<header>HEADER</header>
<nav>SIDEBAR</nav>
<main>MAIN AREA</main>
<footer>FOOTER</footer>
</section>
</body>
</html>
<!-- figure 20.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#grid {
display: grid;
grid-template-columns: 100px;
grid-template-rows: 100px;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
}
#A { grid-column: 1; grid-row: 1; background-color: pink; }
#B { grid-column: 2; grid-row: 1; background-color: lightblue; }
#C { grid-column: 1; grid-row: 2; background-color: orange; }
#D { grid-column: 2; grid-row: 2; background-color: grey; }
#E { grid-column: 3; grid-row: 1; background-color: violet; }
#F { grid-column: 3; grid-row: 2; background-color: gold; }
</style>
</head>
<body>
<div id="grid">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
<div id="F">F</div>
</div>
</body>
</html>
<!-- figure 20.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#grid {
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px;
grid-template-rows: 50px 50px 50px;
grid-auto-flow: row;
}
.A { background-color: gold; grid-column: 2; grid-row: span 2; }
.B { background-color: lightblue; grid-column: span 2; }
.C { background-color: violet; }
.D { background-color: yellowgreen; }
.E { background-color: silver; }
</style>
</head>
<body>
<div id="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
</div>
</body>
</html>
<!-- figure 20.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#grid {
width: 90%;
height: 480px;
display: grid;
grid-template-areas: "header header"
"nav main"
"footer footer";
grid-template-rows: 50px 1fr 50px;
grid-template-columns: 150px 1fr;
grid-column-gap: 5px;
grid-row-gap: 5px;
}
#grid header { grid-area: header; background-color: lightblue; }
#grid nav { grid-area: nav; background-color: orange; }
#grid main { grid-area: main; background-color: grey; }
#grid footer { grid-area: footer; background-color: lightblue; }
</style>
</head>
<body>
<section id="grid">
<header>HEADER</header>
<nav>SIDEBAR</nav>
<main>MAIN AREA</main>
<footer>FOOTER</footer>
</section>
</body>
</html>
<!-- figure 20.14 & figure 20.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
display: grid;
width: 90%;
height: 480px;
grid-template-columns: [first] 100px [second] 100px [third] 100px
[fourth] 100px [last];
grid-template-rows: [first] 100px [second] 100px [last];
}
.A { background-color: violet; }
.B {
background-color: lightblue;
grid-column-start: 2;
grid-column-end: span 2;
grid-row-start: first;
grid-row-end: span last;
}
.C { background-color: orange; }
.D { background-color: orange; }
.E { background-color: violet; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
</div>
</body>
</html>
<!-- figure 20.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
display: grid;
width: 90%;
height: 480px;
grid-template-columns: [first] 100px [second] 100px [third] 100px
[fourth] 100px [last];
grid-template-rows: [first] 100px [second] 100px [last];
}
.A { background-color: violet; }
.B {
background-color: lightblue;
grid-column: 2 / span 2;
grid-row: first / span last;
}
.C { background-color: orange; }
.D { background-color: orange; }
.E { background-color: violet; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
</div>
</body>
</html>
<!-- figure 20.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
display: grid;
width: 90%;
height: 480px;
grid-template-columns: [first] 100px [second] 100px [third] 100px
[fourth] 100px [last];
grid-template-rows: [first] 100px [second] 100px [last];
}
.A { background-color: violet; }
.B {
background-color: lightblue;
grid-area: first / 2 / span last / span 2;
}
.C { background-color: orange; }
.D { background-color: orange; }
.E { background-color: violet; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
</div>
</body>
</html>
<!-- figure 20.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
display: grid;
width: 300px;
height: 200px;
border: 1px solid black;
grid-template-columns: [first] 50px [second] 50px [third] 50px
[fourth] 50px [last];
grid-template-rows: [first] 50px [second] 50px [last];
border: 1px solid black;
justify-items: center;
align-items: center;
}
.A { background-color: darkgrey; }
.B { background-color: salmon; }
.C { background-color: orange; }
.D { background-color: yellow; }
.E { background-color: MediumAquamarine; }
.F { background-color: violet; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
<div class="F">E</div>
</div>
</body>
</html>
<!-- figure 20.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
display: grid;
width: 300px;
height: 200px;
grid-template-columns: [first] 50px [second] 50px [third] 50px
[fourth] 50px [last];
grid-template-rows: [first] 50px [second] 50px [last];
border: 1px solid black;
}
.A { background-color: darkgrey; }
.B { background-color: salmon; justify-self: center; align-self: center; }
.C { background-color: orange; }
.D { background-color: yellow; }
.E { background-color: MediumAquamarine; }
.F { background-color: violet; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
</div>
</body>
</html>
<!-- figure 20.25 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
font-family: grid;
font-family: 90%;
font-family: 480px;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: 50px;
}
.A { background-color: gold; }
.B { background-color: lightblue; }
.C { background-color: pink; order: -1; }
.D { background-color: darkgrey; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
</div>
</body>
</html>
<!-- figure 20.27 & figure 20.28 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
font-family: grid;
font-family: 90%;
font-family: 480px;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
}
.A { background-color: gold; }
.B { background-color: lightblue; }
.C { background-color: gold; }
.D { background-color: lightblue; }
.E { background-color: darkgrey; margin: -10px; z-index: 1; }
.F { background-color: lightblue; }
.G { background-color: gold; }
.H { background-color: lightblue; }
.I { background-color: gold; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
<div class="F">F</div>
<div class="G">G</div>
<div class="H">H</div>
<div class="I">I</div>
</div>
</body>
</html>
<!-- figure 20.30 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
form {
display: grid;
grid-template-columns: [labels] auto [controls] auto;
grid-column-gap: 5px;
grid-row-gap: 5px;
}
form > label { grid-column: labels; grid-row: auto; justify-self: end; }
form > input { grid-column: controls; grid-row: auto; }
.buttons {
grid-column: 1 / span 2;
grid-row: auto;
justify-self: end;
}
</style>
</head>
<body>
<form>
<label>Username: </label><input type="text" name="username">
<label>Email: </label><input type="email" name="email">
<label>Password: </label><input type="password" name="password">
<div class="buttons">
<input type="submit" value="Login">
<input type="reset" value="Cancel">
</div>
</form>
</body>
</html>
Chapter 21
Click and drag to scroll left and right to view all 3 figures.
<!-- figure 21.11 & figure 21.12 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
font-family: Helvetica;
color: black;
text-align: center;
display: flex;
flex-direction: column;
}
header, aside, article, footer {
background-color: #d3d3d3;
padding: 10px;
margin-bottom: 5px;
border-radius: 3px;
}
ul {
list-style-type: none;
padding-left: 0;
line-height: 32px;
}
ul li a { text-decoration: none; }
aside { height: auto; }
article { height: auto; }
footer { height: 50px; }
</style>
</head>
<body>
<header>
<h1>Logo</h1>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About us</a></li>
<li><a href="">Products</a></li>
<li><a href="">Downloads</a></li>
<li><a href="">Contact us</a></li>
</ul>
</nav>
</header>
<main>
<aside>ASIDE</aside>
<article>ARTICLE</article>
</main>
<footer>© Copyright 2015</footer>
</body>
</html>
<!-- figure 21.11 & figure 21.13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
@media all and (max-width: 599px) {
body {
color: black;
font-family: Helvetica;
text-align: center;
display: flex;
flex-direction: column;
}
header, aside, article, footer {
background-color: #d3d3d3;
padding: 10px;
margin-bottom: 5px;
border-radius: 3px;
}
ul {
list-style-type: none;
padding-left: 0;
line-height: 32px;
}
ul li a { text-decoration: none; }
aside { height: auto; }
article { height: auto; }
footer { height: 50px; }
}
@media all and (min-width: 600px) {
body {
width: 90%;
margin: 30px auto;
color: black;
font-family: Helvetica;
text-align: center;
}
main {
height: 495px;
display: flex;
}
header, aside, article, footer {
background-color: #d3d3d3;
padding: 5px;
margin-bottom: 5px;
border-radius: 3px;
}
li {
display: inline;
padding: 5px;
}
ul li a { text-decoration: none; }
main > aside {
margin-right: 5px;
height: 480px;
flex: 1 0 0;
order: 1;
}
main > article {
height: 480px;
flex: 4 0 0;
order: 2;
}
footer { min-height: 50px; }
}
</style>
</head>
<body>
<header>
<h1>Logo</h1>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About us</a></li>
<li><a href="">Products</a></li>
<li><a href="">Downloads</a></li>
<li><a href="">Contact us</a></li>
</ul>
</nav>
</header>
<main>
<aside>ASIDE</aside>
<article>ARTICLE</article>
</main>
<footer>© Copyright 2015</footer>
</body>
</html>
<!-- figure 21.16 & figure 21.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
@media all and (max-width: 599px) {
#grid {
font-family: Helvetica;
text-align: center;
display: grid;
grid-template-rows: auto auto auto auto;
grid-template-columns: 1fr;
grid-row-gap: 5px;
}
header, aside, article, footer {
background-color: #d3d3d3;
padding: 10px;
border-radius: 3px;
}
ul {
list-style-type: none;
padding-left: 0;
line-height: 32px;
}
ul li a { text-decoration: none; }
}
@media all and (min-width: 600px) {
#grid {
width: 90%;
height: 480px;
color: black;
font-family: Helvetica;
text-align: center;
display: grid;
grid-template-areas: "header header"
"header header"
"aside article"
"footer footer";
grid-template-rows: auto 480px 50px;
grid-template-columns: 150px 1fr;
grid-column-gap: 5px;
grid-row-gap: 5px;
}
#grid header { grid-area: header; }
#grid aside { grid-area: aside; }
#grid article { grid-area: article; }
#grid footer { grid-area: footer; }
header, aside, article, footer {
background-color: #d3d3d3;
padding: 5px;
border-radius: 3px;
}
li {
display: inline;
padding: 5px;
}
ul li a { text-decoration: none; }
}
</style>
</head>
<body id="grid">
<header>
<h1>Logo</h1>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About us</a></li>
<li><a href="">Products</a></li>
<li><a href="">Downloads</a></li>
<li><a href="">Contact us</a></li>
</ul>
</nav>
</header>
<aside>ASIDE</aside>
<article>ARTICLE</article>
<footer>© Copyright 2015</footer>
</body>
</html>
Chapter 22
<!-- figure 22-1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.warning {
color: yellow;
border: thick dotted yellow;
}
.important-warning {
color: yellow;
border: thick dotted yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div class="warning">Warning!</div>
<div class="important-warning">Important Warning!</div>
</body>
</html>
<!-- figure 22-2 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.warning {
color: yellow;
border: thick dotted yellow;
}
.important-warning {
@extend .warning;
font-weight: bold;
}
</style>
</head>
<body>
<div class="warning">Warning!</div>
<div class="important-warning">Important Warning!</div>
</body>
</html>
<!-- figure 22-3 -->
<!DOCTYPE html>
<html lang="en-US">
<head><title>Basic page</title></head>
<body>
<script type="text/javascript">
document.write('Hello World!');
</script>
<noscript>
<p>Browser does not support JavaScript or JavaScript has been turned off.</p>
</noscript>
</body>
</html>
<!-- figure 22-4 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script type="text/javascript">
function message() {
document.write('Hello World!');
}
</script>
</head>
<body onload="message()">
<noscript>
<p>Browser does not support JavaScript or JavaScript has been turned off.</p>
</noscript>
</body>
</html>
<!-- figure 22-5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script type="text/javascript" src="scripts/test.js"></script>
</head>
<body onload="message()">
</body>
</html>
<!-- figure 22-6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body onload="message()">
<script type="text/javascript" src="scripts/test.js"></script>
</body>
</html>
<!-- figure 22-7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script type="text/javascript">
function changeBackground(color) {
document.body.style.background=color;
}
</script>
</head>
<body>
<button onclick="changeBackground('gray')">Change colour</button>
</body>
</html>
<!-- figure 22-8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<button onclick="$('body').css('background', 'gray')">
Change color
</button>
</body>
</html>
<!-- figure 22-11 -->
<!DOCTYPE html>
<html lang="en-US">
<head> Form </head>
<body>
<form action="php/Figure_22_12.php" method="post">
Name:<input type="text" name="name">
Age:<input type="text" name="age">
<input type="submit">
</form>
</body>
</html>
<!-- figure 22-13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script language="javascript" type="text/javascript">
function ajaxFunction(){
var ajaxRequest;
ajaxRequest = new XMLHttpRequest();
ajaxRequest.open("GET", "php/Figure_22_14.php", true);
ajaxRequest.send(null);
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.dataForm.time.value = ajaxRequest.responseText;
alert(ajaxRequest.responseText);
}
}
}
</script>
</head>
<body>
<form name="dataForm">
Current Time: <input type="text" name="time"><br>
<input type="button" onclick="ajaxFunction()" value="Check Time">
</form>
</body>
</html>
<!-- figure 22-15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script language="javascript" type="text/javascript">
function ajaxFunction(){
var ajaxRequest;
ajaxRequest = new XMLHttpRequest();
var uname = document.getElementById("uname").value;
var pword = document.getElementById("pword").value;
var pcode = document.getElementById("pcode").value;
var qString = "?uname=" + uname + "&pword=" + pword + "&pcode=" + pcode;
ajaxRequest.open("GET", "php/Figure_22_16.php" + qString, true);
ajaxRequest.send(null);
}
</script>
</head>
<body>
<form name="myForm">
Username:<input type="text" id="uname"><br>
Password:<input type="text" id="pword"><br>
Postcode:<input type="text" id="pcode"><br>
<input type="button" onclick="ajaxFunction()" value="submit">
</form>
</body>
</html>
<!-- figure 22-17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script language="javascript" type="text/javascript">
function ajaxFunction(){
var ajaxRequest;
ajaxRequest = new XMLHttpRequest();
var pcode = document.getElementById("pcode").value;
var qString = "pcode=" + pcode;
ajaxRequest.open("POST", "php/Figure_22_18.php", true);
ajaxRequest.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
ajaxRequest.send(qString);
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
listRecords.innerHTML = ajaxRequest.responseText;
}
}
}
</script>
</head>
<body>
<form>
Enter Postcode: <input type="text" id="pcode"><br>
<input type="button" onclick="ajaxFunction()" value="Search">
</form>
<div id="listRecords">Records are listed here.</div>
</body>
</html>
<!-- figure 22-19 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
/* Comment */
.home { font-size: 125%; }
.home { width: 50%; }
</style>
</head>
<body>
<!-- Comment -->
<div>...</div>
<!-- Comment -->
<script>
runApp(); // Comment
</script>
</body>
</html>
<!-- figure 22.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head><title>PHP Test</title></head>
<body>
<?php echo "Hello World!"; ?>
</body>
</html>
//figure 22.12
<?php
$name=$_POST['name'];
$age=$_POST['age'];
echo "Hi"." ".$name;
echo "<p>";
echo "You are"." ".$age." "."years old";
?>
//figure 22.14
The time is:
<?php echo date("H:i:s"); ?>
The time is:
//figure 22.16
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "zzforum";
mysql_connect ($dbhost, $dbuser, $dbpass);
mysql_connect ($dbhost);
$uname = $_GET ['uname']; $pword = $_GET['pword']; $pcode = $_GET['pcode'];
$query="INSERT INTO users (username, password, postcode)
VALUES ('$uname', '$pword', '$pcode')";
mysql_query ($query);
?>
//figure 22.18
<?php
$mysql_link = mysql_connect ("localhost", "root", "");
mysql_select_db("zzforum") or die(mysql_error());
$pcode = $_POST["pcode"];
$query="SELECT * FROM users WHERE postcode='$pcode'";
$query_result=mysql_query($query) or die(mysql_error());
$record_string = "<table>";
$record_string .= "<tr>";
$record_string .= "<th>Username: </th>";
$record_string .= "<th>Postcode: </th>";
$record_string .= "</tr>";
while($row = mysql_fetch_array($query_result)){
$record_string .= "<tr>";
$record_string .= "<td>$row[username]</td>";
$record_string .= "<td>$row[password]</td>";
$record_string .= "<td>$row[postcode]</td>";
$record_string .= "</tr>";
}
$record_string .= "</table>";
echo $record_string
?>
//test.js
function message1() {
alert('Hello World!')
}
function message() {
document.write('Hello World!');
}