HTML
एंकर और हाइपरलिंक
खोज…
परिचय
एंकर टैग आमतौर पर अलग-अलग वेबपृष्ठों को जोड़ने के लिए उपयोग किए जाते हैं, लेकिन उनका उपयोग किसी एकल दस्तावेज़ में विभिन्न स्थानों के बीच लिंक करने के लिए भी किया जा सकता है, अक्सर सामग्री की तालिका के भीतर या बाहरी अनुप्रयोगों को लॉन्च करने के लिए भी। यह विषय HTML एंकर टैग के कार्यान्वयन और आवेदन को विभिन्न भूमिकाओं में बताता है।
वाक्य - विन्यास
<a href="URL or anchor">Link Text</a>
पैरामीटर
| पैरामीटर | विवरण |
|---|---|
href | गंतव्य पता निर्दिष्ट करता है। यह एक निरपेक्ष या सापेक्ष URL या एक एंकर का name है। एक निरपेक्ष URL http://example.com/ जैसी वेबसाइट का पूर्ण URL है। एक रिश्तेदार URL एक ही वेबसाइट के अंदर किसी अन्य निर्देशिका और / या दस्तावेज़ की ओर इशारा करता है, जैसे रूट निर्देशिका ( / ) के अंदर निर्देशिका "अब-हमारे" के लिए /about-us/ -us /about-us/ अंक के बारे में। दस्तावेज़ को स्पष्ट रूप से निर्दिष्ट किए बिना किसी अन्य निर्देशिका की ओर संकेत करते समय, वेब सर्वर आमतौर पर उस निर्देशिका के अंदर दस्तावेज़ "index.html" को वापस कर देते हैं। |
hreflang | href विशेषता द्वारा लिंक किए गए संसाधन की भाषा निर्दिष्ट करता है (जो इस एक के साथ मौजूद होना चाहिए)। HTML5 के लिए BCP 47 से भाषा मान और HTML 4 के लिए RFC 1766 का उपयोग करें। |
rel | वर्तमान दस्तावेज़ और लिंक किए गए दस्तावेज़ के बीच संबंध को निर्दिष्ट करता है। HTML5 के लिए, मानों को विनिर्देश में परिभाषित किया जाना चाहिए या माइक्रोफ़ॉर्मेट्स विकी में पंजीकृत होना चाहिए। |
target | निर्दिष्ट करता है कि लिंक कहाँ खोलना है, उदाहरण के लिए एक नए टैब या विंडो में। संभावित मान _blank , _self , _parent , _top , और framename (पदावनत) हैं। इस तरह के व्यवहार के लिए मजबूर करने की अनुशंसा नहीं की जाती है क्योंकि यह वेबसाइट पर उपयोगकर्ता के नियंत्रण का उल्लंघन करता है। |
title | एक लिंक के बारे में अतिरिक्त जानकारी निर्दिष्ट करता है। जब कर्सर लिंक पर चला जाता है तो जानकारी को अक्सर टूलटिप टेक्स्ट के रूप में दिखाया जाता है। यह विशेषता लिंक तक ही सीमित नहीं है, इसका उपयोग लगभग सभी HTML टैग पर किया जा सकता है। |
download | निर्दिष्ट करता है कि उपयोगकर्ता द्वारा हाइपरलिंक पर क्लिक करने पर लक्ष्य डाउनलोड हो जाएगा। विशेषता का मूल्य डाउनलोड की गई फ़ाइल का नाम होगा। अनुमत मानों पर कोई प्रतिबंध नहीं है, और ब्राउज़र स्वचालित रूप से सही फ़ाइल एक्सटेंशन का पता लगाएगा और इसे फ़ाइल (.img, .pdf, आदि) में जोड़ देगा। यदि मान छोड़ दिया जाता है, तो मूल फ़ाइल नाम का उपयोग किया जाता है। |
किसी अन्य साइट से लिंक करें
यह <a> ( एक nchor तत्व) तत्व का मूल उपयोग है:
<a href="http://example.com/">Link to example.com</a>
यह URL के लिए हाइपरलिंक बनाता है, http://example.com/ जैसा कि href (हाइपरटेक्स्ट संदर्भ) विशेषता द्वारा निर्दिष्ट किया गया है, एंकर पाठ "example.com के लिंक" के साथ। यह कुछ इस तरह दिखेगा:
यह बताने के लिए कि यह लिंक किसी बाहरी वेबसाइट की ओर जाता है, आप external लिंक प्रकार का उपयोग कर सकते हैं:
<a href="http://example.com/" rel="external">example site</a>
आप उस साइट से लिंक कर सकते हैं जो HTTP के अलावा किसी प्रोटोकॉल का उपयोग करती है। उदाहरण के लिए, FTP साइट से लिंक करने के लिए, आप कर सकते हैं,
<a href="ftp://example.com/">This could be a link to a FTP site</a>
इस मामले में, यह अंतर यह है कि यह एंकर टैग यह अनुरोध कर रहा है कि उपयोगकर्ता का ब्राउज़र हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल (HTTP) के बजाय फ़ाइल स्थानांतरण प्रोटोकॉल (FTP) का उपयोग करके example.com कनेक्ट हो।
यह एक FTP साइट का लिंक हो सकता है
नए टैब / विंडो में लिंक खोलें
<a href="example.com" target="_blank">Text Here</a>
target विशेषता निर्दिष्ट करती है कि लिंक कहां खोला जाए। इसे _blank सेट करके, आप ब्राउज़र को इसे एक नए टैब या विंडो (प्रति उपयोगकर्ता वरीयता) में खोलने के लिए कहते हैं।
सुरक्षा की चेतावनी!
target="_blank"का उपयोग करके खुलने वाली साइट को जावास्क्रिप्ट के माध्यम सेwindow.openerऑब्जेक्ट में आंशिक एक्सेस मिलता है, जो उस पेज को तब अपने पेज कीwindow.opener.locationतक पहुंचने और बदलने की अनुमति देता है और संभावित रूप से उपयोगकर्ताओं को मैलवेयर या फ़िशिंग साइटों पर रीडायरेक्ट करता है।जब भी आप उन पेजों के लिए इसका उपयोग करते हैं, जिन्हें आप नियंत्रित नहीं करते हैं, तो
window.openerऑब्जेक्ट को अनुरोध के साथ भेजे जाने से रोकने के लिए अपने लिंक मेंrel="noopener"जोड़ें।वर्तमान में, फ़ायरफ़ॉक्स
noopenerसमर्थन नहीं करता है, इसलिए आपको अधिकतम प्रभाव के लिएrel="noopener noreferrer"का उपयोग करना होगा।
एक एंकर से लिंक
HTML पेज पर विशिष्ट टैग पर कूदने के लिए एंकर का उपयोग किया जा सकता है। <a> टैग किसी भी तत्व को इंगित कर सकता है जिसके पास एक id विशेषता है। आईडी के बारे में अधिक जानने के लिए, कक्षाओं और आईडी के बारे में दस्तावेज देखें। एंकर ज्यादातर एक पृष्ठ के उपधारा में कूदने के लिए उपयोग किया जाता है और हेडर टैग के साथ संयोजन में उपयोग किया जाता है।
मान लीजिए कि आपने कई विषयों पर एक पृष्ठ (पेज page1.html ) बनाया है:
<h2>First topic</h2>
<p>Content about the first topic</p>
<h2>Second topic</h2>
<p>Content about the second topic</p>
एक बार जब आपके पास कई खंड हो जाते हैं, तो आप विशिष्ट खंडों के त्वरित-लिंक (या बुकमार्क) के साथ पृष्ठ के शीर्ष पर एक तालिका सामग्री बनाना चाहते हैं।
यदि आपने अपने विषयों को एक id विशेषता दी है, तो आप उन्हें लिंक कर सकते हैं
<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>
अब आप अपनी सामग्री की तालिका में लंगर का उपयोग कर सकते हैं:
<h1>Table of Contents</h1>
<a href='#Topic1'>Click to jump to the First Topic</a>
<a href='#Topic2'>Click to jump to the Second Topic</a>
ये एंकर भी उस वेब पेज से जुड़े होते हैं जिस पर वे (पेज page1.html ) हैं। तो आप पेज और एंकर के नाम को संदर्भित करके एक साइट से दूसरे पेज तक लिंक कर सकते हैं।
Remember, you can always <a href="page1.html#Topic1">look back in the First Topic</a> for supporting information.
लिंक जो जावास्क्रिप्ट चलाता है
बस javascript: उपयोग करें javascript: पाठ को सामान्य लिंक के रूप में खोलने के बजाय जावास्क्रिप्ट के रूप में चलाने के लिए प्रोटोकॉल:
<a href="javascript:myFunction();">Run Code</a>
आप onclick विशेषता का उपयोग करके भी एक ही चीज़ प्राप्त कर सकते हैं:
<a href="#" onclick="myFunction(); return false;">Run Code</a>
return false; # लिंक पर क्लिक करने पर अपने पृष्ठ को शीर्ष पर स्क्रॉल करने से रोकने के लिए आवश्यक है। सभी कोड शामिल करना सुनिश्चित करें जिन्हें आप इससे पहले चलाना चाहते हैं, क्योंकि लौटने पर आगे कोड का निष्पादन बंद हो जाएगा।
इसके अलावा, आप एक विस्मयादिबोधक चिह्न शामिल कर सकते हैं ! पृष्ठ को शीर्ष पर स्क्रॉल करने से रोकने के लिए हैशटैग के बाद। यह काम करता है क्योंकि कोई भी अमान्य स्लग लिंक को पृष्ठ पर कहीं भी स्क्रॉल नहीं करने का कारण होगा, क्योंकि यह तत्व को संदर्भित नहीं कर सकता ( id="!" साथ एक तत्व id="!" )। आप एक ही प्रभाव को प्राप्त करने के लिए किसी भी अवैध स्लग (जैसे #scrollsNowhere ) का उपयोग भी कर सकते हैं। इस मामले में, return false; आवश्यक नहीं:
<a href="#!" onclick="myFunction();">Run Code</a>
क्या आपको इसका कोई उपयोग करना चाहिए?
जवाब लगभग निश्चित रूप से नहीं है । इस तरह के तत्व के साथ जावास्क्रिप्ट इनलाइन चलाना काफी बुरा अभ्यास है। शुद्ध जावास्क्रिप्ट समाधानों का उपयोग करने पर विचार करें जो पृष्ठ में तत्व की तलाश करते हैं और इसके बजाय एक फ़ंक्शन को बांधते हैं। एक घटना के लिए सुन रहा है
यह भी विचार करें कि क्या यह तत्व लिंक के बजाय वास्तव में एक बटन है या नहीं। यदि हां, तो आपको
<button>उपयोग करना चाहिए।
एक ही साइट पर एक पृष्ठ से लिंक करें
आप एक ही वेबसाइट पर पृष्ठों से लिंक करने के लिए एक सापेक्ष पथ का उपयोग कर सकते हैं।
<a href="/example">Text Here</a>
उपरोक्त उदाहरण सर्वर के रूट डायरेक्टरी ( / ) पर फ़ाइल example में जाएगा।
यदि यह लिंक http://example.com पर था, तो निम्नलिखित दो लिंक उपयोगकर्ता को उसी स्थान पर लाएंगे
<a href="/page">Text Here</a>
<a href="http://example.com/page">Text Here</a>
उपरोक्त दोनों example.com के रूट डायरेक्टरी में page फ़ाइल में जाएँगे।
वह लिंक जो ईमेल क्लाइंट चलाता है
मूल उपयोग
अगर href का मूल्य-स्तर mailto: शुरू होता है mailto: यह क्लिक पर एक ईमेल क्लाइंट खोलने की कोशिश करेगा:
<a href="mailto:[email protected]">Send email</a>
यह ईमेल एड्रेस [email protected] को नए बनाए गए ईमेल के प्राप्तकर्ता के रूप में डाल देगा।
Cc और Bcc
आप निम्न सिंटैक्स का उपयोग करके cc- या bcc- प्राप्तकर्ताओं के लिए पते भी जोड़ सकते हैं:
<a href="mailto:[email protected][email protected]&[email protected]">Send email</a>
विषय और शरीर का पाठ
आप नए ईमेल के लिए विषय और शरीर को भी आबाद कर सकते हैं:
<a href="mailto:[email protected]?subject=Example+subject&body=Message+text">Send email</a>
उन मानों को URL एनकोडेड होना चाहिए।
Mailto के साथ एक लिंक पर क्लिक करना mailto: आपके ऑपरेटिंग सिस्टम द्वारा निर्दिष्ट डिफ़ॉल्ट ईमेल क्लाइंट को खोलने की कोशिश करेगा या यह आपको यह चुनने के लिए कहेगा कि आप किस क्लाइंट का उपयोग करना चाहते हैं। प्राप्तकर्ता के पते के बाद निर्दिष्ट सभी विकल्प सभी ईमेल क्लाइंट में समर्थित नहीं हैं।
लिंक जो एक नंबर डायल करता है
यदि href का मूल्य-बटर tel: साथ शुरू होता है tel: आपका डिवाइस उस नंबर को डायल करेगा जब आप उसे क्लिक करेंगे। यह मोबाइल उपकरणों या कंप्यूटर / टैबलेट पर चलने वाले सॉफ़्टवेयर - जैसे स्काइप या फेसटाइम - पर काम करता है, जो फोन कॉल कर सकता है।
<a href="tel:11234567890">Call us</a>
अधिकांश डिवाइस और प्रोग्राम उपयोगकर्ता को किसी भी तरह से डायल करने के लिए संख्या की पुष्टि करने के लिए संकेत देंगे।