लिंक्स और हाइपरलिंक्स
आज हम hyperlinks देखते हैं — a tag और href, जो कुछ शब्दों को वेब पर दूसरे पेज का दरवाज़ा बना देते हैं।
- 1
लिंक क्या होता है
पिछले लेसन में
divऔरspanसे सादे बॉक्स देखे। आज वह चीज़ जोड़ते हैं जो वेब को वेब बनाती है: hyperlink। लिंक कुछ शब्द हैं जिन्हें क्लिक करके दूसरा पता खुलता है।HTML में यह टुकड़ा
<a>element है। Destination opening tag केhrefattribute में रहता है। Attributes वाले लेसन मेंhrefएक बार दिख चुका है। आज लिंक खुद ही लेसन है। - 2
समस्या: अलग-थलग पड़े पन्नों को जोड़कर एक संपूर्ण वेब बनाना
जो पेज दूसरे पेज की ओर इशारा न कर सके, वह बंद गली है। लोगों को टेक्स्ट में एक दरवाज़ा चाहिए था: यहाँ क्लिक करो, वहाँ पहुँचो। साफ़ destination के बिना दरवाज़ा बेकार है।
इसलिए HTML दरवाज़े के लिए
<a>और पते के लिएhrefइस्तेमाल करता है। नीचे उदाहरण में पता पूरा URL है, जोhttps://से शुरू होता है। ऐसे पते को absolute URL कहते हैं। - 3
Browser Absolute, Relative, और Anchor URLs को कैसे पढ़ता है
Browser opening
<a>पढ़ता है,hrefयाद रखता है, और</a>तक के शब्दों को क्लिक वाला लेबल मानता है। ये शब्द inline हैं, इसलिए लिंक paragraph के अंदर बैठता है, नई लाइन से नहीं।ऐसा लेबल लिखो जो लोग समझें, जैसे “CodeX Cider”, न कि “click here”। लेबल वह है जो visitor पढ़ता है।
hrefवह है जहाँ वह जाता है। - 4
आज की प्रैक्टिस: अर्थपूर्ण एंकर टैग्स के साथ नेविगेशन
नीचे छोटा paragraph पढ़ो, फिर browser pane देखो। नीला लिंक क्लिक करके destination खोल सकते हो।
- 5
अहम नियम: href नहीं, तो कोई दरवाज़ा नहीं
hrefके बिना<a>लिंक जैसा दिख सकता है, लेकिन कहीं नहीं जाता। Opening tag में पता रखो, फिर लेबल, फिर closing tag।
इसमें पूरा प्रोटोकॉल और डोमेन शामिल होता है। यह किसी भी वेबसाइट या बाहरी पेज पर सीधे जाने के लिए उपयोग होता है।
उसी वेबसाइट के दूसरे पन्नों या उसी पेज के किसी हिस्से पर स्क्रॉल करने के लिए इस्तेमाल होता है।
आप क्या सीखेंगे
- 1Hyperlink टेक्स्ट में एक दरवाज़ा है
- 2a tag वह दरवाज़ा बनाता है
- 3href में destination URL रहता है
- 4Absolute URL https:// से शुरू होता है
- 5साफ़ link text लिखो, click here नहीं
लाइन-बाय-लाइन
<p> ... </p>Paragraph वाक्य पकड़े रहता है। लिंक उसके अंदर inline element की तरह बैठता है।
<a href="https://codexcider.com">लिंक का opening tag।
hrefabsolute URL है — पूरा पताhttps://सहित।CodeX Ciderवह link text जो लोग देखते और क्लिक करते हैं। छोटा और साफ़ रखो।
</a>Closing tag। Opening और इसके बीच का सब कुछ क्लिक वाले लेबल का हिस्सा है।
खुद ट्राई करो
एक paragraph लिखो जिसमें https://www.google.com का लिंक हो, लेबल Google। href opening <a> tag में लगाओ।
हिंट: Opening tag में href, फिर लेबल, फिर </a>।
गलती कहाँ होती है
- 1.
hrefके बिना<a>लिखना। लिंक जैसा दिखे, कहीं नहीं जाता। - 2.अस्पष्ट लेबल जैसे “click here”। Destination का नाम वाली बातें बेहतर हैं।
इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)
Q: लिंक्स पर target="_blank" का उपयोग कब और क्यों किया जाता है?↓
यह लिंक को ब्राउज़र के नए टैब या विंडो में खोलता है। सुरक्षा की दृष्टि से इसके साथ हमेशा rel="noopener noreferrer" लगाना चाहिए ताकि पुराना पेज दुर्भावनापूर्ण कोड (tab-nabbing) से सुरक्षित रहे।
Q: "click here" जैसे सामान्य लिंक लेबल्स को बुरा क्यों माना जाता है?↓
दृष्टिबाधित लोग स्क्रीन रीडर्स की मदद से सिर्फ़ लिंक्स की एक सूची बनाकर पेज नेविगेट करते हैं। अगर हर लिंक का नाम "click here" होगा, तो वे नहीं जान पाएंगे कि लिंक कहाँ ले जाएगा। हमेशा स्पष्ट और वर्णनात्मक टेक्स्ट (जैसे "कोर्स का सिलेबस देखें") लिखें।
Q: उसी पेज के किसी निश्चित हिस्से पर स्क्रॉल करने के लिए लिंक कैसे बनाते हैं?↓
उस सेक्शन को एक यूनिक id दें (जैसे <section id="contact">) और लिंक के href में हैश (#) के साथ वही ID लिखें: <a href="#contact">संपर्क करें</a>।