Now that you've learned how to create lists and links, you can create a link menu. Link menus are links on your web page that are arranged in list form or in some other short, easy-to-read, and easy-to-understand format. Link menus are terrific for pages that are organized in a hierarchy, for tables of contents, or for navigation among several pages. Web pages that consist of nothing but links often organize the links in menu form.
The idea of a link menu is that you use short, descriptive terms as the links, with either no text following the link or with a further description following the link itself. Link menus look best in a bulleted or unordered list format, but you also can use glossary lists or just plain paragraphs. Link menus enable your readers to scan the list of links quickly and easily, a task that might be difficult if you bury your links in body text.
In this exercise, you'll create a web page for a set of book reviews. This page will serve as the index to the reviews, so the link menu you'll create is essentially a menu of book names.
Start with a simple page framework: a first-level heading and some basic explanatory text:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Really Honest Book Reviews</title> </head> <body> <h1>Really Honest Book Reviews</h1> <p>I read a lot of books about many different subjects. Though I'm not a book critic, and I don't do this for a living, I enjoy a really good read every now and then. Here's a list of books that I've read recently:</p>
Now add the list that will become the links, without the link tags themselves. It's always easier to start with link text and then attach actual links afterward. For this list, you'll use a tag to create a bulleted list of individual books. The <ol> tag wouldn't be appropriate because the numbers would imply that you were ranking the books in some way. Here's the HTML list of books; Figure 5.8 shows the page as it currently looks with the introduction and the list.
<ul> <li><i>The Rainbow Returns</i> by E. Smith</li> <li><i>Seven Steps to Immeasurable Wealth</i> by R. U. Needy</li> <li><i>The Food-Lovers Guide to Weight Loss</i> by L. Goode</li> <li><i>The Silly Person's Guide to Seriousness</i> by M. Nott</li> </ul> </body> </html>
Figure 5.8. A list of books.
Now, modify each of the list items so that they include link tags. You'll need to keep the <li> tag in there because it indicates where the list items begin. Just add the <a> tags around the text itself. Here you'll link to filenames on the local disk in the same directory as this file, with each individual file containing the review for the particular book:
<ul> <li><a href="rainbow.html"><i>The Rainbow Returns</i> by E. Smith</a></li> <li><a href="wealth.html"><i>Seven Steps to Immeasurable Wealth</i> by R. U. Needy</a></li> <li><a href="food.html"><i>The Food-Lovers Guide to Weight Loss</i> by L. Goode</a></li> <li><a href="silly.html"><i>The Silly Person's Guide to Seriousness</i> by M. Nott</a></li> </ul>
The menu of books looks fine, although it's a little sparse. Your readers don't know anything about each book (although some of the book names indicate the subject matter) or whether the review is good or bad. An improvement would be to add some short explanatory text after the links to provide hints of what is on the other side of the link:
<ul> <li><a href=rainbow.html"><i>The Rainbow Returns</i> by E. Smith</a>. A" fantasy story set in biblical times. Slow at times, but interesting.</li> <li><a href="wealth.html"><i>Seven Steps to Immeasurable Wealth</i> by R. U. Needy</a>. I'm still poor, but I'm happy! And that's the whole point.</li> <li><a href="food.html"><i>The Food-Lovers Guide to Weight Loss</i> by L. Goode </a>. At last! A diet book with recipes that taste good!</li> <li><a href="silly.html"><i>The Silly Person's Guide to Seriousness</i> by M. Nott</a>. Come on ... who wants to be serious?</li> </ul>
The final list looks like Figure 5.9.
Figure 5.9. The final menu listing.
You'll use link menus similar to this one throughout this book.