2-modul · HTML bilan tanishuv

2.1-dars — Bizning birinchi tegimiz: h1

Ushbu darsda biz haqiqiy HTML kod yozishni boshlaymiz. Siz h1 — sahifadagi eng asosiy sarlavha misolida teg nima ekanini bilib olasiz. Va o'zingizning birinchi veb-sahifangizni yaratasiz.

🏷️

Eng oddiysidan boshlaylik

Oldingi darsdan siz allaqachon HTML teglardan iborat ekanini bilasiz. Teg — bu brauzer uchun buyruq. Bugun biz birinchi va eng muhim teg — h1 bilan tanishamiz.

Mana u qanday ko'rinadi:

HTML · Birinchi teg — h1

&lt;h1&gt;Salom, dunyo!&lt;/h1&gt;

Keling, ushbu qatorni harflab tahlil qilamiz. Unda uchta qism bor:

1 Ochuvchi teg: <h1>

Belgi < — burchak qavs tegni ochadi. h1 harflari — teg nomi. Belgi > — burchak qavs tegni yopadi. Hammasi birgalikda: <h1>. Bu brauzerga buyruq: «Diqqat! Hozir eng asosiy sarlavha boshlanadi».

2 Mazmun: Salom, dunyo!

Bu sahifada ko'radigan matningiz. U ochuvchi va yopuvchi teg orasida joylashgan. Brauzer ushbu matnni olib, uni sarlavha sifatida — yirik va qalin qilib ko'rsatadi.

3 Yopuvchi teg: </h1>

Ochuvchidan teg nomi oldidagi qiya chiziq (slesh) bilan farqlanadi: </h1>. Bu brauzerga buyruq: «Sarlavha tugadi, keyin boshqa narsa bo'lishi mumkin». Tegni yopishni unutmang — bu boshlovchilarning tez-tez uchraydigan xatosi!

💡 Nega tegni «konteyner» deb atashadi?

Ovqat uchun plastik konteynerni tasavvur qiling. Uning qopqog'i bor (ochuvchi teg), ichida — ovqat (mazmun), va yana qopqoq (yopuvchi teg). Siz konteynerni ochasiz, ovqat solasiz, yopasiz. HTML teglar ham aynan shunday ishlaydi: <h1> — ochdik, matn qo'ydik, </h1> — yopdik. Yopuvchi tegsiz «konteyner» ochiq qoladi va brauzer sarlavha qayerda tugashini tushunmaydi.

📑

h1 nimani anglatadi

h1 tegidagi h harfi ingliz tilidan tarjimada «sarlavha» ma'nosini bildiruvchi heading so'zini bildiradi. 1 raqami darajani bildiradi. h1 — bu birinchi daraja sarlavhasi, butun sahifadagi eng asosiysi.

Kitobni tasavvur qiling. Kitobning nomi bor (h1), bo'limlarning nomlari (h2), bob ichidagi bo'limchalarning nomlari (h3) va hokazo. h1 — bu butun kitobning nomi. U bitta va faqat bitta bo'lishi kerak. Kitobning ikkita nomi bo'la olmagani kabi, veb-sahifaning ham ikkita asosiy sarlavhasi bo'la olmaydi.

Mana turli darajadagi sarlavhalar brauzerda qanday ko'rinishi:

HTML · Turli darajadagi sarlavhalar

&lt;h1&gt;Kitob nomi&lt;/h1&gt;
&lt;h2&gt;Bob nomi&lt;/h2&gt;
&lt;h3&gt;Bo'lim nomi&lt;/h3&gt;
&lt;h4&gt;Bo'limcha&lt;/h4&gt;
&lt;h5&gt;Band&lt;/h5&gt;
&lt;h6&gt;Bandcha&lt;/h6&gt;

E'tibor bering: h1 — eng yirigi, h6 — eng maydasi. Lekin biz hozircha faqat h1'dan foydalanamiz. Qolgan sarlavhalarni keyingi darsda ko'rib chiqamiz.

⚠️ Muhim qoida: har sahifada bitta h1

Bitta veb-sahifada roppa-rosa BITTA h1 tegi bo'lishi kerak. Faqat bitta. Bu HTML tilining talabi emas, balki yaxshi odob (semantika) qoidasi. Qidiruv tizimlari (Google, Yandex) sahifa nima haqida ekanini tushunish uchun h1'ga qaraydi. Agar h1 bir nechta bo'lsa, qidiruv tizimi chalkashib qoladi. Eslab qoling: bitta sayt — bitta asosiy sarlavha.

👁️

Brauzer sarlavhani qanday ko'rsatadi

Brauzer h1 tegini ko'rganida, u tushunadi: «Bu sahifadagi eng muhim matn. Uni yirik va qalin qilib ko'rsatish kerak». Standart bo'yicha (CSS'siz) brauzer h1'ni juda katta shrift, qalin uslub bilan ko'rsatadi va tepasi hamda pastiga bo'shliqlar qo'shadi.

Mana bu qanday ko'rinadi.

HTML · Kodda nima yozilgan

&lt;h1&gt;Mening birinchi sarlavham&lt;/h1&gt;

Brauzer h1 tegining mazmunini olib, uni katta va qalin sarlavha ko'rinishida ko'rsatadi. <h1> va </h1> orasidagi hamma narsa sarlavhaga aylanadi.

💡 Burchak qavslar haqida

Ushbu sahifadagi misollarda biz <h1> o'rniga <h1> deb yozamiz. Buning sababi shuki, brauzer haqiqiy burchak qavslarni buyruq deb qabul qilar edi. O'z kodingizda oddiy qavslardan foydalanasiz: <h1>.

🚀

Birinchi veb-sahifamizni yaratamiz

Endi — eng qiziqarli qism. Biz faqat BITTA h1 sarlavhasi bo'lgan veb-sahifa yaratamiz. Va bu to'liq qiymatli, ishlaydigan veb-sahifa bo'ladi!

Bosqichma-bosqich ko'rsatma:

VS Code'ni oching. Dasturni ishga tushiring. Agar sizda u bo'lmasa — qanday o'rnatish yozilgan 1.1-darsga qayting.

Yangi fayl yarating: File → New File (Ctrl+N / Cmd+N).

Kod yozing (qo'lda, nusxa ko'chirmang!):

&lt;h1&gt;Salom, bu mening birinchi veb-sahifam!&lt;/h1&gt;

Faylni saqlang: File → Save As... (Ctrl+S / Cmd+S). index.html deb nomlang. Kengaytma .html bo'lishi kerak, .txt emas.

Brauzerda oching: Faylga sichqonchaning o'ng tugmasini bosing → «Ochish usuli» → Chrome. Yoki faylni brauzer oynasiga sudrab olib boring.

Tayyor! Siz «Salom, bu mening birinchi veb-sahifam!» matnini yirik qalin shriftda ko'rasiz. Bu sizning birinchi saytingiz!

💡 Tegni yopmasangiz nima bo'ladi?

Yopuvchi tegsiz <h1>Salom! deb yozib ko'ring. Saqlang, brauzerda oching. Ehtimol, siz baribir sarlavhani ko'rasiz — brauzerlar aqlli va ko'pincha nimani nazarda tutganingizni «taxmin qiladi». Lekin bunga tayanish mumkin emas. Tegimlarni har doim yoping.

✏️

Sarlavha bilan tajriba o'tkazamiz

Endi, birinchi sahifangiz ishlayotgan ekan, keling tajriba o'tkazamiz. h1 tegi ichidagi matnni boshqa narsaga o'zgartiring. Masalan:

&lt;h1&gt;Men saytlar yaratishni o'rganyapman!&lt;/h1&gt;

Faylni saqlang (Ctrl+S) va brauzerdagi sahifani yangilang (F5). Matn o'zgardi! Mana veb-sahifalar qanday oddiy ishlaydi: kodni o'zgartirdik → saqladik → brauzerni yangiladik → yangi natija oldik.

Turli variantlarni sinab ko'ring:

&lt;h1&gt;Hammaga salom!&lt;/h1&gt;

&lt;h1&gt;HTML — bu oddiy!&lt;/h1&gt;

&lt;h1&gt;Mening birinchi sarlavham&lt;/h1&gt;

⚠️ Eslab qoling: har sahifada faqat bitta h1!

Ushbu darsda biz FAQAT bitta h1 tegidan foydalanamiz. Ikkitasini yozmang. Juda xohlasangiz ham. Keyinroq, biz boshqa sarlavhalarni o'rganganimizda, h2, h3 va hokazolarni qo'sha olasiz. Lekin h1 bitta bo'lib qoladi — u aynan shu uchun asosiy!

🤔

Nega teglar shunchalik muhim

Siz so'rashingiz mumkin: «Teglar nima uchun kerak? Nega shunchaki faylga matn yozib, brauzerda ochib bo'lmaydi?» Ajoyib savol! Keling, amaliyotda tekshiramiz.

no-tags.html faylini yarating va unga teglarsiz shunchaki matn yozing:

Salom!
Bu mening teglarsiz sahifam.
Men shunchaki matn yozdim.

Saqlang va brauzerda oching. Siz oddiy matnni ko'rasiz. Brauzer uni bitta qator (yoki qanday saqlaganingizga qarab bir necha qator) sifatida ko'rsatadi. Lekin bu matn — shunchaki matn. Brauzer bu yerda qayeri sarlavha, qayeri abzats ekanini bilmaydi. Uning uchun bu shunchaki so'zlar.

Endi xuddi shu matnni h1 tegi bilan yozing:

<h1>Salom!</h1>

Brauzer h1 tegini ko'radi va tushunadi: «Bu sarlavha! Uni yirik va qalin ko'rsatish kerak, chunki u sahifadagi eng muhimi». Teglar brauzerga ma'no beradi. Teglarsiz — shunchaki matn. Teglar bilan — tuzilmalashtirilgan veb-sahifa.

Teglar yana quyidagilar uchun ham muhim:

🔍 Qidiruv tizimlari — Google sahifa mavzusini tushunish va uni qidiruv natijalarida ko'rsatish uchun h1 tegiga qaraydi.

♿ Qulaylik (accessibility) — skrinriderlar (ko'r odamlar uchun dasturlar) sahifada navigatsiya qilish uchun teglardan foydalanadi.

🎨 Stillar (CSS) — keyinroq biz tashqi ko'rinishini o'zgartirish uchun teglarga stillar qo'llashni o'rganamiz.

🧑‍💻 Dasturchilar — kod teglar bilan yozilganda, uni boshqa dasturchilarga o'qish va tushunish oson.

💡 Eng muhimini eslab qoling

Teglarsiz HTML — bu mundarija, sarlavhalar va abzatslarsiz kitobga o'xshaydi. Ichida yo'nalish topib bo'lmaydigan tinimsiz matn. Teglar ma'lumotni tushunarli va tuzilmalashtirilgan qiladi. Ular «shunchaki matn»ni «veb-sahifa»ga aylantiradi.

⚠️

h1 tegi bilan tez-tez uchraydigan xatolar

❌ 1-xato: Sahifada bir nechta h1

Ba'zi boshlovchilar shunday o'ylashadi: «Katta sarlavha kerak — h1 qo'yaman. Yana bitta katta sarlavha kerak — yana h1 qo'yaman». Bunday qilib bo'lmaydi! h1 bitta bo'lishi kerak. Agar sizga yana bitta yirik sarlavha kerak bo'lsa, h2 yoki h3'dan foydalaning. To'g'risi: bitta h1 + istagancha h2, h3, h4, h5, h6.

❌ 2-xato: Har sahifadagi logotipda h1

Tez-tez uchraydigan xato: sayt logotipini h1 tegi qilib, uni har bir sahifada takrorlash. h1 aynan shu sahifaning noyob mazmunini aks ettirishi kerak, sayt nomini emas. Logotip odatda a yoki span tegi qilib qilinadi, h1 esa joriy sahifaning sarlavhasi uchun ishlatiladi: «Mahsulotlar katalogi», «Kompaniya haqida», «Aloqa».

❌ 3-xato: h1'ni o'tkazib yuborish

Ba'zilar h1 haqida umuman unutib, sahifani darhol h2 yoki p bilan boshlaydi. Bu noto'g'ri: har bir sahifada roppa-rosa bitta h1 bo'lishi kerak. Hatto bu shunchaki «Kompaniya haqida» yoki «Aloqa» bo'lsa ham — bu sizning asosiy sarlavhangiz. Uni o'tkazib yubormang!

❌ 4-xato: O'lchamni o'zgartirish uchun h1'dan foydalanish

«Menga yirik matn kerak, h1 qo'yaman». Bu noto'g'ri. h1 ENG MUHIM sarlavhani belgilash uchun kerak, matnni yirik qilish uchun emas. Shrift o'lchami CSS orqali o'zgartiriladi (biz buni keyinroq o'rganamiz). h1 esa — ma'no haqida, o'lcham haqida emas!

🧩

Eslab qolish uchun o'xshashliklar

📰 Gazeta bilan o'xshashlik

Gazetani tasavvur qiling. Uning nomi bor (h1). Ichida — bo'limlar (h2): «Yangiliklar», «Sport», «Ob-havo». Bo'limlar ichida — maqolalar (h3). Har bir maqola bir necha kichik sarlavhaga ega bo'lishi mumkin (h4). Maqolalarning matni esa — oddiy p abzatslari. Ushbu sarlavhalarsiz gazeta ichida yo'nalish topib bo'lmaydigan matn devoriga o'xshab qolardi. Veb-sahifada ham xuddi shunday!

🏗️ Qurilish bilan o'xshashlik

HTML teglari — bu qurilish bloklariga o'xshaydi. h1 — bu poydevor, eng muhim qism. h2 — bu ko'taruvchi devorlar. h3 — bo'linmalar. p — bu ichki pardoz. Har bir element o'z vazifasini bajaradi. Agar bloklarni chalkashtirsangiz (h3 o'rniga h1 qo'ysangiz), konstruksiya ishonchsiz bo'ladi. Iyerarxiyaga rioya qiling!

✏️

Amaliy topshiriq

📝 1-topshiriq. «Kurs haqida» sahifasi

about-course.html faylini yarating. Unga bitta h1 sarlavhasini yozing: «HTML/CSS kursiga xush kelibsiz». Saqlang va brauzerda oching. Natijadan zavqlaning!

🔍 2-topshiriq. Istalgan saytda h1'ni toping

Istalgan saytni oching, F12'ni bosing, Elements bo'limiga o'ting. h1 tegini toping. Ichidagi matnga qarang. Bu sahifaning asosiy sarlavhasi. DevTools orqali uni o'zgartirib ko'ring (ikki marta bosish → yangi matn).

🧠 3-topshiriq. Agar... nima bo'ladi

Bitta sahifada ikkita h1 yozib ko'ring. Saqlang, oching. Nima bo'ldi? Siz ikkita sarlavhani ko'rdingiz. Brauzer bunga ruxsat beradi, lekin shunday qilish kerak emas. Endi bitta h1'ni o'chirib, avvalgidek qoldiring.

📌

Nimalarni yodda saqlash muhim

1️⃣

Teg — bu brauzer uchun buyruq. Juftlashgan teg ochuvchi, mazmun va yopuvchi qismlardan iborat.

2️⃣

h1 — birinchi daraja sarlavhasi, eng asosiysi. h = heading (sarlavha).

3️⃣

Har sahifada bitta h1. Bu yaxshi odob qoidasi va qidiruv tizimlari uchun muhim.

4️⃣

Teglarni har doim yoping </h1>. Yopilmagan teg sahifani buzishi mumkin.

5️⃣

Ish sikli: kod yozdim → saqladim → brauzerni yangiladim → natijani ko'rdim.

🚀

Tabriklayman!

Siz o'zingizning birinchi veb-sahifangizni yaratdingiz. Bu ulkan qadam! Endi siz teg nima ekanini, h1 qanday ishlashini va brauzerda natijani qanday ko'rishni bilasiz. Keyingi darsda biz bilimlarimizni kengaytiramiz — abzatslar, qator ko'chirish va h1'dan h6'gacha bo'lgan barcha sarlavhalar bilan tanishamiz.

2.2-darsda ko'rishguncha!