CHAPTER 2: EPISODE 5

Linking Between Pages

Building multi-page websites with <a href="page2.html">

"The Great McTweak Website Escape"

TRASHY

(dramatically)

PEOPLE! We have a CODE RED situation! Our student has created a website with NO LINKS BETWEEN PAGES! They've essentially built a series of digital PRISONS!

CODY

(confused)

Um, couldn't visitors just use the back button?

TRASHY

(gasps in horror)

THE BACK BUTTON?! What is this, the STONE AGE? (grabs Cody by the shoulders) Do you eat raw meat and communicate in grunts too?!

ALLY

(not looking up from her screen)

That's a bit dramatic, Trashy. Even for you. It's just missing a navigation structure. We can help them add some links.

TRASHY

(ignoring her completely)

I've constructed a simulation to demonstrate the DIRE consequences of a website without proper links. (points to a crude drawing of stick figures trapped in boxes) This is us. TRAPPED FOREVER on separate pages with no way to find each other!

FATTY

(entering with a massive sandwich)

Actually, I wouldn't mind being trapped on a page by myself. Peace and quiet. And no one touching my lunch.

GRUMPY

(stomping in)

Who built a website without proper navigation?! This is a SECURITY NIGHTMARE! Without clear linkage between pages, users could end up ANYWHERE! They could accidentally stumble into the server configuration files! THE DATABASE COULD BE EXPOSED!

ALLY

(sighing)

That's... not how websites work, Grumpy.

GRUMPY

OF COURSE IT DIDN'T! Because responsible developers USE PROPER LINKS!

ASHLEY

(walking in, looking exhausted)

Why is everyone shouting about links? I could hear you from the legal department, which is literally three floors down.

TRASHY

(spinning dramatically)

We're conducting a CRITICAL DEMONSTRATION of website navigation! (leaps onto a desk) Imagine I'm on the homepage! (jumps to another desk) Now I'm on the About page! BUT HOW DID I GET HERE? MAGIC?!

ASHLEY

(deadpan)

You... physically jumped there. That's not how websites work.

TRASHY

EXACTLY! Websites aren't people! They can't jump! They need LINKS! Beautiful, glorious anchor tags with properly formatted href attributes!

GARBAGE

Hyperlinks are the fundamental structural element of the web. Without them, each page exists in isolation—disconnected islands of content floating in the digital void. (picks up marker, starts writing HTML on whiteboard) The anchor tag creates connections, bridges between these islands, allowing users to traverse the information landscape without getting lost.

SNOWZIE

(woof)

*tilts head curiously at the commotion*

GRUMPY

(suddenly professional)

We were just explaining the proper implementation of hyperlinks between web pages for optimal user navigation and security compliance, ma'am.

TRASHY

(suddenly serious, straightens tie that wasn't there before)

Right! Let's demonstrate appropriate inter-page linking strategies for our student immediately!

Introduction to Hyperlinks Between Pages

ALLY

Let's start with the basics. You already know how to create links to external websites using the <a> tag. Creating links between your own pages works the same way, but with relative paths:

<!-- This is how you create a link to another page in your website -->
<a href="about.html">Go to About Page</a>

When you have multiple HTML pages in your website folder, you can link them together to create navigation between them. This is how you create a multi-page website rather than having isolated pages.

CODY

So, if I have two HTML files in the same folder:

index.html (home page)
about.html (about page)

Then I just need to add a link in index.html that points to about.html?

GARBAGE

Precisely. And don't forget that your pages should also link back to each other. The about.html page should contain a link pointing back to index.html, so users can return to your home page.

Understanding Relative vs Absolute Paths

GRUMPY

LISTEN UP! This is CRITICAL security information. When linking between pages, you need to understand the difference between relative and absolute paths!

Relative Paths

Relative paths specify the location of a file relative to the current file. They don't include the domain name.

<a href="about.html">About</a>                 <!-- File in the same folder -->
<a href="pages/contact.html">Contact</a>      <!-- File in a subfolder -->
<a href="../index.html">Home</a>           <!-- File in the parent folder -->

💡 Pro Tip:

Use relative paths for linking between pages in the same website. They keep working even if you move your entire site to a new domain.

Absolute Paths

Absolute paths specify the complete URL to a file, including the protocol and domain name.

<a href="https://example.com/about.html">About</a>
<a href="https://example.com/pages/contact.html">Contact</a>

⚠️ Warning:

Use absolute paths when linking to external websites. Don't use them for internal links, as they'll break if your domain changes.

TRASHY

Wait, I'm confused. What's with the ../ thing? Is that some kind of ancient hieroglyphic?

ALLY

It's a path notation, Trashy. Let me break down how relative paths work:

filename.html - A file in the same folder
folder/filename.html - A file in a subfolder
../filename.html - A file in the parent folder (one level up)
../../filename.html - A file two folders up

Folder Structure Example:

website/
  ├─ index.html
  ├─ about.html
  ├─ images/
  │   ├─ logo.png
  │   └─ profile.jpg
  └─ pages/
      ├─ contact.html
      └─ services.html

From index.html, to link to:

about.html use href="about.html"
logo.png use href="images/logo.png"
contact.html use href="pages/contact.html"

From contact.html, to link to:

index.html use href="../index.html"
services.html use href="services.html"
logo.png use href="../images/logo.png"

Building a Simple Multi-Page Website

FATTY

Alright folks, let's build a simple two-page website with proper navigation. Here's what we'll create:

A home page (index.html)
An about page (about.html)
Navigation links between them

Step 1: Create the Home Page (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website - Home</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        header {
            background-color: #f4f4f4;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        nav ul {
            list-style: none;
            padding: 0;
            display: flex;
            gap: 20px;
        }
        nav a {
            text-decoration: none;
            color: #333;
        }
        nav a:hover {
            text-decoration: underline;
        }
        footer {
            margin-top: 2rem;
            text-align: center;
            color: #666;
        }
    </style>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <h2>Welcome to My Website</h2>
        <p>This is the home page of my first multi-page website.</p>
        <p>Click on the <a href="about.html">About page</a> to learn more about me.</p>
    </main>
    
    <footer>
        <p>© 2023 My Website</p>
    </footer>
</body>
</html>

Step 2: Create the About Page (about.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website - About</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        header {
            background-color: #f4f4f4;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        nav ul {
            list-style: none;
            padding: 0;
            display: flex;
            gap: 20px;
        }
        nav a {
            text-decoration: none;
            color: #333;
        }
        nav a:hover {
            text-decoration: underline;
        }
        footer {
            margin-top: 2rem;
            text-align: center;
            color: #666;
        }
    </style>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <h2>About Me</h2>
        <p>This is the about page of my website.</p>
        <p>I am learning HTML and how to create multi-page websites with links between pages.</p>
        <p>Go back to the <a href="index.html">Home page</a>.</p>
    </main>
    
    <footer>
        <p>© 2023 My Website</p>
    </footer>
</body>
</html>

ASHLEY

Notice how both pages have the same navigation structure. This is a best practice - your navigation should be consistent across your entire site so users always know how to get around.

Result: A Multi-Page Website with Navigation

Home Page (index.html)

My Website

Home About

Welcome to My Website

This is the home page of my first multi-page website.

Click on the About page to learn more about me.

About Page (about.html)

My Website

Home About

About Me

This is the about page of my website.

I am learning HTML and how to create multi-page websites with links between pages.

Go back to the Home page.

CODY

Wait, I'm a bit confused... what happens when you click on "Home" while you're already on the home page? Doesn't that reload the page unnecessarily?

ALLY

Good observation, Cody! You're right, it does reload the page. Some websites add visual cues to show which page you're currently on, and might disable the link to the current page. Here's one approach:

/* CSS */
.current-page {
    font-weight: bold;
    color: #000;
    pointer-events: none; /* Disables the link */
    cursor: default;
    text-decoration: none;
}

/* Then in your HTML */
<li><a href="index.html" class="current-page">Home</a></li>
<li><a href="about.html">About</a></li>

Best Practices for Multi-Page Navigation

GRUMPY

LISTEN UP! I won't sleep at night if you don't follow these critical best practices for website navigation:

1. Consistent Navigation

Keep your navigation menu in the same place on every page. Users should never have to hunt for it.

Consider putting navigation in a shared header that looks the same across all pages.

2. Clear Link Text

Make your link text descriptive. Avoid generic phrases like "click here" or "learn more".

❌ Click here to learn about our services.

✅ Learn about our web development services.

3. Working Links

Regularly check for broken links. Nothing frustrates users more than "404 Not Found" errors.

Use online tools like W3C Link Checker to find broken links.

4. Link Styling

Make links visually distinct from regular text. Users should know what's clickable.

Most websites use color and underlines for links, and change styles on hover.

5. File Organization

Organize your files and folders logically. This makes relative paths easier to manage.

website/
  ├─ index.html
  ├─ about.html
  ├─ contact.html
  ├─ css/
  │   └─ style.css
  └─ images/
      └─ logo.png

6. Home Link

Always provide a way for users to return to your homepage from any page.

Many sites make their logo a clickable link back to the homepage.

GARBAGE

One more thing: the default filename for a website's main page is "index.html". When you type a URL like "example.com" in your browser, the server automatically looks for "index.html". This is why many links to homepages can simply point to the folder rather than explicitly naming the file.


<a href="index.html">Home</a>
<a href="/">Home</a>
<a href="./">Home</a>

Common Navigation Structures

TRASHY

Horizontal nav bars are SO last season. I've developed this REVOLUTIONARY navigation system that requires users to solve a CAPTCHA puzzle before accessing each page! It increases engagement by 4000%!

ALLY

...Or we could stick with navigation structures that don't make users want to throw their computers out the window.

Here are some common navigation patterns that actually work:

Horizontal Navigation Bar

Site Logo

Home About Services Contact

<nav>
    <ul class="nav-menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Vertical Navigation

Welcome

Main content here

<nav class="sidebar">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Footer Navigation

Main content area

Home About Services Contact

<footer>
    <nav>
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="services.html">Services</a>
        <a href="contact.html">Contact</a>
    </nav>
    <p>© 2023 My Website</p>
</footer>

Breadcrumb Navigation

Home > Products > Widgets

Widgets

Product content here

<nav aria-label="Breadcrumb">
    <ol class="breadcrumb">
        <li><a href="index.html">Home</a> ></li>
        <li><a href="products.html">Products</a> ></li>
        <li aria-current="page">Widgets</li>
    </ol>
</nav>

FATTY

These are just the basics. Professional websites often have complex navigation systems with dropdown menus, mega menus, and mobile hamburger menus. But those require JavaScript and more advanced CSS, which we'll cover in future lessons.

Activity: Link Two Pages Together

Your Turn: Create a Multi-Page Website

Now it's time to practice creating your own multi-page website with links between pages.

Requirements:

Create two HTML files:
- index.html (home page)
- about.html (about page)
Add a navigation menu to both pages that links them together
Include at least one in-page link in each page (e.g., a link within a paragraph)
Add some content to each page (text, images, etc.)
Make sure all links work correctly

Getting Started:

Use the examples from this lesson as a starting point. You can copy the code and modify it to fit your needs.

Bonus Challenge:

Add a third page (e.g., contact.html) and update the navigation on all pages to include this new page.

💡 Pro Tip:

To test your links, you need to open the HTML files in your browser. Click on your links to make sure they take you to the correct pages.

⚠️ Common Mistake:

Make sure your filenames match exactly in your links. HTML links are case-sensitive on some servers, so "About.html" and "about.html" might be treated as different files.

Activity Checklist:

Create index.html file
The home page of your website

Create about.html file
A page with information about you

Add navigation to both pages
Links that allow users to move between pages

Add content to each page
Text, images, or other HTML elements

Test all links
Make sure they take you to the correct pages

(Bonus) Add a third page
And update navigation on all pages

Summary: Linking Between Pages

GARBAGE

Let's review what we've learned about linking between pages:

Use the <a> tag with the href attribute to create links between pages
Understand the difference between relative and absolute paths
Organize your files logically to make linking easier
Create consistent navigation across all pages
Use descriptive link text so users know where links will take them

ALLY

With these skills, you can now build websites with multiple pages and navigation between them. This is a fundamental aspect of web development that you'll use in almost every project you create.

TRASHY

YOU'RE NO LONGER TRAPPED IN THE DIGITAL PRISON OF SINGLE-PAGE WEBSITES! You've been LIBERATED by the power of the <a> tag! GO FORTH AND LINK, MY CHILD!

ASHLEY

...and that concludes our lesson on linking between pages. Let's have Snowzie check our work.

SNOWZIE

*trots in and sniffs the code*

*tail begins wagging enthusiastically*

*gives an approving bark*

CODY

She approves! That means...

CODE IS COMMITTED!

Great job! You've learned how to create multi-page websites with navigation.

Next Steps

Now that you know how to link between pages, you're ready to learn about more complex HTML structures like tables. In the next lesson, we'll explore how to create tables for displaying structured data.

Coming Up Next

Chapter 2, Edition 6: Simple Tables

Learn to create tables with rows and columns using <table>, <tr>, and <td> tags.

Practice Ideas

Create a personal website with 3-4 linked pages
Add a navigation menu to the top of each page
Create a breadcrumb trail for deeper pages

Additional Resources

← Previous Episode Home Next Episode →