HTML Images, Image Links और Text Links

HTML में सिर्फ text और headings ही नहीं, बल्कि images और clickable links भी webpage का important हिस्सा होते हैं। किसी webpage को attractive और useful बनाने के लिए हम images का इस्तेमाल कर सकते हैं और links की मदद से users को दूसरे pages या websites पर भेज सकते हैं।

HTML Images

HTML में webpage पर image दिखाने के लिए <img> tag का उपयोग किया जाता है। यह एक void element है, इसलिए इसके लिए अलग closing tag जैसे </img> की जरूरत नहीं होती।

Basic Image Syntax

एक basic image को HTML में इस तरह लिखा जाता है:

यहां <img> image को webpage पर display करता है। इसमें मुख्य रूप से दो attributes इस्तेमाल किए गए हैं:

• src: Browser को बताता है कि image कहां मौजूद है।
• alt: Image का alternative text define करता है।

src Attribute

src का मतलब source होता है। इसमें image का file path या image URL दिया जाता है। Browser इसी location से image को load करने की कोशिश करता है।

alt Attribute

alt का मतलब alternative text है। अगर किसी कारण से image load नहीं हो पाती, तो यह text image के बारे में information देता है। यह accessibility के लिए भी useful है क्योंकि screen readers image के बारे में इस text को पढ़ सकते हैं।

इसलिए meaningful image के लिए descriptive alt text लिखना अच्छा practice है।

Image का File Path और URL

अगर image आपकी website के किसी folder में मौजूद है, तो आप उसका relative path दे सकते हैं। उदाहरण के लिए अगर images folder के अंदर nature.jpg है, तो path इस तरह हो सकता है:

अगर image internet पर किसी दूसरे server पर hosted है, तो उसका complete URL भी src में दिया जा सकता है।

HTML Image की Width और Height

HTML में image का size control करने के लिए width और height attributes का उपयोग किया जा सकता है।

• width: Image की चौड़ाई निर्धारित करता है।
• height: Image की ऊंचाई निर्धारित करता है।

उदाहरण के लिए:

हालांकि image का size control करने के लिए CSS का उपयोग करना अधिक flexible होता है, खासकर responsive websites में।

Responsive Images

आजकल websites को mobile, tablet और desktop सभी devices पर सही तरीके से काम करना चाहिए। इसलिए images को भी responsive बनाना जरूरी है।

CSS में max-width: 100%; और height: auto; का उपयोग करके image को उसके available container के अनुसार adjust किया जा सकता है।

इसमें image अपने container से बड़ी नहीं होगी और उसकी height automatically proportion के अनुसार adjust होगी। इससे mobile screens पर horizontal overflow जैसी समस्या कम होती है।

Image Links in HTML

HTML में हम image को clickable भी बना सकते हैं। इसका मतलब है कि user जब image पर click करेगा तो उसे किसी दूसरे page या website पर भेजा जा सकता है। ऐसी image को Image Link कहा जाता है।

Image को Link बनाना

Image link बनाने के लिए <a> tag के अंदर <img> tag रखा जाता है। <a> tag का href attribute बताता है कि click करने पर user को किस location पर जाना है।

ऊपर के example में image पर click करने पर browser https://example.com पर जाने की कोशिश करेगा।

Image links का उपयोग navigation, banners, product cards, promotional sections और अन्य clickable visual elements में किया जा सकता है।

Image Link को New Tab में खोलना

अगर आप चाहते हैं कि image पर click करने के बाद destination page नए browser tab में खुले, तो <a> tag में target="_blank" लगाया जा सकता है।

यहां target="_blank" destination को नए tab में खोलने के लिए उपयोग किया गया है। External links के साथ rel="noopener" का उपयोग करना भी एक अच्छा practice है।

Text Links in HTML

जब किसी text को clickable बनाया जाता है ताकि user उस पर click करके किसी दूसरे page या website पर जा सके, तो उसे Text Link कहा जाता है। इसे HTML के <a> tag से बनाया जाता है।

Basic Text Link

Text link बनाने के लिए <a> tag में href attribute दिया जाता है।

इस example में Visit Example clickable text है। User इस text पर click करके दिए गए URL पर जा सकता है।

Text Link को New Tab में खोलना

Image links की तरह text links को भी नए tab में खोला जा सकता है। इसके लिए target="_blank" attribute का उपयोग किया जाता है।

Paragraph के अंदर Text Link

Links को webpage के normal paragraph के अंदर भी use किया जा सकता है। इससे article या educational content के बीच दूसरे relevant page पर navigation देना आसान होता है।

Text links website के pages के बीच navigation बनाने में important role निभाते हैं। सही और descriptive anchor text user को यह समझने में मदद करता है कि link पर click करने के बाद उसे किस तरह की information मिलेगी।

Image और Links को एक साथ समझें

अब तक हमने images, image links और text links को अलग-अलग समझा। इन तीनों को एक ही webpage में भी इस्तेमाल किया जा सकता है। इससे एक simple लेकिन useful webpage section तैयार किया जा सकता है।

Complete Example

Important Points

• <img> tag webpage पर image दिखाने के लिए उपयोग होता है।
• src में image का path या URL दिया जाता है।
• alt में image का alternative description दिया जाता है।
• width और height से image का size निर्धारित किया जा सकता है।
• Responsive design के लिए CSS में max-width: 100%; और height: auto; useful हैं।
• <a> के अंदर <img> रखने पर image clickable बन जाती है।
• href बताता है कि link click करने पर user कहां जाएगा।
• target="_blank" link को नए tab में खोल सकता है।
• Links को CSS से अलग-अलग colors, borders और hover effects दिए जा सकते हैं।

Conclusion

HTML में images webpage को visually useful बनाती हैं, जबकि links users को एक page से दूसरे page या external website तक पहुंचाने में मदद करते हैं। <img> tag से image दिखाई जाती है, <a> tag से link बनाया जाता है और दोनों को combine करके clickable image बनाई जा सकती है।

अगर आप responsive image, meaningful alt text और सही links का इस्तेमाल करते हैं, तो आपका webpage users के लिए ज्यादा useful और easy to navigate बन सकता है।

---

---

---

---

---

---

Quizzes in Hindi

---

---

---