Dasturlash kitobi/1-QISM — HTML CSS20 daqiqa

1.1-bob: HTML — tuzilma, semantik teglar, formalar, jadval va media

1-QISM — HTML, CSS va zamonaviy stillar · 1-mavzu

1. Kirish va motivatsiya

0-QISMda butun nazariy poydevorni qo'ydik. Endi — birinchi marta haqiqiy kod yozamiz. Va boshlanish nuqtasi mantiqan to'g'ri: HTML.

Har bir veb-sahifa — Google bo'ladimi, Instagram bo'ladimi, siz yasaydigan loyiha bo'ladimi — HTMLdan boshlanadi. HTML — bu sahifaning skeleti. 0.5-bobda ko'rgan DOM daraxti — aynan sizning yozgan HTML'ingizdan quriladi. CSS 1.2-bob unga "kiyim" kiydiradi, JavaScript (2-QISM) "jon" kiritadi — lekin avval skelet bo'lishi kerak.

O'xshatish: veb-sahifani uy deb tasavvur qiling. HTML — bu g'ishtlar va devorlar (struktura: bu yerda sarlavha, bu yerda matn, bu yerda rasm). CSS — bo'yoq, oboy, mebel (ko'rinish). JavaScript — elektr, suv, eshik (harakat va interaktivlik). Devorlarsiz uy bo'lmaydi — shuning uchun HTML'dan boshlaymiz.

Nega HTML'ni jiddiy o'rganish kerak (ko'pchilik uni "oson" deb mensimaydi)?

Semantik HTML — bu accessibility (nogironlar uchun qulaylik), SEO (Google'da yuqori chiqish) va kod sifatining asosi. "div soup" yozadigan dasturchi bilan semantik yozadigani — yer bilan osmoncha farq.
Formalar — har bir login, ro'yxatdan o'tish, qidiruv, buyurtma — forma. Buni chuqur bilmasangiz, backend (5-QISM) bilan ham qiynalasiz.
React JSX (11.2) — aslida HTML'ning o'zi. HTML'ni yaxshi bilsangiz, React osonlashadi.

Bu bob — butun frontend (1, 11, 13-QISMlar) ning birinchi g'ishti.

2. Nazariya — chuqur tushuntirish

2.1. HTML nima? (va nima EMAS)

HTML (HyperText Markup Language) — "gipermatnli belgilash tili". Diqqat: bu dasturlash tili EMAS, balki belgilash (markup) tili. Farqi muhim:

Dasturlash tili (JS) — mantiq bor: shart, tsikl, hisob.
Belgilash tili (HTML) — mantiq yo'q; u shunchaki kontentni belgilaydi: "bu — sarlavha", "bu — paragraf", "bu — rasm".

O'xshatish: kitob muharririni tasavvur qiling. U matnga belgi qo'yadi: "bu qism — bob nomi (katta shrift)", "bu — oddiy matn", "buni qalin qil". Muharrir hisob-kitob qilmaydi — faqat belgilaydi. HTML ham aynan shunday: brauzerga kontentning ma'nosini aytadi.

2.2. Teg, element va atribut

HTML'ning uchta asosiy tushunchasi:

text

   <a href="https://example.com">Bosing</a>
   │└┬┘ └──────┬──────────────┘ └─┬──┘└┬─┘
   │ teg       atribut             matn  yopuvchi teg
   │ nomi      (nom="qiymat")            (</a>)
   └─ ochuvchi teg
   └──────────── butun bu — ELEMENT ──────────┘

Teg (tag) — burchakli qavslar ichidagi belgi: <p> (ochuvchi), </p> (yopuvchi).
Element — ochuvchi teg + kontent + yopuvchi teg — butun birlik.
Atribut (attribute) — element haqida qo'shimcha ma'lumot: href="...", class="...", id="...". Ochuvchi tegda, nom="qiymat" ko'rinishida.

Ba'zi elementlar bo'sh (void) — kontenti yo'q, yopuvchi tegi yo'q: <img>, <br>, <input>, <hr>.

2.3. HTML hujjatining tuzilishi

Har bir HTML fayl bir xil skeletdan boshlanadi:

html

<!DOCTYPE html>              <!-- brauzerga: bu zamonaviy HTML5 -->
<html lang="uz">            <!-- ildiz element; til = o'zbek -->
  <head>                    <!-- META ma'lumot (ko'rinmaydi) -->
    <meta charset="UTF-8">  <!-- belgilar kodlashi (0.1: UTF-8) -->
    <title>Sahifa nomi</title>
  </head>
  <body>                    <!-- KO'RINADIGAN kontent -->
    <h1>Salom</h1>
  </body>
</html>

Ikki asosiy qism:

<head> — sahifa haqida ma'lumot (metadata): nom, til, belgilar kodlashi, CSS/JS ulanishi, SEO teglari. Foydalanuvchi buni ekranda ko'rmaydi.
<body> — sahifaning ko'rinadigan mazmuni: matn, rasm, tugmalar.

Bu daraxt — to'g'ridan-to'g'ri 0.5-bobdagi DOM ga aylanadi.

2.4. Block va inline elementlar

Elementlar ekranda ikki xil "oqadi":

Block (blokli) — butun qatorni egallaydi, yangi qatordan boshlanadi. Masalan: <div>, <p>, <h1>, <section>, <ul>.
Inline (qatorli) — faqat o'z kontenti qadar joy oladi, qator ichida qoladi. Masalan: <span>, <a>, <strong>, <img>.

text

  [BLOCK div..................]    butun qator
  [BLOCK p....................]    yangi qatordan
  matn ichida [inline a] va [inline strong] davom etadi

(Bu xulq-atvorni CSS display bilan o'zgartirish mumkin — 1.2-bob.)

2.5. Semantik HTML — eng muhim tushuncha

Semantik HTML — bu elementni uning ko'rinishi uchun emas, ma'nosi uchun tanlash. Ya'ni <div> (ma'nosiz "quti") o'rniga, kontent rolini aniq aytadigan teglarni ishlatish.

Asosiy semantik struktura teglari (MDN reference):

Teg	Ma'nosi
`<header>`	sahifa/bo'lim boshi (logo, sarlavha, navigatsiya)
`<nav>`	navigatsiya havolalari (menyu)
`<main>`	sahifaning asosiy kontenti — sahifada bitta bo'ladi
`<article>`	mustaqil, o'zicha to'liq kontent (blog post, yangilik, izoh)
`<section>`	mavzuviy guruh (odatda sarlavha bilan)
`<aside>`	yon kontent (reklama, "o'xshash maqolalar")
`<footer>`	sahifa/bo'lim oxiri (mualliflik, havolalar)

Nega semantik muhim (uchta sabab — MDN):

Accessibility (a11y): ekran o'quvchilar (ko'zi ojizlar uchun dastur) <nav>ni "navigatsiya" deb o'qiydi, <div>ni esa hech narsa deb. Semantik teglar saytni hammaga ochiq qiladi.
SEO: Google <article>, <h1> larni tushunadi va saytni to'g'ri indekslaydi qidiruvda yuqori.
Maintainability: <header> ni o'qigan dasturchi darrov tushunadi; <div class="top"> — taxmin qilishi kerak.

text

   "DIV SOUP"               SEMANTIK
  <div class="header">      <header>
  <div class="nav">         <nav>
  <div class="main">        <main>
  <div class="article">     <article>
  <div class="footer">      <footer>

2.6. Formalar — foydalanuvchidan ma'lumot olish

Forma — veb-ning eng muhim interaktiv qismi. Har login, qidiruv, buyurtma — forma. Asosiy elementlar:

<form> — barcha kiritish maydonlarini o'rab turadi. action (qayerga yuboriladi) va method (GET/POST — 0.4-bob!) atributlari.
<input> — kiritish maydoni. type atributi turini belgilaydi (eng muhim):

`type`	Maqsad
`text`	oddiy matn
`email`	email (avtomatik tekshiruv)
`password`	yashirin parol
`number`	son
`checkbox`	belgilash katakchasi
`radio`	bittasini tanlash
`date`	sana tanlash
`file`	fayl yuklash (5.11)
`submit`	yuborish tugmasi

<label> — maydon yorlig'i. Juda muhim: for atributi input'ning idsiga bog'lanadi (accessibility uchun).
<select> + <option> — ochiladigan ro'yxat.
<textarea> — ko'p qatorli matn.
<button> — tugma.

Validatsiya atributlari (brauzer avtomatik tekshiradi): required, minlength, maxlength, min, max, pattern.

2.7. Jadval (table) — tabular ma'lumot

Jadval faqat haqiqiy jadval ma'lumoti uchun (narxlar, statistika) — sahifa layouti uchun emas (bu eski, yomon amaliyot). Tuzilishi:

text

  <table>
    <thead>   sarlavha qismi
      <tr>    qator (table row)
        <th>  sarlavha katagi (table header)
    <tbody>   asosiy ma'lumot
      <tr>
        <td>  oddiy katak (table data)

2.8. Media — rasm, video, audio

<img> — rasm. src (manba), alt (rasm ko'rinmaganda yoki ekran o'quvchi uchun matn — majburiy!), srcset (turli ekranlar uchun).
<video> / <audio> — video/audio (controls, autoplay, loop).
<picture> — turli holatlar uchun turli rasm (responsive).

2.9. Matn semantikasi — inline (qatorli) teglar (to'liq ro'yxat)

Matn ichida ma'no beruvchi teglar. Ko'pchilik <b>/<i> ni ishlatadi, lekin to'g'ri yondashuv — ma'noga mos tegni tanlash (ekran o'quvchi va qidiruv tizimi shuni o'qiydi):

Teg	Ma'nosi	Misol
`<a>`	havola (link)	`<a href="/">Bosh</a>`
`<strong>`	muhim (jiddiy ahamiyat)	`<strong>Diqqat!</strong>`
`<em>`	urg'u (ohang o'zgarishi)	`<em>haqiqatan</em>`
`<b>`	vizual qalin (ma'nosiz)	`<b>kalit so'z</b>`
`<i>`	vizual kursiv (termin, chet so'z)	`<i>de facto</i>`
`<u>`	tagi chizilgan (imlo belgisi)	`<u>xato</u>`
`<s>`	endi to'g'ri emas (chizilgan)	`<s>$50</s>`
`<mark>`	belgilangan (highlight)	`<mark>topildi</mark>`
`<small>`	mayda matn (huquqiy izoh)	`<small>© 2026</small>`
`<sub>` / `<sup>`	pastki / yuqori indeks	`H<sub>2</sub>O`, `x<sup>2</sup>`
`<abbr>`	qisqartma (`title` bilan)	`<abbr title="HyperText...">HTML</abbr>`
`<cite>`	asar nomi (manba)	`<cite>Toshkent oqshomi</cite>`
`<q>`	qisqa iqtibos (qo'shtirnoqsiz)	`<q>salom</q>`
`<code>`	kod parchasi	`<code>let x = 5</code>`
`<pre>`	formatlangan matn (bo'shliqlar saqlanadi)	kod bloki, ASCII
`<kbd>`	klaviatura tugmasi	`<kbd>Ctrl</kbd>+<kbd>S</kbd>`
`<samp>`	dastur chiqishi (output)	`<samp>Error 404</samp>`
`<var>`	o'zgaruvchi (matematik)	`<var>n</var>`
`<time>`	sana/vaqt (mashina o'qiy oladi)	`<time datetime="2026-06-30">bugun</time>`
`<data>`	mashina-o'qiy qiymat	`<data value="398">olma</data>`
`<dfn>`	atama ta'rifi	`<dfn>API</dfn>`
`<span>`	ma'nosiz inline konteyner (CSS/JS uchun)	`<span class="x">...</span>`
`<br>`	qator uzilishi (void)	`1-qator<br>2-qator`
`<wbr>`	mumkin bo'lgan uzilish nuqtasi	`super<wbr>uzun<wbr>so'z`
`<bdi>` / `<bdo>`	matn yo'nalishi (RTL/LTR izolyatsiya)	arab/ibroniy matn
`<ruby>`/`<rt>`/`<rp>`	talaffuz izohi (osiyo yozuvlari)	ieroglif ustidagi o'qilishi
`<del>` / `<ins>`	o'chirilgan / qo'shilgan (tahrir)	`<del>eski</del> <ins>yangi</ins>`
`<blockquote>`	uzun iqtibos (block)	manba bilan

Eng muhim farq: <strong>/<em> — ma'no (semantik), <b>/<i> — faqat ko'rinish (vizual). Ekran o'quvchi <strong> ni ovoz urg'usi bilan o'qiydi; <b> ni — yo'q. Shubha bo'lsa, <strong>/<em> ni tanlang.

2.10. Ro'yxatlar — to'liq (`ul`, `ol`, `li`, `dl`/`dt`/`dd`)

Uch xil ro'yxat bor (ko'pchilik faqat ikkitasini biladi):

html

<ul>                          <!-- 1) tartibsiz (markerli) -->
  <li>Element</li>
</ul>

<ol start="3" reversed type="A">  <!-- 2) tartibli: type=1/A/a/I/i, start=, reversed -->
  <li>Uchinchidan boshlanadi</li>
</ol>

<dl>                          <!-- 3) ta'rif ro'yxati (lug'at, atama->izoh) -->
  <dt>HTML</dt>               <!-- termin (definition term) -->
  <dd>Belgilash tili</dd>    <!-- izoh (definition description) -->
  <dt>CSS</dt>
  <dd>Stil tili</dd>
</dl>

<dl> (description list) — atama va uning izohi uchun (lug'at, FAQ, "xususiyat: qiymat"). Ko'p dasturchi buni bilmaydi, lekin u semantik jihatdan juda foydali.

2.11. Kontentni guruhlash va interaktiv elementlar

Zamonaviy HTML5 ba'zi narsalarni JavaScriptsiz beradi:

Teg	Vazifasi
`<figure>` + `<figcaption>`	rasm/diagramma + uning izohi (bog'langan)
`<details>` + `<summary>`	bosib ochiladigan blok (accordion — JS YO'Q!)
`<dialog>`	modal oyna (`.showModal()` — JS bilan)
`<address>`	aloqa ma'lumoti (muallif/tashkilot)
`<hr>`	mavzuviy ajratuvchi (gorizontal chiziq, void)
`<div>`	ma'nosiz block konteyner (CSS/JS uchun oxirgi chora)
`<search>`	qidiruv sohasi (yangi semantik teg)
`<menu>`	buyruqlar ro'yxati (`<ul>` ga o'xshash, semantik)

html

<!-- Native accordion — bitta qator JS'siz: -->
<details>
  <summary>Batafsil ko'rish</summary>
  <p>Yashirin matn shu yerda — sarlavhaga bosilganda ochiladi.</p>
</details>

<figure>
  <img src="grafik.png" alt="2026 sotuv grafigi">
  <figcaption>1-rasm. 2026-yil sotuvlari.</figcaption>
</figure>

2.12. O'rnatilgan (embedded) kontent

Sahifaga tashqi resurs/grafika joylaydigan teglar:

Teg	Vazifasi
`<iframe>`	boshqa sahifani ichiga joylash (YouTube, xarita)
`<embed>` / `<object>`	tashqi resurs (PDF, plagin)
`<canvas>`	JS bilan chiziladigan grafika (o'yin, grafik)
`<svg>`	vektor grafika (ikonka, logotip — kodda)
`<audio>` + `<source>`	ovoz (`<source>` — bir nechta format)
`<video>` + `<source>` + `<track>`	video + format + subtitr (`<track>`)
`<picture>` + `<source>`	responsive/format-moslashuvchi rasm
`<map>` + `<area>`	rasm ustidagi bosiladigan sohalar

html

<video controls width="600">
  <source src="dars.webm" type="video/webm">   <!-- avval webm -->
  <source src="dars.mp4" type="video/mp4">     <!-- bo'lmasa mp4 -->
  <track src="uz.vtt" kind="subtitles" srclang="uz" label="O'zbekcha">
  Brauzeringiz videoni qo'llamaydi.
</video>

2.13. Forma — barcha `input` turlari va atributlari (to'liq)

2.6 da asosiylarini ko'rdik. Mana to'liq type ro'yxati:

`type`	Vazifasi	`type`	Vazifasi
`text`	oddiy matn	`tel`	telefon raqami
`email`	email (tekshiriladi)	`url`	URL (tekshiriladi)
`password`	yashirin parol	`search`	qidiruv maydoni
`number`	son (`min`/`max`/`step`)	`range`	slayder (diapazon)
`checkbox`	belgilash	`color`	rang tanlash
`radio`	bittasini tanlash	`date`	sana
`file`	fayl (`accept`, `multiple`)	`time`	vaqt
`submit`	yuborish	`datetime-local`	sana + vaqt
`reset`	tozalash	`month` / `week`	oy / hafta
`button`	oddiy tugma	`hidden`	yashirin qiymat
`image`	rasmli yuborish tugmasi

Forma atributlari (<input> va boshqalarda):

name (server kaliti), value (qiymat), placeholder (namuna matn), required (majburiy), disabled (o'chirilgan), readonly (faqat o'qish), autofocus (avtomatik fokus), autocomplete (avtoto'ldirish), min/max/step (son/sana chegarasi), minlength/maxlength (uzunlik), pattern (regex tekshiruv), multiple (ko'p qiymat), accept (fayl turi), checked (oldindan belgilangan), selected (<option> uchun).

Boshqa forma elementlari (ko'pi kam ma'lum, lekin kuchli):

Element	Vazifasi
`<fieldset>` + `<legend>`	forma maydonlarini guruhlash + guruh nomi
`<datalist>`	input uchun avtotaklif ro'yxati
`<optgroup>`	`<select>` ichida variantlarni guruhlash
`<output>`	hisoblangan natija (JS bilan)
`<progress>`	progress bar (yuklanish jarayoni)
`<meter>`	o'lchov (band hajm, ball — diapazonda)

html

<fieldset>
  <legend>Yetkazib berish</legend>
  <input list="shaharlar" name="shahar" placeholder="Shahar...">
  <datalist id="shaharlar">          <!-- avtotaklif -->
    <option value="Toshkent"></option>
    <option value="Samarqand"></option>
  </datalist>
</fieldset>
<progress value="70" max="100">70%</progress>
<meter value="0.7" min="0" max="1">70%</meter>

2.14. Global atributlar (har bir elementga tegishli)

Quyidagilar istalgan HTML elementida ishlaydi:

Atribut	Vazifasi
`id`	noyob identifikator (CSS `#`, JS, `href="#id"`)
`class`	CSS/JS uchun nom (takrorlanadi)
`style`	inline CSS (kamroq ishlating — 1.2)
`title`	hover'da chiqadigan maslahat (tooltip)
`data-*`	ixtiyoriy maxsus ma'lumot (`data-id="5"` -> JS `dataset`)
`hidden`	elementni yashirish
`tabindex`	Tab tartibini boshqarish (a11y)
`contenteditable`	foydalanuvchi tahrir qila oladi
`draggable`	sudrab tashlanadigan (drag & drop)
`lang` / `dir`	til / yozuv yo'nalishi (ltr/rtl)
`spellcheck`	imlo tekshiruvi
`role`, `aria-*`	accessibility rollari va holatlari (1.9, 14)

html

<button data-product-id="398" aria-label="Savatga qo'shish" title="Qo'shish">
  +
</button>
<!-- JS: button.dataset.productId  ->  "398" -->

2.15. Metadata va skript teglari (`<head>` ichida)

Teg	Vazifasi
`<meta>`	metadata: `charset`, `viewport`, `description`, `og:*` (ijtimoiy ulashish), `robots`
`<link>`	tashqi resurs: CSS (`rel="stylesheet"`), favicon, preload, font
`<style>`	sahifa ichidagi CSS
`<base>`	barcha nisbiy havolalar uchun asos URL
`<script>`	JS ulash (`src`, `defer`, `async`, `type="module"`)
`<noscript>`	JS o'chiq bo'lsa ko'rsatiladigan kontent
`<template>`	ko'rinmaydigan, JS bilan klonlanadigan shablon
`<slot>`	Web Components ichidagi joy (11+ ilg'or)

2.16. HTML obyektlari (entities) — maxsus belgilar

Ba'zi belgilarni to'g'ridan-to'g'ri yozib bo'lmaydi (<, > teg deb o'qiladi). Ular entity bilan yoziladi:

Yozuv	Belgi	Yozuv	Belgi
`<`	`<`	`©`	`(c)`
`>`	`>`	`®`	`(R)`
`&`	`&`	`™`	TM
`"`	`"`	`—`	tire (—)
` `	uzilmas bo'shliq	`…`	uch nuqta
`Ǝ`	son bo'yicha (`oʻ`)	`°`	daraja

2.17. Barcha HTML elementlari — toifaviy xarita (ma'lumotnoma)

Hech narsani o'tkazib yubormaslik uchun — butun HTML element to'plamining toifaviy ko'rinishi:

text

  HUJJAT TUZILMASI:  html, head, body, title, base, link, meta, style
  SEKSIYALASH:       header, nav, main, section, article, aside, footer,
                     h1-h6, hgroup, address, search
  MATN BLOKLARI:     p, div, hr, pre, blockquote, ol, ul, li, dl, dt, dd,
                     figure, figcaption, menu
  INLINE MATN:       a, span, strong, em, b, i, u, s, mark, small, sub, sup,
                     abbr, cite, q, code, kbd, samp, var, time, data, dfn,
                     br, wbr, bdi, bdo, ruby, rt, rp
  TAHRIR:            del, ins
  JADVAL:            table, caption, thead, tbody, tfoot, tr, th, td,
                     colgroup, col
  FORMA:             form, input, label, button, select, option, optgroup,
                     textarea, fieldset, legend, datalist, output, progress, meter
  MEDIA/EMBEDDED:    img, picture, source, audio, video, track, iframe,
                     embed, object, canvas, svg, map, area
  INTERAKTIV:        details, summary, dialog
  SKRIPT/META:       script, noscript, template, slot

Maslahat: hammasini yodlash shart emas — qaysi biri borligini bilish va kerak bo'lganda MDN'dan aniqlash kifoya. Lekin semantik teglarni (header/nav/main/article, strong/em, figure, details) faol ishlatishga odatlaning — bu sizni o'rtacha dasturchidan ajratadi.

3. Sintaksis va qoidalar

html

<!-- Oddiy element -->
<p>Matn</p>

<!-- Atributli element -->
<a href="/about" class="link" target="_blank">Biz haqimizda</a>

<!-- Bo'sh (void) element — yopuvchi teg yo'q -->
<img src="rasm.jpg" alt="Tavsif">
<br>
<input type="text" name="ism">

<!-- Ichma-ich (nesting) — to'g'ri tartibda yopilishi shart -->
<ul>
  <li>Element 1</li>
  <li>Element 2</li>
</ul>

<!-- Izoh (comment) — ko'rinmaydi -->
<!-- bu izoh -->

Asosiy qoidalar:

Teglar to'g'ri tartibda yopilsin: <p><strong>matn</strong></p> , <p><strong>matn</p></strong> .
Atribut qiymatlari tirnoq ichida: class="box".
Bitta id — sahifada noyob (takrorlanmaydi); class — takrorlansa bo'ladi.

4. Batafsil kod namunalari

Misol 1 — To'liq semantik sahifa skeleti

html

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">                          <!-- belgilar kodi 0.1-bob -->
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- mobil 1.5-bob -->
  <title>Mening Blogim</title>                     <!-- brauzer tab nomi + SEO -->
  <meta name="description" content="Dasturlash haqida blog"> <!-- SEO 13.8-bob -->
</head>
<body>
  <header>                                          <!-- sahifa boshi 2.5-bob -->
    <h1>Mening Blogim</h1>
    <nav>                                           <!-- navigatsiya -->
      <a href="/">Bosh sahifa</a>
      <a href="/about">Biz haqimizda</a>
    </nav>
  </header>

  <main>                                            <!-- asosiy kontent (bitta!) -->
    <article>                                       <!-- mustaqil maqola -->
      <h2>Birinchi postim</h2>
      <p>Bu mening <strong>birinchi</strong> blog postim.</p>
    </article>
  </main>

  <footer>                                          <!-- sahifa oxiri -->
    <p>&copy; 2026 Mening Blogim</p>                <!-- &copy; = © belgisi -->
  </footer>
</body>
</html>

Misol 2 — Forma (ro'yxatdan o'tish)

html

<form action="/register" method="POST">          <!-- POST: ma'lumot yuborish 0.4-bob -->

  <!-- label for=  input id= ga bog'lanadi (accessibility — 2.6) -->
  <label for="ism">Ismingiz:</label>
  <input type="text" id="ism" name="ism" required minlength="2">
  <!-- name= serverga boradigan kalit; required = majburiy; minlength = min uzunlik -->

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <!-- type="email" — brauzer email formatini avtomatik tekshiradi -->

  <label for="parol">Parol:</label>
  <input type="password" id="parol" name="parol" required minlength="8">

  <label for="shahar">Shahar:</label>
  <select id="shahar" name="shahar">              <!-- ochiladigan ro'yxat -->
    <option value="toshkent">Toshkent</option>
    <option value="samarqand">Samarqand</option>
  </select>

  <label>
    <input type="checkbox" name="rozilik" required> Shartlarga rozaman
  </label>

  <button type="submit">Ro'yxatdan o'tish</button> <!-- yuborish -->
</form>

Misol 3 — Jadval

html

<table>
  <thead>
    <tr>
      <th>Mahsulot</th>
      <th>Narx</th>
      <th>Soni</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Olma</td>
      <td>12 000 so'm</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>3 000 so'm</td>
      <td>10</td>
    </tr>
  </tbody>
</table>

Misol 4 — Media

html

<!-- Rasm — alt MAJBURIY 2.8-bob -->
<img src="manzara.jpg" alt="Tog' manzarasi, quyosh botishi" width="600">

<!-- Video — controls (boshqaruv tugmalari) -->
<video src="dars.mp4" controls width="600">
  Brauzeringiz videoni qo'llab-quvvatlamaydi.   <!-- zaxira matn -->
</video>

<!-- Ro'yxatlar -->
<ul>                          <!-- tartibsiz (markerli) -->
  <li>Birinchi</li>
  <li>Ikkinchi</li>
</ul>
<ol>                          <!-- tartibli (raqamli) -->
  <li>Avval buni qil</li>
  <li>Keyin buni</li>
</ol>

5. To'g'ri va noto'g'ri holatlar

1) Div soup vs semantik

html

<!--  NOTO'G'RI — hammasi div 2.5-bob -->
<div class="header">...</div>
<div class="content">...</div>

<!--  TO'G'RI — semantik teglar -->
<header>...</header>
<main>...</main>

2) altsiz rasm

html

<!--  ekran o'quvchi rasmni o'qiy olmaydi (a11y) -->
<img src="logo.png">

<!--  tavsifli alt (bezak rasm bo'lsa: alt="") -->
<img src="logo.png" alt="Kompaniya logotipi">

3) labelni input'ga bog'lamaslik

html

<!--  label input'ga bog'lanmagan -->
<label>Email</label>
<input type="email">

<!--  for=  id= ga bog'langan 2.6-bob — label bosilsa, input faollashadi -->
<label for="em">Email</label>
<input type="email" id="em">

4) Sarlavha darajalarini buzish

html

<!--  h1 dan keyin to'g'ridan h4 (tartib buziq — SEO/a11y zarar) -->
<h1>Sarlavha</h1>
<h4>Kichik sarlavha</h4>

<!--  ketma-ket: h1  h2  h3 -->
<h1>Sarlavha</h1>
<h2>Kichik sarlavha</h2>

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — Yopilmagan teg

html

<p>Birinchi paragraf
<p>Ikkinchi paragraf

Sababi: </p> yopilmadi — brauzer "taxmin qiladi", lekin kutilmagan natija beradi. Yechimi: har ochuvchi tegni yop; VS Code "Auto Close Tag" kengaytmasi 0.7-bob yordam beradi.

Xato 2 — Forma ma'lumoti yuborilmaydi

Sababi: input'da name atributi yo'q. Serverga ma'lumot name kaliti bilan boradi 2.6-bob; namesiz maydon yuborilmaydi. Yechimi: har bir input'ga name bering.

Xato 3 — id takrorlanishi

Sababi: ikki elementga bir xil id berildi 2.3-bob. JS getElementById faqat birinchisini topadi, CSS/a11y buziladi. Yechimi: id noyob bo'lsin; takrorlanadigan uchun class ishlating.

Xato 4 — <!DOCTYPE html> unutilishi

Sababi: doctype yo'q brauzer "quirks mode"ga o'tadi (eski, nostandart xulq). Yechimi: har doim faylni <!DOCTYPE html> bilan boshlang.

Xato 5 — Block elementni inline ichiga qo'yish

html

<!--  <a> (inline) ichiga <div> (block) — nostandart (eskidan) -->
<!--  bloklarni block ichida joylash -->

Yechimi: nesting qoidalariga rioya qiling (modern HTML5'da <a> ichida block bo'ladi, lekin ehtiyot bo'ling).

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

CSS (1.2–1.9): HTML strukturasiga uslub beradi; semantik teglar — toza CSS selektorlar.
DOM va JS 2.16-bob: JS aynan HTML'dan qurilgan DOM'ni o'zgartiradi 0.5-bob.
React JSX 11.2-bob: JSX — aslida HTML'ning JS ichidagi ko'rinishi.
Formalar (11.10, 5.9): React Hook Form, validatsiya — HTML forma asosida.
Backend so'rovlar (0.4, 5.6): forma method/action HTTP so'rov.
SEO 13.8-bob: semantik teglar va meta — Google indekslashi.
Accessibility (1.9, 14): semantik HTML — a11y poydevori.
File upload 5.11-bob: <input type="file">.

8. Eng yaxshi amaliyotlar (best practices)

Semantik teglardan foydalaning. <div>ni faqat haqiqiy "guruh" kerak bo'lganda.
Har rasmga alt. Tavsifli (bezak bo'lsa alt="").
labelni for/id bilan input'ga bog'lang. Accessibility + qulaylik.
Sarlavha darajasini tartib bilan (h1h2h3); sahifada bitta <h1>.
Har input'ga name (server uchun) va id (label uchun).
<!DOCTYPE html> + lang + charset + viewport — har sahifada majburiy minimum.
Jadvalni faqat ma'lumot uchun, layout uchun emas (layout — Flexbox/Grid, 1.3–1.4).
HTML'ni validatsiya qiling (validator.w3.org) — xatolarni topadi.

9. Amaliy loyiha: "Shaxsiy Portfolio Sahifasi (faqat HTML)"

Birinchi haqiqiy sahifang! Hozircha faqat HTML — CSS keyingi bobda. Maqsad — toza, semantik struktura.

Maqsad

Semantik HTML, forma, jadval va media'ni birlashtirib, mazmunli (lekin hali bezaksiz) shaxsiy portfolio sahifasi yasash.

Talablar (requirements)

To'g'ri skelet: <!DOCTYPE>, <html lang="uz">, charset, viewport, <title>, description (Misol 1).
<header> — isming (<h1>) va <nav> (kamida 3 havola: Men haqimda, Loyihalar, Aloqa).
<main> ichida kamida 3 ta <section> (har biri id bilan, nav havolalari shularga ulansin — href="#loyihalar"):
- Men haqimda: rasm (<img alt>) + paragraf.
- Loyihalar: har biri <article> (sarlavha + tavsif + havola).
- Ko'nikmalar: jadval (texnologiya | daraja).
Aloqa formasi: ism (text, required), email (email, required), xabar (textarea), yuborish tugmasi. Har maydon label bilan bog'langan.
<footer> — mualliflik va ijtimoiy havolalar.
(Bonus) Video yoki audio (<video controls>) qo'shing; ro'yxat (<ul>/<ol>) ishlating.

Maslahatlar (hint)

Ichki havola: <a href="#loyihalar"> <section id="loyihalar">ga sakraydi.
Formada har input'ga name (server uchun) va id (label uchun) bering.
Hozircha CSS yozmang — struktura toza bo'lsin, ko'rinish keyingi bobda.
Tugatgach, validator.w3.org'da tekshiring.

"Tayyor" mezonlari (acceptance criteria)

To'liq, to'g'ri skelet (doctype, lang, charset, viewport, title).
Faqat semantik teglar (header/nav/main/section/article/footer) — div minimal.
Nav havolalari section'larga (#id) to'g'ri sakraydi.
Forma to'liq: har maydon label+id+name, kamida bitta required.
Har rasmda tavsifli alt.
Jadval thead/tbody/th/td bilan to'g'ri tuzilgan.
W3C validator xato bermaydi.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda veb-ning skeletini — HTMLni o'rgandik:

HTML — belgilash tili (dasturlash emas); teg + element + atributdan iborat; <head> (meta) + <body> (ko'rinadigan).
HTML daraxti DOM 0.5-bob.
Semantik teglar (header/nav/main/article/section/aside/footer) — accessibility, SEO va o'qishlilik uchun <div>dan ustun.
Formalar (form/input/label/select/textarea/button) — foydalanuvchidan ma'lumot; type, name, validatsiya atributlari.
Jadval (faqat ma'lumot uchun) va media (img alt, video).

Keyingi bob — 1.2-bob: CSS asoslari (selektorlar, box model, ranglar, birliklar). Skelet tayyor — endi unga kiyim kiydiramiz. CSS bilan rang, o'lcham, joylashuv, shrift beramiz. Box model (har elementning "qutisi") va selektorlar — keyingi bobning yuragi.

Foydalanilgan rasmiy/ishonchli manbalar

MDN Web Docs — HTML elements reference, semantic elements (header, nav, main, article, section)
MDN Web Docs — HTML forms, <input> types, form validation
W3C HTML Living Standard — hujjat tuzilishi, nesting qoidalari

Izohlar (0)

Izoh yozish uchun kiring.

Hozircha izoh yo'q. Birinchi bo'ling!

1.1-bob: HTML — tuzilma, semantik teglar, formalar, jadval va media

1. Kirish va motivatsiya

2. Nazariya — chuqur tushuntirish

2.1. HTML nima? (va nima EMAS)

2.2. Teg, element va atribut

2.3. HTML hujjatining tuzilishi

2.4. Block va inline elementlar

2.5. Semantik HTML — eng muhim tushuncha

2.6. Formalar — foydalanuvchidan ma'lumot olish

2.7. Jadval (table) — tabular ma'lumot

2.8. Media — rasm, video, audio

2.9. Matn semantikasi — inline (qatorli) teglar (to'liq ro'yxat)

2.10. Ro'yxatlar — to'liq (ul, ol, li, dl/dt/dd)

2.11. Kontentni guruhlash va interaktiv elementlar

2.12. O'rnatilgan (embedded) kontent

2.13. Forma — barcha input turlari va atributlari (to'liq)

2.14. Global atributlar (har bir elementga tegishli)

2.15. Metadata va skript teglari (<head> ichida)

2.16. HTML obyektlari (entities) — maxsus belgilar

2.17. Barcha HTML elementlari — toifaviy xarita (ma'lumotnoma)

3. Sintaksis va qoidalar

4. Batafsil kod namunalari

Misol 1 — To'liq semantik sahifa skeleti

Misol 2 — Forma (ro'yxatdan o'tish)

Misol 3 — Jadval

Misol 4 — Media

5. To'g'ri va noto'g'ri holatlar

6. Keng tarqalgan xatolar va yechimlari

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

8. Eng yaxshi amaliyotlar (best practices)

9. Amaliy loyiha: "Shaxsiy Portfolio Sahifasi (faqat HTML)"

Maqsad

Talablar (requirements)

Maslahatlar (hint)

"Tayyor" mezonlari (acceptance criteria)

10. Xulosa va keyingi bobga ko'prik

Foydalanilgan rasmiy/ishonchli manbalar

Izohlar (0)

2.10. Ro'yxatlar — to'liq (`ul`, `ol`, `li`, `dl`/`dt`/`dd`)

2.13. Forma — barcha `input` turlari va atributlari (to'liq)

2.15. Metadata va skript teglari (`<head>` ichida)