عناصر و تکنیک های چیدمان در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

175

تعداد پرسش ها

افزودن به لیست علاقه مندی ها

برچسب ها :

اشتراک گذاری این مطلب

دسته بندی مطالب

عناصر و تکنیک های چیدمان در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

175

تعداد پرسش ها

افزودن به لیست علاقه مندی ها

برچسب ها :

اشتراک گذاری این مطلب

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

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

سایت چند ستونه با 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)

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

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

تکنیک CSS Float Layout

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

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

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

تکنیک CSS-Flexbox

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

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

تکنیک CSS Grid

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

در مقالات آموزشی آینده در این مورد نیز بیشتر با شما حرف خواهیم زد.

خب به پایان یکی دیگر از مقالات آموزشی زبان نشانه گذاری HTML رسیدیم.

در مقاله بعدی به مبحث مهم و جذاب رسپانسیو کردن با شما صحبت خواهیم کرد.

تگ head در زبان نشانه گذاری HTML

طراحی وبسایت واکنشگرا در زبان نشانه گذاری HTML