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

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

हाइपरलिंक , या लिंक, का उपयोग एक वेब पेज को दूसरे से जोड़ने के लिए किया जाता है और उपयोगकर्ताओं को कई वेब पेजों के बीच जल्दी से स्थानांतरित करने की अनुमति देता है। हाइपरलिंक आपकी अपनी साइट के अन्य पृष्ठों या विभिन्न वेबसाइटों के पृष्ठों से लिंक करने के लिए उपयोग किया जा सकता है।

इस गाइड में, हम HTML . में हाइपरलिंकिंग की मूल बातें तोड़ने जा रहे हैं हम इस बारे में बात करेंगे कि लिंक के लिए लक्ष्य कैसे सेट करें, बुकमार्क के लिए एंकर कैसे बनाएं, और ईमेल पते और वेब तत्वों से कैसे लिंक करें।

एचटीएमएल हाइपरलिंक

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

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

यहां एक लिंक का उदाहरण दिया गया है जो करियर कर्म होम पेज के वेब पते की ओर इशारा करता है:

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

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

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

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

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

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

हाइपरलिंक HTML:लक्ष्य

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

यहीं पर लिंक targetHTML . है विशेषता आती है। लक्ष्य . लिंक का उपयोग करके विशेषता, आप निर्दिष्ट कर सकते हैं कि ब्राउज़र को वह संसाधन कहाँ खोलना चाहिए जिससे आपने लिंक किया है।

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

• _स्वयं :उसी विंडो और टैब में वेब संसाधन पर जाता है। यह HTML . में उपयोग किया जाने वाला डिफ़ॉल्ट लक्ष्य है हाइपरलिंक।
• _अभिभावक :पेरेंट विंडो में वेब संसाधन पर जाता है।
• _खाली :एक नई विंडो या टैब में वेब संसाधन पर जाता है।
• _शीर्ष :एक पूर्ण ब्राउज़र विंडो में वेब संसाधन पर जाता है।

यहां कुछ ऐसे लिंक का उदाहरण दिया गया है जो काम कर रहे हैं:

<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 . के विशिष्ट भाग को भी संदर्भित कर सकता है दस्तावेज़। यह उपयोगी है यदि आपके पास एक लंबा वेब पेज है और उपयोगकर्ता को टेक्स्ट में किसी विशेष स्थान पर निर्देशित करना चाहते हैं।

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

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

हमने HTML हेडिंग टैग को आईडी subtitle3 . दिया है , जिसे हम तब हाइपरलिंक . में संदर्भित करने के लिए उपयोग कर सकते हैं .

यहां हाइपरलिंक . का एक उदाहरण दिया गया है जो इस शीर्षक का संदर्भ देता है:

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

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

HTML एंकर टैग

एक HTML एंकर टैग टैग को संदर्भित करता है। यह टैग उपयोगकर्ता को दूसरे वेब संसाधन से जोड़ता है। "Href" विशेषता उस संसाधन को परिभाषित करती है जिस पर उपयोगकर्ता द्वारा लिंक पर क्लिक करने पर उसे ले जाया जाएगा।

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

सापेक्ष URL

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

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

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

जब हम करियर कर्म ब्लॉग . टेक्स्ट पर क्लिक करते हैं , हमें /ब्लॉग . पर भेजा जाता है हमारी साइट पर संसाधन।

ईमेल पता

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

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

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

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

तत्व से लिंक करें

एंकर टैग वेब पेज पर किसी तत्व से लिंक कर सकता है। आप इस लिंक को उस तत्व की आईडी निर्दिष्ट करके बना सकते हैं जिस पर एंकर को इंगित करना चाहिए। मान लीजिए कि हम अपने उपयोगकर्ता को टेस्ट हेडिंग . शीर्षक पर ले जाने के लिए एक लिंक चाहते हैं एक वेब पेज पर। हम निम्नलिखित कोड का उपयोग करके यह लिंक बना सकते हैं:

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

<h2 id="test_heading">Test Heading</h2>

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

निष्कर्ष

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

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

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