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

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

بهزاد میرزازاده بهزاد میرزازاده

زمان مطالعه

3 دقیقه

بازدید

275

پرسش و پاسخ

0
عناصر و تکنیک های چیدمان یا ستون بندی در HTML

مثال: در زیر نمونه ای از سایت های چند ستونه است را برای شما آورده ایم.

سایت چند ستونه با html

چیدمان عناصر یا ستون بندی صفحه در HTML

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

چیدمان عناصر یا ستون بندی صفحه در HTML

  • Header : یک سربرگ برای یک سند یا یک بخش تعریف می کند.
  • Nav : موجموعه ای از پیوند های ناوبری را تعریف می کند. (نوار منوی بالای وب سایت ها)
  • Section : یک بخش را در یک سند تعریف می کند.
  • Article : محتوای مستقل را به صورت مستقل تعریف می کند.
  • Aside : محتوایی جدای از محتوای اصلی تعریف می کند (مانند sidebar)
  • Footer : یک پاورقی برای سند یا یک بخش تعریف می کند.
  • Details : جزئیات بیشتری را تعریف می کند که کاربر در صورت درخواست می تواند آن را باز و بسته کند.
  • Summary : عنوان عنصر details را مشخص می کند.

در مقالات بعدی در مورد تگ های معنایی HTML بیشتر آشنا خواهید شد.

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

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

  • 1-CSS Framework
  • 2-CSS Float Property
  • 3-CSS Flexbox
  • 4-CSS Grid

تکنیک CSS Framework (فریمورک های CSS)

اگر می خواهید طرح چیدمان عناصر خود را سریع ایجاد کنید، می توانید از یک چهارچوب سی اس اس مانند UIkit و یا Bootstrap استفاده کنید.

نحوه چیدمان در HTML تکنیک CSS Framework (فریمورک های CSS)

تکنیک CSS Float Layout

نحوه چیدمان در HTML تکنیک CSS Float Layout

معمول است که تمام طرح بندی های وب را با استفاده از CSS Float انجام دهیم.

یادگیری float بسیار آسان است – فقط باید به خاطر بسپارید که ویژگی های float و clear چگونه کار می کنند.

معایب: عناصر شناور به جریان سند متصل هستند که ممکن است به انعطاف پذیری سایتتان اسیب برساند.

تکنیک CSS-Flexbox

نحوه چیدمان در HTML تکنیک CSS-Flexbox

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

در مقالات آموزشی آینده بیشتر راجع به Flexbox صحبت خواهیم کرد.

تکنیک CSS Grid

نحوه چیدمان در HTML تکنیک CSS Grid

ماژول CSS Grid Layout یک سیستم طرح بندی مبتنی بر شبکه با ردیف ها و ستون ها ارائه می دهد و طرح صفحات وب را بدون نیاز به استفاده از شناورها و موقعیت یابی آسان می کند.