HTML Links
HTML Links क्या हैं?
HTML Links (Hyperlinks) का उपयोग एक पेज से दूसरे पेज, दस्तावेज़, वेबसाइट, या संसाधन को जोड़ने के लिए किया जाता है। Links वेब ब्राउज़िंग का एक महत्वपूर्ण हिस्सा हैं, क्योंकि इनके माध्यम से ही हम इंटरनेट पर विभिन्न पेज और साइट्स के बीच नेविगेट कर सकते हैं।
इस अध्याय में, हम HTML Links के उपयोग, प्रकार, और उन्हें बनाने के तरीके को विस्तार से समझेंगे।
HTML Link टैग
HTML Links को बनाने के लिए <a> (Anchor) टैग का उपयोग किया जाता है। यह टैग हाइपरलिंक को परिभाषित करता है।
<a> टैग की Basic Syntax:
<a href="URL">Link Text</a>
- href (Hypertext Reference): यह attribute उस URL को निर्दिष्ट करता है जहां लिंक क्लिक करने पर जाना है।
- Link Text: यह वह टेक्स्ट है जो ब्राउज़र में दिखाई देगा और जिस पर क्लिक किया जा सकता है।
HTML Link का एक सरल उदाहरण
<!DOCTYPE html>
<html>
<body>
<a href="https://www.google.com">Google पर जाएं</a>
</body>
</html>
आउटपुट:
“Google पर जाएं” पर क्लिक करने पर उपयोगकर्ता Google की वेबसाइट पर जाएगा।
विभिन्न प्रकार के HTML Links
- Absolute Links
- Relative Links
- Email Links
- Telephone Links
1. Absolute Links
Absolute Links पूरे URL को निर्दिष्ट करते हैं, जिसमें प्रोटोकॉल (जैसे http या https), डोमेन नाम, और पेज का पूरा पता शामिल होता है।
उदाहरण:
<a href="https://www.example.com/page.html">Visit Example</a>
2. Relative Links
Relative Links वर्तमान पेज के आधार पर लिंक का पथ (path) निर्दिष्ट करते हैं। यह आपके प्रोजेक्ट डायरेक्टरी में लिंक का उपयोग करने के लिए उपयोगी होता है।
उदाहरण:
<a href="/about.html">About Us</a>
यह लिंक वर्तमान साइट की about.html फाइल पर रीडायरेक्ट करेगा।
3. Email Links
Email Links का उपयोग किसी ईमेल पते पर मेल भेजने के लिए किया जाता है। इसके लिए mailto: का उपयोग किया जाता है।
उदाहरण:
<a href="mailto:example@example.com">Email भेजें</a>
क्लिक करने पर यह उपयोगकर्ता के डिफॉल्ट ईमेल क्लाइंट को खोलता है।
4. Telephone Links
Telephone Links का उपयोग मोबाइल डिवाइस से सीधे कॉल करने के लिए किया जाता है। इसके लिए tel: का उपयोग किया जाता है।
उदाहरण:
<a href="tel:+1234567890">कॉल करें</a>
Target Attribute
target attribute का उपयोग यह नियंत्रित करने के लिए किया जाता है कि लिंक कहां खुलेगा। इसके मुख्य मान हैं:
_self(डिफ़ॉल्ट): लिंक वर्तमान विंडो में खुलता है।_blank: लिंक एक नई टैब या विंडो में खुलता है।_parent: लिंक पैरेंट फ्रेम में खुलता है।_top: लिंक पूरे विंडो में खुलता है, फ्रेम को अनदेखा करते हुए।
उदाहरण:
<a href="https://www.wikipedia.org" target="_blank">Wikipedia खोलें</a>
आउटपुट:
लिंक एक नई टैब में खुलेगा।
HTML Links को बटन जैसा दिखाना
आप CSS का उपयोग करके Links को बटन जैसा दिखा सकते हैं।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none; /* अंडरलाइन हटाना */
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
display: inline-block;
}
a:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
आउटपुट:
लिंक एक बटन जैसा दिखाई देगा और माउसHover करने पर रंग बदल जाएगा।
Links में Title Attribute
title attribute लिंक के बारे में अतिरिक्त जानकारी प्रदान करता है। जब उपयोगकर्ता लिंक पर माउस ले जाता है, तो यह जानकारी एक टूलटिप के रूप में दिखाई देती है।
उदाहरण:
<a href="https://www.wikipedia.org" title="Visit Wikipedia">Wikipedia</a>
आउटपुट:
माउसHover करने पर “Visit Wikipedia” दिखाई देगा।
Links को Disable करना
HTML में Links को Disable करने के लिए, आप CSS का उपयोग कर सकते हैं।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<style>
a.disabled {
pointer-events: none; /* क्लिक को निष्क्रिय करना */
color: gray;
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://www.example.com" class="disabled">यह लिंक निष्क्रिय है</a>
</body>
</html>
आउटपुट:
लिंक क्लिक करने योग्य नहीं होगा।
Links के लिए Best Practices
- स्पष्ट टेक्स्ट: लिंक का टेक्स्ट हमेशा उपयोगकर्ता को बताना चाहिए कि वह कहां ले जाएगा।
- External Links के लिए Target=”_blank”: नई टैब में लिंक खोलने के लिए
target="_blank"का उपयोग करें। - Title Attribute का उपयोग करें: यह अतिरिक्त जानकारी प्रदान करता है।
- Relative Links का उपयोग करें: वेबसाइट के अंदर पेज लिंक करने के लिए।
- Accessible Links: सुनिश्चित करें कि स्क्रीन रीडर उपयोगकर्ता भी लिंक को आसानी से समझ सकें।
निष्कर्ष
HTML Links वेब पेजों को आपस में जोड़ने का एक सरल और प्रभावी तरीका प्रदान करते हैं। Links को स्टाइल और बेहतर बनाने के लिए CSS का उपयोग किया जा सकता है। अगले अध्याय में, हम HTML Images के बारे में जानेंगे।