100% کامل شده تا

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

از موتو کد، دانشنامهٔ برنامه‌نویسی


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


Responsive demo.svg


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

HTML دارای چندین عنصر معنایی است که قسمت‌های مختلف یک صفحه وب را تعریف می‌کند:

عناصر چیدمان در HTML
  • <header> - یک عنوان برای سند یا یک بخش تعریف می‌کند
  • <nav> - مجموعه ای از لینک‌های ناوبری (navigation) را تعریف می‌کند
  • <section> - قسمتی را در یک سند تعریف می‌کند
  • <article> - محتوای مستقل و جامع را تعریف می‌کند
  • <aside> - محتوای کنار محتوا را مشخص می‌کند (مانند sidebar (به فارسی: نوار کناری))
  • <footer> - برای سند یا بخش، پاورقی تعریف می‌کند
  • <details> - جزئیات بیشتری را تعریف می‌کند که کاربر می‌تواند در صورت نیاز، باز و بسته کند
  • <summary> - یک عنوان برای عنصر <details> تعریف می‌کند

نکته نکته: می‌توانید در فصل معناشناسی HTML، در مورد عناصر معنایی (Semantics) بیشتر بخوانید.



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

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





چارچوب‌های CSS

اگر می‌خواهید چیدمان‌های خود را سریع ایجاد کنید، می‌توانید از یک چارچوب CSS مانند W3.CSS یا Bootstrap استفاده کنید.



چارچوب Float در CSS

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

Responsive demo.svg


چارچوب Flexbox در CSS

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

در مورد flexbox در بخش CSS Flexbox بیشتر بیاموزید.
Responsive demo.svg


چارچوب Grid در CSS

ماژول CSS Grid Layout یک سیستم طرح بندی مبتنی بر شبکه، با ردیف‌ها و ستون‌ها را پیشنهاد می‌دهد و طراحی صفحات وب را بدون نیاز به استفاده از floatها و مکان‌یابی آسان‌تر می‌کند.

در بخش معرفی CSS Grid در شبکه‌های CSS بیشتر بیاموزید.

منابع آموزشی




به‌روزرسانی شده: ۳۷ روز پیش