Veb-saytlar ko‘pincha kontentni bir nechta ustunda ko‘rsatadi (jurnal yoki gazetadagi kabi).

HTML layout elementlari

HTML da veb-sahifaning turli qismlarini belgilovchi bir nechta semantik elementlar mavjud:

<header> - Hujjat yoki bo‘lim uchun sarlavha qismini belgilaydi
<nav> - Navigatsiya havolalari to‘plamini belgilaydi
<section> - Hujjatdagi bo‘limni belgilaydi
<article> - Mustaqil, o‘z-o‘zidan to‘liq kontentni belgilaydi
<aside> - Asosiy kontentdan alohida turadigan kontentni belgilaydi (masalan, yon panel)
<footer> - Hujjat yoki bo‘lim uchun pastki qismni (footer) belgilaydi
<details> - Foydalanuvchi xohlaganda ochib-yopa oladigan qo‘shimcha tafsilotlarni belgilaydi
<summary> - <details> elementi uchun sarlavhani belgilaydi

<header> — hujjat yoki bo‘lim uchun sarlavha qismini belgilaydi <nav> — navigatsiya havolalari to‘plamini belgilaydi <section> — hujjatdagi bo‘limni belgilaydi <article> — mustaqil, o‘z-o‘zidan to‘liq kontentni belgilaydi <aside> — asosiy kontentdan tashqari kontentni belgilaydi (masalan, yon panel) <footer> — hujjat yoki bo‘lim uchun pastki qismni belgilaydi <details> — foydalanuvchi xohishiga ko‘ra ochib-yopishi mumkin bo‘lgan qo‘shimcha tafsilotlarni belgilaydi <summary> — <details> elementi uchun sarlavha belgilaydi Semantik elementlar haqida batafsil ma’lumotni HTML semantika bobidan o‘qishingiz mumkin.

HTML layout texnikalari

Ko‘p ustunli maketlarni yaratishning to‘rt xil usuli bor. Har bir usulning o‘z afzalliklari va kamchiliklari mavjud:

• CSS freymvorklari
• CSS float xususiyati
• CSS flexbox
• CSS grid

CSS freymvorklari

Sahifa maketini tez yaratmoqchi bo‘lsangiz, W3.CSS yoki Bootstrap kabi CSS freymvorkidan foydalanishingiz mumkin.

CSS float maketi

CSS float xossasi yordamida to‘liq veb-sahifa maketlarini yaratishingiz mumkin. float ni o‘rganish oson — float va clear xossalari qanday ishlashini eslab qolish kifoya. Kamchiliklari: suzuvchi elementlar hujjat oqimiga bog‘liq bo‘lgani uchun maketning moslashuvchanligi cheklanishi mumkin. float haqida CSS float va clear bobimizda ko‘proq bilib oling.

CSS Flexbox maketi

Flexbox’dan foydalanish sahifa maketi turli ekran o‘lchamlari va turli ko‘rsatish qurilmalariga moslashishi kerak bo‘lganda elementlarning oldindan aytib bo‘ladigan tarzda ishlashini ta’minlaydi.

Flexbox haqida ko‘proq bilish uchun bizning CSS Flexbox bobimizga murojaat qiling.

CSS Grid maketi

CSS Grid Layout moduli qator va ustunlarga asoslangan panjara (grid) maket tizimini taklif etadi, bu esa float va joylashtirishdan (positioning) foydalanmasdan veb-sahifalarni loyihalashni osonlashtiradi.

CSS panjaralari (grid) haqida ko‘proq bilish uchun bizning CSS Grid kirish bobimizga murojaat qiling.