|
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:
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).
|
In each file, find the link that jumps back to that
same page. Change the initial
For example, we’d modify the links in the
|
<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 >> |