HTML Images
HTML Images क्या हैं?
HTML में Images (छवियों) का उपयोग वेब पेज को अधिक आकर्षक और जानकारीपूर्ण बनाने के लिए किया जाता है। आप किसी वेबसाइट पर इमेज का उपयोग उत्पाद दिखाने, गैलरी बनाने, या पृष्ठ को अधिक इंटरएक्टिव बनाने के लिए कर सकते हैं। HTML में इमेज को जोड़ने के लिए <img> टैग का उपयोग किया जाता है।
<img> टैग
<img> एक Self-Closing टैग है, जिसका मतलब है कि यह अपने आप बंद हो जाता है और इसे किसी Closing टैग की आवश्यकता नहीं होती।
<img> टैग की Basic Syntax:
<img src="URL" alt="Image Description">
Attributes:
- src (source):
यह attribute उस इमेज का पथ (path) या URL निर्दिष्ट करता है जिसे आप वेब पेज पर दिखाना चाहते हैं। - alt (alternative text):
यह attribute इमेज के लिए वैकल्पिक टेक्स्ट प्रदान करता है। यदि इमेज लोड नहीं होती है, तो यह टेक्स्ट प्रदर्शित होता है। यह Accessibility के लिए भी उपयोगी है। - width और height:
यह attributes इमेज का आकार (आकार) सेट करने के लिए उपयोग किए जाते हैं।
HTML Images का एक सरल उदाहरण
<!DOCTYPE html>
<html>
<body>
<h1>HTML Images</h1>
<img src="https://www.example.com/image.jpg" alt="Example Image" width="500" height="300">
</body>
</html>
आउटपुट:
यह कोड एक इमेज को 500px चौड़ा और 300px ऊँचा प्रदर्शित करेगा।
Absolute और Relative Path
इमेज जोड़ते समय, आप इमेज के पथ को Absolute या Relative तरीके से निर्दिष्ट कर सकते हैं।
Absolute Path:
Absolute Path इमेज का पूरा URL निर्दिष्ट करता है।
<img src="https://www.example.com/images/photo.jpg" alt="Example Photo">
Relative Path:
Relative Path प्रोजेक्ट डायरेक्टरी में इमेज का स्थान निर्दिष्ट करता है।
<img src="/images/photo.jpg" alt="Local Photo">
alt Attribute का महत्व
alt attribute का उपयोग Accessibility और SEO (Search Engine Optimization) दोनों के लिए किया जाता है।
- Accessibility: स्क्रीन रीडर इमेज को पढ़ नहीं सकते, लेकिन वे
altटेक्स्ट को पढ़ सकते हैं। - Fallback: यदि इमेज लोड नहीं होती है, तो
altटेक्स्ट प्रदर्शित होगा। - SEO: Search Engines
altटेक्स्ट को समझते हैं और इसे वेबसाइट की रैंकिंग में उपयोग करते हैं।
उदाहरण:
<img src="broken-link.jpg" alt="यह एक सुंदर परिदृश्य की तस्वीर है।">
इमेज का आकार (Size) सेट करना
आप इमेज के आकार को नियंत्रित करने के लिए width और height attributes का उपयोग कर सकते हैं।
उदाहरण:
<img src="https://www.example.com/image.jpg" alt="Resized Image" width="400" height="200">
CSS का उपयोग करके इमेज का आकार सेट करना:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 50%;
height: auto;
}
</style>
</head>
<body>
<img src="https://www.example.com/image.jpg" alt="CSS Resized Image">
</body>
</html>
Background Images बनाम HTML Images
- HTML Images:
<img>टैग का उपयोग मुख्य इमेज दिखाने के लिए किया जाता है। - Background Images:
CSS के माध्यम से Background Images सेट की जाती हैं।
Background Image का उदाहरण:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://www.example.com/background.jpg');
background-size: cover;
}
</style>
</head>
<body>
<h1>Background Image Example</h1>
</body>
</html>
Responsive Images
Responsive Images का उपयोग यह सुनिश्चित करने के लिए किया जाता है कि इमेज सभी डिवाइस (जैसे मोबाइल, टैबलेट, लैपटॉप) पर ठीक से प्रदर्शित हो।
Responsive Image का उदाहरण:
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="https://www.example.com/image.jpg" alt="Responsive Image">
</body>
</html>
आउटपुट:
यह कोड इमेज को स्क्रीन की चौड़ाई के अनुसार समायोजित करेगा।
Lazy Loading
Lazy Loading एक ऐसी तकनीक है, जो पेज लोडिंग के समय को तेज करने के लिए उपयोग की जाती है। यह केवल आवश्यक होने पर इमेज को लोड करता है।
उदाहरण:
<img src="https://www.example.com/image.jpg" alt="Lazy Loaded Image" loading="lazy">
- loading=”lazy”: यह ब्राउज़र को निर्देश देता है कि इमेज को तभी लोड करें, जब वह व्यू में आए।
Links के साथ Images
आप इमेज को लिंक के रूप में भी उपयोग कर सकते हैं।
उदाहरण:
<a href="https://www.example.com">
<img src="https://www.example.com/logo.jpg" alt="Example Logo" width="200">
</a>
आउटपुट:
इमेज पर क्लिक करने पर उपयोगकर्ता https://www.example.com पर रीडायरेक्ट होगा।
HTML Image Map
Image Map का उपयोग इमेज के विभिन्न हिस्सों पर अलग-अलग लिंक बनाने के लिए किया जाता है।
उदाहरण:
<!DOCTYPE html>
<html>
<body>
<img src="https://www.example.com/map.jpg" alt="Website Map" usemap="#example-map" width="500">
<map name="example-map">
<area shape="rect" coords="34,44,270,350" alt="Section 1" href="https://www.section1.com">
<area shape="circle" coords="337,300,44" alt="Section 2" href="https://www.section2.com">
</map>
</body>
</html>
आउटपुट:
इमेज के विभिन्न हिस्सों पर क्लिक करके अलग-अलग पेज पर जा सकते हैं।
निष्कर्ष
HTML में इमेज का उपयोग करना वेबसाइट को आकर्षक और उपयोगकर्ता-अनुकूल बनाता है। इस अध्याय में, आपने सीखा कि इमेज को जोड़ने, स्टाइल देने और लिंक के साथ उपयोग करने के विभिन्न तरीके क्या हैं। अगले अध्याय में, हम HTML Tables के बारे में जानेंगे।