🎯 Aim

To create an HTML webpage that demonstrates how to create hyperlinks using the <a> (anchor) tag with various types of links.

🛠️ What You Need

Notepad++ or any text editor
A web browser to view the result

📖 Introduction

Hyperlinks are the backbone of the web. The <a> tag is used to create links. You can create:

External links — to other websites
Internal links — to other pages on your site
Anchor links — to sections within the same page
Email links — using mailto:
Phone links — using tel:
Image links — images that act as clickable links
Download links — to download files

💡 Tip: Always use descriptive link text. Instead of "Click here," use the name of the page or resource you're linking to. This improves accessibility and SEO.

📊 Preview of the Output

🔗 Creating Hyperlinks

🌐 External Links

🔗 Google: Visit Google (opens in new tab)

🔗 YouTube: Visit YouTube

🔗 Wikipedia: Visit Wikipedia

📄 Internal Links

Go to Page 2 Link to another HTML file

Go to Section 1 Jump to a section on the same page

Go to Section 2 Jump to another section

📧 Email & Phone Links

📧 Email: info@example.com

📞 Phone: +92 300 1234567

🖼️ Navigation Menu

Home About Services Contact

📥 Download Link

📄 Download PDF Document

📝 Step‑by‑Step: Creating the HTML Page

Step 1: Open Notepad++ and Write the Code

Launch Notepad++.
Set the language to HTML (Language → H → HTML).
Write the following simplified HTML code:

<html> <head> <title>Hyperlinks - Creating Links</title> </head> <body id="top"> <h1>🔗 Creating Hyperlinks in HTML</h1>  <h2>🌐 External Links</h2>  <p> Visit <a href="https://www.google.com" target="_blank">Google</a> to search the web. </p>  <p> Watch videos on <a href="https://www.youtube.com" target="_blank" title="Watch videos on YouTube">YouTube</a>. </p>  <p> Learn about Pakistan on <a href="https://en.wikipedia.org/wiki/Pakistan" target="_blank">Wikipedia Pakistan</a>. </p>  <h2>📄 Internal Links</h2>  <p> <a href="page2.html">Go to Page 2</a> (in the same folder) </p>  <p> <a href="pages/about.html">About Us</a> (in the "pages" folder) </p>  <p> <a href="#section1">Go to Section 1</a> (on this page) </p> <p> <a href="#section2">Go to Section 2</a> (on this page) </p> <p> <a href="#top">Back to Top</a> </p>  <h2>📧 Email & Phone Links</h2>  <p> Send an email to <a href="mailto:info@example.com">info@example.com</a> </p>  <p> <a href="mailto:info@example.com?subject=Inquiry">Email with subject line</a> </p>  <p> Call us at <a href="tel:+923001234567">+92 300 1234567</a> </p>  <h2>🖼️ Image as a Link</h2>  <a href="https://www.example.com" target="_blank"> <img src="logo.jpg" alt="Visit Example.com" width="150" height="80"> </a>  <h2>📥 Download Links</h2>  <p> <a href="document.pdf" download>📄 Download PDF Document</a> </p>  <h2 id="section1">📌 Section 1</h2> <p> This is Section 1. You reached here by clicking the internal link above. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h2 id="section2">📌 Section 2</h2> <p> This is Section 2. You can also reach this section using the link above. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p> <a href="#top">⬆ Back to Top</a> </p> </body> </html>

Step 2: Save the File

Go to File → Save As… (or press Ctrl+Shift+S).
Choose a location (e.g., Desktop).
Name the file: "links.html" or "practical75.html".
In "Save as type", select All types (*.*).
Click Save.

Step 3: Open in Browser

Navigate to the folder where you saved the file.
Double‑click the links.html file.
It will open in your default web browser.
You will see all the hyperlink examples and can click them to test.

📊 Types of Hyperlinks

Type	Description	Example Code
External Link	Links to another website	`<a href="https://google.com">Google</a>`
Internal Link	Links to another page on your site	`<a href="page2.html">Page 2</a>`
Anchor Link	Links to a section within the same page	`<a href="#section1">Section 1</a>`
Email Link	Opens default email client	`<a href="mailto:info@example.com">Email</a>`
Phone Link	Dials a phone number (mobile)	`<a href="tel:+923001234567">Call Us</a>`
Image Link	An image that acts as a link	`<a href="page.html"><img src="img.jpg"></a>`
Download Link	Downloads the linked file	`<a href="file.pdf" download>Download</a>`

📊 `target` Attribute Values

Value	Description	When to Use
`_blank`	Opens in a new tab or window	External links (recommended)
`_self`	Opens in the same tab (default)	Internal links
`_parent`	Opens in the parent frame	For framed pages
`_top`	Opens in the full window	For framed pages

📊 Mailto Link Options

<a href="mailto:info@example.com?subject=Inquiry">Email with Subject</a>  <a href="mailto:info@example.com?subject=Feedback&body=Hello,%20I%20would%20like%20to...">Email with Subject & Body</a>  <a href="mailto:info@example.com,support@example.com">Email Multiple Recipients</a>  <a href="mailto:info@example.com?cc=manager@example.com&bcc=team@example.com">Email with CC & BCC</a>

📊 Creating a Navigation Menu

<ul style="list-style-type: none; display: flex; gap: 20px; background: #2c3e50; padding: 15px; margin: 0;"> <li><a href="index.html" style="color: white; text-decoration: none;">Home</a></li> <li><a href="about.html" style="color: white; text-decoration: none;">About</a></li> <li><a href="services.html" style="color: white; text-decoration: none;">Services</a></li> <li><a href="contact.html" style="color: white; text-decoration: none;">Contact</a></li> </ul>

📊 Common Mistakes to Avoid

Mistake	Why It's Wrong	Correct Way
Missing `href` attribute	Link won't work	Always include `href`
Forgetting `http://` or `https://`	Link may try to open as a local file	Use full URL: `https://google.com`
Using spaces in `href` values	Invalid URL	Use %20 or no spaces
Not using `target="_blank"` for external links	User leaves your site	Use `target="_blank"` for external links
Forgetting to close `<a>` tag	Invalid HTML	Always close with `</a>`
Using "click here" as link text	Poor accessibility and SEO	Use descriptive link text

📊 Observations

<a> is the anchor tag used for creating hyperlinks.
The href attribute is required for the link to work.
Use target="_blank" for external links to open in a new tab.
title provides a helpful tooltip on hover.
Anchor links (#id) allow navigation within the same page.
Mailto and tel links open email clients and phone dialers.
Links can be styled with CSS to look like buttons or navigation menus.
Use descriptive link text for better accessibility and SEO.

✅ Result

You have successfully:

Created an HTML webpage with various types of hyperlinks.
Used href, target, and title attributes.
Created external, internal, email, phone, image, and download links.
Used anchor links to navigate within the same page.
Created a simple navigation menu with links.
Viewed and tested all links in a browser.

📌 Important: Always include the href attribute for links. Use target="_blank" for external links to keep users on your site. Use descriptive link text (not "click here") for better accessibility and SEO.

💡 Next Steps: Try creating a complete navigation menu for a multi-page website. Add CSS styles to customize link appearance (colors, hover effects, buttons). Create a table of contents with anchor links. Learn about relative vs absolute paths for internal links!

🎯 مقصد

ایک HTML ویب صفحہ بنانا جو ہائپر لنکس بنانے کا طریقہ <a> (اینکر) ٹیگ کے ساتھ مختلف اقسام کے لنکس کا استعمال کرتے ہوئے ظاہر کرتا ہے۔

🛠️ آپ کو کیا چاہیے

Notepad++ یا کوئی بھی ٹیکسٹ ایڈیٹر
نتیجہ دیکھنے کے لیے ایک ویب براؤزر

📖 تعارف

ہائپر لنکس ویب کی ریڑھ کی ہڈی ہیں۔ <a> ٹیگ لنکس بنانے کے لیے استعمال ہوتا ہے۔ آپ بنا سکتے ہیں:

بیرونی لنکس — دوسری ویب سائٹس کے لیے
اندرونی لنکس — آپ کی سائٹ کے دوسرے صفحات کے لیے
اینکر لنکس — اسی صفحے کے حصوں کے لیے
ای میل لنکس — mailto: کا استعمال کرتے ہوئے
فون لنکس — tel: کا استعمال کرتے ہوئے
تصویری لنکس — تصاویر جو کلک کرنے کے قابل لنکس کے طور پر کام کریں
ڈاؤن لوڈ لنکس — فائلیں ڈاؤن لوڈ کرنے کے لیے

💡 مشورہ: ہمیشہ وضاحتی لنک ٹیکسٹ استعمال کریں۔ "یہاں کلک کریں" کے بجائے، اس صفحہ یا وسائل کا نام استعمال کریں جس سے آپ لنک کر رہے ہیں۔ یہ رسائی اور SEO کو بہتر بناتا ہے۔

📊 آؤٹ پٹ کا پیش منظر

🔗 ہائپر لنکس بنانا

🌐 بیرونی لنکس

🔗 گوگل: گوگل ملاحظہ کریں (نئی ٹیب میں کھلے گا)

🔗 یوٹیوب: یوٹیوب ملاحظہ کریں

🔗 وکی پیڈیا: وکی پیڈیا ملاحظہ کریں

📄 اندرونی لنکس

صفحہ 2 پر جائیں کسی اور HTML فائل کا لنک

سیکشن 1 پر جائیں اسی صفحے کے کسی حصے پر جائیں

سیکشن 2 پر جائیں دوسرے حصے پر جائیں

اوپر واپس جائیں صفحہ کے اوپر واپس جائیں

📧 ای میل اور فون لنکس

📧 ای میل: info@example.com

📞 فون: +92 300 1234567

🖼️ نیویگیشن مینو

ہوم تعارف خدمات رابطہ

📥 ڈاؤن لوڈ لنک

📄 پی ڈی ایف دستاویز ڈاؤن لوڈ کریں

📝 مرحلہ وار: HTML صفحہ بنانا

پہلا قدم: Notepad++ کھولیں اور کوڈ لکھیں

Notepad++ لانچ کریں۔
زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
نیچے دیا گیا آسان HTML کوڈ لکھیں:

<html> <head> <title>Hyperlinks - Creating Links</title> </head> <body id="top"> <h1>🔗 HTML میں ہائپر لنکس بنانا</h1>  <h2>🌐 بیرونی لنکس</h2>  <p> ویب تلاش کرنے کے لیے <a href="https://www.google.com" target="_blank">گوگل</a> ملاحظہ کریں۔ </p>  <p> <a href="https://www.youtube.com" target="_blank" title="یوٹیوب پر ویڈیوز دیکھیں">یوٹیوب</a> پر ویڈیوز دیکھیں۔ </p>  <p> <a href="https://en.wikipedia.org/wiki/Pakistan" target="_blank">وکی پیڈیا پاکستان</a> پر پاکستان کے بارے میں جانیں۔ </p>  <h2>📄 اندرونی لنکس</h2>  <p> <a href="page2.html">صفحہ 2 پر جائیں</a> (اسی فولڈر میں) </p>  <p> <a href="pages/about.html">ہمارے بارے میں</a> ("pages" فولڈر میں) </p>  <p> <a href="#section1">سیکشن 1 پر جائیں</a> (اس صفحے پر) </p> <p> <a href="#section2">سیکشن 2 پر جائیں</a> (اس صفحے پر) </p> <p> <a href="#top">اوپر واپس جائیں</a> </p>  <h2>📧 ای میل اور فون لنکس</h2>  <p> <a href="mailto:info@example.com">info@example.com</a> کو ای میل بھیجیں </p>  <p> <a href="mailto:info@example.com?subject=Inquiry">موضوع کے ساتھ ای میل بھیجیں</a> </p>  <p> <a href="tel:+923001234567">+92 300 1234567</a> پر ہمیں کال کریں </p>  <h2>🖼️ تصویر بطور لنک</h2>  <a href="https://www.example.com" target="_blank"> <img src="logo.jpg" alt="Example.com ملاحظہ کریں" width="150" height="80"> </a>  <h2>📥 ڈاؤن لوڈ لنکس</h2>  <p> <a href="document.pdf" download>📄 پی ڈی ایف دستاویز ڈاؤن لوڈ کریں</a> </p>  <h2 id="section1">📌 سیکشن 1</h2> <p> یہ سیکشن 1 ہے۔ آپ اوپر کے اندرونی لنک پر کلک کرکے یہاں پہنچے۔ لورم ipsum dolor sit amet، consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h2 id="section2">📌 سیکشن 2</h2> <p> یہ سیکشن 2 ہے۔ آپ اوپر کے لنک کا استعمال کرتے ہوئے اس سیکشن تک بھی پہنچ سکتے ہیں۔ Ut enim ad minim veniam، quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p> <a href="#top">⬆ اوپر واپس جائیں</a> </p> </body> </html>

دوسرا قدم: فائل محفوظ کریں

File → Save As… (یا Ctrl+Shift+S) پر جائیں۔
ایک مقام منتخب کریں (مثلاً Desktop)۔
فائل کا نام رکھیں: "links.html" یا "practical75.html"۔
"Save as type" میں All types (*.*) منتخب کریں۔
Save پر کلک کریں۔

تیسرا قدم: براؤزر میں کھولیں

اس فولڈر میں جائیں جہاں آپ نے فائل محفوظ کی تھی۔
links.html فائل پر ڈبل‑کلک کریں۔
یہ آپ کے ڈیفالٹ براؤزر میں کھل جائے گی۔
آپ کو تمام ہائپر لنک کی مثالیں نظر آئیں گی اور آپ انہیں ٹیسٹ کرنے کے لیے کلک کر سکتے ہیں۔

📊 ہائپر لنکس کی اقسام

قسم	وضاحت	کوڈ کی مثال
بیرونی لنک	کسی اور ویب سائٹ کا لنک	`<a href="https://google.com">Google</a>`
اندرونی لنک	آپ کی سائٹ کے کسی اور صفحے کا لنک	`<a href="page2.html">صفحہ 2</a>`
اینکر لنک	اسی صفحے کے کسی حصے کا لنک	`<a href="#section1">سیکشن 1</a>`
ای میل لنک	ڈیفالٹ ای میل کلائنٹ کھولتا ہے	`<a href="mailto:info@example.com">Email</a>`
فون لنک	فون نمبر ڈائل کرتا ہے (موبائل)	`<a href="tel:+923001234567">Call Us</a>`
تصویری لنک	ایک تصویر جو لنک کا کام کرتی ہے	`<a href="page.html"><img src="img.jpg"></a>`
ڈاؤن لوڈ لنک	لنک شدہ فائل ڈاؤن لوڈ کرتا ہے	`<a href="file.pdf" download>Download</a>`

📊 `target` صفت کی اقدار

قدر	وضاحت	کب استعمال کریں
`_blank`	نئی ٹیب یا ونڈو میں کھلتا ہے	بیرونی لنکس (تجویز کردہ)
`_self`	اسی ٹیب میں کھلتا ہے (ڈیفالٹ)	اندرونی لنکس
`_parent`	پیرنٹ فریم میں کھلتا ہے	فریم شدہ صفحات کے لیے
`_top`	پوری ونڈو میں کھلتا ہے	فریم شدہ صفحات کے لیے

📊 میلٹو لنک کے اختیارات

<a href="mailto:info@example.com?subject=Inquiry">موضوع کے ساتھ ای میل</a>  <a href="mailto:info@example.com?subject=Feedback&body=Hello,%20I%20would%20like%20to...">موضوع اور باڈی کے ساتھ ای میل</a>  <a href="mailto:info@example.com,support@example.com">متعدد وصول کنندگان کو ای میل</a>  <a href="mailto:info@example.com?cc=manager@example.com&bcc=team@example.com">CC اور BCC کے ساتھ ای میل</a>

📊 نیویگیشن مینو بنانا

<ul style="list-style-type: none; display: flex; gap: 20px; background: #2c3e50; padding: 15px; margin: 0;"> <li><a href="index.html" style="color: white; text-decoration: none;">ہوم</a></li> <li><a href="about.html" style="color: white; text-decoration: none;">تعارف</a></li> <li><a href="services.html" style="color: white; text-decoration: none;">خدمات</a></li> <li><a href="contact.html" style="color: white; text-decoration: none;">رابطہ</a></li> </ul>

📊 عام غلطیاں جن سے بچنا ہے

غلطی	یہ کیوں غلط ہے	صحیح طریقہ
`href` صفت غائب	لنک کام نہیں کرے گا	ہمیشہ `href` شامل کریں
`http://` یا `https://` بھول جانا	لنک مقامی فائل کے طور پر کھلنے کی کوشش کر سکتا ہے	مکمل URL استعمال کریں: `https://google.com`
`href` اقدار میں اسپیس کا استعمال	غلط URL	%20 استعمال کریں یا اسپیس نہ استعمال کریں
بیرونی لنکس کے لیے `target="_blank"` کا استعمال نہ کرنا	صارف آپ کی سائٹ چھوڑ دیتا ہے	بیرونی لنکس کے لیے `target="_blank"` استعمال کریں
`<a>` ٹیگ بند کرنا بھول جانا	غلط HTML	ہمیشہ `</a>` کے ساتھ بند کریں
"click here" کو لنک ٹیکسٹ کے طور پر استعمال کرنا	خراب رسائی اور SEO	وضاحتی لنک ٹیکسٹ استعمال کریں

📊 مشاہدات

<a> ہائپر لنکس بنانے کے لیے استعمال ہونے والا اینکر ٹیگ ہے۔
href صفت لنک کے کام کرنے کے لیے ضروری ہے۔
بیرونی لنکس کے لیے target="_blank" استعمال کریں تاکہ نئی ٹیب میں کھلے۔
title ہوور پر مددگار ٹولٹپ فراہم کرتا ہے۔
اینکر لنکس (#id) اسی صفحے کے اندر نیویگیشن کی اجازت دیتے ہیں۔
Mailto اور tel لنکس ای میل کلائنٹس اور فون ڈائلرز کھولتے ہیں۔
لنکس کو CSS کے ساتھ اسٹائل کرکے بٹن یا نیویگیشن مینو کی طرح بنایا جا سکتا ہے۔
بہتر رسائی اور SEO کے لیے وضاحتی لنک ٹیکسٹ استعمال کریں۔

✅ نتیجہ

آپ نے کامیابی سے:

مختلف اقسام کے ہائپر لنکس کے ساتھ ایک HTML ویب صفحہ بنایا۔
href، target، اور title صفات کا استعمال کیا۔
بیرونی، اندرونی، ای میل، فون، تصویری، اور ڈاؤن لوڈ لنکس بنائے۔
اسی صفحے کے اندر نیویگیشن کے لیے اینکر لنکس کا استعمال کیا۔
لنکس کے ساتھ ایک سادہ نیویگیشن مینو بنایا۔
تمام لنکس کو براؤزر میں دیکھا اور ٹیسٹ کیا۔

📌 اہم: لنکس کے لیے ہمیشہ href صفت شامل کریں۔ صارفین کو آپ کی سائٹ پر رکھنے کے لیے بیرونی لنکس کے لیے target="_blank" استعمال کریں۔ بہتر رسائی اور SEO کے لیے وضاحتی لنک ٹیکسٹ استعمال کریں ("یہاں کلک کریں" کے بجائے)۔

💡 اگلے اقدامات: کثیر صفحہ ویب سائٹ کے لیے مکمل نیویگیشن مینو بنانے کی کوشش کریں۔ لنک کی ظاہری شکل کو حسب ضرورت بنانے کے لیے CSS اسٹائلز شامل کریں (رنگ، ہوور اثرات، بٹن)۔ اینکر لنکس کے ساتھ مواد کی فہرست بنائیں۔ اندرونی لنکس کے لیے نسبتی بمقابلہ مطلق پاتھ کے بارے میں سیکھیں!

⬅ Back to Practical Notebooks

EZNotes

🔗 Practical 75: Creating hyperlinks in a webpage

🎯 Aim

🛠️ What You Need

📖 Introduction

📊 Preview of the Output

🔗 Creating Hyperlinks

📝 Step‑by‑Step: Creating the HTML Page

Step 1: Open Notepad++ and Write the Code

Step 2: Save the File

Step 3: Open in Browser

📊 Types of Hyperlinks

📊 `target` Attribute Values

📊 Mailto Link Options

📊 Creating a Navigation Menu

📊 Common Mistakes to Avoid

📊 Observations

✅ Result

🎯 مقصد

🛠️ آپ کو کیا چاہیے

📖 تعارف

📊 آؤٹ پٹ کا پیش منظر

🔗 ہائپر لنکس بنانا

📝 مرحلہ وار: HTML صفحہ بنانا

پہلا قدم: Notepad++ کھولیں اور کوڈ لکھیں

دوسرا قدم: فائل محفوظ کریں

تیسرا قدم: براؤزر میں کھولیں

📊 ہائپر لنکس کی اقسام

📊 `target` صفت کی اقدار

📊 میلٹو لنک کے اختیارات

📊 نیویگیشن مینو بنانا

📊 عام غلطیاں جن سے بچنا ہے

📊 مشاہدات

✅ نتیجہ

🔗 Practical 75: Creating hyperlinks in a webpage

🎯 Aim

🛠️ What You Need

📖 Introduction

📊 Preview of the Output

🔗 Creating Hyperlinks

📝 Step‑by‑Step: Creating the HTML Page

Step 1: Open Notepad++ and Write the Code

Step 2: Save the File

Step 3: Open in Browser

📊 Types of Hyperlinks

📊 target Attribute Values

📊 Mailto Link Options

📊 Creating a Navigation Menu

📊 Common Mistakes to Avoid

📊 Observations

✅ Result

🎯 مقصد

🛠️ آپ کو کیا چاہیے

📖 تعارف

📊 آؤٹ پٹ کا پیش منظر

🔗 ہائپر لنکس بنانا

📝 مرحلہ وار: HTML صفحہ بنانا

پہلا قدم: Notepad++ کھولیں اور کوڈ لکھیں

دوسرا قدم: فائل محفوظ کریں

تیسرا قدم: براؤزر میں کھولیں

📊 ہائپر لنکس کی اقسام

📊 target صفت کی اقدار

📊 میلٹو لنک کے اختیارات

📊 نیویگیشن مینو بنانا

📊 عام غلطیاں جن سے بچنا ہے

📊 مشاہدات

✅ نتیجہ

📊 `target` Attribute Values

📊 `target` صفت کی اقدار