HTML5 — to'liq qo'llanma

DarslarWeb dasturlash

HTML5 — to'liq qo'llanma

HTML5'ning barcha asosiy yangi teglari: semantik tuzilma, media, forma va grafikaga oid elementlar.

50 daqiqa
CSS Advanced — Dars 14

HTML5 — to'liq qo'llanma

Semantik teglar, audio/video, yangi input turlari, figure, details — hamma kuchli narsalar bir joyda.

<header><main><article><video><details>

Dars rejasi

8 ta mavzu
  1. 01Semantik teglar — sahifa skeleti
  2. 02<article>, <section>, <aside>
  3. 03<figure> va <figcaption>
  4. 04<audio> va <video>
  5. 05Yangi <input> turlari
  6. 06<details> va <summary>
  7. 07<progress>, <meter>, <mark>
  8. 08To'liq semantik sahifa

1. Semantik teglar — sahifa skeleti

HTML5 sahifani aniq qismlarga bo'ladi. Har bir qism o'z nomiga ega.

<header>

Sahifa yoki bo'limning yuqori qismi: logotip, asosiy sarlavha.

<nav>

Navigatsiya — menyular va havolalar to'plami.

<main>

Sahifaning asosiy, noyob mazmuni. Faqat bitta <main> bo'ladi.

<footer>

Pastki qism: mualliflik, aloqa, havolalar.

1<body>
2  <header>
3    <h1>Mening saytim</h1>
4    <nav>
5      <a href="/">Bosh</a>
6      <a href="/haqida">Haqida</a>
7      <a href="/aloqa">Aloqa</a>
8    </nav>
9  </header>
10

11  <main>
12    <!-- sahifaning asosiy qismi -->
13  </main>
14

15  <footer>
16    <p>© 2025 Mening saytim</p>
17  </footer>
18</body>

2. <article>, <section>, <aside>

  • <article> — mustaqil, alohida olib chiqish mumkin bo'lgan kontent. Masalan: blog posti, xabar, izoh.
  • <section> — tematik bo'lim. Masalan: «Xizmatlar», «Jamoa», «FAQ».
  • <aside> — yon kontent: reklama, aloqador havolalar, sidebar.
1<main>
2  <article>
3    <h2>Dasturlashni qanday boshlash kerak?</h2>
4    <p>Bugun biz frontend'dan boshlash haqida gaplashamiz...</p>
5  </article>
6

7  <aside>
8    <h3>O'xshash maqolalar</h3>
9    <ul>
10      <li><a href="#">CSS asoslari</a></li>
11      <li><a href="#">JavaScript kirish</a></li>
12    </ul>
13  </aside>
14</main>

3. <figure> va <figcaption>

figure — rasm, diagramma yoki kod bloki. figcaption — uning ostidagi izoh/nomi. Birga ishlaydi.

figure namunasi
Natijajonli

4. <audio> va <video>

HTML5'gacha audio va video qo'yish uchun Flash kerak edi. Endi esa <audio> va <video> teglari o'zi hammasini qiladi.

1<video src="film.mp4" controls width="600" poster="rasm.jpg">
2  Sizning brauzeringiz video'ni qo'llab-quvvatlamaydi.
3</video>
4

5<audio src="qoshiq.mp3" controls></audio>
6

7<!-- Bir nechta formatdan tanlash -->
8<video controls width="600">
9  <source src="film.mp4" type="video/mp4">
10  <source src="film.webm" type="video/webm">
11</video>

5. Yangi <input> turlari

HTML5 <input> uchun ko'plab yangi type'lar olib keldi — brauzer o'zi validatsiya qiladi va qulay klaviatura chiqaradi.

1<input type="email"    placeholder="siz@mail.com">
2<input type="tel"      placeholder="+998 90 123 45 67">
3<input type="url"      placeholder="https://...">
4<input type="number"   min="0" max="100" step="5">
5<input type="range"    min="0" max="100">
6<input type="date">
7<input type="time">
8<input type="color">
9<input type="search"   placeholder="Qidiruv...">
10<input type="password">
11<input type="file"     accept="image/*">
Yangi input'lar
Natijajonli

6. <details> va <summary>

JavaScript siz ochilib-yopiladigan blok. FAQ va spoyler uchun ideal.

1<details>
2  <summary>Kurs qancha turadi?</summary>
3  <p>Kurs narxi oyiga 500 000 so'm.</p>
4</details>
FAQ bo'limi
Natijajonli

7. <progress>, <meter>, <mark>

  • <progress> — qandaydir ish qancha bajarilganini ko'rsatadi (yuklash, ro'yxat).
  • <meter> — ma'lum diapazondagi qiymatni ko'rsatadi (masalan, disk band).
  • <mark> — matnning ahamiyatli qismini «marker» bilan belgilaydi.
progress, meter, mark
Natijajonli

8. To'liq semantik sahifa

Endi hammasini birlashtirib, haqiqiy blog sahifasi skeletini ko'raylik.

index.html
1<!DOCTYPE html>
2<html lang="uz">
3<head>
4  <meta charset="UTF-8">
5  <title>Mening blogim</title>
6</head>
7<body>
8  <header>
9    <h1>Ali.dev</h1>
10    <nav>
11      <a href="/">Bosh</a>
12      <a href="/blog">Blog</a>
13      <a href="/haqida">Men haqimda</a>
14    </nav>
15  </header>
16

17  <main>
18    <article>
19      <header>
20        <h2>Dasturchilikni qanday boshladim</h2>
21        <p>15-yanvar, 2025</p>
22      </header>
23

24      <section>
25        <h3>Birinchi qadam</h3>
26        <p>Men HTML bilan tanishib boshlagan edim...</p>
27      </section>
28

29      <section>
30        <h3>Birinchi loyiha</h3>
31        <figure>
32          <img src="loyiha.png" alt="Birinchi sayt">
33          <figcaption>Mening birinchi HTML sahifam.</figcaption>
34        </figure>
35      </section>
36

37      <footer>
38        <p>Muallif: Ali Valiyev</p>
39      </footer>
40    </article>
41

42    <aside>
43      <h3>Aloqador postlar</h3>
44      <ul>
45        <li><a href="#">CSS'ni sevib qolishim</a></li>
46      </ul>
47    </aside>
48  </main>
49

50  <footer>
51    <p>© 2025 Ali.dev — Barcha huquqlar himoyalangan</p>
52  </footer>
53</body>
54</html>

Kichik test

0 / 5

1.Sahifada nechta <main> teg bo'lishi kerak?

2.Blog posti uchun qaysi teg mos?

3.JavaScript'siz ochilib-yopiladigan blok qaysi?

4.Video'ning nazorat tugmalarini chiqarish uchun qaysi atribut?

5.Rasmga tushuntirish matni berish uchun qaysi teg juftligi?

Mustaqil ish

0 / 7