HTML में लिंक और इमेजेज का उपयोग वेब पेज को अधिक इंटरैक्टिव और आकर्षक बनाने के लिए किया जाता है। लिंक के माध्यम से उपयोगकर्ता विभिन्न वेब पेजों पर नेविगेट कर सकते हैं, जबकि इमेजेज वेब पेज की विज़ुअल अपील को बढ़ाते हैं। इस अध्याय में हम हाइपरलिंक्स और इमेजेज के बारे में जानेंगे और उनके विभिन्न एट्रिब्यूट्स पर चर्चा करेंगे।
हाइपरलिंक्स (<a>)
हाइपरलिंक्स का उपयोग एक वेब पेज से दूसरे वेब पेज या एक ही पेज के विभिन्न हिस्सों में नेविगेट करने के लिए किया जाता है। <a> टैग का उपयोग लिंक बनाने के लिए किया जाता है।
उदाहरण:
<a href="https://www.example.com">यह एक लिंक है</a>
ऊपर दिए गए उदाहरण में, <a> टैग का उपयोग “href” एट्रिब्यूट के साथ किया गया है, जो लिंक का URL निर्दिष्ट करता है। “href” का पूर्ण रूप “Hypertext Reference” है।
इमेजेज (<img>)
इमेजेज का उपयोग वेब पेज पर विज़ुअल कंटेंट जोड़ने के लिए किया जाता है। <img> टैग का उपयोग इमेजेज को प्रदर्शित करने के लिए किया जाता है। यह एक खाली तत्व है, जिसका मतलब है कि इसका कोई समाप्ति टैग नहीं होता।
उदाहरण:
हाइपरलिंक्स (<a>) के एट्रिब्यूट्स
<href> टैग का उपयोग वेब पेजों में हाइपरलिंक्स बनाने के लिए किया जाता है। हाइपरलिंक्स विभिन्न वेब पेजों, दस्तावेजों, या पेज के अन्य हिस्सों के बीच नेविगेशन की अनुमति देते हैं। <a> टैग के विभिन्न एट्रिब्यूट्स का उपयोग करके लिंक के व्यवहार और प्रस्तुति को नियंत्रित किया जा सकता है। आइए इन एट्रिब्यूट्स के बारे में विस्तार से जानें।
1. href (Hypertext Reference)
- विवरण: यह एट्रिब्यूट लिंक का URL निर्दिष्ट करता है। यह बताता है कि लिंक पर क्लिक करने पर उपयोगकर्ता को किस वेब पेज या दस्तावेज़ पर भेजा जाएगा।
- उदाहरण:
<a href="https://www.example.com">यह एक लिंक है</a>
2. target
- विवरण: यह एट्रिब्यूट निर्दिष्ट करता है कि लिंक को किस विंडो या फ्रेम में खोला जाएगा। कुछ सामान्य मान हैं:
_self: लिंक को उसी विंडो या फ्रेम में खोलता है (डिफ़ॉल्ट मान)।_blank: लिंक को एक नई टैब या विंडो में खोलता है।_parent: लिंक को पैरेंट फ्रेम में खोलता है।_top: लिंक को पूरे ब्राउज़र विंडो में खोलता है।
- उदाहरण:
<a href="https://www.example.com" target="_blank">नई टैब में खोलें</a>
3. title
- विवरण: यह एट्रिब्यूट लिंक पर माउस ले जाने पर अतिरिक्त जानकारी या विवरण प्रदान करता है। यह एक टूलटिप के रूप में दिखाई देता है।
- उदाहरण:
<a href="https://www.example.com" title="Example Website">यह एक लिंक है</a>
4. rel (Relationship)
- विवरण: यह एट्रिब्यूट लिंक और लिंक किए गए दस्तावेज़ के बीच के संबंध को निर्दिष्ट करता है। कुछ सामान्य मान हैं:
nofollow: सर्च इंजन को लिंक का अनुसरण न करने का निर्देश देता है।noopener: नई टैब में लिंक खोलते समय सुरक्षा और प्रदर्शन में सुधार करता है।noreferrer: रेफरर जानकारी को नए पेज पर नहीं भेजता।
- उदाहरण:
<a href="https://www.example.com" rel="nofollow">No Follow Link</a>
5. download
- विवरण: यह एट्रिब्यूट निर्दिष्ट करता है कि लिंक पर क्लिक करने पर उपयोगकर्ता को फाइल को डाउनलोड करने की अनुमति मिलती है। यह एट्रिब्यूट डाउनलोड की जाने वाली फाइल का नाम भी निर्दिष्ट कर सकता है।
- उदाहरण:
<a href="path/to/file.pdf" download>फाइल डाउनलोड करें</a>
6. hreflang
- विवरण: यह एट्रिब्यूट लिंक किए गए दस्तावेज़ की भाषा को निर्दिष्ट करता है। यह सर्च इंजन और उपयोगकर्ताओं को लिंक की भाषा के बारे में जानकारी प्रदान करता है।
- उदाहरण:
<a href="https://www.example.com" hreflang="en">English Page</a>
7. type
- विवरण: यह एट्रिब्यूट लिंक किए गए संसाधन के MIME प्रकार को निर्दिष्ट करता है। यह ब्राउज़र को लिंक किए गए संसाधन के प्रकार के बारे में जानकारी देता है।
- उदाहरण:
<a href="path/to/file.pdf" type="application/pdf">Download PDF</a>
<a> टैग के विभिन्न एट्रिब्यूट्स का सही उपयोग करके आप लिंक के व्यवहार और प्रस्तुति को नियंत्रित कर सकते हैं। href, target, title, rel, download, hreflang, और type जैसे एट्रिब्यूट्स का उपयोग करके आप लिंक को अधिक उपयोगकर्ता-अनुकूल और सर्च इंजन-अनुकूल बना सकते हैं। इन एट्रिब्यूट्स के सही उपयोग से आपके वेब पेज की उपयोगिता और सुरक्षा में सुधार होता है।
HTML इमेजेज के सभी एट्रिब्यूट्स
HTML में <img> टैग का उपयोग वेब पेज पर इमेजेज को प्रदर्शित करने के लिए किया जाता है। <img> टैग एक खाली तत्व है, जिसका मतलब है कि इसका कोई समाप्ति टैग नहीं होता है। इमेजेज को विभिन्न एट्रिब्यूट्स का उपयोग करके नियंत्रित और स्वरूपित किया जा सकता है। आइए, इन एट्रिब्यूट्स के बारे में विस्तार से जानें।
1. src (Source)
- विवरण: यह एट्रिब्यूट इमेज का स्रोत URL निर्दिष्ट करता है। यह बताता है कि इमेज किस फाइल से लोड की जाएगी।
- उदाहरण:
<img src="image.jpg" alt="यह एक तस्वीर है">
2. alt (Alternative Text)
- विवरण: यह एट्रिब्यूट इमेज का वैकल्पिक टेक्स्ट प्रदान करता है, जो इमेज लोड न होने पर या स्क्रीन रीडर्स के लिए उपयोगी होता है।
- उदाहरण:
<img src="image.jpg" alt="यह एक तस्वीर है">
3. width और height
- विवरण: ये एट्रिब्यूट्स इमेज की चौड़ाई और ऊंचाई निर्दिष्ट करते हैं। ये पिक्सल में मापे जाते हैं।
- उदाहरण:
<img src="image.jpg" alt="यह एक तस्वीर है" width="500" height="400">
4. title
- विवरण: यह एट्रिब्यूट इमेज पर माउस ले जाने पर अतिरिक्त जानकारी या विवरण प्रदर्शित करता है।
- उदाहरण:
<img src="image.jpg" alt="यह एक तस्वीर है" title="Image Title">
5. srcset (Source Set)
- विवरण: यह एट्रिब्यूट विभिन्न स्क्रीन रिज़ॉल्यूशंस के लिए इमेज के विभिन्न वर्शन प्रदान करता है। यह ब्राउज़र को उपयुक्त इमेज चुनने की अनुमति देता है।
- उदाहरण:
<img src="image.jpg" alt="यह एक तस्वीर है" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w">
6. sizes
- विवरण: यह एट्रिब्यूट srcset के साथ उपयोग किया जाता है और विभिन्न स्क्रीन आकारों के लिए इमेज के डिस्प्ले आकार को निर्दिष्ट करता है।
- उदाहरण:
<img src="image.jpg" alt="यह एक तस्वीर है" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px">
7. loading
- विवरण: यह एट्रिब्यूट इमेज लोडिंग व्यवहार को निर्दिष्ट करता है। इसके मान हैं:
auto: ब्राउज़र का डिफ़ॉल्ट लोडिंग व्यवहार।lazy: जब इमेज व्यू पोर्ट के निकट होती है, तब लोड होती है।eager: पेज लोड होने के तुरंत बाद इमेज लोड होती है।
- उदाहरण:
<img src="image.jpg" alt="यह एक तस्वीर है" loading="lazy">
8. crossorigin
- विवरण: यह एट्रिब्यूट क्रॉस-ओरिजिन रिसोर्सेज की अनुमति और हैंडलिंग को नियंत्रित करता है। इसके मान हैं:
anonymous: क्रॉस-ओरिजिन रिक्वेस्ट को गुमनाम रूप से बनाता है।use-credentials: क्रॉस-ओरिजिन रिक्वेस्ट को क्रेडेंशियल्स के साथ बनाता है।
- उदाहरण:
<img src="image.jpg" alt="यह एक तस्वीर है" crossorigin="anonymous">
9. usemap
- विवरण: यह एट्रिब्यूट इमेज को एक इमेज मैप से जोड़ता है, जो कि इमेज के विभिन्न हिस्सों को हाइपरलिंक बनाने की अनुमति देता है।
- उदाहरण:
<img src="image.jpg" alt="यह एक तस्वीर है" usemap="#imagemap">
10. ismap
- विवरण: यह एट्रिब्यूट इमेज को एक सर्वर-साइड इमेज मैप के रूप में निर्दिष्ट करता है।
- उदाहरण:
<img src="image.jpg" alt="यह एक तस्वीर है" ismap>
<img> टैग के विभिन्न एट्रिब्यूट्स का सही उपयोग करके आप इमेजेज को बेहतर तरीके से नियंत्रित और स्वरूपित कर सकते हैं। src, alt, width, height, title, srcset, sizes, loading, crossorigin, usemap, और ismap जैसे एट्रिब्यूट्स का उपयोग करके आप अपनी इमेजेज को अधिक उपयोगकर्ता-अनुकूल, सर्च इंजन-अनुकूल, और ब्राउज़र-अनुकूल बना सकते हैं। इन एट्रिब्यूट्स का सही उपयोग करने से आपके वेब पेज की उपयोगिता और आकर्षण में सुधार होता है।
