HTML में हाइपरलिंक कैसे बनाएं

<a href="your_url">This text will go to a URL.</a>

हमारे टैग के बीच का टेक्स्ट उस URL से लिंक होगा जिसे हम अपने ओपनिंग टैग में निर्दिष्ट करते हैं। हम URL के टारगेट को चुनने के लिए `href` एट्रिब्यूट का उपयोग करते हैं। यह एक पूर्ण URL या पूर्ण लिंक हो सकता है जैसे https://www.careerkarma.com या हमारी साइट पर कहीं सापेक्ष URL।

यहाँ Career Karma होम पेज के वेब एड्रेस की ओर इंगित करने वाले लिंक का एक उदाहरण है:

<a href="https://www.careerkarma.com">Career Karma</a>

HTML हाइपरलिंक टैग प्रकार

ब्राउज़र में तीन प्रकार के लिंक दिखाई दे सकते हैं। ये इस प्रकार हैं:

• अनविज़िटेड लिंक, जो नीले रंग में दिखाई देते हैं
• विज़िटेड लिंक, जो बैंगनी रंग में दिखाई देते हैं
• एक्टिव लिंक, जो लाल रंग में दिखाई देते हैं

कुछ वेबसाइटें इन रंगों को ओवरराइट करती हैं, जिसका अर्थ है कि वे अलग दिखाई देते हैं, लेकिन ये मुख्य प्रकार के लिंक हैं जिन्हें आप HTML में स्टाइल कर सकते हैं।

हाइपरलिंक HTML: टारगेट

आप बदल सकते हैं कि लिंक कैसे खुलता है। उदाहरण के लिए, मान लीजिए आप चाहते हैं कि लिंक उपयोगकर्ता के वेब ब्राउज़र में एक नए टैब में खुले। यह सुनिश्चित करेगा कि उपयोगकर्ता उस वेब पेज पर अपनी जगह न खोए जिसे वे वर्तमान में देख रहे हैं।

यहीं लिंक `target` HTML एट्रिब्यूट काम आता है। लिंक `target` एट्रिब्यूट का उपयोग करके, आप निर्दिष्ट कर सकते हैं कि ब्राउज़र को उस संसाधन को कहां खोलना चाहिए जिससे आपने लिंक किया है।

आप चार प्रकार के टारगेट का उपयोग कर सकते हैं, जो इस प्रकार हैं:

• _self: उसी विंडो और टैब में वेब संसाधन पर जाएं। यह HTML हाइपरलिंक में उपयोग किया जाने वाला डिफ़ॉल्ट टारगेट है।
• _parent: पैरेंट विंडो में वेब संसाधन पर जाएं।
• _blank: नई विंडो या टैब में वेब संसाधन पर जाएं।
• _top: पूर्ण ब्राउज़र विंडो में वेब संसाधन पर जाएं।

यहाँ इनमें से कुछ लिंक के एक्शन में उदाहरण हैं:

<a href="https://www.careerkarma.com" target="_self">This link will open in this tab.</a> <a href="https://www.careerkarma.com" target="_parent">This link will open a parent window.</a> <a href="https://www.careerkarma.com" target="_blank">This link will open in a new tab.</a> <a href="https://www.careerkarma.com" target="_top">This link will open in a full browser window.</a>

हाइपरलिंक HTML: बुकमार्क एंकर

HTML में हाइपरलिंक किसी HTML दस्तावेज़ के विशिष्ट भाग को भी संदर्भित कर सकते हैं। यह उपयोगी है यदि आपके पास एक लंबा वेब पेज है और आप उपयोगकर्ता को टेक्स्ट में किसी विशेष स्थान पर निर्देशित करना चाहते हैं।

बुकमार्क एंकर का उपयोग शुरू करने से पहले, आपको पहले उस एलिमेंट पर एक ID एट्रिब्यूट परिभाषित करने की आवश्यकता है जहां आप उपयोगकर्ता को जाना चाहते हैं। यहाँ वेब पेज पर एक शीर्षक पर ID एट्रिब्यूट घोषित करने का एक उदाहरण है:

<h3 id="subtitle3">Subtitle 3</h3>

<a href="#subtitle3">Go to Subtitle 3</a>

अपने `href` टैग में URL निर्दिष्ट करने के बजाय, हम उस एलिमेंट की ID निर्दिष्ट करते हैं जिससे हम लिंक करना चाहते हैं। हम उस id से पहले एक हैश साइन (#) जोड़ते हैं ताकि ब्राउज़र को पता चले कि लिंक किया गया दस्तावेज़ हमारे वेब पेज पर है।

HTML एंकर टैग

HTML एंकर टैग उदाहरण

सापेक्ष URL

यदि आप उसी HTML दस्तावेज़ पर संसाधन से लिंक कर रहे हैं जिसे आप विकसित कर रहे हैं, तो आप सापेक्ष URL का उपयोग कर सकते हैं। सापेक्ष URL को स्थानीय लिंक भी कहा जाता है और "https://www.sitename.com" सिंटैक्स का उपयोग नहीं करते। इसके बजाय, सापेक्ष URL स्थानीय सर्वर पर किसी विशिष्ट वेब संसाधन के फ़ाइल पथ की ओर इंगित करते हैं।

मान लीजिए हम Career Karma वेबसाइट पर एक लिंक बना रहे थे जो हमारे ब्लॉग की ओर इंगित करना चाहिए। पूर्ण URL के बजाय, हम स्थानीय URL का उपयोग कर सकते थे, क्योंकि हमारी साइट Career Karma साइट है। इस लिंक को बनाने के लिए हम जिस कोड का उपयोग करेंगे वह यहाँ है:

<a href="/blog">Career Karma blog</a>

जब हम Career Karma blog टेक्स्ट पर क्लिक करते हैं, तो हमें हमारी साइट पर /blog संसाधन पर भेजा जाता है।

ईमेल एड्रेस

एंकर टैग का उपयोग ईमेल एड्रेस से लिंक करने के लिए भी किया जा सकता है। जब ईमेल एड्रेस के लिंक पर क्लिक किया जाता है, तो उपयोगकर्ता का डिफ़ॉल्ट ईमेल प्रोग्राम खुल जाएगा। उपयोगकर्ता से पूछा जाएगा कि क्या वे आपके द्वारा निर्दिष्ट ईमेल एड्रेस पर संदेश भेजना चाहते हैं।

ईमेल एड्रेस से लिंक करने के लिए, हमें अपने लिंक को mailto: प्रोटोकॉल से शुरू करने की आवश्यकता है। यहाँ HTML में ईमेल एड्रेस से लिंक करने का एक उदाहरण है:

<a href="mailto:nothing@google.com">Send an email to us!</a>

जब हम अपने लिंक पर क्लिक करते हैं, तो हमारा ईमेल प्रोग्राम खुल जाता है और हमें "nothing@google.com" पर ईमेल करने के लिए कहता है।

किसी एलिमेंट से लिंक करें

एंकर टैग वेब पेज पर किसी एलिमेंट से लिंक कर सकता है। आप इस लिंक को उस एलिमेंट की id निर्दिष्ट करके बना सकते हैं जिस पर एंकर को इंगित करना चाहिए। मान लीजिए हम चाहते थे कि एक लिंक हमारे उपयोगकर्ता को वेब पेज पर Test Heading हेडिंग पर ले जाए। हम निम्न कोड का उपयोग करके यह लिंक बना सकते हैं:

<a href="#test_heading">Jump to Test Heading</a> <h2 id="test_heading">Test Heading</h2>

जब हम अपने लिंक पर क्लिक करते हैं, तो हमारा वेब पेज id test_heading वाले एलिमेंट तक नीचे स्क्रॉल हो जाएगा।

निष्कर्ष

हाइपरलिंक का उपयोग HTML में एक वेब पेज या संसाधन को दूसरे से जोड़ने के लिए किया जा सकता है। आप हाइपरलिंक का उपयोग अपनी साइट पर संसाधनों से जुड़ने के लिए, या किसी अन्य वेबसाइट पर संसाधनों से जुड़ने के लिए कर सकते हैं। इस गाइड में, हमने HTML दस्तावेज़ में हाइपरलिंक का उपयोग करने का तरीका तोड़ दिया है।

इस सारी जानकारी के साथ, आप HTML में हाइपरलिंक बनाने के लिए मास्टर की तरह तैयार हैं!

HTML में कोडिंग के बारे में अधिक जानने के लिए, HTML सीखने का हमारा गाइड पढ़ें।