EZ

EZNotes

🔗 Practical 74: Hyperlinks in a webpage

Learn how to create hyperlinks using the <a> tag with attributes like href, target, and title to connect web pages and resources.

🎯 Aim

To create an HTML webpage that demonstrates the use of hyperlinks using the <a> tag with attributes like href, target, and title.

🛠️ What You Need

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

📖 Introduction

Hyperlinks are the foundation of the web. The <a> (anchor) tag is used to create links. Key attributes:

  • href — Specifies the destination URL or file path.
  • target — Specifies where to open the link (_blank for new tab, _self for same tab).
  • title — Provides additional information (tooltip) on hover.
💡 Tip: Links can point to external websites, internal pages, email addresses, phone numbers, or even specific sections within the same page (using id).

📊 Preview of the Output

🔗 Hyperlinks Demo

🌐 External Links
🔗 Google: Visit Google (opens in new tab)
🔗 YouTube: Visit YouTube
🔗 EZ Notes: Visit EZ Notes
📄 Internal Links
Go to Section 1 Jump to a section on the same page
Go to Page 2 Link to another HTML file
Send Email Email link (mailto:)
Call Us Phone link (tel:)
🖼️ Image as a Link
Click Me

Click the image to visit a website

📝 Step‑by‑Step: Creating the HTML Page

Step 1: Open Notepad++ and Write the Code

  1. Launch Notepad++.
  2. Set the language to HTML (Language → H → HTML).
  3. Write the following simplified HTML code:
<!-- Practical 74: Hyperlinks in a Webpage --> <html> <head> <title>Hyperlinks Demo</title> </head> <body> <h1>🔗 Hyperlinks Example</h1> <!-- ===== EXTERNAL LINKS ===== --> <h2>🌐 External Links</h2> <!-- Basic link with href and target --> <p> Google: <a href="https://www.google.com" target="_blank" title="Search the web">Visit Google</a> </p> <p> YouTube: <a href="https://www.youtube.com" target="_blank">Visit YouTube</a> </p> <!-- Link with title attribute for tooltip --> <p> Wikipedia: <a href="https://en.wikipedia.org" title="Free online encyclopedia">Visit Wikipedia</a> </p> <!-- ===== INTERNAL LINKS ===== --> <h2>📄 Internal Links</h2> <!-- Link to another page in the same folder --> <p> <a href="page2.html">Go to Page 2</a> (in the same folder) </p> <!-- Link to a section on the same page (using id) --> <p> <a href="#section1">Go to Section 1</a> (on this page) </p> <!-- ===== EMAIL AND PHONE LINKS ===== --> <h2>📧 Email & Phone Links</h2> <!-- Mailto link --> <p> Email: <a href="mailto:info@example.com">info@example.com</a> </p> <!-- Telephone link --> <p> Call: <a href="tel:+923001234567">+92 300 1234567</a> </p> <!-- ===== IMAGE AS A LINK ===== --> <h2>🖼️ Image as a Link</h2> <!-- Clickable image that takes you to a website --> <a href="https://www.example.com" target="_blank"> <img src="logo.jpg" alt="Click to visit Example.com" width="150" height="80"> </a> <!-- ===== SECTION TARGET (for internal links) ===== --> <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. </p> <p> <a href="#top">Back to Top</a> </p> </body> </html>

Step 2: Save the File

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

Step 3: Open in Browser

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

📊 <a> Tag Attributes

Attribute Purpose Example
href Destination URL or path href="https://google.com"
target Where to open the link target="_blank" (new tab), target="_self" (same tab)
title Tooltip text on hover title="Search the web"
id For linking to a specific section id="section1" then href="#section1"
download Download the linked file download="filename.pdf"

📊 Types of Hyperlinks

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

📊 target Attribute Values

Value Description Use Case
_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 body of the window For framed pages

📊 Styling Hyperlinks with CSS

<!-- CSS styling for hyperlinks --> <style> /* Normal link state */ a { color: #3498db; text-decoration: none; font-weight: 600; transition: color 0.3s, text-decoration 0.3s; } /* Hover state */ a:hover { color: #e74c3c; text-decoration: underline; } /* Visited state */ a:visited { color: #8e44ad; } /* Active state (while clicking) */ a:active { color: #e67e22; } </style>

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

📊 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.
  • You can link to email (mailto:) and phone (tel:).
  • Images can be made clickable by wrapping them in an <a> tag.
  • Anchor links (#) allow navigation within the same page.

✅ Result

You have successfully:

  • Created an HTML webpage with hyperlinks using the <a> tag.
  • Used href, target, and title attributes.
  • Created external, internal, email, phone, and image links.
  • Used anchor links to navigate within the same page.
  • 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 navigation menu with links to different pages. Add CSS styles to customize link appearance (colors, hover effects). Create a table of contents with anchor links. Learn about relative vs absolute paths for internal links!

🎯 مقصد

ایک HTML ویب صفحہ بنانا جو ہائپر لنکس کے استعمال کو <a> ٹیگ کے ساتھ href، target، اور title صفات کے ساتھ ظاہر کرتا ہے۔

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

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

📖 تعارف

ہائپر لنکس ویب کی بنیاد ہیں۔ <a> (اینکر) ٹیگ لنکس بنانے کے لیے استعمال ہوتا ہے۔ اہم صفات:

  • href — منزل کا URL یا فائل پاتھ مخصوص کرتا ہے۔
  • target — لنک کہاں کھلنا ہے مخصوص کرتا ہے (_blank نئی ٹیب کے لیے، _self اسی ٹیب کے لیے)۔
  • title — ہوور پر اضافی معلومات (ٹولٹپ) فراہم کرتا ہے۔
💡 مشورہ: لنکس بیرونی ویب سائٹس، اندرونی صفحات، ای میل پتوں، فون نمبرز، یا اسی صفحے کے اندر مخصوص حصوں ( id کا استعمال کرتے ہوئے) کی طرف اشارہ کر سکتے ہیں۔

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

🔗 ہائپر لنکس کا ڈیمو

🌐 بیرونی لنکس
🔗 گوگل: گوگل ملاحظہ کریں (نئی ٹیب میں کھلے گا)
🔗 یوٹیوب: یوٹیوب ملاحظہ کریں
🔗 ای زیڈ نوٹس: ای زیڈ نوٹس ملاحظہ کریں
📄 اندرونی لنکس
سیکشن 1 پر جائیں اسی صفحے کے کسی حصے پر جائیں
صفحہ 2 پر جائیں کسی اور HTML فائل کا لنک
ای میل بھیجیں ای میل لنک (mailto:)
ہمیں کال کریں فون لنک (tel:)
🖼️ تصویر بطور لنک
کلک کریں

ویب سائٹ ملاحظہ کرنے کے لیے تصویر پر کلک کریں

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

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

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 74: Hyperlinks in a Webpage --> <html> <head> <title>Hyperlinks Demo</title> </head> <body> <h1>🔗 ہائپر لنکس کی مثال</h1> <!-- ===== بیرونی لنکس ===== --> <h2>🌐 بیرونی لنکس</h2> <!-- بنیادی لنک href اور target کے ساتھ --> <p> گوگل: <a href="https://www.google.com" target="_blank" title="ویب تلاش کریں">گوگل ملاحظہ کریں</a> </p> <p> یوٹیوب: <a href="https://www.youtube.com" target="_blank">یوٹیوب ملاحظہ کریں</a> </p> <!-- title صفت کے ساتھ لنک --> <p> وکی پیڈیا: <a href="https://en.wikipedia.org" title="مفت آن لائن انسائیکلوپیڈیا">وکی پیڈیا ملاحظہ کریں</a> </p> <!-- ===== اندرونی لنکس ===== --> <h2>📄 اندرونی لنکس</h2> <!-- اسی فولڈر میں کسی اور صفحے کا لنک --> <p> <a href="page2.html">صفحہ 2 پر جائیں</a> (اسی فولڈر میں) </p> <!-- اسی صفحے کے کسی حصے کا لنک (id کا استعمال) --> <p> <a href="#section1">سیکشن 1 پر جائیں</a> (اس صفحے پر) </p> <!-- ===== ای میل اور فون لنکس ===== --> <h2>📧 ای میل اور فون لنکس</h2> <!-- میلٹو لنک --> <p> ای میل: <a href="mailto:info@example.com">info@example.com</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 id="section1">سیکشن 1</h2> <p> یہ سیکشن 1 ہے۔ آپ اوپر کے اندرونی لنک پر کلک کرکے یہاں پہنچے۔ لورم ipsum dolor sit amet، consectetur adipiscing elit. </p> <p> <a href="#top">اوپر واپس جائیں</a> </p> </body> </html>

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

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

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

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

📊 <a> ٹیگ کی صفات

صفت مقصد مثال
href منزل کا URL یا پاتھ href="https://google.com"
target لنک کہاں کھلنا ہے target="_blank" (نئی ٹیب)، target="_self" (اسی ٹیب)
title ہوور پر ٹولٹپ متن title="ویب تلاش کریں"
id کسی مخصوص حصے سے لنک کرنے کے لیے id="section1" پھر href="#section1"
download لنک شدہ فائل ڈاؤن لوڈ کریں download="filename.pdf"

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

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

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

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

📊 CSS کے ساتھ ہائپر لنکس کو اسٹائل کرنا

<!-- ہائپر لنکس کے لیے CSS اسٹائلنگ --> <style> /* عام لنک حالت */ a { color: #3498db; text-decoration: none; font-weight: 600; transition: color 0.3s, text-decoration 0.3s; } /* ہوور حالت */ a:hover { color: #e74c3c; text-decoration: underline; } /* وزٹ شدہ حالت */ a:visited { color: #8e44ad; } /* فعال حالت (کلک کرتے وقت) */ a:active { color: #e67e22; } </style>

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

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

📊 مشاہدات

  • <a> ہائپر لنکس بنانے کے لیے استعمال ہونے والا اینکر ٹیگ ہے۔
  • href صفت لنک کے کام کرنے کے لیے ضروری ہے۔
  • بیرونی لنکس کے لیے target="_blank" استعمال کریں تاکہ نئی ٹیب میں کھلے۔
  • title ہوور پر مددگار ٹولٹپ فراہم کرتا ہے۔
  • آپ ای میل (mailto:) اور فون (tel:) سے لنک کر سکتے ہیں۔
  • تصاویر کو <a> ٹیگ میں لپیٹ کر کلک کرنے کے قابل بنایا جا سکتا ہے۔
  • اینکر لنکس (#) اسی صفحے کے اندر نیویگیشن کی اجازت دیتے ہیں۔

✅ نتیجہ

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

  • <a> ٹیگ کا استعمال کرتے ہوئے ہائپر لنکس کے ساتھ ایک HTML ویب صفحہ بنایا۔
  • href، target، اور title صفات کا استعمال کیا۔
  • بیرونی، اندرونی، ای میل، فون، اور تصویری لنکس بنائے۔
  • اسی صفحے کے اندر نیویگیشن کے لیے اینکر لنکس کا استعمال کیا۔
  • تمام لنکس کو براؤزر میں دیکھا اور ٹیسٹ کیا۔
📌 اہم: لنکس کے لیے ہمیشہ href صفت شامل کریں۔ صارفین کو آپ کی سائٹ پر رکھنے کے لیے بیرونی لنکس کے لیے target="_blank" استعمال کریں۔ بہتر رسائی اور SEO کے لیے وضاحتی لنک ٹیکسٹ استعمال کریں ("یہاں کلک کریں" کے بجائے)۔
💡 اگلے اقدامات: مختلف صفحات کے لنکس کے ساتھ نیویگیشن مینو بنانے کی کوشش کریں۔ لنک کی ظاہری شکل کو حسب ضرورت بنانے کے لیے CSS اسٹائلز شامل کریں (رنگ، ہوور اثرات)۔ اینکر لنکس کے ساتھ مواد کی فہرست بنائیں۔ اندرونی لنکس کے لیے نسبتی بمقابلہ مطلق پاتھ کے بارے میں سیکھیں!
⬅ Back to Practical Notebooks