HTML Images – Basic

📘 HTML Images – Basic जानकारी और उपयोग

HTML में images यानी चित्रों का उपयोग वेबपेज को आकर्षक, जानकारीपूर्ण और यूज़र फ्रेंडली बनाने के लिए किया जाता है। इस अध्याय में हम images से जुड़ी सभी basic जानकारी, syntax, attributes और उदाहरणों को step-by-step सीखेंगे।

---

🔹 1. Image जोड़ने के लिए कौन सा टैग होता है?

HTML में image जोड़ने के लिए <img> टैग का उपयोग किया जाता है। यह एक self-closing tag होता है — यानी इसे बंद करने की जरूरत नहीं होती।

✅ Syntax:

<img src="image.jpg" alt="वैकल्पिक टेक्स्ट">

---

🔸 2. <img> टैग के मुख्य Attributes

Attribute	काम
src	Image की फ़ाइल का path या URL
alt	वैकल्पिक टेक्स्ट जो image न दिखने पर दिखाई देता है
width	Image की चौड़ाई (px या %)
height	Image की ऊंचाई (px या %)
title	Hover करने पर tooltip टेक्स्ट दिखाना

---

🧾 Example 1: Simple Image

<img src="nature.jpg" alt="प्राकृतिक दृश्य">

यह image फ़ोल्डर में मौजूद nature.jpg को वेबपेज पर दिखाएगा। यदि यह image लोड नहीं होती, तो “प्राकृतिक दृश्य” टेक्स्ट दिखेगा।

---

🔸 3. Image का Size Control करना

आप HTML से ही image का size बदल सकते हैं:

<img src="flower.jpg" alt="फूल" width="300" height="200">

📌 लेकिन ध्यान रखें:
Image का अनुपात (Aspect Ratio) बिगड़ सकता है अगर height और width गलत दिए गए हों।

---

🔸 4. Image को लिंक बनाना

Image पर क्लिक करके किसी लिंक पर जाना है?

<a href="https://www.google.com">
  <img src="google-logo.png" alt="Google" width="150">
</a>

🖼 अब image पर क्लिक करने से Google खुल जाएगा।

---

🔸 5. External vs Internal Images

प्रकार	उदाहरण	उपयोग
Internal	src="images/logo.png"	वेबसाइट के अंदर
External	src="https://example.com/image.jpg"	बाहर की वेबसाइट से image लाना

---

🔸 6. Image के साथ title Attribute

<img src="sunset.jpg" alt="सूर्यास्त" title="Beautiful Sunset View">

🖱 Mouse लाने पर “Beautiful Sunset View” दिखेगा।

---

🔸 7. Responsive Image (CSS या HTML से)

Mobile Friendly Website के लिए image responsive होनी चाहिए।

<img src="image.jpg" alt="..." style="max-width:100%; height:auto;">

या CSS में:

img {
  max-width: 100%;
  height: auto;
}

---

🧪 Practice Task

1. एक HTML पेज बनाइए जिसमें:
   • एक local image (logo.png) को 300px चौड़ाई में दिखाइए।
   • एक external image (https://picsum.photos/200/300) जोड़िए।
   • एक image को link में बदलिए जो Google पर ले जाए।
   • एक image में alt और title attribute दीजिए।
   • एक responsive image बनाई जाए जो सभी डिवाइसेज़ पर फिट हो।

---

❓ क्या होता है alt टेक्स्ट?

अगर image लोड न हो पाए, या यूज़र screen reader इस्तेमाल कर रहा हो, तब alt टेक्स्ट accessibility के लिए जरूरी होता है।

उदाहरण:

<img src="broken.jpg" alt="चित्र उपलब्ध नहीं है">

---

🧠 SEO और Accessibility Tips:

✅ हमेशा alt टेक्स्ट दें – Google Image Search के लिए मददगार होता है।
✅ Image का आकार छोटा रखें – Website Speed के लिए अच्छा होता है।
✅ Responsive Image use करें – Mobile Users के लिए UX बेहतर होता है।

---

🔚 Conclusion:

• <img> टैग से आप किसी भी image को HTML पेज में जोड़ सकते हैं।
• src, alt, width, height, और title मुख्य attributes हैं।
• Image को लिंक, responsive या SEO friendly बनाना आसान है।