📘 Linking in HTML – link, alink, vlink, external linking
🔷 1. Introduction:
HTML allows us to connect one webpage to another using links.
This is called hyperlinking.
The <a> tag is used to create these links.
Links help users navigate across websites, download files, or open emails.
🔷 2. Definition:
A hyperlink is a clickable text or image that takes you to another location – on the same page or a different page.
HTML links are created using the anchor tag <a> and the href attribute.
🔷 3. Syntax:
<a href="https://www.example.com">Visit Example</a>✅ The href stands for Hypertext REFerence.
🔷 4. Types of Linking in HTML:
| Type | Description |
|---|---|
| Internal Linking | Linking to another section/page within the same website |
| External Linking | Linking to a completely different website |
| Email Link | Opens default mail app |
| Download Link | Downloads a file |
🔷 5. Attributes of <a> Tag:
| Attribute | Purpose |
|---|---|
href | Destination URL |
target="_blank" | Opens link in a new tab |
title | Tooltip on hover |
name/id | For internal page navigation |
download | For file download link |
🔷 6. Example: External Link
<a href="https://www.google.com" target="_blank">Go to Google</a>✅ Opens Google in a new tab.
🔷 7. Internal Linking Example:
<a href="about.html">About Us</a>✅ Goes to another page in the same website.
🔷 8. Email Link Example:
<a href="mailto:help@example.com">Contact Us</a>✅ Opens email app with the given email ID.
🔷 9. Download Link Example:
<a href="book.pdf" download>Download Book</a>✅ Downloads the PDF file.
🔷 10. Colors of Links (link, alink, vlink):
You can control link colors using the <body> tag attributes:
<body link="blue" alink="red" vlink="green">| Attribute | Meaning |
|---|---|
link | Normal link color |
alink | Color when link is active (being clicked) |
vlink | Visited link color |
✅ These are old HTML methods.
For modern websites, use CSS.
🔷 11. CSS Method for Link Styling:
<style>
a:link { color: blue; }
a:visited { color: green; }
a:hover { color: orange; }
a:active { color: red; }
</style>✅ Gives full control on link appearance using CSS.
🔷 12. Real Life Use:
- Menus and navigation bars
- “Read more” buttons
- Download and upload options
- Contact us pages
- Social media buttons
🔷 13. Summary Table:
| Tag/Attribute | Purpose |
|---|---|
<a> | Creates hyperlink |
href | Link destination |
target="_blank" | Opens in new tab |
link, alink, vlink | Control link colors (HTML4) |
mailto: | Open email client |
download | Download file |
🔷 14. Advantages:
- Easy navigation
- User-friendly experience
- Connects websites together
- Helps in SEO
- Saves space (text instead of full content)
🔷 15. Limitations:
- Broken links create errors
- Overuse can confuse users
- Old HTML methods like
alinknot used in modern web
📗 HTML में लिंकिंग (Linking) – link, alink, vlink, external linking
🔷 1. परिचय (Introduction):
HTML में लिंक का उपयोग एक पेज को दूसरे पेज से जोड़ने के लिए किया जाता है।
इसे हाइपरलिंक (Hyperlink) कहते हैं।
हाइपरलिंक से यूज़र किसी दूसरी वेबसाइट, पेज, डॉक्यूमेंट या ईमेल पर जा सकता है।
🔷 2. परिभाषा (Definition):
Hyperlink एक ऐसा टेक्स्ट या इमेज होता है जिस पर क्लिक करने से हम किसी अन्य स्थान पर पहुँचते हैं।
HTML में लिंक बनाने के लिए <a> टैग का उपयोग होता है।
इसमें href नाम का एट्रिब्यूट जरूरी होता है।
🔷 3. सिंटैक्स (Syntax):
<a href="https://www.example.com">Visit Example</a>✅ यहाँ <a> टैग एक एंकर टैग है और href में लिंक का पता होता है।
🔷 4. HTML में लिंकिंग के प्रकार:
| प्रकार | विवरण |
|---|---|
| Internal Link | वेबसाइट के अंदर दूसरे पेज से लिंक |
| External Link | किसी दूसरी वेबसाइट से लिंक |
| Email Link | क्लिक करने पर ईमेल ऐप खुले |
| Download Link | फाइल डाउनलोड के लिए लिंक |
🔷 5. <a> टैग के जरूरी Attributes:
| एट्रिब्यूट | कार्य |
|---|---|
href | लिंक का पता |
target="_blank" | लिंक को नई टैब में खोले |
title | माउस ले जाने पर दिखने वाला टेक्स्ट |
download | फाइल को डाउनलोड करवाने के लिए |
name / id | एक ही पेज के अंदर नेविगेशन के लिए |
🔷 6. बाहरी लिंक का उदाहरण (External Link):
<a href="https://www.google.com" target="_blank">Google खोलें</a>✅ यह लिंक Google को नई टैब में खोलेगा।
🔷 7. आंतरिक लिंक (Internal Link):
<a href="about.html">हमारे बारे में</a>✅ यह लिंक आपकी वेबसाइट के दूसरे पेज पर ले जाएगा।
🔷 8. ईमेल लिंक का उदाहरण:
<a href="mailto:info@example.com">हमें ईमेल करें</a>✅ इस पर क्लिक करने से ईमेल ऐप खुल जाएगा।
🔷 9. डाउनलोड लिंक का उदाहरण:
<a href="notes.pdf" download>PDF डाउनलोड करें</a>✅ यह लिंक “notes.pdf” को डाउनलोड करेगा।
🔷 10. लिंक कलर कंट्रोल (link, alink, vlink):
आप <body> टैग में नीचे दिए गए attributes से लिंक का रंग कंट्रोल कर सकते हैं:
<body link="blue" alink="red" vlink="green">| एट्रिब्यूट | मतलब |
|---|---|
link | सामान्य लिंक का रंग |
alink | क्लिक करते समय रंग |
vlink | विज़िटेड लिंक का रंग |
⚠️ नोट: यह तरीका HTML4 का है, HTML5 में CSS का प्रयोग करें।
🔷 11. CSS से लिंक का स्टाइल:
<style>
a:link { color: blue; }
a:visited { color: green; }
a:hover { color: orange; }
a:active { color: red; }
</style>✅ इससे लिंक पर होवर, क्लिक और विज़िटेड स्थिति में अलग रंग दिखेगा।
🔷 12. वास्तविक उपयोग (Real Life Uses):
- मेनू और नेविगेशन बार
- “Read More” बटन
- सोशल मीडिया बटन
- ईमेल से संपर्क करना
- डाउनलोड लिंक देना
🔷 13. सारणी (Summary Table):
| टैग / एट्रिब्यूट | उपयोग |
|---|---|
<a> | हाइपरलिंक बनाने के लिए |
href | लिंक का एड्रेस |
target="_blank" | नई टैब में लिंक खोलना |
link, alink, vlink | लिंक के रंग नियंत्रित करना (HTML4) |
mailto: | ईमेल लिंक |
download | फाइल डाउनलोड करवाना |
🔷 14. लाभ (Advantages):
- वेबसाइट के बीच आसान नेविगेशन
- यूज़र फ्रेंडली इंटरफेस
- SEO में सहायक
- कंटेंट छोटा और साफ रहता है
- रीडर को जरूरी जगह भेज सकता है
🔷 15. सीमाएँ (Limitations):
- टूटे लिंक (Broken Links) से वेबसाइट की विश्वसनीयता घटती है
- बहुत ज्यादा लिंक यूज़र को भ्रमित कर सकते हैं
- पुराने HTML method जैसे
alink, अब modern websites में उपयोग नहीं होते
