HTML nima?

HTML — bu har bir veb-sahifaning poydevori. Internetda ko'rgan har bir sayt, matn, rasm, tugma va havola aynan HTML yordamida yaratilgan. Ushbu darsda HTML nima ekanligini mutlaqo noldan o'rganamiz: teg, element va atribut nima, HTML hujjati qanday tuzilishga ega va o'z qo'lingiz bilan birinchi veb-sahifani qanday yozish mumkin.

HTML nima va u nima uchun kerak?

HTML — bu HyperText Markup Language so'zlarining qisqartmasi, ya'ni "Gipermatnli Belgilash Tili". Nomdagi har bir so'zni ajratib tushunaylik:

• HyperText (Gipermatn) — bu oddiy matndan farqli, ichida bir sahifadan boshqasiga o'tadigan havolalar bo'lgan matn. Aynan havolalar butun internetni bir-biriga bog'lab turadi;
• Markup (Belgilash) — matnni maxsus belgilar (teglar) bilan o'rab, brauzerga "bu — sarlavha", "bu — paragraf", "bu — rasm" deb aytish;
• Language (Til) — bularning barchasi aniq qoidalarga ega bo'lgan til orqali yoziladi.

Muhim tushuncha: HTML — bu dasturlash tili emas. Unda shartlar, sikllar yoki hisob-kitob yo'q. HTML faqat sahifaning tuzilishini va mazmunini tasvirlaydi. U brauzerga nimani ko'rsatishni aytadi, lekin qanday harakat qilishni emas. Boshqacha aytganda, HTML — bu sahifaning "skeleti" yoki "suyaklari".

Bir sahifani odam tanasiga qiyoslasak: HTML — suyaklar va a'zolar (tuzilish), CSS — tashqi ko'rinish, kiyim va bezak (ranglar, o'lchamlar), JavaScript — mushaklar va harakat (bosilganda nima bo'lishi). Biz hozir eng birinchisi — suyaklarni o'rganamiz.

Teg nima?

HTML'ning eng asosiy birligi — teg (tag). Teg — bu burchakli qavslar < va > ichiga yozilgan maxsus so'z. Masalan, paragraf uchun teg <p> ko'rinishida bo'ladi.

Teglar odatda juft bo'lib keladi: ochuvchi teg va yopuvchi teg. Yopuvchi teg ochuvchisiga o'xshaydi, faqat oldida qiya chiziq (/) turadi:

<p>Bu — bitta paragraf.</p>

Bu yerda <p> — ochuvchi teg (paragraf boshlandi), </p> — yopuvchi teg (paragraf tugadi). Ular orasidagi "Bu — bitta paragraf." matni esa — paragrafning mazmuni.

Ba'zi teglar mazmunni o'rab olmaydi, chunki ularning ichida matn bo'lmaydi. Bunday teglar bo'sh (yakka) teglar deyiladi va ularda yopuvchi teg bo'lmaydi. Masalan, satrni yangi qatordan boshlaydigan <br> yoki rasm qo'yadigan <img>:

<br>

Element nima?

Element — bu ochuvchi teg, mazmun va yopuvchi tegdan iborat to'liq birlik. Ya'ni teg — bu shunchaki belgi, element esa — belgi bilan o'ralgan butun bo'lak.

<h1>Salom, dunyo!</h1>
<p>Bu mening birinchi veb-sahifam.</p>

Yuqorida ikkita element bor: birinchisi — h1 elementi (katta sarlavha), ikkinchisi — p elementi (paragraf). Har biri ochuvchi teg, matn va yopuvchi tegdan tashkil topgan.

Elementlar bir-birining ichiga joylashtirilishi (ichma-ich) mumkin. Masalan, paragraf ichida biror so'zni qalin qilib ajratmoqchi bo'lsak:

<p>Men <strong>HTML</strong> o'rganyapman.</p>

Bu yerda strong elementi p elementining ichida joylashgan. Muhim qoida: ichma-ich joylangan teglar to'g'ri tartibda yopilishi kerak. Oxirgi ochilgan teg birinchi bo'lib yopiladi. Ya'ni <p><strong>...</strong></p> to'g'ri, lekin <p><strong>...</p></strong> noto'g'ri.

Atribut nima?

Atribut — bu tegga qo'shimcha ma'lumot beruvchi maxsus qism. Atributlar ochuvchi teg ichiga yoziladi va elementga qo'shimcha xususiyat qo'shadi. Atribut ikki qismdan iborat: nomi va qiymati, ular orasida teng belgisi (=) turadi. Qiymat esa qo'shtirnoq ichiga olinadi.

Eng ko'p ishlatiladigan misol — havola. Havola <a> tegi bilan yaratiladi, lekin qayerga o'tishni href atributi belgilaydi:

<a href="https://example.com">Saytga o'tish</a>

Bu yerda:

• a — teg nomi (havola);
• href — atribut nomi ("qayerga o'tadi" degani);
• "https://example.com" — atribut qiymati (havola manzili);
• Saytga o'tish — foydalanuvchi ko'radigan matn (havola ko'rinishi).

Bir elementda bir nechta atribut bo'lishi mumkin, ular bir-biridan bo'sh joy (probel) bilan ajratiladi. Masalan, rasm elementi ikkita atributga ega:

<img src="rasm.jpg" alt="Chiroyli manzara">

Bu yerda src — rasm fayli manzili, alt — rasm ko'rinmasa yoki ekranni o'quvchi dastur uchun matnli tavsif.

HTML hujjatining skeleti

Har bir to'liq HTML sahifasi ma'lum bir standart tuzilishga ega. Bu — sahifaning "skeleti", ya'ni har safar takrorlanadigan asosiy karkas. Mana to'liq bo'sh sahifa qanday ko'rinadi:

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

Bu tuzilish dastlab murakkab tuyulishi mumkin, lekin har bir qismini alohida ko'rib chiqsak, hammasi tushunarli bo'ladi.

1. — hujjat turi

Fayilning eng birinchi qatori — <!DOCTYPE html>. Bu brauzerga "bu hujjat zamonaviy HTML5 standartida yozilgan" deb aytadi. Bu teg emas, balki e'lon (deklaratsiya). U doim eng yuqorida, boshqa hamma narsadan oldin turishi kerak.

2. — ildiz element

<html> — butun hujjatni o'rab turadigan eng asosiy (ildiz) element. Boshqa hamma teglar shu elementning ichida joylashadi. Uning lang atributi sahifa qaysi tilda ekanini bildiradi: lang="uz" — o'zbek tili, lang="en" — ingliz tili. Bu qidiruv tizimlari va ekran o'quvchilari uchun muhim.

3. — texnik ma'lumotlar bo'limi

<head> ("bosh") bo'limi — sahifa haqidagi ko'rinmaydigan texnik ma'lumotlarni saqlaydi. Bu yerdagi narsalar sahifada to'g'ridan-to'g'ri chiqmaydi, lekin brauzer va qidiruv tizimlari uchun juda muhim. Bu yerga sahifa sarlavhasi, kodlash usuli, CSS va JavaScript havolalari joylashadi.

4. — ko'rinadigan mazmun

<body> ("tana") bo'limi — foydalanuvchi ekranda ko'radigan hamma narsani saqlaydi: sarlavhalar, matnlar, rasmlar, tugmalar, havolalar. Sahifaning butun mazmuni aynan shu yerga yoziladi.

title va meta teglari

<head> ichidagi eng muhim ikki narsa — title va meta teglari.

<title> — sahifaning sarlavhasi. U sahifada emas, balki brauzer yorlig'ida (tab) va qidiruv natijalarida ko'rinadi. Yaxshi title yozish — SEO (qidiruv tizimida yaxshi joy olish) uchun juda muhim:

<title>Bosh sahifa — Mening saytim</title>

<meta> teglari — sahifa haqidagi turli xil qo'shimcha ma'lumotlar (metama'lumot). Ular bo'sh teglar (yopuvchisi yo'q). Eng muhim ikkitasi:

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

• <meta charset="UTF-8"> — belgilar kodlashini o'rnatadi. UTF-8 barcha tillardagi harflarni (jumladan o'zbekcha o', g', sh, ch) to'g'ri ko'rsatadi. Busiz matn "krakozyabra" bo'lib ketishi mumkin;
• <meta name="viewport"...> — sahifaning telefon va planshetlarda to'g'ri ko'rinishini ta'minlaydi. Zamonaviy saytlar uchun bu shart.

Birinchi sahifani yozish

Endi hamma bilimni birlashtirib, o'z qo'lingiz bilan haqiqiy sahifa yasaymiz. Quyidagi qadamlarni bajaring:

1. Kompyuteringizda yangi papka yarating (masalan, birinchi-sayt);
2. Matn muharririda (VS Code tavsiya etiladi) yangi fayl yarating;
3. Uni index.html nomi bilan saqlang (kengaytma aynan .html bo'lishi shart);
4. Quyidagi kodni ko'chiring va faylni saqlang;
5. Faylni brauzerda oching (ustiga ikki marta bosing yoki brauzerga tashlang).

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Men haqimda</title>
</head>
<body>
  <h1>Salom! Mening ismim Ali.</h1>
  <p>Men veb-dasturlashni endigina o'rganyapman.</p>
  <p>Bu — mening birinchi veb-sahifam!</p>
</body>
</html>

Brauzerda katta sarlavha va ikkita paragraf ko'rinadi. Yorliqda esa "Men haqimda" yozuvi turadi. Tabriklaymiz — siz endigina o'z birinchi veb-sahifangizni yaratdingiz!

Bo'shliqlar va yangi qatorlar haqida

HTML kodida qancha bo'shliq (probel) yoki yangi qator qo'ymang, brauzer ularni bittaga qisqartiradi. Ya'ni kodda chiroyli tartib uchun bo'shliq qo'ysangiz ham, u sahifaga ta'sir qilmaydi:

<p>Bir     ikki       uch</p>

Bu kod brauzerda "Bir ikki uch" bo'lib, bitta bo'shliq bilan chiqadi. Agar matnni haqiqatan yangi qatordan boshlamoqchi bo'lsangiz, <br> tegini ishlating:

<p>Birinchi qator<br>
Ikkinchi qator</p>

Kommentariylar (izohlar)

HTML'da kodga izoh qoldirish mumkin — bu matn sahifada ko'rinmaydi, faqat kodni o'qiyotgan dasturchi uchun. Izoh <!-- bilan boshlanib, --> bilan tugaydi:

<!-- Bu — sarlavha qismi -->
<h1>Xush kelibsiz</h1>
<!-- Quyida asosiy matn -->
<p>Saytimizga xush kelibsiz.</p>

Izohlar kodning qaysi qismi nima uchun ekanini eslatib turish yoki vaqtincha biror qatorni "o'chirib turish" (izohga o'rab qo'yish) uchun ishlatiladi.

Xulosa

• HTML — veb-sahifalarning tuzilishini tasvirlaydigan belgilash tili (dasturlash tili emas);
• Teg — burchakli qavsdagi belgi (<p>), ular odatda ochuvchi va yopuvchi bo'lib juft keladi;
• Element — ochuvchi teg + mazmun + yopuvchi tegdan iborat to'liq birlik;
• Atribut — tegga qo'shimcha ma'lumot beradi (href="..."), ochuvchi teg ichiga yoziladi;
• Har bir sahifa skeleti: <!DOCTYPE html>, <html>, <head> (ko'rinmaydigan sozlamalar) va <body> (ko'rinadigan mazmun);
• <title> — yorliqdagi sarlavha; <meta charset="UTF-8"> — barcha harflar to'g'ri ko'rinishi uchun majburiy;
• Fayl .html kengaytmasi bilan saqlanadi va brauzerda ochiladi.