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>