Creating Multi-Link Pages

Step 1: Create Links

In one of the files, create all the links, one per line, as you see on the right. Use the vertical bar (on US keyboards, it’s on the same key as the “\” backslash key) to separate the items.

<div align="center">
<a href="index.html">Index</a> |
<a href="nature.html">Nature</a> |
<a href="history.html">History</a> |
<a href="art.html">Art</a>
</div>

You’ll notice that this takes up a lot of room in your HTML file, but it looks like this on the screen:

Index | Nature | History | Art

Step 2: Copy and Paste

Use copy-and-paste to paste these lines into all the other files. You could stop at this step, and all the links would be set up and working.

However, since all the links are active, each page will have a link that leads right back to the same page. While not disastrous, it can confuse users. (Click the links above to see what we mean).

Step 3: Eliminate Self-Links

In each file, find the link that jumps back to that same page. Change the initial <a> tag to a <span> tag, and the closing </a> to a </span> tag.

For example, we’d modify the links in the nature.html file to look like this (the changed line is in boldface).

<div align="center">
<a href="index.html">Index</a> |
<span style="color: red">Nature</span> |
<a href="history.html">History</a> |
<a href="art.html">Art</a>
</div>

This change serves two purposes: not only does it deactivate the “self-link” it also highlights your current page in a different color. This gives users an extra cue as to their location within your website.

By the way, you don’t have to use red text to highlight the current page; you may use a different color or boldface or italic as you wish.

 << Linking Multiple Pages Index Summary >>