🧱 Days 1–5 – HTML की नींव · दिन 04

दिन 4: Images, Audio, Video और Embeds

⏱ 75 min📶 Beginner🎯 100% self-study

दिन 4 / 15

✅ आज आप सीखेंगे

src, alt, width और height के साथ <img>
Image formats: JPG, PNG, WebP, SVG
figure + figcaption और image links
Responsive images: srcset, sizes, picture, lazy loading
audio, video और iframe embeds (YouTube, Google Maps)

🏢 असली दुनिया में

लोग मिठाई आँखों से ख़रीदते हैं। Menu को ऐसी photos चाहिए जो 4G phone पर जल्दी load हों, दुकान का छोटा video, मज़े के लिए दुकान की घंटी की आवाज़ और Google Map ताकि customers Johari Bazaar ढूँढ सकें।

Image tag

HTML

<img src="images/kaju-katli-400.webp" alt="Three pieces of kaju katli, ₹900 per kg" width="400" height="300">

▶ Result

Attribute	क्यों ज़रूरी
src	Image file का path
alt	Blind users, Google Images और image load न होने पर text
width / height	जगह पहले से रखता है ताकि load होते समय page न उछले
loading="lazy"	नीचे वाली images ज़रूरत पर ही load – तेज़ pages
decoding="async"	Browser images को बिना रुकावट decode करता है

ख़राब alt text

alt="image"
alt="IMG_2041.jpg"
alt="sweet sweet sweet best sweet shop"
alt ही नहीं

अच्छा alt text

alt="चाँदी की plate पर kaju katli के टुकड़े"
सिर्फ़ सजावटी images के लिए alt=""
संदर्भ में जो ज़रूरी है वह बताएँ
~125 characters से कम रखें

कौन सा image format?

📷

JPGPhotos। छोटी files, transparency नहीं।

🖼️

PNGTransparency वाले logos और screenshots। बड़ी files।

⚡

WebP / AVIFModern formats: JPG से 25–50% छोटे। आज का सबसे अच्छा default।

✏️

SVGVector icons और logos – हर size पर साफ़ (Day 12)।

Content के हिसाब से format चुनें

figure, captions और image links

HTML

<figure>
  <img src="images/rasmalai-400.webp" alt="Rasmalai in saffron milk" width="400" height="300">
  <figcaption>Rasmalai – soft paneer discs in saffron milk, ₹40 each.</figcaption>
</figure>
<a href="menu.html"><img src="images/logo.png" alt="Sharma Sweets home" width="80" height="80"></a>

▶ Result

Responsive और तेज़ images

HTML

<img src="images/ghewar-400.webp"
     srcset="images/ghewar-400.webp 400w, images/ghewar.webp 800w"
     sizes="(max-width: 600px) 100vw, 400px"
     alt="Ghewar topped with malai" width="400" height="300"
     loading="lazy" decoding="async">

▶ The browser picks the right file for the screen

🧠 srcset कैसे काम करता है

आप एक ही picture कई widths (400w, 800w) में देते हैं और browser को बताते हैं वह कितनी चौड़ी दिखेगी (sizes)। Phone छोटी file download करता है; sharp screen वाला laptop बड़ी। वही HTML, कम data।

HTML

<picture>
  <source srcset="images/ladoo.webp" type="image/webp">
  <img src="images/ladoo-400.webp" alt="Besan ladoo" width="400" height="300">
</picture>

▶ picture: offer modern formats with a fallback

Audio और video

HTML

<audio controls src="images/bell.mp3">Your browser does not support audio.</audio>
<video controls width="480" poster="images/shop-poster.jpg" preload="metadata" playsinline>
  <source src="images/shop.mp4" type="video/mp4">
  Sorry, your browser cannot play this video. <a href="images/shop.mp4">Download it</a>.
</video>

▶ Press play

Attribute	असर
controls	Play/pause/volume दिखाता है
poster	Video शुरू होने से पहले दिखने वाली image
autoplay muted	Autoplay सिर्फ़ muted होने पर (browser नियम)
loop	बार-बार चलता है
preload="metadata"	सिर्फ़ duration और size load – data बचाता है
playsinline	iPhone पर full screen की जगह page में चलता है

YouTube और Google Maps embed करना

HTML – embed codes (copy from YouTube “Share → Embed” or Maps “Share → Embed a map”)

<!-- YouTube -->
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
        title="How we make ghewar" loading="lazy"
        allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!-- Google Maps -->
<iframe src="https://www.google.com/maps?q=Johari+Bazaar+Jaipur&output=embed"
        width="600" height="300" style="border:0" loading="lazy"
        title="Map to Sharma Sweets, Johari Bazaar" referrerpolicy="no-referrer-when-downgrade"></iframe>

💡 Speed tip

Embeds बहुत सारा extra code load करते हैं। loading="lazy" जोड़ें, privacy के लिए youtube-nocookie.com लें, और एक page पर पाँच videos कभी न डालें।

असली example: menu gallery

HTML

<h2>Our bestsellers</h2>
<figure>
  <img src="images/kaju-katli-400.webp" alt="Kaju katli" width="200" height="150" loading="lazy">
  <figcaption><strong>Kaju katli</strong> – ₹900/kg</figcaption>
</figure>
<figure>
  <img src="images/ghewar-400.webp" alt="Ghewar with malai" width="200" height="150" loading="lazy">
  <figcaption><strong>Ghewar</strong> – ₹650/kg (Teej special)</figcaption>
</figure>
<figure>
  <img src="images/ladoo-400.webp" alt="Besan ladoo" width="200" height="150" loading="lazy">
  <figcaption><strong>Besan ladoo</strong> – ₹500/kg</figcaption>
</figure>

▶ Gallery (CSS will place them side by side)

🏅 आज के Job Skills

✔ अर्थपूर्ण alt text के साथ images जोड़ना✔ Formats चुनना और responsive images देना✔ Captions, audio और video जोड़ना✔ Maps और videos ज़िम्मेदारी से embed करना

Practice tasks

🏋️ Practice – ख़ुद करें

Task 1: Rasmalai photo, caption और menu.html#milk पर जाने वाले image link के साथ figure बनाएँ।

Solution देखें

HTML

<figure>
  <a href="menu.html#milk"><img src="/assets/img/tutorials/html/rasmalai-400.webp" alt="Rasmalai – see milk sweets" width="300" height="225"></a>
  <figcaption>Rasmalai – tap to see all milk sweets</figcaption>
</figure>

▶ Result

Task 2: इनके लिए alt text लिखें: (1) दुकान के सामने की photo, (2) सजावटी divider line, (3) Diwali sales का chart।

Task 3: दुकान का video ऐसे embed करें कि background banner की तरह चुपचाप loop में अपने-आप चले।

Solution देखें

HTML

<video autoplay muted loop playsinline width="480" poster="/assets/img/tutorials/html/shop-poster.jpg">
  <source src="/assets/img/tutorials/html/shop.mp4" type="video/mp4">
</video>

▶ Result

Quick quiz

🧠 Quick Quiz – ख़ुद को जाँचें

1. Images को width और height क्यों दें?

बेहतर Core Web Vitals (CLS)।

2. सिर्फ़ सजावटी image का सबसे अच्छा alt?

ख़ाली alt screen readers को skip करने को कहता है।

3. Photos के लिए आमतौर पर सबसे छोटा format?

Modern compression।

4. Browsers में autoplay video कब चलता है?

Browser policy।

5. srcset browser को क्या करने देता है?

Responsive images।

Interview corner

💼 Interview Corner

Performance के लिए images कैसे optimise करते हैं?

Modern formats (WebP/AVIF), सही dimensions, responsive delivery के लिए srcset/sizes, नीचे वाली images lazy-load, layout shift से बचने के लिए width/height, compress, और caching के साथ CDN से serve।

alt attribute का उद्देश्य क्या है?

यह screen-reader users को text विकल्प देता है, image load न होने पर दिखता है और search engines को image समझने में मदद करता है।

सारांश

img को src, alt, width और height चाहिए; नीचे की images lazy-load।
Photos के लिए WebP, transparency के लिए PNG, icons के लिए SVG।
Captions के लिए figure/figcaption; responsive images के लिए srcset/sizes/picture।
controls और poster के साथ audio/video; YouTube और Maps के लिए iframes।

➡️ आगे

Day 5: lists और tables – price list और bulk-order rate table बनाएँ।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

क्या Google की images इस्तेमाल कर सकते हैं?

सिर्फ़ अनुमति या licence होने पर (जैसे Unsplash, Pexels free licences)। Business के लिए अपनी photos सबसे अच्छी।

मेरी image क्यों नहीं दिख रही?

Path और spelling जाँचें (servers पर case-sensitive), file extension और कि file upload हुई या नहीं। 404 देखने के लिए DevTools → Network खोलें।

← HTML (15 Days)

दिन 4: Images, Audio, Video और Embeds

✅ आज आप सीखेंगे

🏢 असली दुनिया में

Image tag

ख़राब alt text

अच्छा alt text

कौन सा image format?

figure, captions और image links

Responsive और तेज़ images

Audio और video

YouTube और Google Maps embed करना

असली example: menu gallery

🏅 आज के Job Skills

Practice tasks

🏋️ Practice – ख़ुद करें

Quick quiz

🧠 Quick Quiz – ख़ुद को जाँचें

Interview corner

💼 Interview Corner

सारांश

अक्सर पूछे जाने वाले प्रश्न (FAQ)

यह lesson कैसा लगा?

पढ़ने वालों के reviews

Video से सीखें – आसान Hindi में