وبسایت ها اغلب محتوای خودشان را در چند ستون نمایش می دهند. (مانند مجله های خبری و روزنامه ها)
مثال: در زیر نمونه ای از سایت های چند ستونه است را برای شما آورده ایم.
چیدمان عناصر در زبان نشانه گذاری 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 Float Layout
معمول است که تمام طرح بندی های وب را با استفاده از CSS Float انجام دهیم.
یادگیری float بسیار آسان است – فقط باید به خاطر بسپارید که ویژگی های float و clear چگونه کار می کنند.
معایب: عناصر شناور به جریان سند متصل هستند که ممکن است به انعطاف پذیری سایتتان اسیب برساند.
تکنیک CSS-Flexbox
استفاده از Flexbox این اطمینان را به شما می دهد که عناصر زمانی قابل پیش بینی عمل می کنند که layout صفحه باید اندازه های مختلف صفحه نمایش و دستگاه های نمایشگر مختلف را در خود جای دهد.
در مقالات آموزشی آینده بیشتر راجع به Flexbox صحبت خواهیم کرد.
تکنیک CSS Grid
ماژول CSS Grid Layout یک سیستم طرح بندی مبتنی بر شبکه با ردیف ها و ستون ها ارائه می دهد و طرح صفحات وب را بدون نیاز به استفاده از شناورها و موقعیت یابی آسان می کند.
در مقالات آموزشی آینده در این مورد نیز بیشتر با شما حرف خواهیم زد.
خب به پایان یکی دیگر از مقالات آموزشی زبان نشانه گذاری HTML رسیدیم.
در مقاله بعدی به مبحث مهم و جذاب رسپانسیو کردن با شما صحبت خواهیم کرد.
موجودیت ها (Entities) در HTML
برش (تقسیم، جدا کردن) آرایه در ماژول NumPy پایتون (Python)
Style Guide و قراردادهای کد نویسی در HTML (کد خوب یا بد)
نمایش کد در HTML
طراحی وبسایت واکنشگرا در زبان نشانه گذاری HTML
تگ head در زبان نشانه گذاری HTML
مسیردهی فایل ها در زبان نشانه گذاری HTML
استفاده از جاوا اسکریپت (JavaScript) در زبان نشانه گذاری HTML
تگ iframe در زبان نشانه گذاری HTML
ایجاد آرایه ها با ماژول NumPy در پایتون (Python) - بخش دوم
