Chapter 4 — Rasm va Media Elementlari

Rasm, video va audio — veb-sahifaning vizual va multimediya kontentini tashkil qiladi.

---

4.1 Rasmlar va alt Atributi

Example

index.html
HTMLNusxalash
01<img src="photo.jpg" alt="Tog' manzarasi quyosh botishida" width="800" height="600">
02<img src="icon.png" alt="">  <!-- dekorativ rasm uchun bo'sh alt -->

⚠️ Common Mistake
alt atributini butunlay qoldirib ketish yoki bo'sh joy bilan to'ldirish (masalan alt="image") — ekran o'quvchi foydalanuvchilariga hech qanday foydali ma'lumot bermaydi.

4.2 width/height va Layout Shift

Example

index.html
HTMLNusxalash
01<img src="banner.jpg" alt="Banner" width="1200" height="400">

💡 Key Idea
width va height atributlarini (hatto CSS orqali responsive qilingan bo'lsa ham) belgilash — brauzerga rasm yuklanishidan oldin joy ajratish imkonini beradi, bu "Cumulative Layout Shift" (CLS) muammosining oldini oladi.

4.3 Video va Audio

Example

index.html
HTMLNusxalash
01<video controls width="600" poster="thumbnail.jpg">
02  <source src="video.mp4" type="video/mp4">
03  <source src="video.webm" type="video/webm">
04  Brauzeringiz video tegini qo'llab-quvvatlamaydi.
05</video>
06 
07<audio controls>
08  <source src="audio.mp3" type="audio/mpeg">
09</audio>

4.4 Responsive Images: srcset va picture

Example

index.html
HTMLNusxalash
01<img
02  src="small.jpg"
03  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
04  sizes="(max-width: 600px) 480px, 800px"
05  alt="Mahsulot rasmi"
06>
07 
08<picture>
09  <source media="(min-width: 800px)" srcset="desktop.jpg">
10  <source media="(min-width: 400px)" srcset="tablet.jpg">
11  <img src="mobile.jpg" alt="Responsive rasm">
12</picture>

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Mazmunli alt matniga ega mahsulot rasmini yarating, width/height bilan.

🟡 Exercise 2 — Medium

Task: <video> elementini ikkita format (mp4, webm) bilan, controls va poster rasmi bilan yarating.

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<img src="hero-banner.jpg">

Your Task: Bu rasmda nechta muammo bor va ular nima?

<details> <summary>Solution</summary> Ikkita muammo: (1) `alt` atributi yo'q — accessibility muammosi; (2) `width`/`height` yo'q — layout shift muammosi. To'g'ri versiya: ```html <img src="hero-banner.jpg" alt="Bosh sahifa banneri" width="1200" height="400"> ``` </details>

📌 Chapter Summary

alt — accessibility uchun majburiy. width/height — layout shift'ning oldini oladi. <video>/<audio> — bir nechta format bilan cross-browser moslikni ta'minlaydi. srcset/<picture> — responsive rasmlar uchun zamonaviy vositalar.

🎯 Key Takeaways

• Har bir mazmunli rasm — tavsiflovchi altga ega bo'lishi kerak
• Dekorativ rasmlar uchun alt=""
• width/height — CLS'ning oldini oladi
• srcset/<picture> — responsive, optimallashtirilgan rasmlar uchun

⚡ Quick Cheat Sheet

index.html
HTMLNusxalash
01<img src="x.jpg" alt="Tavsif" width="800" height="600">
02<video controls><source src="v.mp4" type="video/mp4"></video>
03<img srcset="s.jpg 480w, l.jpg 1200w" sizes="100vw" src="s.jpg" alt="...">

---