AXV

HTML5 multimedia va interaktiv elementlar

video, audio, figure, details, summary, progress, meter

8-sinfWeb Full-stack3-hafta · 8-dars

Bugungi dars rejasi

01. Video va Audio

Plaginlarsiz multimedia, controls, autoplay va poster atributlari.

02. Figure va Figcaption

Rasmlar va chizmalarni ilmiy izoh bilan semantik o'rash.

03. Interaktiv elementlar

Akkordeon (details), progress va meter indikatorlari.

01

Vebda video va audio inqilobi

Flash davrining tugashi va HTML5 ning plaginlarsiz multimedia standarti

HTML5 <video> pleeri anatomiyasi

Video maydoni (poster="muqova.jpg") 01:45 / 05:20

<video> ning asosiy atributlari

controls

Play, pause, vaqt chizig'i va to'liq ekran boshqaruv tugmalarini ko'rsatadi.

poster

Video ishga tushishidan oldin ekranda turadigan muqova rasmi manzili.

muted

Videoni ovozsiz qiladi. Autoplay ishlashi uchun zamonaviy brauzerlarda majburiy.

loop

Video tugashi bilan uni to'xtatmasdan avtomatik boshidan qayta aylantiradi.

Adobe Flash vs Zamonaviy HTML5 Video

Adobe Flash (Tarixda qoldi)

  • Qo'shimcha og'ir plagin o'rnatish shart edi
  • Kompyuterni va batareyani qizdirib yuborardi
  • Xavfsizlik teshiklari juda ko'p bo'lgan
Smartfonlar uni butunlay taqiqlagan

HTML5 Video (Standart)

  • Plaginlarsiz, to'g'ridan-to'g'ri brauzerda ishlaydi
  • Tezkor yuklanadi, energiyani tejaydi
  • Barcha smartfon va planshetlarda ishlaydi
Butun dunyo qabul qilgan yagona standart
02

Rasm va illyustratsiyalar: <figure>

Rasmni ilmiy izoh bilan bitta semantik blokga birlashtirish

<figure> va <figcaption> semantikasi

<figure> qobig'i <img src="protsessor.jpg" alt="..."> Rasm yoki grafik tasvir <figcaption>1-rasm. Ko'p yadroli zamonaviy protsessor.</figcaption>

Nega oddiy <p> emas, <figcaption>?

Bog'liqlik yo'q

Brauzer uchun <img> va uning tagidagi <p>1-rasm...</p> bir-biriga aloqador bo'lmagan ikkita alohida elementdir.

Joylashuv buzilishi

CSS stillashda rasm o'ngga surilsa, matn pastda qolib ketishi mumkin.

Yaxlit semantik blok

<figure> ichidagi <figcaption> aynan shu rasmning izohi ekanini brauzer ham, qidiruv botlari ham aniq biladi.

Mukammal dizayn

Rasm bilan birga izoh ham bitta butun blok sifatida birga ko'chadi va stillanadi.

03

Sof HTML da interaktivlik: <details>

JavaScriptsiz ochilib-yopiluvchi savol-javob (FAQ) akkordeoni

<details> va <summary> mexanizmi

<summary>Kurs qachon boshlanadi?</summary> Holat 1: Yopiq (Matn yashiringan) <summary>Kurs qachon boshlanadi?</summary> <p>Kurs 2-oktyabrdan boshlanadi va 12 hafta davom etadi.</p>

FAQ akkordeonini yasash bosqichlari

1-qadam: <details> konteyneri

<details> ... </details>

Interaktiv ochiluvchi blokning asosiy chegarasi belgilanadi.

2-qadam: Sarlavha (<summary>)

<summary>Darsda nima o'rganiladi?</summary>

Doim ko'rinib turadigan, bosiluvchi sarlavha qismi.

3-qadam: Yashirin matn (<p>)

<p>HTML5, CSS3 va JavaScript asoslari...</p>
Foydalanuvchi bosganda ochiladigan asosiy ma'lumot!
04

Indikatorlar: <progress> va <meter>

Jarayon foizi va o'lchov shkalasini vizual ko'rsatish

<progress> va <meter> farqi

<progress> — Jarayon O'zgaruvchan harakat (Yuklash, kurs foizi) 70% bajarildi <meter> — O'lchov shkalasi Diapazondagi statik qiymat (Harorat, xotira) 85 GB / 100 GB

Matn ichidagi nozik semantika

<mark> tegi

Bosganda qoidani ko'ring

Qoida

Matn ichidagi kerakli so'zni sariq fon bilan ajratadi. Qidiruv natijalarida foydalanuvchi qidirgan so'zni ko'rsatishda ideal.

<time> tegi

Bosganda qoidani ko'ring

Qoida

Sanani datetime="2026-10-04" atributi bilan ko'rsatadi. Qidiruv botlari sahifa qachon yozilganini darhol tushunadi.

Multimedia global raqamlarda

0
Dunyo internet trafigining video ulushi
0
HTML5 videoda kerak bo'ladigan tashqi plaginlar
0
Barcha smartfonlarda qo'llab-quvvatlanishi

Multimedia va FAQ kodi

<video controls width="480" poster="cover.jpg">
  <source src="dars.mp4" type="video/mp4">
  <source src="dars.webm" type="video/webm">
</video>

<figure>
  <img src="chip.jpg" alt="Protsessor" width="300">
  <figcaption>1-rasm. Zamonaviy chip</figcaption>
</figure>

<details>
  <summary>Savol: Kurs qancha davom etadi?</summary>
  <p>Javob: Jami 12 hafta davomida o'tiladi.</p>
</details>

O'zingizni sinab ko'ring

Zamonaviy brauzerlarda sahifa ochilganda <video> avtomatik o'ynashi (autoplay) uchun qaysi atribut majburiy qo'shilishi kerak?

To'g'ri! Foydalanuvchilarni to'satdan shovqindan asrash uchun barcha brauzerlar ovozli avto-ijroni bloklaydi. Shuning uchun autoplay doimo muted bilan birga qo'yiladi.
Amaliy topshiriq · 20 daqiqa

Multimedia va FAQ sahifasini tuzing

  1. Veb-sahifaga controls va poster bilan video joylang.
  2. Bitta audio pleer qo'shing.
  3. Rasmni <figure> va <figcaption> teglari bilan izohlang.
  4. Mavzu bo'yicha 2 ta savoldan iborat <details> akkordeoni yasang.
  5. Kurs progressini ko'rsatuvchi <progress> indikatorini joylashtiring.

Bugungi dars xulosasi

Biz o'rgandik:

  • <video> va <audio> integratsiyasi
  • <figure> va <figcaption> semantikasi
  • <details> orqali sof HTML akkordeon
  • <progress> va <meter> indikatorlari

Keyingi darsda:

9-dars: HTML5 global atributlari (data-*, hidden, tabindex, contenteditable) va zamonaviy forma imkoniyatlari. I bob yakuni.