2.2-dars — Matn va sarlavhalar: p, h1–h6
Ushbu darsda biz abzatslarni, qator ko'chirishni, h1'dan h6'gacha barcha sarlavhalarni, izohlarni o'rganamiz va matnli sahifalar yaratishni o'rganamiz.
Ushbu darsda nimalarni bilib olamiz
Oldingi darsda biz h1 sarlavhasini yaratishni o'rgandik. Endi imkoniyatlarimizni kengaytirish vaqti keldi. Ushbu darsda biz to'rtta yangi narsa bilan tanishamiz:
Boshqa hech qanday teglar yo'q! Faqat p, br, h1–h6 va izohlar. Biz kichik qadamlar bilan o'rganamiz.
p tegi — matn abzatsi
p harfi ingliz tilidan tarjimada «abzats» ma'nosini bildiruvchi paragraph so'zini anglatadi. p tegi — veb-sahifadagi matn uchun eng asosiy teg. Saytlarda ko'radigan deyarli har qanday matn p teglari ichida joylashgan.
Mana u qanday ko'rinadi:
<h1>Mening birinchi saytim</h1>
<p>Bu mening birinchi matn abzatsim. Men veb-sahifalar yaratishni endigina o'rganyapman.</p>Qismlarga bo'lib ko'ramiz:
<p> — brauzerga aytadi: «Hozir abzats boshlanadi».</p> — brauzerga aytadi: «Abzats tugadi».Brauzer abzatsni qanday ko'rsatadi? U uni yangi qatordan boshlaydi va tepasi hamda pastiga kichik bo'shliq qo'shadi. Agar sizda ikkita abzats bo'lsa, ular orasida bo'sh joy bo'ladi — bu normal, shunday bo'lishi kerak.
<p>Bu birinchi abzats. U muhim biror narsa haqida gapiradi.</p>
<p>Bu esa ikkinchi abzats. U fikrni davom ettiradi yoki yangisini boshlaydi.</p>Ikki abzatsli fayl yaratib ko'ring. Saqlang, brauzerda oching. Siz bir-biridan bo'sh joy bilan ajratilgan ikkita matn blokini ko'rasiz.
💡 Abzats — bu blokli element
«Blokli» degani u sahifaning butun kengligini egallaydi va yangi qatordan boshlanadi degani. Devordagi g'ishtlarni tasavvur qiling: har bir g'isht — bu bitta blokli element. Ular ketma-ket, har biri yangi qatordan qo'yiladi. Eslab qoling: p, h1–h6 — bu blokli elementlar. Ular har doim yangi qatordan boshlanadi.
br tegi — qator ko'chirish
br harflari ingliz tilidan tarjimada «qator uzilishi» ma'nosini bildiruvchi line break so'zini anglatadi. Ushbu teg matnni keyingi qatorga ko'chiradi. U yagona (o'z-o'zini yopuvchi) — uning yopuvchi tegi yo'q.
Mana u qanday ko'rinadi:
<p>
O'zbekiston, Toshkent sh., Amir Temur ko'chasi, 10-uy<br>
Telefon: +998 (90) 123-45-67<br>
Email: info@example.com
</p>Ushbu misolda manzil bitta p abzatsida yozilgan, lekin br yordamida biz uni uchta qatorga bo'ldik. br'siz butun matn bitta uzun qator bo'lardi.
Muhim! br tegi — yagona. U yopuvchi tegni talab qilmaydi. Qatorni ko'chirish kerak bo'lgan joyga shunchaki <br> yozing. Ba'zan eski darsliklarda <br /> deb yoziladi — bo'shliq va slesh bilan. Bu ham to'g'ri, lekin HTML5'da shunchaki <br> deb yozish mumkin.
⚠️ Abzatslar orasidagi bo'shliqlar uchun br'dan foydalanmang!
Ba'zan boshlovchilar shunday yozishadi: <p>Matn</p><br><br><p>Yana matn</p> — bunday qilib BO'LMAYDI. Abzatslar orasidagi bo'shliqlarni brauzer avtomatik qo'shib beradi. br esa faqat bitta abzats ichida qatorni ko'chirish uchun kerak. Agar sizga ko'proq bo'shliq kerak bo'lsa — bu bilan CSS shug'ullanadi, lekin unga hali yetib kelamiz.
br qayerda ishlatiladi?
💡 Yagona va juftlashgan teglar
HTML'dagi ko'pchilik teglar juftlashgan (ochuvchi va yopuvchi mavjud). Lekin yagonalari ham bor: br (qator ko'chirish), hr (gorizontal chiziq), img (rasm), input (kiritish maydoni). Yagona teglarga yopuvchi teg kerak emas, chunki ularda mazmun yo'q. Ular o'z-o'zicha nimadir qiladi yoki ko'rsatadi.
h1, h2, h3, h4, h5, h6 sarlavhalari
Oldingi darsda biz h1 — eng asosiy sarlavhani o'rgandik. Lekin HTML'da sarlavhalarning to'liq oltita darajasi bor: h1'dan (eng muhimi) h6'gacha (eng maydasi). Mana ularning barchasi:
<h1>Sahifaning asosiy sarlavhasi</h1>
<h2>Bo'lim sarlavhasi</h2>
<h3>Bo'limcha sarlavhasi</h3>
<h4>Band sarlavhasi</h4>
<h5>Bandcha sarlavhasi</h5>
<h6>Eng kichik sarlavha</h6>Brauzerda ular turlicha ko'rinadi: h1 — eng yirigi va qalini, h6 — eng maydasi. Lekin eslab qoling: o'lcham muhim emas! Sarlavhalarning tashqi ko'rinishini CSS yordamida o'zgartirish mumkin. Aynan iyerarxiya — ya'ni ma'noviy ichma-ichlik muhim.
Mana maqola misolida to'g'ri iyerarxiya qanday ko'rinishi:
<h1>Non qanday pishiriladi</h1>
<h2>Ingredientlar</h2>
<h3>Xamir uchun</h3>
<h3>Ichlik uchun</h3>
<h2>Tayyorlash</h2>
<h3>Xamir qorish</h3>
<h3>Ichlik tayyorlash</h3>
<h3>Pishirish</h3>
<h4>Harorat va vaqt</h4>
<h2>Dasturxonga tortish</h2>Iyerarxiyani ko'ryapsizmi? h1 — butun retsept nomi. h2 — yirik bo'limlar (ingredientlar, tayyorlash, dasturxonga tortish). h3 — ichidagi bo'limchalar (xamir uchun, ichlik uchun va h.k.). h4 — yanada maydaroq bo'limcha. Bu kitobga o'xshaydi: kitob nomi (h1) → bob nomlari (h2) → paragraf nomlari (h3) → kichik paragraflar (h4).
💡 Sarlavhalar iyerarxiyasi qoidalari
1. Har sahifada bitta h1. Faqat bitta. Kitobda bitta nom bo'lgani kabi.
2. Darajalarni o'tkazib yubormang. h1'dan keyin h2, keyin h3 va hokazo keladi. h1 → h4 → h2 qilib qilmang. Bu ham qidiruv tizimlarini, ham o'quvchilarni chalkashtiradi.
3. Darajalarni o'tkazib yuborish mumkin, agar bu asoslangan bo'lsa. Masalan, h1'dan keyin darhol h3 kelsa, bu g'alati. Lekin h1 → h2 → h4 bo'lsa — bu allaqachon noto'g'ri. O'tkazib yuborish faqat shunday kerak deb ishonchingiz komil bo'lsa mumkin.
4. Matn o'lchamini o'zgartirish uchun sarlavhalardan foydalanmang. Agar sizga shunchaki yirik matn kerak bo'lsa — bu h3 olish uchun sabab emas. O'lchamni o'zgartirish uchun CSS bor. Sarlavhalar MA'NO uchun kerak, tashqi ko'rinish uchun emas.
⚠️ Nega sarlavhalar iyerarxiyasi muhim
Qidiruv tizimlari (Google, Yandex) sahifaning tuzilmasi va mazmunini tushunish uchun undagi sarlavhalarni tahlil qiladi. Agar iyerarxiya to'g'ri bo'lsa — sayt qidiruvda yaxshiroq o'rin oladi. Shuningdek, skrinriderlar (ko'r odamlar uchun dasturlar) sahifada navigatsiya qilish uchun sarlavhalardan foydalanadi. To'g'ri iyerarxiya — bu shunchaki «yaxshi odob» emas, balki foydalanuvchilar va SEO haqida g'amxo'rlik.
Sarlavhalar va abzatslar bilan sahifa yaratamiz
Endi keling, o'rgangan hamma narsamizdan foydalanib, to'liq qiymatli sahifa yarataylik: sarlavhalar, abzatslar va qator ko'chirishlar.
Bosqichma-bosqich ko'rsatma:
<h1>Mening birinchi to'liq qiymatli saytim</h1>
<p>Salom! Mening ismim Alisher, va bu mening matnli birinchi veb-sahifam. Men saytlar yaratishni o'rganyapman.</p>
<h2>Nimani o'rganyapman</h2>
<p>HTML/CSS kursida men veb-sahifalar qanday tuzilganini o'rganyapman. Hozircha men sarlavhalar va abzatslarni bilaman.</p>
<h3>Sarlavhalar</h3>
<p>HTML'da h1'dan h6'gacha sarlavhalar bor. h1 — eng asosiysi, h6 — eng kichigi.</p>
<h3>Abzatslar</h3>
<p>Abzatslar p tegi bilan yaratiladi. Ular oddiy matn uchun kerak. Abzatslar orasida brauzer o'zi bo'shliqlar qo'shadi.</p>
<h2>Mening kontaktlarim</h2>
<p>
Email: alisher@example.com<br>
Telefon: +998 (90) 123-45-67<br>
Shahar: Toshkent
</p>my-site.html deb saqlang (File → Save As...).
💡 Iyerarxiyani tekshiring
Sahifaga brauzerda qarang. Sarlavhalar abzatslarga qaraganda yirikroq va qalinroq ko'rinadi. h1 h2'dan katta, h2 esa h3'dan katta. Bu to'g'ri iyerarxiya. Agar biz h1'dan keyin darhol h2 yozib, keyin yana h1 yozganimizda — bu noto'g'ri bo'lardi.
HTML'da izohlar
Izohlar — bu faqat sizga (dasturchiga) ko'rinadigan, lekin sahifada foydalanuvchilarga ko'rinmaydigan matn. Ular kodni tushuntirish, sahifaning qismlarini vaqtincha o'chirib qo'yish yoki o'zingiz va boshqa dasturchilar uchun eslatmalar uchun kerak.
Izoh <!-- bilan boshlanadi va --> bilan tugaydi. Ular orasidagi hamma narsani brauzer e'tiborsiz qoldiradi.
<h1>Sarlavha</h1>
<p>Matn abzatsi</p>
<!-- <p>Bu abzats vaqtincha o'chirilgan</p> -->Izohlar juda foydali:
<!-- "Kompaniya haqida" bo'limi — boshlanishi -->
⚠️ Izohlarda parollarni qoldirmang
Izohlar sahifaning manba kodida ko'rinadi! Har kim sizning HTML faylingizni ochib, izohlarni o'qishi mumkin. Istalgan sahifada Ctrl+U'ni bosing — siz butun HTML kodini, jumladan izohlarni ham ko'rasiz. Izohlarda hech qachon parollar, API kalitlari, shaxsiy ma'lumotlarni yozmang.
Sahifamizga izohlar qo'shamiz
Keling, my-site.html faylimizga izohlar qo'shamiz, shunda u tushunarliroq bo'ladi. Uni shunday tahrirlang:
<h1>Mening birinchi to'liq qiymatli saytim</h1>
<p>Salom! Mening ismim Alisher, va bu mening matnli birinchi veb-sahifam. Men saytlar yaratishni o'rganyapman.</p>
<h2>Nimani o'rganyapman</h2>
<p>HTML/CSS kursida men veb-sahifalar qanday tuzilganini o'rganyapman. Hozircha men sarlavhalar va abzatslarni bilaman.</p>
<h3>Sarlavhalar</h3>
<p>HTML'da h1'dan h6'gacha sarlavhalar bor. h1 — eng asosiysi, h6 — eng kichigi.</p>
<h3>Abzatslar</h3>
<p>Abzatslar p tegi bilan yaratiladi. Ular oddiy matn uchun kerak. Abzatslar orasida brauzer o'zi bo'shliqlar qo'shadi.</p>
<h2>Mening kontaktlarim</h2>
<p>
Email: alisher@example.com<br>
Telefon: +998 (90) 123-45-67<br>
Shahar: Toshkent
</p>Saqlang va brauzerdagi sahifani yangilang. Tashqi tomondan hech narsa o'zgarmadi — izohlar ko'rinmaydi. Lekin endi kod tushunarliroq bo'ldi. Agar siz ushbu faylni yarim yildan keyin ochsangiz, izohlar bo'yicha darhol yo'nalishni topasiz.
Amaliy topshiriq
📝 1-topshiriq. O'zim haqimda sahifa
about-me.html faylini yarating. Quyidagi tuzilmaga ega o'zingiz haqingizda sahifa yozing:
h1 — «Men haqimda»
p — abzats: siz kimsiz, necha yoshdasiz, nima bilan shug'ullanasiz
h2 — «Mening qiziqishlarim»
p — hobbilaringiz haqida abzats
h2 — «Nega men veb-dasturlashni o'rganyapman»
p — motivatsiyangiz haqida abzats
h3 — «Mening maqsadlarim»
p — nimaga erishmoqchi ekaningiz haqida abzats
Har bir bo'limni tushuntiruvchi izohlar qo'shing.
🔍 2-topshiriq. Sahifani DevTools orqali tadqiq qiling
O'z sahifangizni brauzerda oching, F12'ni bosing, «Elements» bo'limini toping. Siz o'z HTML kodingizni ko'rasiz. Izohlarni ko'ryapsizmi? Ular kulrang rangda ko'rsatiladi. Biror sarlavha yoki abzatsni to'g'ridan-to'g'ri DevTools'da o'zgartirib ko'ring — matnni ikki marta bosing.
🧠 3-topshiriq. Iyerarxiyadagi xatolarni toping
Kimdir shunday kod yozganini tasavvur qiling:
<h1>Kitob</h1>
<h3>1-bob</h3>
<h5>1-paragraf</h5>
<h2>2-bob</h2>
Bu yerda nima noto'g'ri? Javobingizni HTML faylingizdagi izohga yozib qo'ying.
Nimalarni yodda saqlash muhim
<!-- —— >. Sahifada ko'rinmaydi. Tushuntirishlar va eslatmalar uchun.Ajoyib ish!
Endi siz sarlavhalar, abzatslar, qator ko'chirish va izohlar bilan sahifalar yaratishni bilasiz. Siz sarlavhalar iyerarxiyasini bilasiz va bu nima uchun muhimligini tushunasiz. Keyingi darsda biz ro'yxatlar va havolalarni o'rganamiz — istalgan veb-sahifaning yana ikkita muhim elementini.
Ko'rishguncha!