HTML and CSS Reference
Task: Exercise 7.1: Creating a Real HTML Page
Here's your chance to apply what you've learned and create a real web page. No more
disjointed or overly silly examples. The web page you create in this section is a real one,
suitable for use in the real world (or the real world of the web, at least).
Your task for this example is to design and create a home page for a bookstore called
The Bookworm, which specializes in old and rare topics.
Planning the Page Lesson 2, “Preparing to Publish on the Web,” mentioned that
planning your web page before writing it usually makes building and maintaining the
elements easier. First, consider the content you want to include on this page. The follow-
ing are some ideas for topics for this page:
The address and phone number of the bookstore
A short description of the bookstore and why it's unique
Recent titles and authors
Now come up with some ideas for the content you're going to link to from this page.
Each title in a list of recently acquired topics seems like a logical candidate. You also can
create links to more information about each book, its author and publisher, its price, and
maybe even its availability.
The Upcoming Events section might suggest a potential series of links, depending on
how much you want to say about each event. If you have only a sentence or two about
each one, describing them on this page might make more sense than linking them to
another page. Why make your readers wait for each new page to load for just a couple of
lines of text?
Other interesting links might arise in the text itself, but for now, starting with the basic
link plan is enough.
Beginning with a Framework Next, create the framework that all HTML files
must include: the document structure, a title, and some initial headings. Note that the title
is descriptive but short; you can save the longer title for the <h1> element in the body of
the text. The four <h2> subheadings help you define the four main sections you'll have
on your web page:
<title> The Bookworm Bookshop </title>