HTML Image Tag


 HTML में, <img> टैग का उपयोग वेब पेज पर इमेज (चित्र) दिखाने के लिए किया जाता है। यह एक सिंगल टैग होता है, यानी इसे बंद (closing) करने की आवश्यकता नहीं होती है। <img> टैग के माध्यम से हम इमेज को पेज पर लोड कर सकते हैं और उसकी कुछ विशेषताएँ जैसे कि चौड़ाई (width), ऊँचाई (height), और वैकल्पिक टेक्स्ट (alt text) भी सेट कर सकते हैं।

<img> टैग के मुख्य गुण (Attributes):

  1. src:

    • यह गुण इमेज का स्रोत (source) सेट करता है, यानी वह फ़ाइल जो ब्राउज़र में दिखानी है।
    • उदाहरण: src="image.jpg"

  2. alt (Alternative Text):

    • यह इमेज के ना लोड होने की स्थिति में दिखाई देने वाला वैकल्पिक टेक्स्ट है।
    • यह वेब एक्सेसिबिलिटी के लिए भी उपयोगी है, जैसे दृष्टिहीन यूजर्स के लिए।
    • उदाहरण: alt="यह एक सुंदर इमेज है"

  1. width और height:

    • ये गुण इमेज की चौड़ाई और ऊँचाई पिक्सल (pixels) में निर्धारित करते हैं।
    • उदाहरण: width="500" और height="300"

उदाहरण:

<img src="flower.jpg" alt="एक सुंदर फूल" width="500" height="300">

इस उदाहरण में:

  • src="flower.jpg" से इमेज का नाम और लोकेशन दी गई है।
  • alt="एक सुंदर फूल" से इमेज का वर्णन किया गया है, जो इमेज ना दिखने पर टेक्स्ट के रूप में दिखेगा।
  • width="500" और height="300" से इमेज का आकार निर्धारित किया गया है।

निष्कर्ष:

<img> टैग वेबसाइटों पर इमेज को दिखाने का सबसे सरल और प्रभावी तरीका है।

HTML प्रोग्राम:

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>इमेज दिखाने का प्रोग्राम</title>
</head>
<body>
    <h1>HTML में इमेज दिखाना</h1>
    <!-- इमेज को प्रदर्शित करने के लिए img टैग का उपयोग किया जाता है -->
    <img src="image.jpg" alt="यहां इमेज का विवरण दें" width="500" height="300">
    <!-- src: इमेज का स्रोत, alt: इमेज ना दिखने पर आने वाला टेक्स्ट, width और height: इमेज की चौड़ाई और ऊंचाई -->
</body>
</html>