MohirDox

Ko'rinishi

HTML Joylash Elementlari va Usullari ​

Veb-saytlar ko‘pincha kontentni bir nechta ustunlarda (masalan, jurnal yoki gazeta kabi) ko‘rsatadi.

Misol ​

html
<header class="sarlavha">
  <h2>Shaharlar</h2>
</header>
<section class="bolim">
  <nav class="navigatsiya">
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Parij</a></li>
      <li><a href="#">Tokio</a></li>
    </ul>
  </nav>
  <article class="maqola">
    <h1>London</h1>
    <p>London — Angliya poytaxti. Bu Buyuk Britaniyaning eng yirik shahri bo‘lib, metropoliten hududida 13 milliondan ortiq aholi yashaydi.</p>
    <p>London Temza daryosi bo‘yida joylashgan. Shahar ikki ming yildan ortiq tarixga ega, uni rimliklar asos solgan va Londinium deb atagan.</p>
  </article>
</section>
<footer class="pastkiqism">
  <p>Pastki qism</p>
</footer>

HTML Joylash Elementlari ​

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

  • <header> — Hujjat yoki bo‘lim uchun sarlavha
  • <nav> — Navigatsiya havolalari to‘plami
  • <section> — Hujjatda bo‘lim
  • <article> — Mustaqil, o‘z-o‘zini ta’riflovchi kontent
  • <aside> — Asosiy kontentdan tashqari (masalan, yon panel)
  • <footer> — Hujjat yoki bo‘lim uchun pastki qism
  • <details> — Foydalanuvchi xohlagan vaqtda ochib-yopishi mumkin bo‘lgan qo‘shimcha tafsilotlar
  • <summary> — <details> elementiga sarlavha

Semantik elementlar haqida batafsil HTML Semantika bobida o‘qishingiz mumkin.

HTML Joylash Usullari ​

Ko‘p ustunli joylashuv yaratish uchun to‘rt xil usul mavjud. Har bir usulning o‘z afzallik va kamchiliklari bor:

  • CSS frameworklar
  • CSS float xossasi
  • CSS flexbox
  • CSS grid

CSS Frameworklar ​

Agar joylashuvni tez yaratmoqchi bo‘lsangiz, W3.CSS yoki Bootstrap kabi CSS frameworklardan foydalanishingiz mumkin.

TIP

W3Schools Spaces haqida eshitganmisiz? Bu yerda siz o‘z veb-saytingizni noldan yaratishingiz yoki shablondan foydalanishingiz va uni bepul joylashtirishingiz mumkin.
Bepul boshlang ❯

CSS Float Joylashuvi ​

Ko‘plab veb-joylashuvlar CSS float xossasi yordamida amalga oshiriladi. Floatni o‘rganish oson — faqat float va clear xossalarini qanday ishlashini eslab qolish kerak.

Kamchiliklari: Float elementlari hujjat oqimiga bog‘langan bo‘ladi, bu esa moslashuvchanlikni cheklashi mumkin. Float haqida batafsil CSS Float va Clear bobida o‘qishingiz mumkin.

Misol ​

html
<header class="sarlavha">
  <h2>Shaharlar</h2>
</header>
<section class="bolim">
  <nav class="navigatsiya">
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Parij</a></li>
      <li><a href="#">Tokio</a></li>
    </ul>
  </nav>
  <article class="maqola">
    <h1>London</h1>
    <p>London — Angliya poytaxti. Bu Buyuk Britaniyaning eng yirik shahri bo‘lib, metropoliten hududida 13 milliondan ortiq aholi yashaydi.</p>
    <p>London Temza daryosi bo‘yida joylashgan. Shahar ikki ming yildan ortiq tarixga ega, uni rimliklar asos solgan va Londinium deb atagan.</p>
  </article>
</section>
<footer class="pastkiqism">
  <p>Pastki qism</p>
</footer>

CSS Flexbox Joylashuvi ​

Flexboxdan foydalanish sahifa joylashuvi turli ekran o‘lchamlari va qurilmalarga moslashganda elementlarning kutilganidek harakat qilishini ta’minlaydi.

Flexbox haqida batafsil CSS Flexbox bobida o‘qishingiz mumkin.

Misol ​

html
<header class="sarlavha2">
  <h2>Shaharlar</h2>
</header>
<section class="bolim2">
  <nav class="navigatsiya2">
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Parij</a></li>
      <li><a href="#">Tokio</a></li>
    </ul>
  </nav>
  <article class="maqola2">
    <h1>London</h1>
    <p>London — Angliya poytaxti. Bu Buyuk Britaniyaning eng yirik shahri bo‘lib, metropoliten hududida 13 milliondan ortiq aholi yashaydi.</p>
    <p>London Temza daryosi bo‘yida joylashgan. Shahar ikki ming yildan ortiq tarixga ega, uni rimliklar asos solgan va Londinium deb atagan.</p>
  </article>
</section>
<footer class="pastkiqism2">
  <p>Pastki qism</p>
</footer>

CSS Grid Joylashuvi ​

CSS Grid Layout Module — satr va ustunlardan iborat grid tizimini taklif qiladi, bu esa veb-sahifalarni float va position xossalarisiz loyihalashni osonlashtiradi.

CSS grid haqida batafsil CSS Grid Kirish bobida o‘qishingiz mumkin.