<img src="image.jpg" alt="Beautiful Landscape">HTML Images, Image Link, Text Link in Hindi
HTML में images को webpage पर दिखाने के लिए <img> tag का उपयोग किया जाता है। ये एक self-closing tag होता है, यानी इसे बंद करने की जरूरत नहीं होती।
इस tag में सबसे important attribute होता है src (source), जिसमें हम image का URL या file path देते हैं। इसके अलावा alt attribute भी होता है जो image न load होने पर दिखाई देता है और SEO के लिए भी ज़रूरी होता है।
ऊपर दिए गए example में src से browser को बताया गया है कि कौन सी image load करनी है और alt से उसका alternate text define किया गया है।
अगर image website के folder में है तो उसका relative path देना होता है। और अगर internet पर hosted है तो direct image URL दिया जा सकता है।
<img src="https://example.com/photo.jpg" alt="Online Image">Images की size control करने के लिए हम width और height attributes का use कर सकते हैं। इसे percentage (%) या pixels (px) में define किया जा सकता है।
<img src="img.jpg" alt="Example" width="300" height="200">HTML में CSS की मदद से images को और ज़्यादा stylish बनाया जा सकता है, जैसे border देना, shadow लगाना, या image को responsive बनाना।
Responsive image का मतलब है कि वो automatically अलग-अलग screen sizes पर adjust हो जाए। इसके लिए CSS में max-width: 100% और height: auto जैसे rules use किए जाते हैं।
Image Links in HTML
HTML में हम किसी image को clickable बना सकते हैं, यानी जब user उस image पर click करे तो वो किसी दूसरे page या website पर पहुंच जाए। इसे Image Link कहते हैं।
Image link बनाने के लिए हम <a> tag के अंदर <img> tag को रखते हैं। <a> tag में href attribute होता है जो बताता है कि click करने पर user कहां जाएगा।
<a href="https://example.com">
<img src="photo.jpg" alt="Example Image">
</a>ऊपर दिए गए code में, जब कोई user image पर click करेगा, तो वो https://example.com पर पहुंच जाएगा। ये तरीका बहुत useful होता है navigation या ads में।
आप image link को उसी तरह style कर सकते हैं जैसे normal image को। CSS से आप image को border, shadow या hover effect दे सकते हैं।
अगर आप चाहते हैं कि image new tab में खुले, तो <a> tag में target="_blank" attribute use कर सकते हैं:
<a href="https://example.com" target="_blank">
<img src="photo.jpg" alt="Open in new tab">
</a>Image link का इस्तेमाल वेबसाइट पर banner, product link, या promotional content में बहुत किया जाता है। इससे visual navigation user के लिए आसान हो जाता है।
आप image को responsive बनाकर उसे mobile-friendly भी बना सकते हैं, ताकि हर screen size पर सही दिखाई दे और clickable रहे।
Text Links in HTML
HTML में जब हम किसी text को clickable बनाते हैं, ताकि user किसी और page या website पर जा सके, तो उसे Text Link कहते हैं। इसे <a> tag से बनाया जाता है।
Text link बनाने के लिए <a> tag में href attribute दिया जाता है। href का मतलब होता है “Hypertext Reference”, यानी user को click करने पर कहां भेजना है।
<a href="https://example.com">Visit Example</a>उपर दिए गए code में “Visit Example” एक clickable text है, और click करने पर user https://example.com पर जाएगा।
अगर आप चाहते हैं कि link new tab में खुले, तो <a> tag में target="_blank" attribute use किया जाता है।
<a href="https://example.com" target="_blank">Open in New Tab</a>Text links को CSS के जरिए customize किया जा सकता है – जैसे उनका color, underline हटाना, hover effect देना आदि।
आप text link को किसी भी paragraph या heading के अंदर भी use कर सकते हैं। इससे content ke beech me navigation देना आसान हो जाता है।
<p>Visit our <a href="/about.html">About Page</a> to know more.</p>Text links वेबसाइट के structure और user navigation के लिए बहुत ज़रूरी होते हैं। ये SEO के लिए भी helpful होते हैं जब सही anchor text use किया जाए।
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image and Links Example</title>
</head>;
<body>
<!-- Normal Image -->
<h2>Normal Image</h2>
<img src="https://via.placeholder.com/300x200" alt="Simple Image" width="300">
<hr>
<!-- Image Link -->
<h2>Clickable Image (Image Link)</h2>
<a href="https://www.google.com" target="_blank">
<img src="https://via.placeholder.com/300x200?text=Click+Me" alt="Google Link Image" width="300">
</a>
<hr>
<!-- Text Link -->
<h2>Text Link</h2>
<p>
Visit <a href="https://www.wikipedia.org" target="_blank">Wikipedia</a> to learn more.
</p>
</body>
</html>Request
अगर आपको यह article useful या interesting लगा हो, तो please इसे अपने dosto aur family ke साथ जरूर share करें। आपका एक छोटा सा कदम हमें और अच्छा content बनाने के लिए motivate करता है। Thank you!
ध्यान दें कि इस page पर आपको कुछ ads भी देखने को मिल सकते हैं। इसके लिए हम आपसे माफी चाहते हैं। हम इस content को तैयार करने में काफी मेहनत और time लगाते हैं, ताकि आपको valuable जानकारी मिल सके। इन्हीं ads की मदद से हम ये काम continue कर पाते हैं।
आपके support और understanding के लिए दिल से धन्यवाद।
