HTML and CSS Reference
In-Depth Information
4. Next you need to add links to each page in your website. First create a new <li> element within the <ul>
element for each of your pages, excluding the sitemap. (You should have five.)
5. Create a new link using the <a> element within each of these list items.
6. Set the anchor text for these links to the pages of your website: Home, About, News, Menu, and Locations.
Here is an example of the home page link.
<li><a href="">Home</a></li>
7. Set the href attribute of these links to point to the pages in your website: index.html , about.html ,
news.html , menu.html , and locations.html .
<li><a href=" index.html ">Home</a></li>
8. Now add a title attribute to each <a> element and give it some content that describes the page you are
linking to. I have provided some examples:
Joe's Pizza Co.
Find out more about Joe's Pizza Co.
Latest news about Joe's Pizza Co.
The restaurant menu for Joe's Pizza Co.
Joe's Pizza Co. restaurant locations.
9. It's nice for users to be able to quickly identify the page that they are currently on when they look at the nav-
igation. To make this possible for them, you need to add a class attribute to the link that points to the cur-
rent page and set the value of this attribute to active .
<li><a href="index.html" title="..."
class="active" >Home</a></li>
The stylesheet you added in Chapter 2 includes some code that will style the active link slightly differently to make
it stand out.
10. Save the index.html file.
11. Copy the navigation that you just created into your about.html .
12. Move the class attribute that will apply the active styling to the about link.
13. Save the about.html file.
Here is how your navigation should look in your index.html file. If you are having problems, try copying this
code from the index.html file that can be downloaded from the topic's website.
Search WWH ::

Custom Search