HTML hujjat tuzilishi (DOCTYPE, head, body)

Oldingi darsda HTML teglar yordamida mazmunning vazifasini belgilashini ko’rdik. Endi alohida elementlarni to’liq HTML hujjatiga joylaymiz. Brauzer kichik xatolarni ko’pincha o’zi tuzatadi, ammo standart skelet bilan yozilgan sahifa aniqroq, barqarorroq va boshqa dasturchilar uchun o’qishga qulay bo’ladi.

Bu dars yakunida siz:

  • HTML hujjatining asosiy qismlarini to’g’ri tartibda yoza olasiz;
  • <head> va <body> vazifasini ajrata olasiz;
  • sahifa tili, belgilar kodlashi va brauzer yorlig’idagi nomni belgilaysiz;
  • tayyor skeletni yangi sahifalar uchun qolip sifatida ishlata olasiz.

To’liq HTML skeleti

Zamonaviy HTML sahifa odatda quyidagi koddan boshlanadi:

<!doctype html>
<html lang="uz">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mening birinchi saytim</title>
  </head>
  <body>
    <h1>Salom, dunyo!</h1>
    <p>Bu mening birinchi to'liq HTML sahifam.</p>
  </body>
</html>

Bu kodni birdan yodlash shart emas. Muhimi — har qism nima vazifa bajarishini va qayerda joylashishini tushunish.

<!doctype html> — hujjat turi

<!doctype html> brauzerga hujjat zamonaviy HTML standartida yozilganini bildiradi. U teg emas va yopilish qismiga ega emas. Doctype faylning eng birinchi qatorida yoziladi:

<!doctype html>

Doctype yozilmasa, ayrim brauzerlar eski sahifalar bilan moslashish rejimiga o’tishi mumkin. Bu rejimda o’lcham va joylashuv qoidalari kutilmagan tarzda ishlashi ehtimoli bor.

<html> — hujjatning ildiz elementi

<html> elementi <!doctype html> dan boshqa barcha HTML kodini o’rab turadi. U hujjat daraxtining eng yuqori, ya’ni ildiz elementi hisoblanadi.

<html lang="uz">
  <!-- head va body shu yerda bo'ladi -->
</html>

lang="uz" atributi sahifaning asosiy tili o’zbekcha ekanini bildiradi. Bu ma’lumot:

  • ekran o’quvchiga so’zlarni to’g’ri talaffuz qilishga;
  • brauzerga tarjima va imlo vositalarini tanlashga;
  • qidiruv tizimiga sahifa tilini tushunishga yordam beradi.

Agar sahifa boshqa tilda bo’lsa, mos kod ishlatiladi: masalan, ingliz tili uchun lang="en", rus tili uchun lang="ru".

<head> — sahifa haqidagi ma’lumot

<head> ichidagi ma’lumotning asosiy qismi sahifaning o’zida ko’rinmaydi. U brauzer, qidiruv tizimi va boshqa xizmatlarga hujjat haqida ma’lumot beradi.

Boshlanishida uchta element ayniqsa muhim:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML asoslari</title>
</head>
  • <meta charset="UTF-8"> matndagi harflarni qanday o’qishni belgilaydi;
  • viewport mobil qurilmada sahifani ekran kengligiga moslaydi;
  • <title> brauzer yorlig’ida ko’rinadigan sahifa nomini belgilaydi.

UTF-8 o’zbekcha apostrofli so’zlar, lotin, kirill va boshqa ko’plab yozuv tizimlarini qo’llab-quvvatlaydi. charset ni <head> boshiga yaqin yozish tavsiya etiladi.

<body> — ko’rinadigan mazmun

Foydalanuvchi sahifada ko’radigan sarlavha, paragraf, rasm, havola, ro’yxat, jadval va forma elementlari <body> ichida yoziladi.

Quyidagi natija oynasida faqat body ichidagi mazmun ko’rsatilgan:

Kod
<header>
<h1>Sayohat kundaligi</h1>
<p>O'zbekiston bo'ylab ko'rgan joylarim haqida yozaman.</p>
</header>

<main>
<h2>So'nggi yozuv</h2>
<p>Bugun tog'lar orasidagi sokin ko'lga bordik.</p>
</main>

<footer>
<p>Muallif: Dilshod</p>
</footer>
Natija

<head> ichidagi <title> natija oynasining mazmuniga qo’shilmaydi. Chunki u hujjat haqida ma’lumot, <body> esa hujjatning foydalanuvchiga ko’rinadigan qismidir.

Brauzer hujjatni qanday o’qiydi?

Brauzer HTML faylini yuqoridan pastga o’qiydi va elementlardan daraxtga o’xshash tuzilma hosil qiladi:

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

Bu tuzilma keyinchalik DOM deb ataladi. CSS elementlarni shu tuzilma orqali bezaydi, JavaScript esa ularni topib o’zgartira oladi. Hozircha html → head + body munosabatini tushunish yetarli.

Indentatsiya kodni o’qishni osonlashtiradi

Brauzer ko’p hollarda bo’sh joylarga e’tibor bermaydi, lekin dasturchi uchun to’g’ri indentatsiya juda muhim. Ichki elementlarni odatda ikki bo’sh joy surib yozing:

<body>
  <main>
    <h1>Asosiy sarlavha</h1>
    <p>Paragraf matni.</p>
  </main>
</body>

Shunda qaysi element qaysi ota element ichida ekanini bir qarashda bilish mumkin. Jamoada ishlaganda formatlash qoidalarining izchil bo’lishi kodni tekshirish va xato topishni tezlashtiradi.

Amaliy mashq

Yangi index.html fayli yarating va to’liq skeletni yozing. Sahifa tilini o’zbekcha belgilang, yorliq nomiga Mening portfoliom deb yozing. body ichiga o’z ismingiz yozilgan <h1> va o’rganayotgan mavzuingiz haqidagi <p> qo’shing. Faylni brauzerda ochib, yorliqdagi nom bilan sahifa ichidagi sarlavha boshqa joyda ko’rinishini tekshiring.

Qisqacha xulosa

  • <!doctype html> zamonaviy HTML hujjatini e’lon qiladi.
  • <html lang="uz"> butun hujjatni o’raydi va uning tilini bildiradi.
  • <head> sahifa haqidagi, odatda ko’rinmaydigan ma’lumotlarni saqlaydi.
  • <meta charset="UTF-8"> belgilar kodlashini belgilaydi.
  • <title> brauzer yorlig’idagi nomni beradi.
  • <body> foydalanuvchi ko’radigan barcha mazmunni saqlaydi.

Keyingi darsda sarlavhalar va paragraflar yordamida <body> ichidagi matnni tushunarli iyerarxiyaga ajratamiz.

Bu dars foydali bo'ldimi?

—
— marta ko'rildi