Complete Web Designing Course for Beginners

Hyperlinks & Navigation

🌐 Connecting Web Pages and Creating Navigation Menus in HTML

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand what hyperlinks are

✅ Create clickable links

✅ Link webpages together

✅ Open links in a new tab

✅ Link external websites

✅ Link internal webpages

✅ Create navigation menus

✅ Build multi-page websites

📖 Introduction

Imagine you are visiting a website.

You click:

About Us

and suddenly another page opens.

Then you click:

Contact Us

and a different page appears.

Have you ever wondered:

🤔 How are pages connected?

🤔 How does one page open another?

The answer is:

🔗 Hyperlinks

Hyperlinks are one of the most important features of the World Wide Web.

Without hyperlinks:

❌ No website navigation

❌ No Google Search Results

❌ No YouTube Recommendations

❌ No connected webpages

The entire internet works because webpages can link to each other.

🌍 What is a Hyperlink?

A hyperlink is a clickable element that takes users from one location to another.

A hyperlink can open:

✅ Another webpage

✅ Another website

✅ A document

✅ An image

✅ An email

✅ A section within the same page

🏠 Real Life Example

Imagine reading a book.

At the end of a chapter:

Go to Page 50 for more information.

You move to another page.

Similarly:

Hyperlinks help users move between webpages.

🔗 HTML Anchor Tag

Hyperlinks are created using:

<a>

This is called:

Anchor Tag

Basic Syntax

<a href="URL">Link Text</a>

Understanding the Syntax

<a>

Anchor Tag

href

Hyperlink Reference

Specifies destination.

Link Text

Text visible to users.

Example

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

Output

A clickable link:

Visit Google

When clicked:

Google opens.

🌐 Linking External Websites

External links point to other websites.

Example:

<a href="https://www.youtube.com">
Visit YouTube
</a>

Another Example

<a href="https://www.wikipedia.org">
Visit Wikipedia
</a>

Practical Example

<!DOCTYPE html>

<html>

<head>

<title>External Links</title>

</head>

<body>

<h1>Useful Websites</h1>

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

<br><br>

<a href="https://www.youtube.com">
YouTube
</a>

</body>

</html>

🎯 Expected Output

Useful Websites

Google

YouTube

Both links are clickable.

📂 Linking Internal Pages

Internal links connect pages within the same website.

This is one of the most important concepts in web design.

Example Website Structure

website/

│

├── index.html

├── about.html

├── contact.html

Homepage

File:

index.html

Code:

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

What Happens?

When clicked:

about.html

opens.

Example

Suppose we have:

index.html

<h1>Home Page</h1>

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

about.html

<h1>About Us</h1>

<p>
Welcome to our website.
</p>

Now both pages are connected.

🌟 Creating Multiple Links

Example:

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

<br>

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

<br>

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

Output

Home

About

Contact

🔥 Opening Links in a New Tab

By default:

Links open in the same tab.

Sometimes we want:

A new browser tab.

Target Attribute

Use:

target="_blank"

Example

<a href="https://www.google.com"
target="_blank">

Google

</a>

Result

Google opens in a new tab.

🎯 Why Use New Tabs?

Useful when linking:

External Websites
References
Documentation

This prevents users from leaving your website.

🖼️ Making Images Clickable

Images can also be hyperlinks.

Example

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

<img src="logo.png">

</a>

Result

Clicking image opens Google.

📧 Email Links

HTML can open email applications.

Syntax

<a href="mailto:example@gmail.com">
Send Email
</a>

Example

<a href="mailto:info@example.com">
Contact Us
</a>

Result

Email application opens automatically.

📞 Phone Number Links

Useful for mobile devices.

Example

<a href="tel:+919876543210">
Call Now
</a>

Result

Clicking the link starts a phone call on supported devices.

🎯 Navigation Menus

Almost every website contains:

Home

About

Services

Contact

This is called:

Simple Navigation Menu

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

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

<a href="services.html">Services</a>

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

Output

Home About Services Contact

Better Navigation Menu

<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>

Output

• Home

• About

• Services

• Contact

🏗️ Building a Simple Multi-Page Website

Let’s create:

Homepage

About Page

Contact Page

Step 1

Create:

index.html

Code:

<h1>Home Page</h1>

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

<br>

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

Step 2

Create:

about.html

Code:

<h1>About Us</h1>

<p>
We provide web designing courses.
</p>

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

Step 3

Create:

contact.html

Code:

<h1>Contact Us</h1>

<p>
Email: info@example.com
</p>

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

Result

Three connected webpages.

Congratulations!

You have built a mini website.

🌟 Absolute vs Relative Links

Absolute Link

Contains complete URL.

Example:

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

Relative Link

Contains local file path.

Example:

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

Difference

Absolute Link	Relative Link
Full URL	Local File
External Websites	Internal Pages
Starts with https://	File Name
Internet Required	Local Files Work

⚠️ Common Beginner Mistakes

Mistake 1

Missing href Attribute

Wrong:

<a>Google</a>

Correct:

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

Mistake 2

Incorrect File Name

Wrong:

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

File doesn’t exist.

Correct:

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

Mistake 3

Forgetting Quotes

Wrong:

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

Correct:

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

🏆 Mini Project – Student Navigation Website

Create:

index.html

<h1>Student Website</h1>

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

<br>

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

about.html

<h1>About Me</h1>

<p>
I am a web designing student.
</p>

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

contact.html

<h1>Contact Me</h1>

<p>
Email: student@example.com
</p>

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

📝 Practical Activity

Create:

Home Page

About Page

Contact Page

Connect them using hyperlinks.

Test all links.

Verify:

✅ Home Opens

✅ About Opens

✅ Contact Opens

📋 Assignment

Assignment 1.6

Answer the following:

What is a hyperlink?
Which tag creates hyperlinks?
What is the purpose of href?
How do you open links in a new tab?
What is the difference between absolute and relative links?
How do you create an email link?
Create a navigation menu containing Home, About, and Contact.

🧠 Quiz

Q1. Which tag creates hyperlinks?

A. <link>

B. <a>

C. <href>

D. <nav>

✅ Answer: B

Q2. Which attribute specifies link destination?

A. target

B. src

C. href

D. alt

✅ Answer: C

Q3. Which value opens links in a new tab?

A. _self

B. _new

C. _blank

D. _page

✅ Answer: C

Q4. Which link type is used for another website?

A. Relative Link

B. Internal Link

C. Absolute Link

D. Local Link

✅ Answer: C

Q5. Which protocol creates email links?

A. email:

B. mail:

C. smtp:

D. mailto:

✅ Answer: D

📌 Lesson Summary

✅ Hyperlinks connect webpages together.

✅ HTML uses the <a> tag for hyperlinks.

✅ The href attribute specifies the destination.

✅ Links can connect external websites and internal webpages.

✅ Navigation menus are built using hyperlinks.

✅ target="_blank" opens links in a new tab.

✅ Email and phone links can also be created using hyperlinks.

✅ Hyperlinks are one of the most important features of the web.