Why Page Links Matter

A static website normally has more than one HTML page. Links connect those pages so users can move through the website.

In this step, you will connect index.html, about.html, timetable.html and contact.html using relative links.

Link Example

<a href="about.html">About</a>

This opens about.html when it is in the same folder as the current page.

Four Page Menu

<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="timetable.html">Timetable</a>
    <a href="contact.html">Contact</a>
</nav>

Put the same menu on every page so the website feels consistent.

Build It Yourself

1. Check that index.html, about.html, timetable.html and contact.html exist in the same folder.
2. Check that the same navigation menu appears on all four pages.
3. Open index.html in the browser.
4. Click each link and check it opens the correct page.
5. Use the browser back button or menu links to test the route back to the homepage.
6. Fix any broken file names or paths.

Common Mistakes

• Linking to a file name that does not exist.
• Using different menus on different pages.
• Forgetting the .html extension.
• Using absolute computer paths instead of project-relative paths.

Success Checklist

• Every page has a navigation menu.
• Every menu link has a correct href.
• Users can move from the homepage to the other pages.
• Users can return to the homepage from every page.