Developing a Web Site - HTML, CSS, and Dynamic HTML - page 79

Storyboarding a protected structure is particularly important to ensure that no unau-
thorized access to the protected area is allowed in the site design.

Creating a Navigation List
Every Web site should include a navigation list , which is a list containing links to the main
topic areas of the site. Ideally, this same list should appear prominently on every page,
usually near the top of the page as part of the header or as a sidebar to the main content.
HTML5 introduced the nav structural element to make it easier to mark up navigation
lists. The syntax of the element is

<nav>
list of navigation links
</nav>
where list of navigation links is a list of elements that are linked to other pages
on the Web site. Prior to HTML5, such lists would often be inserted within the generic
div element as

<div id=” id ”>
list of navigation links
</div>
where id is whatever id the page author would supply to identify the navigation list.
Gerry suggests you add the topics for his three sample pages as an unordered list
within the nav element as follows:

<nav>
<ul>
<li>Home</li>
<li>Tips</li>
<li>Glossary</li>
</ul>
</nav>
Gerry has already designed styles for these new elements and placed them within the
camstyles.css style sheet. The style sheet will format the elements so that the list appears
as a horizontally aligned set of boxes. As Gerry adds more sample pages, he can easily
extend this list to include the new topics, but for now he needs only these three.
Add this navigation list to each of the three sample pages that Gerry has given you.

To create the navigation list:

◗

1. Return to the home.htm file in your text editor.
◗

2. At the top of the file directly below the header element, insert the following code
as shown in Figure 2-8:

<nav>
<ul>
<li>Home</li>
<li>Tips</li>
<li>Glossary</li>
</ul>
</nav>