Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

146 LESSON 7: Formatting Text with HTML and CSS

Adding the Table of Contents The page you’re creating will require a lot of scroll-

ing to get from the top to the bottom. One nice enhancement is to add a small table of

contents at the beginning of the page, listing the sections in a bulleted list. If a reader

clicks one of the links in the table of contents, he’ll automatically jump to the section

that’s of most interest to him. Because you’ve added the IDs already, it’s easy to see

where the links will take you.

You already have the heading for the table of contents. You just need to add the bulleted

list and then create the links to the other sections on the page. The code looks like the fol-

lowing:

Input ▼

<h2 id="contents">Contents</h2>

<ul>

<li><a href="#about">About the Bookworm Bookshop</a></li>

<li><a href="#recent">Recent Titles</a></li>

<li><a href="#upcoming">Upcoming Events</a></li>

</ul>

Figure 7.12 shows an example of the introductory portion of the Bookworm Bookshop

page as it appears in a browser.

Output ▼

FIGURE 7.12

The top section

of the Bookworm

Bookshop page.

▼

▼