---

📘 Inserting Image in HTML – IMG Tag, Align, Border, etc.

---

🔷 1. Introduction:

Images make webpages attractive, informative, and engaging.
In HTML, the <img> tag is used to insert images from a file or web URL into a webpage.

---

🔷 2. Definition:

The <img> tag is an empty tag (no closing tag required).
It is used to display images in the browser.

Important Attributes:

Attribute	Purpose
src	Source of the image (file path or URL)
alt	Alternate text if image is not available
width	Sets image width
height	Sets image height
align	Aligns image (left, right, center – old HTML)
border	Adds a border around the image

---

🔷 3. Syntax:

<img src="image.jpg" alt="This is an image" width="300" height="200">

✅ Note: <img> tag must include src and alt for best practice.

---

🔷 4. Example:

<img src="nature.jpg" alt="Nature Image" width="400" height="250" border="2">

Output:
An image named “nature.jpg” will appear with 400×250 size and 2px border.

---

🔷 5. Image Alignment (Old HTML):

<img src="tree.jpg" align="left">
<p>This text wraps around the image.</p>

✅ align is deprecated in HTML5, use CSS instead:

<img src="tree.jpg" style="float: left; margin-right: 10px;">

---

🔷 6. Image from URL:

<img src="https://example.com/image.png" alt="Web Image">

✅ You can insert images from any online source.

---

🔷 7. Practical Example:

<h2>My Favourite Place</h2>
<img src="hill.jpg" alt="Hill View" width="500" height="300" style="border: 3px solid green;">
<p>The view from the hill was amazing and peaceful.</p>

---

🔷 8. Real Life Use Cases:

• Logos
• Product images
• Banners
• Thumbnails
• Diagrams in blogs/articles

---

🔷 9. CSS Styling for Images:

<img src="photo.jpg" style="border-radius: 10px; box-shadow: 5px 5px 15px grey;">

✅ You can use border-radius, box-shadow, margin, and float for better styling.

---

🔷 10. Table Summary:

Attribute	Use
src	Image location
alt	Text shown if image fails
width / height	Image size
align	Image position
border	Border around image
style	Modern CSS styling

---

🔷 11. Advantages:

• Makes webpages visually appealing
• Helps explain content better
• SEO friendly with alt tag
• Works in all browsers

---

🔷 12. Limitations:

• Large images may slow page loading
• align is outdated (use CSS)
• Images must be properly optimized

---

---

📗 HTML में चित्र जोड़ना (Insert Image) – <img> टैग, Align, Border आदि

---

🔷 1. परिचय (Introduction):

HTML में चित्र जोड़ने से वेबपेज आकर्षक, समझने योग्य और सुंदर बनता है।
इसका उपयोग वेबसाइट में फोटो, लोगो, डायरग्राम आदि दिखाने के लिए किया जाता है।
इसके लिए हम <img> टैग का उपयोग करते हैं।

---

🔷 2. परिभाषा (Definition):

<img> टैग एक empty tag होता है यानी इसे बंद करने की ज़रूरत नहीं होती।
इसका उपयोग किसी फोटो को वेबपेज पर दिखाने के लिए किया जाता है।

---

🔷 3. प्रमुख Attributes और उनका कार्य:

Attribute	कार्य
src	इमेज का सोर्स (फाइल का नाम या URL)
alt	इमेज न खुलने पर दिखने वाला टेक्स्ट
width	चित्र की चौड़ाई सेट करता है
height	चित्र की ऊंचाई सेट करता है
align	चित्र को लेफ्ट/राइट/सेंटर में संरेखित करता है
border	चित्र के चारों ओर बॉर्डर बनाता है

---

🔷 4. सिंटैक्स (Syntax):

<img src="image.jpg" alt="यह एक चित्र है" width="300" height="200">

✅ हमेशा src और alt देना चाहिए ताकि SEO और accessibility बेहतर हो।

---

🔷 5. उदाहरण (Example):

<img src="nature.jpg" alt="प्रकृति का चित्र" width="400" height="250" border="2">

आउटपुट:
एक चित्र “nature.jpg” 400×250 साइज में और 2px बॉर्डर के साथ दिखेगा।

---

🔷 6. चित्र का संरेखण (Image Alignment):

पुराना तरीका (Deprecated in HTML5):

<img src="tree.jpg" align="left">
<p>यह टेक्स्ट इमेज के चारों ओर लिपटा हुआ है।</p>

✅ HTML5 में CSS से करें:

<img src="tree.jpg" style="float: left; margin-right: 10px;">

---

🔷 7. वेबसाइट से चित्र जोड़ना (Image from URL):

<img src="https://example.com/image.png" alt="वेब इमेज">

✅ इससे आप ऑनलाइन इमेज को सीधे पेज में जोड़ सकते हैं।

---

🔷 8. वास्तविक उदाहरण (Practical Example):

<h2>मेरा पसंदीदा स्थान</h2>
<img src="hill.jpg" alt="पहाड़ी दृश्य" width="500" height="300" style="border: 3px solid green;">
<p>पहाड़ी का दृश्य शांत और सुंदर था।</p>

---

🔷 9. कहां उपयोग करें (Use Cases):

• वेबसाइट लोगो
• प्रोडक्ट इमेज
• न्यूज़ बैनर
• ब्लॉग डायरग्राम
• गैलरी और विज्ञापन

---

🔷 10. CSS द्वारा इमेज स्टाइलिंग:

<img src="photo.jpg" style="border-radius: 10px; box-shadow: 5px 5px 15px gray;">

✅ आप इमेज को गोल कोना, शैडो, मार्जिन, आदि से और सुंदर बना सकते हैं।

---

🔷 11. सारणी (Summary Table):

Attribute	उपयोग
src	चित्र का स्थान बताता है
alt	इमेज न खुलने पर टेक्स्ट
width / height	चित्र का आकार
align	चित्र का स्थान (पुराना तरीका)
border	चित्र के चारों ओर बॉर्डर
style	CSS से स्टाइलिंग के लिए

---

🔷 12. लाभ (Advantages):

• वेबपेज को सुंदर बनाता है
• कंटेंट को विज़ुअल बनाता है
• SEO में मदद करता है (alt टैग से)
• ब्राउज़र सपोर्ट अच्छा

---

🔷 13. सीमाएँ (Limitations):

• बड़ी इमेज से लोडिंग धीमी हो सकती है
• align अब HTML5 में सपोर्ट नहीं करता
• इमेज को ऑप्टिमाइज़ करना जरूरी है

---

---