HTML asoslari: teglar va elementlar

Oldingi darsda birinchi index.html faylingizni yaratdingiz. Uning ichida < va > belgilari bilan yozilgan «sirli» so'zlar bor edi. Bu darsda ular nima ekanini — teglar va elementlarni — tushunib olamiz. HTML har qanday veb-sahifaning poydevori: usiz na CSS, na JavaScript ishlaydi.

HTML nima?

HTML — inglizcha HyperText Markup Language so'zlarining qisqartmasi. Tarjimasi — «gipermatnni belgilash tili». Har bir so'zni alohida ko'raylik:

• HyperText (gipermatn) — havolalar orqali boshqa sahifalarga bog'langan matn. Kitobda sahifalarni ketma-ket varaqlaysiz, vebda esa bitta so'zni bosib, istalgan boshqa sahifaga «sakraysiz».
• Markup (belgilash) — matnning qaysi qismi nima ekanini belgilab chiqish: «bu — sarlavha», «bu — xatboshi», «bu — rasm».
• Language (til) — shu belgilarni yozishning aniq qoidalari.

Buni amalda ko'raylik. Quyidagi muharrirda bir xil matn ikki marta yozilgan: tepada — belgilarsiz, pastda — HTML belgilari bilan.

Mening sevimli shahrim
Samarqand — dunyodagi eng qadimiy shaharlardan biri.

<h1>Mening sevimli shahrim</h1>
<p>Samarqand — dunyodagi eng qadimiy shaharlardan biri.</p>

Belgilarsiz matn bitta qatorga qo'shilib ketdi: brauzer qaysi qism sarlavha ekanini bilmaydi. Belgilangan matnda esa sarlavha katta va qalin, xatboshi — alohida. Biz brauzerga «bu — sarlavha» deb aytdik, u esa buni tushundi.

Teg va element

HTML'dagi har bir belgi — teg (inglizcha tag — «yorliq»). Teg burchakli qavslar < > ichiga yozilgan nomdan iborat. Ko'p teglar juft bo'ladi: biri boshlanishni, ikkinchisi tugashni bildiradi.

• Ochuvchi teg <p> — «xatboshi shu yerdan boshlanadi». p — inglizcha paragraph (xatboshi) so'zining birinchi harfi.
• Mazmun — teglar orasidagi narsa. Ekranda aynan shu ko'rinadi.
• Yopuvchi teg </p> — xuddi ochuvchi teg, faqat nomdan oldin qiya chiziq / bor: «xatboshi shu yerda tugadi».
• Element — uchalasi birga: ochuvchi teg, mazmun va yopuvchi teg.

Brauzer teglarning o'zini ekranda ko'rsatmaydi — faqat mazmunni ko'rsatadi, lekin uni teg aytganidek bezaydi. Teg — bu brauzer uchun yo'riqnoma.

Sarlavhalar: h1 dan h6 gacha

Sarlavhalar uchun oltita teg bor: <h1> dan <h6> gacha (h — inglizcha heading, «sarlavha»). Raqam qancha kichik bo'lsa, sarlavha shuncha muhim.

<h1>1-darajali sarlavha — sahifa nomi</h1>
<h2>2-darajali — katta bo'lim</h2>
<h3>3-darajali — kichik bo'lim</h3>
<h4>4-darajali sarlavha</h4>
<h5>5-darajali sarlavha</h5>
<h6>6-darajali sarlavha</h6>
<p>Bu esa oddiy xatboshi.</p>

Sarlavhalar kitobning mundarijasiga o'xshaydi: kitob nomi, boblar, bo'limlar. Masalan, shaharlar haqidagi sahifa shunday tuziladi:

h1  O'zbekiston shaharlari
    h2  Samarqand
        h3  Registon maydoni
        h3  Shohi Zinda
    h2  Buxoro
        h3  Ark qal'asi

Uchta oddiy qoida:

1. Sahifada bitta <h1> bo'lsin — bu sahifaning nomi.
2. Darajalarni tartib bilan ishlating: <h2> dan keyin to'g'ridan-to'g'ri <h4> ga sakramang.
3. Amalda ko'pincha h1, h2 va h3 yetarli bo'ladi.

Xatboshi, qator ko'chirish va chiziq

Matnning asosiy qismi <p> — xatboshi elementlarida yoziladi. Brauzer xatboshilar orasiga o'zi bo'sh joy qo'yadi. Yana ikkita foydali teg bor:

• <br> (inglizcha break — «uzish») — xatboshi ichida yangi qatorga o'tish. She'r yoki manzil yozishda kerak bo'ladi.
• <hr> (inglizcha horizontal rule — «gorizontal chiziq») — mavzu almashganini bildiruvchi ajratuvchi chiziq.

<h2>Manzil</h2>
<p>Toshkent shahri,<br>
Yunusobod tumani,<br>
Bog'ishamol ko'chasi, 12-uy</p>

<hr>

<h2>Maqollar</h2>
<p>Ilm olish — igna bilan quduq qazish.</p>
<p>Bilim — bitmas xazina.</p>

Manzil bitta xatboshi, lekin <br> tufayli uch qatorga bo'lindi. Ikki maqol esa ikki alohida xatboshi — ular orasida bo'sh joy bor. <hr> ikki mavzuni chiziq bilan ajratdi.

Bo'sh elementlar

E'tibor berdingizmi: <br> va <hr> ning yopuvchi tegi yo'q. Ularning ichiga hech narsa yozilmaydi — mazmuni yo'q. Bunday elementlar bo'sh elementlar (inglizcha void elements) deyiladi. Ular ko'p emas, eng ko'p uchraydiganlari: <br>, <hr>, <img> (rasm), <input> (kiritish maydoni), <meta> va <link>.

Ichma-ich joylash

Elementlar bir-birining ichida tura oladi. Masalan, xatboshi ichidagi bitta so'zni ajratib ko'rsatish uchun uni <strong> (muhim, qalin) ichiga olamiz:

<p>Darsga <strong>soat 9 da</strong> keling.</p>

Bu yerda <strong> elementi <p> elementining ichida. Bunda <p> — ota element (inglizcha parent), <strong> esa uning bola elementi (child) deyiladi.

Asosiy qoida: oxirida ochilgan teg birinchi yopiladi. Elementlarni qutilarga o'xshating: kichik quti katta qutining ichida to'liq turishi kerak, uning devoridan «chiqib» turmasligi kerak.

<!-- To'g'ri: strong p ichida ochilib, p ichida yopiladi -->
<p>Bu <strong>juda muhim</strong> gap.</p>

<!-- Noto'g'ri: p strong'dan oldin yopilib qoldi -->
<p>Bu <strong>juda muhim</p> gap.</strong>

Noto'g'ri yozilgan kodni brauzer qanday ko'rsatishini sinab ko'ring:

<p>Bu <strong>juda muhim</p> gap.</strong>
<p>Bu esa keyingi xatboshi.</p>

«gap.» so'zi xatboshidan tashqariga chiqib, alohida qatorga tushib qoldi va u ham qalin bo'lib ketdi. Brauzer xatoni o'zicha «tuzatishga» harakat qildi, natija esa biz kutgandek emas. Endi muharrirdagi birinchi qatorni to'g'rilang: </strong> ni </p> dan oldinga o'tkazing.

Chekinish — o'qish qulay bo'lishi uchun

Element ichida boshqa elementlar ko'p bo'lsa, ichki qatorlarni bir oz o'ngga surib yozamiz. Bu chekinish (inglizcha indentation) deyiladi. Brauzer uchun farqi yo'q, lekin odam uchun kim kimning ichida ekani darhol ko'rinadi:

<!-- Chekinishsiz: o'qish qiyin -->
<body>
<h1>Sarlavha</h1>
<p>Matn <strong>muhim</strong> joyi bilan.</p>
</body>

<!-- Chekinish bilan: tuzilish ko'rinib turibdi -->
<body>
  <h1>Sarlavha</h1>
  <p>Matn <strong>muhim</strong> joyi bilan.</p>
</body>

Atributlar

Ba'zan elementga qo'shimcha ma'lumot berish kerak bo'ladi: unga nom qo'yish, izoh qo'shish, tilini ko'rsatish. Buning uchun atributlar (inglizcha attributes) bor. Atribut doim ochuvchi teg ichida yoziladi:

Qoidalar:

• Atribut tegning nomidan keyin, bo'sh joy bilan yoziladi: <p title="Izoh">.
• Qiymat doim qo'shtirnoq "…" ichida bo'lsin.
• Bir nechta atribut bo'sh joy bilan ajratiladi, tartibi muhim emas: <p id="kirish" title="Izoh">.
• Yopuvchi tegga atribut yozilmaydi: </p> doim shundayligicha qoladi.

Ko'p ishlatiladigan atributlar:

<h1 id="bosh" title="Bu sahifaning asosiy sarlavhasi">Atributlar</h1>
<p title="Meni topdingiz!">Sichqonchani shu xatboshi ustida biroz ushlab turing.</p>
<p class="muhim">Bu xatboshining klassi bor. Hozircha u hech narsani o'zgartirmaydi.</p>
<p hidden>Bu xatboshi ko'rinmaydi — hidden atributi uni yashirgan.</p>
<p lang="en">This paragraph is in English.</p>

Sichqonchani ikkinchi xatboshi ustida ushlab turing — izoh chiqadi. To'rtinchi xatboshi esa umuman ko'rinmayapti. class va id hozircha ko'zga ko'rinadigan hech narsa qilmayapti: ular CSS va JavaScript uchun «tutqich» vazifasini bajaradi. Qiziqish uchun muharrir oxiriga mana bu qatorni qo'shib ko'ring:

<style> .muhim { color: crimson; } </style>

Klassi muhim bo'lgan xatboshi qizil rangga kirdi. Bu — CSS, uni 8-darsda batafsil o'rganamiz.

Keyingi darslarda yana ko'p atributlar bilan tanishasiz: havola manzili uchun href, rasm fayli uchun src va boshqalar.

HTML sahifaning asosiy tuzilishi

Hozirgacha muharrirlarda faqat sahifaning ko'rinadigan qismini yozdik. Haqiqiy HTML fayl esa doim ma'lum bir «qolip» asosida quriladi. Oldingi darsda VS Code'da ! + Tab bosganingizda aynan shu qolip paydo bo'lgan edi:

<!doctype html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mening sahifam</title>
  </head>
  <body>
    <h1>Salom, dunyo!</h1>
    <p>Bu mening birinchi sahifam.</p>
  </body>
</html>

Har bir qatorni ko'rib chiqamiz:

Elementlar bir-birining ichida turgani uchun sahifa «oila daraxti»ga o'xshaydi. <html> — hammaning bobosi, <head> va <body> — uning bolalari:

html
├── head
│   ├── meta
│   ├── meta
│   └── title
└── body
    ├── h1
    └── p

Bu daraxt DOM deb ataladi — JavaScript bilan sahifani o'zgartirganda (16-dars) aynan shu daraxt bilan ishlaymiz.

Izohlar

Izoh (inglizcha comment) — kod ichidagi, brauzer ko'rsatmaydigan matn. U <!-- bilan boshlanib, --> bilan tugaydi. Izohlar o'zingizga yoki boshqa dasturchiga eslatma qoldirish va kodning bir qismini vaqtincha «o'chirib» turish uchun kerak.

<!-- Bu izoh. U sahifada ko'rinmaydi. -->
<h1>Mening sahifam</h1>

<!-- Pastdagi xatboshini vaqtincha yashirib qo'ydim:
<p>Bu xatboshi hozircha kerak emas.</p>
-->

<p>Bu xatboshi esa ko'rinadi.</p>

Bo'sh joylar va yangi qatorlar

HTML'ning bitta qiziq xususiyati bor: brauzer ketma-ket kelgan bir nechta bo'sh joy, Tab va yangi qatorlarni bitta bo'sh joyga aylantiradi. Sinab ko'ring:

<p>Bu      gapda       juda     ko'p      bo'sh    joy    bor.</p>

<p>Bu
      gap
   bir necha
             qatorga
   yozilgan.</p>

Ikkala xatboshi ham oddiy bitta qator bo'lib chiqdi. Aynan shu xususiyat tufayli kodni bemalol chekinish va bo'sh qatorlar bilan chiroyli yozishimiz mumkin — natijaga ta'sir qilmaydi.

• Yangi qator kerak bo'lsa — <br> yoki yangi <p>.
• Kattaroq oraliq kerak bo'lsa — CSS.
• Matnni yozilganidek, barcha bo'sh joylari bilan ko'rsatish kerak bo'lsa (masalan, kod parchasi) — <pre> tegi.

HTML «kechirimli», lekin…

Yuqorida ko'rdingiz: HTML'da xato qilsangiz ham, brauzer xato haqida xabar bermaydi va sahifani baribir ko'rsatishga harakat qiladi. Yopuvchi tegni unutsangiz, ko'pincha hech narsa sezilmaydi. Lekin bunga tayanmang:

• brauzer xatoni o'zicha «tuzatadi» va natija siz kutgandek bo'lmasligi mumkin;
• xatoli HTML'da CSS va JavaScript ham kutilmagan ishlaydi;
• bunday xatoni keyin topish juda qiyin.

Shuning uchun boshidanoq to'g'ri yozishga odatlaning: har bir ochilgan tegni yoping, ichma-ich joylashni kuzating. Kodingizni validator.w3.org saytida bepul tekshirish ham mumkin — u xatolarni qator raqami bilan ko'rsatadi.

Mashqlar

<!-- 1. Ismingiz bilan h1 sarlavha yozing -->

<!-- 2. O'zingiz haqingizda bitta xatboshi (p) -->

<!-- 3. Ajratuvchi chiziq (hr) -->

<!-- 4. Qiziqishlaringiz haqida yana bitta xatboshi -->

<h1>Aziza Karimova</h1>
<p>Men Samarqanddanman, 17 yoshdaman va veb-dasturlashni o'rganyapman.</p>
<hr>
<p>Bo'sh vaqtimda kitob o'qiyman va shaxmat o'ynayman.</p>

<h1>Mening kundaligim</h1>
<p>Bugun <strong>juda qiziqarli</p> dars</strong> bo'ldi.
<p>Ertaga <em>yangi mavzu</p></em> boshlanadi.

<h1>Mening kundaligim</h1>
<p>Bugun <strong>juda qiziqarli</strong> dars bo'ldi.</p>
<p>Ertaga <em>yangi mavzu</em> boshlanadi.</p>

<!-- To'liq sahifa tuzilishini shu yerga yozing -->

<!doctype html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mening sahifam</title>
  </head>
  <body>
    <h1>Xush kelibsiz!</h1>
    <p>Bu sahifani o'zim, yoddan yozdim.</p>
  </body>
</html>

O'zingizni sinang