🔗 Day 3 — HTML Links and Navigation

on

🔗 Day 3 — Links and Navigation in HTML

Welcome to Day 3 🎉 Yesterday you explored HTML elements and structure. Today, let’s make your web pages interactive with links and navigation! Links are the foundation of the internet — they connect pages, posts, and resources across the web.

🌐 1️⃣ The Anchor Tag

The <a> tag defines a hyperlink — a clickable text, image, or button that navigates users to another page or location. 

<a href="https://www.google.com">Visit Google</a>

Here, the href attribute defines the destination. When users click the link, the browser opens Google.

📄 2️⃣ Linking Pages Within Your Website

You can link to another page in your own project directory. For example: 

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

If the linked file is in another folder, include the path: 

<a href="pages/contact.html">Contact</a>

🪟 3️⃣ Opening Links in a New Tab

Add target="_blank" to open links in a new browser tab. 

<a href="https://www.wikipedia.org" target="_blank">Open Wikipedia</a>

📌 4️⃣ Link to a Section on the Same Page

Use id attributes with # to jump to sections within the same page. 

<a href="#footer">Go to Footer</a>

...

<h2 id="footer">Footer Section</h2>
<p>You’ve reached the bottom!</p>

🧭 5️⃣ Navigation Menus

Navigation menus help users move around a website. Combine links inside a list: 

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

🖼 6️⃣ Image as a Link

You can turn images into clickable links by wrapping them with <a> tags: 

<a href="https://www.example.com">
  <img src="logo.png" alt="Example Logo" width="120">
</a>

🧠 7️⃣ Practice Task

  1. Create a link that opens your favorite website in a new tab.
  2. Make a navigation menu with links to “Home”, “Projects”, and “Contact”.
  3. Add an image that links to your social profile.
  4. Create an anchor that jumps to the footer section of your page.

🧮 Mini Quiz

  • Q1: Which attribute defines the destination URL?
  • Q2: How do you make a link open in a new tab?
  • Q3: What is the purpose of the id attribute in linking?

🎯 Summary

Links make the web dynamic and interconnected. With this knowledge, you can now connect multiple HTML pages and build navigation structures for any project. Next, we’ll dive into **lists and tables** to structure your data neatly!

Comments

Post a Comment