Explain Anchor tag with their attributes also give example.

Anchor टैग (<a>) का उपयोग HTML में लिंक बनाने के लिए किया जाता है। इसका प्रमुख कार्य किसी अन्य पेज, वेबसाइट, या एक ही पेज के भीतर किसी विशेष स्थान पर रीडायरेक्ट करना है। Anchor टैग को “लिंक” या “हाइपरलिंक” भी कहा जाता है।

Anchor टैग के महत्वपूर्ण एट्रिब्यूट्स:

  1. href (Hypertext Reference):
    यह सबसे महत्वपूर्ण एट्रिब्यूट है। इसमें उस URL या लिंक का पता होता है, जिस पर क्लिक करने पर ब्राउज़र रीडायरेक्ट होता है।
  2. target:
    यह निर्धारित करता है कि लिंक पर क्लिक करने पर नया पेज किस विंडो या टैब में खुलेगा। इसके कुछ सामान्य मान हैं:

    • _blank: नया टैब या विंडो में लिंक खुलेगा।
    • _self: वही पेज में लिंक खुलेगा (यह डिफ़ॉल्ट सेटिंग होती है)।
    • _parent: पेरेंट फ्रेम (यदि फ्रेम का उपयोग हो) में लिंक खुलेगा।
    • _top: पूरे ब्राउज़र विंडो में लिंक खुलेगा (यदि फ्रेम का उपयोग हो)।
  3. title:
    जब आप लिंक के ऊपर माउस को होवर करते हैं, तो यह एक छोटा टेक्स्ट दिखाता है। यह लिंक के बारे में अधिक जानकारी प्रदान करता है।
  4. download:
    यह एट्रिब्यूट लिंक को एक डाउनलोड लिंक में बदल देता है। जब यूज़र उस लिंक पर क्लिक करता है, तो फाइल डाउनलोड हो जाती है।
  5. rel (Relationship):
    यह एट्रिब्यूट लिंक के प्रकार को दर्शाता है। उदाहरण: rel="noopener noreferrer" सुरक्षा उद्देश्यों के लिए उपयोग किया जाता है।

Anchor टैग का उदाहरण:

<!DOCTYPE html>
<html lang=”hi”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Anchor टैग उदाहरण</title>
</head>
<body>
<h1>Anchor टैग के उदाहरण</h1>

<!– लिंक बिना किसी target के, जो उसी पेज में खुलता है –>
<p><a href=”https://www.example.com”>Example वेबसाइट पर जाएं</a></p>

<!– लिंक नए टैब में खुलेगा –>
<p><a href=”https://www.example.com” target=”_blank”>नया टैब खोलें</a></p>

<!– लिंक पर होवर करते समय टेक्स्ट दिखाई देगा –>
<p><a href=”https://www.example.com” title=”यह लिंक example.com पर ले जाएगा”>होवर के लिए लिंक</a></p>

<!– लिंक डाउनलोड के रूप में कार्य करेगा –>
<p><a href=”https://www.example.com/sample.pdf” download>डाउनलोड करें</a></p>

<!– एक पेज के भीतर किसी विशेष हिस्से के लिए लिंक –>
<p><a href=”#section1″>Section 1 पर जाएं</a></p>

<h2 id=”section1″>यह है Section 1</h2>
<p>यहां आप Section 1 का विवरण देख सकते हैं।</p>

</body>
</html>

 

कोड की व्याख्या:

  1. <a href="https://www.example.com">Example वेबसाइट पर जाएं</a>
    यह लिंक https://www.example.com वेबसाइट पर ले जाएगा। लिंक पर क्लिक करने पर उसी पेज में वह वेबसाइट खुलेगी।
  2. <a href="https://www.example.com" target="_blank">नया टैब खोलें</a>
    यह लिंक क्लिक करने पर नई टैब में खुलेगा, क्योंकि target="_blank" एट्रिब्यूट का उपयोग किया गया है।
  3. <a href="https://www.example.com" title="यह लिंक example.com पर ले जाएगा">होवर के लिए लिंक</a>
    इस लिंक के ऊपर माउस होवर करने पर “यह लिंक example.com पर ले जाएगा” का टेक्स्ट दिखाई देगा।
  4. <a href="https://www.example.com/sample.pdf" download>डाउनलोड करें</a>
    इस लिंक पर क्लिक करने पर sample.pdf फाइल डाउनलोड हो जाएगी, क्योंकि download एट्रिब्यूट का उपयोग किया गया है।
  5. <a href="#section1">Section 1 पर जाएं</a>
    इस लिंक पर क्लिक करने पर पेज पर id="section1" वाले हिस्से पर स्क्रॉल किया जाएगा, जो एक ही पेज के भीतर नेविगेशन करने का तरीका है।

सारांश:

Anchor टैग (<a>) का उपयोग वेबसाइट के विभिन्न पृष्ठों, फाइलों या पेज के भीतर किसी विशेष स्थान पर लिंक बनाने के लिए किया जाता है। इसके प्रमुख एट्रिब्यूट्स जैसे href, target, title, download, और rel द्वारा हम लिंक को कस्टमाइज़ कर सकते हैं और यूज़र को बेहतर अनुभव दे सकते हैं।

Speak Your Mind

*

error: Content is protected !!