عناصر و تکنیک‌های چیدمان در HTML

وب‌سایت‌ها اغلب محتوا را در چندین ستون نمایش می‌دهند (مانند یک مجله یا روزنامه).

مثال

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

عناصر چیدمان در HTML

 

HTML چندین عنصر معنایی (semantic) دارد که بخش‌های مختلف یک صفحه وب را تعریف می‌کنند:

• <header> - یک سربرگ (header) برای یک سند یا یک بخش تعریف می‌کند.

• <nav> - مجموعه‌ای از لینک‌های ناوبری (navigation) را تعریف می‌کند.

• <section> - یک بخش (section) در یک سند تعریف می‌کند.

• <article> - یک محتوای مستقل و خودکفا (self-contained) را تعریف می‌کند.

• <aside> - محتوایی را تعریف می‌کند که در کنار محتوای اصلی قرار می‌گیرد (مانند نوار کناری یا sidebar).

• <footer> - یک پاورقی (footer) برای یک سند یا یک بخش تعریف می‌کند.

• <details> - جزئیات اضافه‌ای را تعریف می‌کند که کاربر می‌تواند در صورت نیاز آن را باز و بسته کند.

• <summary> - یک عنوان برای عنصر <details> تعریف می‌کند.

تکنیک‌های چیدمان در HTML

 

چهار تکنیک مختلف برای ایجاد چیدمان‌های چند ستونی وجود دارد. هر تکنیک مزایا و معایب خاص خود را دارد:

• فریم‌ورک CSS

• خاصیت float در CSS

• فلکس‌باکس (CSS flexbox)

• گرید (CSS grid)

چیدمان با CSS Float

ایجاد کامل چیدمان‌های وب با استفاده از خاصیت float در CSS امری رایج است. یادگیری Float آسان است - فقط کافیست به خاطر بسپارید که خواص float و clear چگونه کار می‌کنند. معایب: عناصر شناور (Floating) به جریان سند گره خورده‌اند که این موضوع ممکن است به انعطاف‌پذیری آسیب بزند. در فصل «CSS Float and Clear» ما، اطلاعات بیشتری در مورد float بیاموزید.

مثال

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

چیدمان با CSS Flexbox

استفاده از فلکس‌باکس (flexbox) تضمین می‌کند که عناصر زمانی که چیدمان صفحه باید با اندازه‌های مختلف صفحه نمایش و دستگاه‌های نمایش متفاوت سازگار شود، به طور قابل پیش‌بینی رفتار کنند.

در فصل «CSS Flexbox» ما، اطلاعات بیشتری در مورد فلکس‌باکس بیاموزید.

مثال

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

چیدمان با CSS Grid

ماژول چیدمان گرید در CSS یا (CSS Grid Layout Module) یک سیستم چیدمان مبتنی بر گرید (شبکه)، با سطرها و ستون‌ها، ارائه می‌دهد که طراحی صفحات وب را بدون نیاز به استفاده از floatها و موقعیت‌دهی (positioning) آسان‌تر می‌کند.