HTML and CSS Reference
In-Depth Information
<h1>
The Bookworm: A Better Book Store
</h1>
<h2>
Contents
</h2>
<h2>
About the Bookworm Bookshop
</h2>
<h2>
Recent Titles (as of 11-Jan-2010)
</h2>
<h2>
Upcoming Events
</h2>
</body>
</html>
Each heading you've placed on your page marks the beginning of a particular section.
You'll create an anchor at each of the topic headings so that you can jump from section
to section with ease. The anchor names are simple:
top
for the main heading;
contents
for the table of contents; and
about
,
recent
, and
upcoming
for the three subsections on
the page. With the anchors in place, the revised code looks like the following:
Input
▼
<!DOCTYPE html><html>
<head>
<title>
The Bookworm Bookshop
</title>
</head>
<body>
<a name=”top”><h1>
The Bookworm: A Better Book Store
</h1></a>
<a name=”contents”><h2>
Contents
</h2></a>
<a name=”about”><h2>
About the Bookworm Bookshop
</h2></a>
<a name=”recent”><h2>
Recent Titles (as of 11-Jan-2010)
</h2></a>
<a name=”upcoming”><h2>
Upcoming Events
</h2></a>
</body>
</html>
Adding Content
Now begin adding the content. You're undertaking a literary
endeavor, so starting the page with a nice quote about old topics would be a nice touch.
Because you're adding a quote, you can use the <blockquote> tag to make it stand out as
such. Also, the name of the poem is a citation, so use <cite> there, too.
Insert the following code on the line after the level 1 heading:
Input
▼
<blockquote>
“Old topics are best—-how tale and rhyme
<br />
Float with us down the stream of time!”
<br />
- Clarence Urmy,
<cite>
Old Songs are Best
</cite>
</blockquote>
Immediately following the quote, add the address for the bookstore. This is a simple
paragraph with the lines separated by line breaks, like the following:
