Handbook davomida ko'rilgan eng keng tarqalgan 5 ta HTML xatosi (alt, label, semantik elementlar, sarlavha ierarxiyasi, xavfsiz linklar) — har biri diagnostika va test bilan.
Handbook davomida ko'rgan eng keng tarqalgan HTML xatolarini birlashtiruvchi maxsus mashqlar to'plami.
index.htmlHTML<img src="product.jpg">
Your Task: Bu rasmda qanday accessibility muammosi bor?
<details> <summary>Diagnosis & Fix</summary> `alt` atributi yo'q. Yechim: ```html <img src="product.jpg" alt="Mahsulot rasmi tavsifi"> ``` </details>index.htmlHTML<label>Ism</label><input type="text" id="name">
Your Task: Label labelga bosilganda inputga fokus tushmaydi. Nega?
<details> <summary>Diagnosis & Fix</summary> `<label>`da `for` atributi yo'q. Yechim: ```html <label for="name">Ism</label> <input type="text" id="name"> ``` </details>index.htmlHTML<div class="button" onclick="submit()">Yuborish</div>
Your Task: Bu tugma klaviatura orqali ishlatib bo'lmaydi. Nega?
<details> <summary>Diagnosis & Fix</summary> `<div>` — fokus ololmaydi va klaviatura hodisalarini qo'llab-quvvatlamaydi. Yechim — semantik `<button>`: ```html <button onclick="submit()">Yuborish</button> ``` </details>index.htmlHTML<h1>Sarlavha 1</h1><p>Matn</p><h1>Sarlavha 2</h1>
Your Task: Bu struktura nima uchun muammoli?
<details> <summary>Diagnosis & Fix</summary> Bir sahifada bitta `<h1>` tavsiya etiladi. Ikkinchi sarlavha `<h2>` bo'lishi kerak: ```html <h1>Sarlavha 1</h1> <p>Matn</p> <h2>Sarlavha 2</h2> ``` </details>index.htmlHTML<a href="https://external.com" target="_blank">Tashqi sayt</a>
Your Task: Bu link nega to'liq xavfsiz emas?
<details> <summary>Diagnosis & Fix</summary> `rel="noopener noreferrer"` yo'q. Yechim: ```html <a href="https://external.com" target="_blank" rel="noopener noreferrer">Tashqi sayt</a> ``` </details>Task: Yuqoridagi 5 ta bugning barchasini o'z ichiga olgan (qasddan buzilgan) kichik sahifa yarating va ularni birma-bir tuzating.
index.htmlHTML<img src="logo.png" alt="logo.png">
Your Task: Bu alt matni texnik jihatdan mavjud, lekin baribir muammoli. Nega?
Bu bob — handbook davomida ko'rilgan eng keng tarqalgan HTML xatolarini (alt, label bog'lanishi, semantik elementlar, sarlavha ierarxiyasi, xavfsiz linklar) amaliy tarzda mustahkamladi.
altga egalabel bilan to'g'ri bog'langanbutton, a) ishlatiladih1 bilanrel="noopener noreferrer" bilan xavfsizcode.textTEXTRasm ma'nosizmi? → alt="" tekshiringLabel ishlamayaptimi? → for/id juftligini tekshiringTugma klaviaturada ishlamayaptimi? → semantik <button> ishlatingKo'p h1 bormi? → ierarxiyani tekshiringYangi tab xavfsizmi? → rel="noopener noreferrer" qo'shing
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: