3.1-dars — Sahifa skeleti: html, head, body

Internetdagi har bir HTML sahifasi bir xil bazaviy tuzilmaga ega. Bu inson skeletiga o'xshaydi — hammada u bir xil tuzilgan. Bu karkas to'rtta majburiy qismdan iborat:

• <!DOCTYPE html> — hujjat turi haqidagi e'lon. Istalgan sahifaning birinchi qatori.
• <html> — qolgan hamma narsa joylashadigan ildiz teg.
• <head> — meta-ma'lumot uchun konteyner: vkladka sarlavhasi, kodlash, sozlamalar.
• <body> — foydalanuvchi sahifada ko'radigan hamma narsa.

Istalgan HTML hujjatining eng birinchi qatori — <!DOCTYPE html>. U brauzerga: "Ey, men zamonaviy HTML5'da yozilganman, meni to'g'ri qayta ishla!" deydi. Ilgari DOCTYPE uzun va qo'rqinchli edi, hozir esa hammasi oddiy:

Agar uni yozmasangiz, brauzer moslik rejimini (quirks mode) yoqishi mumkin va sahifa noto'g'ri ko'rinadi. Shuning uchun DOCTYPE — majburiy element. Bu HTML tegi emas, brauzer uchun ko'rsatma. Uning yopuvchi tegi yo'q. Uni har doim birinchi qator qilib yozing, xolos.

DOCTYPE'dan darhol keyin <html> tegi keladi. Bu butun hujjatning ildiz elementi. Qolgan barcha teglar uning ichida joylashgan. <html> ichida — ikkita asosiy bo'lim: <head> va <body>. Avval bosh, keyin tana — xuddi odamda bo'lgani kabi!

<html> tegida sahifa tilini ko'rsatuvchi foydali lang atributi bor. Rus tilidagi saytlar uchun lang="ru", ingliz tilidagilari uchun esa lang="en" yoziladi. Bu brauzer, qidiruv tizimlari va ekranni o'quvchi dasturlarga yordam beradi.

<html lang="ru">
  
</html>

<head> tegi — xizmat ma'lumoti uchun konteyner. Foydalanuvchi uni ko'rmaydi (vkladka sarlavhasidan tashqari), lekin u juda muhim. <head> ichida uchta majburiy teg joylashgan:

title — brauzer vkladkasining sarlavhasi. U shuningdek Yandex va Google qidiruv natijalarida ham ko'rinadi.

<title>3.1-dars — HTML'ni noldan o'rganamiz</title>

meta charset — sahifaning kodlashi. Bu bo'lmasa, o'zbek yoki rus matni o'rniga "krakozyabra"lar chiqadi. UTF-8'ni ishlating — vebdagi eng mashhur kodlash.

<meta charset="UTF-8">

meta viewport — mobil qurilmalar uchun sozlama. Bu bo'lmasa, saytingiz telefonda kuchli kichraytirilgan desktop versiyasi kabi ko'rinadi.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mana head to'liq qanday ko'rinishi:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mening birinchi sahifam</title>
</head>

head ichidagi tartib muhim emas, lekin charset'ni birinchi qilib qo'ygan ma'qul. Ba'zi brauzerlar, agar meta charset boshida bo'lmasa, sahifani qayta o'qiydi. head ichida shuningdek CSS-fayllar, shriftlar va ikonkalar ham ulanadi — lekin bu haqda keyinroq.

<body> tegi — barcha ko'rinadigan kontent yashaydigan joy: sarlavhalar, abzatslar, rasmlar, havolalar, tugmalar, menyular, formalar. Agar <head> — sahifaning miyasi bo'lsa, <body> — uning tanasidir.

Oldingi darslardagi barcha teglar (<h1>, <p>, <strong>, <ul>, <ol>, <a>, <img>) <body> ichida yoziladi. Ulardan hech biri body'dan tashqarida bo'lmasligi kerak.

<body>
  <h1>Salom, dunyo!</h1>
  <p>Bu mening birinchi HTML sahifam.</p>
  <p>Men <strong>hujjat skeletini</strong> o'rganyapman.</p>
  <a href="https://example.com">Meni bos</a>
</body>

<body>da istalgancha kontent bo'lishi mumkin. Dasturchi vositalarini oching (F12) va <body> tegini toping — sahifadagi butun razmetka, barcha elementlar uning ichida joylashgan.

Endi hammasini birga yig'amiz. Mana istalgan sahifangiz uchun asos bo'ladigan HTML hujjatining to'liq tuzilmasi:

<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mening birinchi sahifam</title>
</head>
<body>
  <h1>Saytimga xush kelibsiz!</h1>
  <p>Bu mening birinchi to'liq HTML sahifam. Unda DOCTYPE, html, head va body bor.</p>
  <p>Men allaqachon istalgan veb-sahifaning <strong>skeletini</strong> yarata olaman!</p>
</body>
</html>

Hozir sinab ko'ring: index.html faylini yarating, kodni nusxalang va brauzerda oching. Siz o'zingizning birinchi to'liq HTML sahifangizni ko'rasiz!

Endi ko'proq kontent qo'shamiz — sarlavhalar, ro'yxatlar va havola:

<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mening sahifam</title>
</head>
<body>
  <h1>Asosiy sarlavha</h1>
  <p>Bu mening sahifamga kirish qismi.</p>

  <h2>Birinchi bo'lim</h2>
  <p>Bu bo'limda men <strong>muhim narsalar</strong> haqida gapirib beraman.</p>

  <h3>Kichik bo'lim</h3>
  <p>Bu yerda esa yana ham batafsilroq narsa yozish mumkin.</p>

  <h2>Mening sevimli narsalarim</h2>
  <ul>
    <li>HTML'da kod yozish</li>
    <li>CSS o'rganish</li>
    <li>Qahva ichish</li>
  </ul>

  <p>Men yana <a href="https://developer.mozilla.org/ru/">MDN</a>'ni ham yaxshi ko'raman — bu veb-texnologiyalar bo'yicha eng yaxshi ma'lumotnoma.</p>
</body>
</html>

Chekinishlarga (chapdagi bo'shliqlarga) e'tibor bering. Bu ichma-ichlik — teglar ichidagi teglar. Chekinishlar brauzer uchun majburiy emas, lekin inson uchun kodni o'qishga juda yordam beradi.

HTML — ierarxik tuzilma. Teglar bir-birining ichiga, matryoshkalar kabi joylashadi. Asosiy qoida: teglar bir-birini kesib o'tmasligi kerak. Agar <p>ni, keyin <strong>ni ochgan bo'lsangiz, avval </strong>ni, keyin </p>ni yopish kerak.

<p><strong>Qalin</strong> so'zli matn.</p>

<p><strong>Qalin so'zli</p></strong> ❌

Quyidagi kontentga ega sahifa yarating:

1. To'g'ri DOCTYPE
2. <html lang="ru">
3. head ichida: UTF-8 charset, viewport, "O'zim haqimda sahifa" title
4. h1 "Salom! Mening ismim [ism]"
5. Qisqacha tavsifga ega abzats
6. h2 "Mening sevimli mashg'ulotlarim" + belgili ro'yxat
7. h2 "Mening maqsadlarim" + raqamlangan ro'yxat
8. Sevimli saytga havolali abzats

<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>O'zim haqimda sahifa</title>
</head>
<body>
  <h1>Salom! Mening ismim Aleksey</h1>
  <p>Men Moskvadan bo'lgan boshlovchi veb-dasturchiman. HTML va CSS o'rganyapman.</p>

  <h2>Mening sevimli mashg'ulotlarim</h2>
  <ul>
    <li>Dasturlash</li>
    <li>Musiqa</li>
    <li>Kitob o'qish</li>
  </ul>

  <h2>Mening maqsadlarim</h2>
  <ol>
    <li>Vyorstka qilishni o'rganish</li>
    <li>CSS'ni o'zlashtirish</li>
    <li>JavaScript'ni o'rganish</li>
  </ol>

  <p>Sevimli sayt: <a href="https://developer.mozilla.org/ru/">MDN</a></p>
</body>
</html>

DOCTYPE'ni unutish. Busiz brauzer quirks mode'ni yoqadi — CSS oldindan aytib bo'lmaydigan tarzda ishlaydi. Har doim <!DOCTYPE html>dan boshlang.

body'dan tashqaridagi kontent. Boshlovchilar ko'pincha matnni head ichida yoki </html>dan keyin yozishadi. Barcha ko'rinadigan narsa — faqat <body> ichida.

Tegni yopmaslik. </html> yoki </body>ni o'tkazib yubordingizmi? Brauzer baribir hammasini ko'rsatadi, lekin noto'g'ri "o'ylab topishi" mumkin. Juftlikni tekshirib turing.

lang'ni ko'rsatmaslik. Atribut majburiy emas, lekin qidiruv tizimlari va skrinriderlar uchun muhim. Shunchaki lang="ru" qo'shing.

Teglarning kesishishi. Ochish tartibiga teskari ravishda yoping. LIFO — Last In, First Out.

• Istalgan HTML sahifa <!DOCTYPE html>dan boshlanadi
• <html> — lang atributiga ega ildiz teg
• <head> — meta-ma'lumot: charset, viewport, title
• <body> — foydalanuvchi ko'radigan hamma narsa
• Teglar ochilish tartibiga teskari tartibda yopiladi
• Chekinishlar kodni o'qish qulay qiladi

Bu skelet har bir HTML faylida takrorlanadi. Mashq qiling: turli kontentga, lekin bir xil skeletga ega 2-3 ta sahifa yarating. Keyingi darsda — jadvallar!