Scribd
Upload
12 views5 pages

Hyperlink in HTML

The document explains how to work with hyperlinks in HTML using the `<a>` tag, which allows users to navigate between pages or resources. It includes a basic syntax example, a real-life application for a personal portfolio website, and a classroom script for teaching the concept. Additionally, it covers external and internal links, as well as the use of the `target` attribute to open links in a new tab.

Uploaded by

praveenpk1804
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views5 pages

Hyperlink in HTML

The document explains how to work with hyperlinks in HTML using the `<a>` tag, which allows users to navigate between pages or resources. It includes a basic syntax example, a real-life application for a personal portfolio website, and a classroom script for teaching the concept. Additionally, it covers external and internal links, as well as the use of the `target` attribute to open links in a new tab.

Uploaded by

praveenpk1804
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Hyperlink in HTML

Great! Here’s a clear explanation of "Working with Hyperlinks in HTML", along


with a real-life example to help you explain it in class.

✅ What is a Hyperlink in HTML?


A hyperlink (or simply a link) allows users to navigate from one page or
resource to another — either within the same website or to an external site.

In HTML, hyperlinks are created using the `<a>` tag (short for "anchor").

🔧 Basic Syntax of a Hyperlink


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

`href` (Hypertext REFerence): The destination URL (where the link goes).

`Link Text`: The clickable text users see on the webpage.

🌐 Real-Life Example
Imagine you are creating a personal portfolio website. On your homepage, you want to
add a link to your LinkedIn profile and to another internal page like "Contact Me".

Example Code:

🚀 Powered by ChatGPT Exporter 1/5


<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>

<h1>Welcome to My Portfolio</h1>

<!-- External link to LinkedIn -->


<p>Visit my <a href="https://www.linkedin.com/in/yourname"
target="_blank">LinkedIn Profile</a>.</p>

<!-- Internal link to contact.html -->


<p>Want to get in touch? <a href="contact.html">Contact Me</a></p>

</body>
</html>

🧠 Explanation of the Example:


1. External Link:

Clicking on “LinkedIn Profile” opens your LinkedIn page in a new tab


(because of `target="_blank"`).

2. Internal Link:

Clicking on “Contact Me” takes the user to `contact.html`, another page in


the same website.

🗒️ Extra Tip (Optional to Add in Class):


🚀 Powered by ChatGPT Exporter 2/5
You can also link to specific sections on a page using anchor IDs:

<a href="#about">Go to About Section</a>

<!-- Somewhere later on the page -->


<h2 id="about">About Me</h2>

Would you like a simple slide or diagram to help explain this in class visually?

Sure! Here's a simple 2–3 minute classroom script in easy language that you can use
to explain working with hyperlinks in HTML to your classmates:

🎤 Classroom Script: "Working with Hyperlinks in HTML"


"Good morning everyone!
Today, I will explain how hyperlinks work in HTML in a very simple way.

First, what is a hyperlink?

A hyperlink is a clickable text or image that takes us from one page to another. You all
use it every day — like when you click on a link in Google search, or when you click on
'Contact Us' on a website.

In HTML, we use the `<a>` tag to create a link. It looks like this:

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

Let me break it down:

The `<a>` tag is called the anchor tag.

🚀 Powered by ChatGPT Exporter 3/5


The `href` attribute means hyperlink reference — this is where we put the link
we want to go to.

The text between the tags is what the user clicks.

For example:

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

If I put this in my webpage, and someone clicks ‘Go to Google’, it will open Google.

Now, there are two types of links:

1. External links – these go to other websites, like Google or YouTube.

2. Internal links – these go to other pages of your own website, like a contact page.

Example of internal link:

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

You can also use a small extra part like `target="_blank"` to open the link in a new
tab. Like this:

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

So to sum up:

Use the `<a>` tag

Set the `href` to the page you want

Put link text inside the tag

That’s how hyperlinks work in HTML. Thank you!"

🚀 Powered by ChatGPT Exporter 4/5


Let me know if you'd like a version in Hindi or with a visual chart to show in class.

🚀 Powered by ChatGPT Exporter 5/5

You might also like