آشنایی با Layout در HTML

• 1 عناصر یک layout در HTML
  • 1.1 مثال استفاده از Layout
• 2 تکنیک های استفاده از layout در HTML
• 3 جدول های HTML
• 4 فریم ورک css
• 5 خاصیت float در css
• 6 قابلیت css flexbox
• 7 گرید در css

عناصر یک layout در HTML

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

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

نسخه HTML5 عناصر جدیدی برای تعریف بخش های مختلف صفحات وب دارند. این اجزا شامل موارد زیر هستند:

• <header> – یک هدر برای صفحه یا یک section تعریف می کند.
• <nav> – برای تعریف یک نگهدارنده جهت لینک های ناوبری
• <section> – تعریف یک بخش جدید در صفحه
• <article> – یک نگهدارنده خود مختار برای تعریف یک مقاله مستقل
• <aside> – تعریف محتوا در کنار محتوای دیگر (مانند سایدبار)
• <footer> – تعریف یک فوتر برای یک صفحه یا بخش
• <details> – تعریف بخش جزییات بیشتر
• <summary> – تعریف یک heading برای تگ <details>

مثال استفاده از Layout

در قطعه کد زیر، مثالی از استفاده از layout ها را مشاهده می‌کنید که تمامی المان های عادی یک صفحه در آن رعایت شده است.

تکنیک های استفاده از layout در HTML

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

• جدول های  HTML  (توصیه نمی شود)
• خاصیت float در css
• قابلیت flexbox در css
• فریم ورک css
• گرید های css

کدام یک را انتخاب کنیم؟ در ادامه با این موارد به صورت کوتاه آشنا می‌شویم.

جدول های HTML

عنصر <table> موجود در  HTML برای طراحی layout طراحی نشده است و استفاده از آن توصیه نمی‌شود.

هدف از جدول در  HTML نمایش اطلاعات در یک روش ساختار یافته است. بنابراین استفاده از آن ها در طراحی layout صفحات هوشمندانه نیست. استفاده از آن ها باعث بروز یک فاجعه در کد ها می شود. تصور کنید طراحی دوباره یک صفحه که در آن از جدول برای layout استفاده شده است چقدر مشکل خواهد بود.

فریم ورک css

اگر قصد دارید در کمترین زمان ممکن یک layout ایجاد کنید، استفاده از فریم ورک css  بهترین گزینه است. محبوب ترین فریم ورک های موجود w3.css یا bootstrap هستند.

خاصیت float در css

یکی از رایج ترین گزینه طراحی layout استفاده از این گزینه است. خاصیت float برای یادگیری و استفاده آسان است. تنها چیزی که برای استفاده از این گزینه باید بدانید، نحوه کار با خاصیت های float و clear است.

معایب: خاصیت float در css به صفحه گره می خورد، که این مسئله باعث بروز مشکلاتی در انعطاف پذیری صفحه خواهد شد.

قابلیت css flexbox

قابلیت flexbox در نسخه css3 جدید است.

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

گرید در css

قابلیت grid موجود در css یک سیستم گرید محور که به ردیف و ستون های مختلف تقسیم شده است را ارائه می دهد. استفاده از این سیستم باعث آسانتر شدن طراحی صفحات وب بدون استفاده از خاصیت float و موقعیت دهی می شود.

معایب: در مرورگر های IE یا edge نسخه 15 به قبل کار نخواهد کرد.

نتیجه گیری

در این مقاله با layout در  HTML  آشنا شدیم و متوجه شدیم که چگونه صفحات در  HTML تقسیم بندی می‌شوند.

تا جلسه بعدی خدا نگهدار