Lesson 2.3: Links and Navigation

🔗 Welcome to the Magic of Links!

Links are what make the web a "web" instead of just a collection of isolated pages. In this lesson, you'll learn how to connect your pages together, create navigation menus, and understand the addresses that make the internet work. This is where your website stops being a single page and becomes a real website!

Links are the secret sauce of the web. They transform individual pages into a connected network of information that users can explore freely.

🌐 Understanding URLs - The Addresses of the Internet

Before we create links, let's understand what you're actually linking to. URLs (Uniform Resource Locators) are like addresses for web content:

Breaking Down a URL

https:// - The protocol (how to connect)

www.example.com - The domain name (the website)

/page.html - The specific page (like a street address)

?name=value - Optional parameters (extra information)

🎯 Examples in Action:

https://google.com - Goes to Google's homepage
https://developer.mozilla.org/en-US/docs/Web/HTML - Specific page about HTML
about.html - A page in the same folder as current page
../contact.html - A page in the parent folder

🔨 Creating Your First Link

The tag (anchor tag) is what creates clickable links. Here's the basic syntax:

                Basic Link Structure
                <a href="destination.html">Click here to visit the page!</a>
            

Here's how it looks: Click here to visit the page!

And here's a link to Google: Visit Google (opens in new tab)

The Parts of a Link

- The opening tag

href="..." - The attribute that specifies where to go

Link text - What the user clicks on

- The closing tag

📁 Types of Links - Internal vs. External

Internal Links (Pages on Your Website)

                Links to Your Own Pages
                <a href="about.html">About Me</a>
<a href="contact.html">Contact Page</a>
<a href="hobbies/index.html">My Hobbies</a>
<a href="../index.html">Back to Homepage</a>
            

External Links (Other Websites)

                Links to External Websites
                <a href="https://developer.mozilla.org">MDN Web Docs</a>
<a href="https://www.w3schools.com/html/" target="_blank">W3Schools HTML Tutorial</a>
            

🌟 Pro Tip: Use target="_blank" for External Links

Adding target="_blank" opens external links in a new tab, so users don't leave your website entirely.

🏗️ Building a Multi-Page Website

Let's create a simple 3-page website to practice linking. First, let's set up your file structure:

website/ ├── index.html (Homepage) ├── about.html (About page) ├── hobbies.html (Hobbies page) └── styles/ (folder for CSS files)

Create the Homepage (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>My Personal Website</title>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    <p>Hi, I'm Zack and this is my personal website.</p>
    
    <h2>Explore My Site</h2>
    <ul>
        <li><a href="about.html">About Me</a></li>
        <li><a href="hobbies.html">My Hobbies</a></li>
    </ul>
</body>
</html>

Create the About Page (about.html)

<!DOCTYPE html>
<html>
<head>
    <title>About Me - My Website</title>
</head>
<body>
    <h1>About Me</h1>
    <p>Hello! I'm Zack, and I'm learning web development through this awesome course!</p>
    
    <h2>Navigation</h2>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="hobbies.html">My Hobbies</a></li>
    </ul>
    
    <p><a href="index.html">← Back to Home</a></p>
</body>
</html>

Create the Hobbies Page (hobbies.html)

<!DOCTYPE html>
<html>
<head>
    <title>My Hobbies - My Website</title>
</head>
<body>
    <h1>My Hobbies</h1>
    <p>I love learning new things! Here are some of my hobbies:</p>
    
    <h2>Programming</h2>
    <p>Building websites and learning about web development.</p>
    
    <h2>Music</h2>
    <p>Playing guitar and discovering new artists.</p>
    
    <h2>Navigation</h2>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Me</a></li>
    </ul>
    
    <p><a href="index.html">← Back to Home</a></p>
</body>
</html>

🎯 Understanding Relative vs. Absolute Paths

                Relative Paths (Best for Your Own Site)
                <!-- Same folder -->
<a href="about.html">About Page</a>

<!-- In a subfolder -->
<a href="hobbies/programming.html">Programming</a>

<!-- Go up one folder -->
<a href="../index.html">Homepage</a>
            

                Absolute Paths (For External Sites)
                <!-- External website -->
<a href="https://www.google.com">Google</a>

<!-- Full URL (less common for internal links) -->
<a href="https://yoursite.com/about.html">About Me</a>
            

🛠️ Build Your Own Multi-Page Site

Now it's your turn! Create a 3-page website with:

index.html - Homepage with links to other pages
about.html - Information about yourself
favorites.html - Your favorite things (movies, games, foods, etc.)

Make sure each page links back to the others so users can navigate easily!

⚠️ Common Mistakes to Watch For

Forgetting the .html extension in your links
Mixing up relative paths (use ../ to go up folders)
Not testing your links to make sure they work

🧭 Creating Better Navigation

Good navigation helps users find their way around your website. Here are some best practices:

🌟 Navigation Best Practices

Keep it consistent - Navigation should be in the same place on every page
Make it obvious - Users should know what to click to navigate
Don't overdo it - 3-7 main navigation items work best
Include a "Home" link - Users should always be able to get back to start

Simple Navigation Menu Example

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="hobbies.html">Hobbies</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

🔍 Testing Your Links

After creating your pages, test every single link to make sure it works:

Open in Browser

Double-click your index.html file to open it in your browser.

Click Every Link

Test each navigation link to make sure it goes to the right page.

Check File Names

If a link doesn't work, check that the filename in your link matches the actual filename exactly.

🎉 You're Building Real Websites!

Congratulations! You just created your first multi-page website with working navigation. This is a huge milestone!

✅ What You've Accomplished:

✅ Created multiple HTML pages that link to each other
✅ Understood the difference between relative and absolute paths
✅ Built proper navigation between pages
✅ Created a working multi-page website
✅ Learned the fundamentals of URL structure

You've just built your first real website! This isn't just a single page anymore - it's a connected network of pages that users can navigate through. This is exactly how real websites work.

In our next lesson, we'll add visual elements to your website by learning how to properly include images and media content.

← Back: Text and Headings Next: Images and Media →