Module 4: Links & Navigation

📖 The Anchor Tag <a>

The <a> tag creates hyperlinks — the foundation of the World Wide Web. The href attribute specifies the destination.

Basic Link Syntax

<a href="https://ethioweb.net">Visit Ethioweb.net</a>
            

Essential Attributes

Attribute	Purpose	Example
`href`	The URL or destination (required)	`href="about.html"`
`target`	Where to open the link	`target="_blank"` (new tab)
`title`	Tooltip text on hover	`title="Learn more"`
`download`	Prompts file download	`download="file.pdf"`

Opening Links in a New Tab

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Open in New Tab (Safe)
</a>
            

⚠️ Security Best Practice: Always add rel="noopener noreferrer" when using target="_blank". This prevents the new page from accessing your page via JavaScript (tabnabbing protection).

🔗 Absolute vs. Relative URLs

Understanding URLs is crucial for building multi-page websites.

Absolute URLs

Complete addresses that work from anywhere. Use these for external websites.

<a href="https://ethioweb.net/courses/html">Full URL</a>
<a href="https://ethioweb.net">Protocol + Domain</a>
            

Relative URLs

Paths relative to the current file's location. Use these for internal pages.

<!-- Same folder -->
<a href="about.html">About Page</a>

<!-- Subfolder -->
<a href="pages/contact.html">Contact Page</a>

<!-- Parent folder -->
<a href="../index.html">Go Up One Level</a>

<!-- Root-relative (starts from website root) -->
<a href="/images/logo.png">From Root</a>
            

URL Path Cheat Sheet

Path	Meaning
`page.html`	File in the same folder
`folder/page.html`	File inside a subfolder
`../page.html`	File in the parent folder
`../../page.html`	File two levels up
`/page.html`	File at the website root

📍 Internal Page Navigation (Anchor Links)

You can link to specific sections within the same page using fragment identifiers (IDs).

How It Works

Add an id attribute to the target element
Link to it using #id-name

<!-- The navigation links -->
<nav>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
</nav>

<!-- The target sections -->
<h2 id="about">About Us</h2>
<p>Content about the company...</p>

<h2 id="services">Our Services</h2>
<p>Content about services...</p>

<h2 id="contact">Contact Us</h2>
<p>Contact information...</p>
            

💡 Smooth Scrolling: You can add smooth scrolling with CSS: html { scroll-behavior: smooth; }

Linking to Page Sections from Other Pages

<!-- Link to the #services section of about.html -->
<a href="about.html#services">See Our Services</a>
            

✏️ Exercise 4.1: Build a Multi-Page Website

Your Task

Create a simple 3-page personal website with navigation:

Create a folder called my-website
Create index.html (Homepage) with:
- Your name as <h1>
- A welcome paragraph
- Navigation links to all three pages
Create about.html with:
- "About Me" as <h1>
- 2-3 paragraphs about yourself
- Navigation links to all three pages
Create contact.html with:
- "Contact" as <h1>
- Your email as a clickable mailto: link
- A link to Ethioweb.net that opens in a new tab (with security attributes)
- Navigation links to all three pages

Email Links

<a href="mailto:yourname@example.com">Send me an email</a>
            

📝 Module 4 Quiz

🎯 Module Summary

✅ Use <a href="..."> to create links
✅ Use absolute URLs for external sites, relative URLs for internal pages
✅ target="_blank" opens in new tab (always add rel="noopener noreferrer")
✅ Use #id for internal page navigation
✅ mailto: creates email links

← Previous Module Next: Module 5 →