Sarlavhalar (h1-h6), paragraflar, semantik (strong/em) va vizual (b/i) matn formatlash, blockquote/pre/code/abbr — test va debugging mashqlari bilan.
Matn — veb-sahifaning eng ko'p uchraydigan kontenti. To'g'ri teglarni tanlash — mazmun va accessibility uchun muhim.
index.htmlHTML<h1>Asosiy Sarlavha</h1><h2>Bo'lim Sarlavhasi</h2><h3>Kichik Bo'lim</h3>
⚠️ Common Mistake
Sarlavha darajalarini faqat vizual o'lcham uchun (masalan <h1> juda kichik ko'rinsa, <h3> bilan almashtirish) tanlash — bu semantik ierarxiyani buzadi. O'lcham CSS orqali, daraja esa mazmuniy ierarxiya orqali belgilanishi kerak.
index.htmlHTML<p>Bu oddiy paragraf.</p><strong>Muhim matn (semantik ahamiyat)</strong><em>Urg'u berilgan matn (semantik urg'u)</em><b>Qalin matn (faqat vizual)</b><i>Kursiv matn (faqat vizual)</i>
index.htmlHTML<blockquote cite="https://example.com">Iqtibos matni</blockquote><code>const x = 5;</code><pre>Formatlangan matnbo'shliqlar bilan</pre><abbr title="HyperText Markup Language">HTML</abbr>
Task: Bitta <h1>, ikkita <h2> va har biriga tegishli paragraflardan iborat maqola strukturasini yarating.
Task: Kod namunasini ko'rsatuvchi, formatlanishi saqlangan bo'lim yarating.
index.htmlHTML<h1>Sarlavha</h1><h3>Kichik matn uchun</h3><p>Bu matn juda katta ko'rinishi kerak edi, shuning uchun h3 ishlatilgan.</p>
Your Task: Bu kodda qanday semantik xato bor?
<details> <summary>Solution</summary> `<h3>` — vizual o'lcham uchun emas, mazmuniy ierarxiya uchun ishlatilishi kerak. Agar matn katta ko'rinishi kerak bo'lsa, oddiy `<p>` yoki `<span>`ga CSS orqali `font-size` berish kerak, sarlavha darajasini "hiyla" sifatida ishlatmaslik kerak. </details>Sarlavhalar (h1-h6) — mazmuniy ierarxiyani, vizual o'lcham emas. <strong>/<em> — semantik ahamiyat/urg'u, <b>/<i> — faqat vizual. <blockquote>, <pre>, <code> — maxsus matn turlarini belgilaydi.
strong, em) semantik ma'no beradi<pre> — formatlashni saqlaydiindex.htmlHTML<h1>Bosh sarlavha</h1><strong>Muhim</strong> <em>Urg'u</em><blockquote>Iqtibos</blockquote><pre><code>kod</code></pre>
Mavzu bo‘yicha tushunchalaringizni interaktiv test orqali sinovdan o‘tkazing va natijalarni bilib oling.
Darslik ichidagi interaktiv muharrirda berilgan barcha amaliy topshiriqlarni bajaring va avto-tekshiruvdan o‘ting.
Test Sinovi
Hali topshirilmagan (kamida 75% kerak)
Amaliy Laboratoriya
Laboratoriya muharririda testlarni topshiring
Dars sifati va mazmunini yaxshilash uchun o‘z haqqoniy bahoingizni qoldiring.
Mavzuni to‘liq o‘zlashtirish uchun test sinovi, amaliy kodlash va bog‘liq darslar
O‘z bilimingizni interaktiv test savollari orqali tekshiring va darhol xatolarni tahlil qiling.
Nazariyani real kod yozish bilan mustahkamlang, avtomatik testlardan o‘ting va XP to‘plang.
Kurs bo‘yicha keyingi va bog‘liq mavzular: