ptg16476052
Fonts and Font Sizes 145
7
Each heading you’ve placed on your page marks the beginning of a particular section.
You’ll add IDs to each of the topic headings so that you can jump from section to section
with ease. The IDs are simple: top for the main heading; contents for the table of con-
tents; and about, recent, and upcoming for the three subsections on the page. With the
IDs in place, the revised code looks like the following:
Input ▼
<!DOCTYPE html>
The Bookworm Bookshop</t itle><br />
</head><br />
<body><br />
<h1 id="top">The Bookworm: A Better Book Store</h1><br />
<h2 id="contents">Contents</h2><br />
<h2 id="about">About the Bookworm Bookshop</h2><br />
<h2 id="recent">Recent Titles (as of July 11, 2012)</h2><br />
<h2 id="upcoming">Upcoming Events</h2><br />
</body><br />
</html><br />
<p>Adding Content Now begin adding the content. You’re undertaking a literary<br />
endeavor, so starting the page with a nice quote about old books would be a nice touch.<br />
Because you’re adding a quote, you can use the <blockquote> tag to make it stand out as<br />
such. Also, the name of the poem is a citation, so use <cite> there, too.</p><br />
<p>Insert the following code on the line after the level 1 he ading:</p><br />
<p>Input ▼</p><br />
<blockquote><br />
"Old books are best---how tale and rhyme<br><br />
Float with us down the stream of time!"<br><br />
-- Clarence Urmy, <cite>Old Songs are Best</cite><br />
</blockquote><br />
<p>Immediately following the quote, add the address for the bookstore. Since it contains<br />
contact information, it’s appropriate to use the <address> tag, as fo llows:</p><br />
<p>Input ▼</p><br />
<address style="font-style: normal;">The Bookworm Bookshop<br /><br />
1345 Applewood Dr<br /><br />
Springfield, CA 94325<br /><br />
(415) 555-0034<br />
</address ><br />
<pre><code>▼</code></pre><br />
<pre><code>▼</code></pre> </div>
<meta itemprop='headline' content="p 170: ptg16476052 Fonts and Font Sizes 145 7 Each heading you’ve placed on your page marks the beginning of a particular section. You’ ... - Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day - free download pdf - issuhub">
</div>
<div role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<span itemprop="url"><b><a href="/view/index?id=3238&pageIndex=169" rel="previous" itemprop="name">← Previous</a></b></span>
<span itemprop="url" class="mx-3"><b><a href="/view/index?id=3238&pageIndex=171" rel="next" itemprop="name">Next →</a></b></span>
</div>
<div style="
text-align: center;
margin: 20px auto;
padding: 13px;
width: 240px;
font-size: 20px;
">
<a class="page-link" style="background-color: #72bf86;" target="_blank" href="/view/index?id=3238&pageIndex=169#bookdownload" title="Free download pdf" >Free download pdf</a>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-lg-3 ml-lg-auto mb-5 mb-lg-0">
<div class="mb-4">
<h5 class="text-dark">Get our desktop app</h5>
</div>
<a class="btn btn-icon btn-indigo rounded-circle mr-2" target="_blank" href="/download/issuhub.dmg">
<i class="fa fa-apple"></i>
</a>
<a class="btn btn-icon btn-indigo rounded-circle" target="_blank" href="/download/issuhub.exe">
<i class="fa fa-windows"></i>
</a>
</div>
<div class="col-6 col-md-3 col-lg mb-5 mb-lg-0">
<h5 class="text-dark">Company</h5>
<!-- Nav Link -->
<ul class="list-unstyled mb-0">
<li class="my-2"><a href="/about">About</a></li>
<li class="my-2"><a href="/contact">Contact</a></li>
<li class="my-2"><a href="/news/index">News</a></li>
</ul>
<!-- End Nav Link -->
</div>
<div class="col-6 col-md-3 col-lg mb-5 mb-lg-0">
<h5 class="text-dark">Features</h5>
<!-- Nav Link -->
<ul class="list-unstyled mb-0">
<li class="my-2"><a href="/quick">Quick Start</a></li>
<li class="my-2"><a href="/desktop">Desktop</a></li>
<li class="my-2"><a href="/editor-help">Editor</a></li>
</ul>
<!-- End Nav Link -->
</div>
<div class="col-6 col-md-3 col-lg">
<h5 class="text-dark">Documentation</h5>
<!-- Nav Link -->
<ul class="list-unstyled mb-0">
<li class="my-2"><a href="/support/index">Support</a></li>
<li class="my-2"><a href="/site/pricing">Pricing</a></li>
</ul>
<!-- End Nav Link -->
</div>
<div class="col-6 col-md-3">
<h5 class="text-dark">Resources</h5>
<!-- Nav Link -->
<ul class="list-unstyled mb-0">
<li class="my-2"> <a href="/tutorial" target="_blank"> <span class="media align-items-center"> <i class="fa fa-info-circle mr-2"></i> <span class="media-body">Tutorial</span> </span> </a> </li>
<li class="my-2"> <a href="/site/login"> <span class="media align-items-center"> <i class="fa fa-user-circle mr-2"></i> <span class="media-body">Your Account</span> </span> </a> </li>
</ul>
<!-- End Nav Link -->
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-6 mb-4 mb-md-0">
<!-- Nav Link -->
<ul class="nav nav-sm nav-white nav-x-sm align-items-center">
<li class="my-2"> <a href="/privacy">Privacy & Policy</a> </li>
<li class=" opacity my-2 mx-3">/</li>
<li class="my-2"> <a href="/terms">Terms</a> </li>
</ul>
<!-- End Nav Link -->
</div>
<div class="col-md-6 text-md-right">
<ul class="list-inline mb-0">
<!-- Social Networks -->
<li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://www.facebook.com/Issuhub-Flipbook-2315543688769343/"> <i class="fa fa-facebook text-dark"></i> </a> </li>
<li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://twitter.com/IssuhubBooks"> <i class="fa fa-twitter text-dark"></i> </a> </li>
<!-- End Social Networks -->
</ul>
</div>
</div>
<!-- Copyright -->
<div style="text-align: center;">
<div >© ISSUHUB. 2024. All rights reserved.</div>
</div>
<!-- End Copyright -->
</div>
</div>
</div>
</div>
<script src="/assets/6df76c57/assets/js/vendors/jquery-3.2.1.min.js"></script>
<script src="/assets/6df76c57/assets/js/vendors/bootstrap.bundle.min.js"></script></body>
</html>
