HTML लिंक
URL एन्कोडिंग ने समझाया कि विशेष अक्षर पते के अंदर कैसे यात्रा करते हैं। यह सत्र वह रोजमर्रा का HTML उपकरण बनाता है जो उन पतों का उपयोग करता है: anchor तत्व a साथ href। लिंक वह तरीका हैं जिससे आगंतुक आपके पेजों के बीच और व्यापक वेब पर जाते हैं। सही मार्कअप जितना ही स्पष्ट गंतव्य और स्पष्ट क्लिक करने योग्य टेक्स्ट मायने रखते हैं।
लिंक क्या है
हाइपरलिंक एक नियंत्रण है जो सक्रिय होने पर कहीं नेविगेट करता है। HTML में आप क्लिक करने योग्य सामग्री — आमतौर पर टेक्स्ट, कभी-कभी छवि — को <a>...</a> में लपेटते हैं और href को गंतव्य पर सेट करते हैं। बिना href के आपके पास सामान्य नेविगेशनल लिंक नहीं होता। ब्राउज़र लिंक को डिफ़ॉल्ट रूप से स्टाइल करता है (अक्सर रेखांकित और रंगीन), लेकिन महत्वपूर्ण भाग गंतव्य और शब्द हैं।
सीधा उत्तर
लिखें <a href="URL">क्लिक करने योग्य टेक्स्ट</a>। href पूर्ण वेब पता हो सकता है जैसे https://www.example.com (निरपेक्ष) या आपकी साइट पर किसी अन्य फ़ाइल का पाथ जैसे about.html (सापेक्ष)। आगंतुक टैगों के बीच की सामग्री पर क्लिक करते हैं। गंतव्य बताने वाले शब्द पसंद करें — “इस साइट के बारे में” — खाली वाक्यांशों जैसे “यहाँ क्लिक करें” के बजाय।
निरपेक्ष लिंक
निरपेक्ष URL में एक स्कीम (https:// या http://) और आमतौर पर एक होस्ट शामिल होता है। इन्हें बाहरी साइटों के लिए उपयोग करें, या जब आपको सचमुच पूर्ण पता चाहिए जो वर्तमान फ़ोल्डर पर निर्भर न हो।
निरपेक्ष लिंक
html<p>
<a href="https://www.example.com">Visit Example</a>
</p>निरपेक्ष सैंपल पढ़ना
hrefपूर्ण गंतव्य रखता है जोhttps://से शुरू होता है- शब्द
Visit Exampleवही हैं जो उपयोगकर्ता देखता और सक्रिय करता है - होस्ट या स्कीम में टाइपो यात्रा तोड़ देते हैं भले ही HTML टैग मान्य हों
- निरपेक्ष लिंक भी ईमानदार, वर्णनात्मक टेक्स्ट से लाभ उठाते हैं
अपनी साइट पर सापेक्ष लिंक
सापेक्ष URL वर्तमान पेज के स्थान के सापेक्ष फ़ाइलों की ओर इशारा करते हैं। डोमेन नाम दोहराए बिना index.html को about.html से जोड़ने का रोजमर्रा का तरीका यही है। File Paths कौशल लागू होते हैं: गलत फ़ोल्डर चुपचाप 404 विफलताएँ पैदा करते हैं।
दूसरे पेज का सापेक्ष लिंक
html<p>
<a href="about.html">About this site</a>
</p>सहायक सापेक्ष आदतें
- संबंधित पेज स्पष्ट फ़ोल्डर संरचना में रखें
- स्पेस के बिना हाइफ़न वाले फ़ाइलनाम पसंद करें
- दोनों दिशाएँ जाँचें: होम → अबाउट और अबाउट → होम
- याद रखें कि सापेक्ष लिंक अपडेट किए बिना HTML फ़ाइल खिसकाने से नेविगेशन टूट जाता है
लिंक टेक्स्ट सामग्री है, सजावट नहीं
स्क्रीन रीडर उपयोगकर्ता अक्सर आसपास का पैराग्राफ सुने बिना लिंक की सूची से कूदते हैं। दस बार दोहराए गए “यहाँ क्लिक करें” और “और पढ़ें” अर्थहीन हो जाते हैं। गंतव्य का नाम बताएँ। आप मित्रवत रह सकते हैं — बस विशिष्ट रहें।
वर्णनात्मक लिंक टेक्स्ट
html<!-- Prefer -->
<p><a href="pricing.html">View pricing plans</a></p>
<!-- Avoid as the only cue -->
<p><a href="pricing.html">Click here</a></p>निरपेक्ष बनाम सापेक्ष — काम के अनुसार चुनें
- बाहरी साइट जिस पर आपका नियंत्रण नहीं → निरपेक्ष
https://… - आपके प्रोजेक्ट का दूसरा पेज → जब संभव हो सापेक्ष पाथ
- समान-साइट लिंक निरपेक्ष लिखे जाने पर भी काम करते हैं, पर सापेक्ष लिंक डोमेन बदलने या फ़ाइलें स्थानीय खोलने पर पोर्टेबल रहते हैं
बाद के सत्र लिंक पर title, बुकमार्क (#) और ईमेल लिंक कवर करते हैं; पहलेa+hrefमें महारत हासिल करें।
टूटे लिंक और 404
यदि href गुम फ़ाइल या गलत होस्ट की ओर इशारा करे, ब्राउज़र त्रुटि पेज पर जाता है (अक्सर HTTP 404)। लिंक के आसपास HTML अभी भी एकदम सही दिख सकता है। हमेशा पाथ उसी तरह जाँचें जैसे favicon और stylesheet पाथ: वर्तनी, फ़ोल्डर, और क्या लक्ष्य फ़ाइल सेव हुई।
अपने एडिटर में अभ्यास
- एक ही फ़ोल्डर में
index.htmlऔरabout.htmlबनाएँ। - होम पेज पर
about.htmlका सापेक्ष लिंक वर्णनात्मक टेक्स्ट के साथ जोड़ें। - अबाउट पेज पर
index.htmlवापस सापेक्ष लिंक जोड़ें। - किसी विश्वसनीय बाहरी साइट का एक निरपेक्ष लिंक जोड़ें।
- ब्राउज़र में हर लिंक फॉलो करें; फिर जानबूझकर एक सापेक्ष पाथ तोड़ें, विफलता देखें, और ठीक करें।
- किसी भी “यहाँ क्लिक करें” टेक्स्ट को गंतव्य नाम में फिर से लिखें।
आसान गलतियाँ
hrefभूलना ताकि टेक्स्ट असली हाइपरलिंक न बने- हर गंतव्य के लिए “यहाँ क्लिक करें” या “लिंक” उपयोग करना
- फ़ाइलों को फ़ोल्डरों के बीच खिसकाने के बाद टूटे सापेक्ष पाथ
- बाहरी URL के लिए
https://या डोमेन में टाइपो - फ़ाइलनाम में स्पेस रखना और फिर हैरान होना कि सापेक्ष लिंक क्यों विफल होते हैं
- इंटरैक्टिव सामग्री लापरवाही से नेस्ट करना (शुरुआती लिंक सरल रखें:
aके अंदर टेक्स्ट)
सारांश
- लिंक
aतत्व का उपयोग करते हैं साथhrefगंतव्य - निरपेक्ष URL में स्कीम जैसे
https://शामिल होती है - सापेक्ष URL आपकी साइट की अन्य फ़ाइलों की ओर इशारा करते हैं
- सभी के लिए स्पष्ट, वर्णनात्मक लिंक टेक्स्ट लिखें — सहायक तकनीक सहित
- टूटे पाथ नेविगेशन समय पर विफल होते हैं भले ही टैग मान्य दिखें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी