Sahifa bo'limlari
@ozbekdasturchi
Sahifaning alohida elementlarini yaratish bilan bir qatorda, HTML sahifangizning sarlavha, altbilgi, navigatsiya menyusi va boshqalar kabi bo'limlarini aniqlash uchun ishlatiladigan blok darajasidagi elementlarni ham taqdim etadi.
Ko'pgina sahifalar o'xshash tuzilishga ega:contentImage
Bu sahifaning umumiy tuzilishi. Sizning sahifangiz tuzilishi har xil bo'lishi mumkin, ammo u har doim o'xshash "qutiga o'xshash" elementlar to'plami bo'ladi.
ℹ️ Esingizda bo'lsin, HTML5 tegishli HTML sahifa tuzilishiga erishish uchun qo'shimcha yangi semantik teglarni taqdim etdi.
HTML5 - bu World Wide Webda tarkibni tuzish va taqdim etish uchun ishlatiladigan belgilash tili. Bu World Wide Web Consortium (W3C) tavsiyasi boʻlgan beshinchi va oxirgi yirik HTML versiyasidir. Joriy spetsifikatsiya HTML Living Standard sifatida tanilgan.
Sarlavha
Veb-sayt sarlavhasi odatda sahifaning yuqori qismidagi bo'lim bo'lib, u logotip, nom va shunga o'xshash boshqa elementlarni o'z ichiga olishi mumkin.
Bundan tashqari, u odatda veb-saytning turli sahifalari o'rtasida taqsimlanadi.
Sarlavha qismini belgilash uchun <header> tegidan foydalaning:
Sarlavha boshqa HTML elementlarini, masalan, rasmlar, havolalar va boshqalarni o'z ichiga olishi mumkin.
Faylingiz yoki hujjatingiz haqidagi ma'lumotlarni (masalan, veb-sayt nomi, til, belgilangan CSS varaqlari va boshqalar) o'z ichiga olgan <head> tegi bilan adashtirmaslik kerak!
Xuddi shunga o'xshash tarzda HTML-dagi <header> tegi hujjat sarlavhasini aniqlash uchun ishlatiladi, chunki unda tegishli tarkibning sarlavhasi va sarlavhasi bilan bog'liq ma'lumotlar mavjud.
<header> HTML elementi kirish mazmunini, odatda kirish yoki navigatsiya vositalari guruhini ifodalaydi.
Navigatsiya paneli
Navigatsiya panelida veb-saytingizning boshqa sahifalariga olib boradigan havolalar yoki tugmalar mavjud.
U <nav> tegi yordamida aniqlanadi:
Navigatsiya menyusi sarlavhaning bir qismi bo'lishi va boshqa har qanday HTML elementlarini o'z ichiga olishi mumkin.
<nav> elementlarida havolalar yoki tugmalar boʻlishi mumkin
Asosiy tarkib
Sahifaning asosiy mazmuni <main> tegi yordamida aniqlanadi, u <article> va <section> teglari bilan ifodalangan turli bo'limlarni o'z ichiga olishi mumkin.
<article> sahifaning qolgan qismisiz, masalan, blog postisiz o'z-o'zidan ma'noga ega bo'lgan kontent blokini o'z ichiga oladi.
Sahifada bitta <main> element bo'lishi kerak.
Yuqoridagi sahifa quyidagicha tuzilgan:- <main> <article> <p>Ba'zi tarkiblar</p> </article> </main> p. Sahifani ishlab chiquvchi mos deb bilgan holda tuzilishi mumkin. Masalan, ba'zi hollarda <article> tegi <p> tegidan oldin kelishi mumkin.
Maqola va bo'lim
<article> <section> ga o'xshaydi, lekin u xarita yoki sarlavhalar to'plami kabi bitta funksional qismni tashkil etuvchi sahifaning bitta qismini guruhlash uchun ishlatiladi.
Har bir bo'limni sarlavha bilan boshlash eng yaxshi amaliyot hisoblanadi.
Maqola elementi turli bo'limlarga ega bo'lishi mumkin va bo'lim turli maqolalarni o'z ichiga olishi mumkin. Bularning barchasi sahifangizning tuzilishi va mazmuniga bog'liq.
Bir chetga
<aside> elementi asosiy tarkibga bevosita bogʻliq boʻlmagan, lekin tegishli havolalar yoki shunga oʻxshash maqolalar kabi qoʻshimcha maʼlumotlarni taqdim etishi mumkin boʻlgan tarkibni aniqlash uchun ishlatiladi.
Altbilgi
Sahifaning oxirida altbilgi keladi. U havolalar, mualliflik huquqi eslatmalari va hokazolarni o'z ichiga olishi mumkin va <footer> tegi yordamida yaratilgan:
Sarlavhaga o'xshab, altbilgi odatda veb-saytning turli sahifalarida taqsimlanadi.
Shunday qilib, sarlavha va altbilgi odatda veb-saytning turli sahifalarida bir xil, ammo asosiy tarkib boshqacha.
Xuddi sarlavha tegi kabi..... HTML tilidagi <footer> tegi HTML hujjatining pastki kontentni aniqlash uchun ishlatiladi. Ushbu bo'limda muallif ma'lumotlari, mualliflik huquqi ma'lumotlari, xizmatlar va boshqalar kabi pastki qism ma'lumotlari mavjud.
Esda tuting: sarlavha veb-saytingiz nomi va logotipiga ega bo'lgan qismdir. Navigatsiya sizni veb-saytingizning turli qismlari yoki bo'limlariga (uy, kontent, haqida va hokazo) yuboradigan havolalarga ega bo'lgan joydir. Asosiysi, siz o'zingizning haqiqiy tarkibingizni qaerga joylashtirasiz. Va nihoyat, altbilgi sahifaning pastki qismiga maxsus havolalarni qo'yadigan joy. Bu to'g'ri tartib.
Sahifa bo'limlari
Elementlarni hech qanday aniq ma'noga ega bo'lmagan holda guruhlashni xohlagan holatlarda siz <div> tegidan foydalanishingiz mumkin.
<div> blok darajasidagi element bo'lib, boshqa elementlar uchun konteyner vazifasini bajaradi.
Konteynerdagi elementlarni uslublash uchun CSS-dan qanday foydalanishni keyingi modulda ko'rib chiqamiz.
Sarlavhalar ichida divlardan foydalanishga harakat qiling va agar siz semantik tegdan foydalansangiz, masalan, <nav>, <article>, <header> va hokazo. Boshqacha qilib aytganda, iloji boricha divs o'rniga semantik teglardan foydalaning. Kodni tushunishni qiyinlashtiradigan ko'plab divlar HTML 4 ("div-itis") da katta muammo edi. HTML 5 bizga semantik teglarni berdi va biz imkon qadar ulardan foydalanishimiz kerak.
div veb-ishlab chiqishda eng keng tarqalgan teglardan biridir. Ular kelajakda juda foydali bo'ladi, ayniqsa to'g'ri uslublash uchun ularga turli identifikatorlarni kiritishingiz mumkin bo'lgan CSS-da.
Biz bir nechta <div> tegidan foydalanishimiz mumkin. Div tegi Division tegi sifatida tanilgan. U HTML-da veb-sahifadagi tarkibni bo'linish uchun ishlatiladi
Sahifa bo'limlari
Ushbu elementlarning barchasi sahifani tuzish uchun ishlatiladi.
Ular hech qanday uslub yoki formatlashni qo'shmaydi, lekin veb-saytning mazmuni va boshqa elementlarini o'z ichiga olgan ko'rinmas "qutilarni" ifodalaydi.
Sahifaning to'g'ri tuzilishini yaratish juda muhim, chunki qidiruv tizimlari va ekranni o'qiydiganlar undan sahifa mazmunini o'qish va uning tuzilishini tushunish uchun foydalanadilar.
Keyingi modulda sahifani uslublash uchun CSS-dan qanday foydalanishni ham ko'rib chiqamiz.
SEO (Search Engine Optimization) uchun to'g'ri veb tuzilmasiga rioya qilish muhim, bu qidiruv tizimlariga veb-saytingizni (masalan, Google) tahlil qilishda yordam beradi. Agar kimdir "Veb ishlab chiqish uchun qaysi kursni o'tashim kerak?" deb qidirsa, Google so'rov asosida internetda mavjud veb-saytlarni tahlil qiladi. Agar veb-saytingiz to'g'ri tuzilgan bo'lmasa, u natijalarda paydo bo'lmasligi mumkin.
Siz uchun saralangan maqolalar:
Html listlar haqida ma`lumotlar:
https://telegra.ph/Html-listlar-by-ozbekdasturchi-03-23
https://teletype.in/@ashurovblog/GML
https://teletype.in/@ashurovblog/CharlesGoldfrab