HTML and CSS Reference
In-Depth Information
</ul>
</nav>
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.
<nav>
<ul>
<li>
