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>