HTML Asoslari — konspekt - HTMLda dasturlash

Bu modulda HTML hujjatning skeleti va eng ko’p ishlatiladigan matn teglari o’rganildi: DOCTYPE, elementlar va atributlar, sarlavhalar, xatboshilar, style atributi, formatlash va izohlar.

Hujjat strukturasi va DOCTYPE

Har bir HTML hujjat bir xil skeletdan boshlanadi:

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <title>Sahifa nomi</title>
</head>
<body>
  <h1>Ko’rinadigan matn</h1>
</body>
</html>

<!DOCTYPE html> — brauzerga "bu zamonaviy HTML5 hujjat" deb e’lon qiladi. Bu teg emas, deklaratsiya; har doim birinchi qatorda turadi.
<head> — sahifa HAQIDAGI ma’lumotlar: nomi, kodirovkasi. Ekranda ko’rinmaydi.
<body> — ekranda ko’rinadigan hamma narsa shu yerda.

Tipik xato. <meta charset="UTF-8">ni tushirib qoldirish. O’zbekcha yoki ruscha matn brauzerda tushunarsiz belgilar uyumiga aylansa, sabab deyarli har doim shu — kodirovka e’lon qilinmagan.

Elementlar va atributlar

Element uch qismdan iborat: ochuvchi teg, ichidagi kontent va yopuvchi teg. Atribut — ochuvchi teg ichida yoziladigan qo’shimcha sozlama, nom="qiymat" ko’rinishida.

<a href="https://ochiqkurs.uz">Ochiq Kurs</a>

Bu yerda a — teg nomi, href — atribut, Ochiq Kurs — kontent.

Ba’zi elementlar "bo’sh" (void) bo’ladi: kontenti va yopuvchi tegi yo’q — <br>, <hr>, <img>, <meta>.

Tipik xato. Yopuvchi tegni unutish. <p>Matn deb qoldirilsa, brauzer xato ko’rsatmaydi — HTML’da brauzer "yiqilmaydi", xatoni o’zicha to’g’irlab chizaveradi. Lekin keyingi elementlar kutilmagan joydan chiqadi. Teglarni doim juftlab yozishni odat qiling.

Sarlavhalar

Sarlavha teglari <h1>dan <h6>gacha — raqam kattalashgani sari ahamiyat (va standart o’lcham) kichrayadi:

<h1>Sayt nomi</h1>
<h2>Bo’lim sarlavhasi</h2>
<h3>Kichik bo’lim</h3>

Natija: uchta sarlavha, h1 eng yirik, h3 kichikroq — har biri yangi qatordan, qalin shriftda.

Sahifada <h1> bitta bo’lishi kerak — u sahifaning asosiy mavzusini bildiradi. Qidiruv tizimlari sahifa tuzilishini aynan sarlavha darajalari orqali tushunadi.

Tipik xato. Tegni o’lchami uchun tanlash: "kichikroq yozuv kerak" deb <h4> ishlatish. Daraja — ma’no bildiradi, o’lchamni esa CSS boshqaradi.

Xatboshilar

<p>Birinchi xatboshi.</p>
<p>Ikkinchi
   xatboshi davom etmoqda.</p>
<hr>
<p>Chiziqdan keyingi matn.<br>Bu esa yangi qator.</p>

Natija: ikkita alohida xatboshi (kod ichidagi Enter sezilmaydi), gorizontal chiziq, so’ng ikki qatorli xatboshi.

Muhim qoida: HTML kodidagi Enter va ketma-ket probellar natijaga ta’sir qilmaydi — brauzer ularni bitta probelga yig’ib yuboradi. Yangi qator kerak bo’lsa <br>, yangi fikr boshlansa yangi <p> yoziladi.

style atributi

Elementga to’g’ridan-to’g’ri ko’rinish berishning eng sodda usuli — style atributi. Qiymati xususiyat: qiymat; juftliklaridan iborat:

<p style="color: green; font-size: 20px;">Yashil, kattaroq matn</p>

Natija: yashil rangli, odatdagidan yirikroq xatboshi.

Bu — CSS tili bilan birinchi tanishuv; keyingi modulda uslublarni alohida joyda yozishning tozaroq usullari o’rganiladi.

Formatlash teglari

Matn bo’laklarini ajratib ko’rsatish uchun maxsus teglar bor:

Teg	Ko’rinishi	Ma’nosi
`<strong>`	qalin	muhim matn
`<b>`	qalin	faqat ko’rinish, ma’no yo’q
`<em>`	qiya	urg’u berilgan matn
`<i>`	qiya	faqat ko’rinish
`<mark>`	fon bilan belgilangan	marker bilan ajratish
`<del>`	ustidan chizilgan	o’chirilgan matn
`<sub>`	pastki indeks	H₂O dagi 2
`<sup>`	yuqori indeks	m² dagi 2

<p>Suv formulasi — H<sub>2</sub>O, xona maydoni — 12 m<sup>2</sup>.</p>
<p><strong>Diqqat:</strong> dars <mark>soat 18:00</mark> da boshlanadi.</p>

Natija: indekslar to’g’ri joyda, "Diqqat:" qalin, vaqt esa rangli fon bilan ajralib turadi.

<strong>/<em> bilan <b>/<i> ko’rinishda bir xil, farqi ma’noda: birinchi juftlik "bu matn muhim" degan ma’noni ham bildiradi (ekran o’quvchilari va qidiruv tizimlari buni hisobga oladi), ikkinchisi shunchaki ko’rinishni o’zgartiradi.

Izohlar

Izoh — kod ichidagi, brauzer ko’rsatmaydigan eslatma:

<!-- Bu izoh: ekranda chiqmaydi -->
<p>Bu esa ko’rinadi.</p>

VS Code’da qatorni belgilab Ctrl+/ bosilsa, izohga aylanadi. Izoh kod bo’lagini vaqtincha "o’chirib qo’yish"da ham qo’l keladi.

Tipik xato. Izohni yopmaslik — --> unutilsa, undan keyingi butun sahifa izohga aylanib, ekrandan g’oyib bo’ladi. Sahifaning "yarmi yo’qolib qolsa", avval yopilmagan izoh qidiring.

Amaliyot

Skeletdan boshlab "Men haqimda" sahifasi yarating: <h1>da ismingiz, ikkita <p>da o’zingiz haqingizda.
<h2> bilan "Sevimli mashg’ulotlarim" bo’limini qo’shing, ostiga bitta xatboshi yozing.
Matndagi eng muhim so’zni <strong>, bitta iborani <mark> bilan ajrating.
Sarlavhaga style atributi bilan rang bering.
Har bo’lim tepasiga  izoh yozib, kodni hujjatlang.

Modul testida shu mavzular so’raladi — konspektni yopib, avval o’zingizni sinab ko’ring.