Chapter 11 — Iframe va Tashqi Kontentni Joylashtirish

<iframe> — bir sahifa ichiga boshqa, mustaqil sahifani joylashtirish imkonini beradi.

---

11.1 Asosiy iframe

Example

index.html
HTMLNusxalash
01<iframe
02  src="https://www.youtube.com/embed/VIDEO_ID"
03  title="Video sarlavhasi"
04  width="560"
05  height="315"
06  allowfullscreen
07></iframe>

⚠️ Common Mistake
<iframe>ga title atributini qo'shmaslik — ekran o'quvchi foydalanuvchilariga iframe nima ekanini tushunish qiyinlashadi.

11.2 iframe Xavfsizligi: sandbox va allow

Example

index.html
HTMLNusxalash
01<iframe
02  src="https://untrusted-site.com"
03  sandbox="allow-scripts"
04  title="Tashqi kontent"
05></iframe>

📝 Practice Exercises

🟡 Exercise 1 — Medium

Task: YouTube videosini title, to'g'ri o'lcham va allowfullscreen bilan sahifangizga joylashtiring.

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<iframe src="https://maps.google.com/..."></iframe>

Your Task: Bu iframe'da qanday accessibility muammosi bor?

<details> <summary>Solution</summary> `title` atributi yo'q. Yechim: ```html <iframe src="https://maps.google.com/..." title="Ofisimiz joylashuvi"></iframe> ``` </details>

📌 Chapter Summary

<iframe> — tashqi kontentni sahifaga joylashtiradi. title — accessibility uchun majburiy. sandbox — ishonchsiz kontentdan xavfsizlikni ta'minlaydi.

🎯 Key Takeaways

• Har bir iframe — tavsiflovchi titlega ega bo'lishi kerak
• sandbox — ishonchsiz tashqi kontent uchun xavfsizlik qatlami
• allowfullscreen — video/media iframe'lar uchun foydali

⚡ Quick Cheat Sheet

index.html
HTMLNusxalash
01<iframe src="..." title="Tavsif" width="560" height="315" allowfullscreen></iframe>
02<iframe src="..." sandbox="allow-scripts" title="..."></iframe>

---