معرفی عناصر layout در HTML


نویسنده:
چهارشنبه ۲۱ خرداد ۱۳۹۹
عناصر layout

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

در زیر لیستی از عناصر layout را آورده‌ایم که در این جلسه درمورد آنها صحبت خواهیم کرد:

  • header
  • footer
  • nav
  • section
  • article
  • aside


کاربرد تگ header

برای ایجاد سربرگ صفحه با بخشی از صفحه از تگ header استفاده می‌شود. همانطور که گفتیم، میتوان بخش هدر را با استفاده از تگ div هم زد، اما بهتر است بجای استفاده از تگ div از تگ header استفاده کرد. زیرا درک بهتری برای موتور‌های جستجو و… به وجود می‌آید.

به مثال زیر دقت کنید:

در این مثال سربرگ یک صفحه وب را ایجاد کرده‌ایم.

کاربرد تگ footer

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

به مثال زیر دقت کنید:

در این مثال یک فوتر اصلی برای وبسایت ایجاد کرده‌ایم که در آن قانون کپی رایت و شماره تماس را نوشته‌ایم.

نکته: اگر بخواهیم به یک شماره تماس لینک دهیم باید از پروتکل tell: استفاده کنیم. کاربر با کلیک روی این لینک می‌تواند بدون شماره گیری تماس بگیرد.


کاربرد تگ nav

تگ nav از ۳ حرف اول کلمه navigation گرفته شده است. از این تگ برای ایجاد منو‌ها استفاده می‌شود. می‌توان از این تگ به دفعات متعددی در یک صفحه وب استفاده کرد. در مثال زیر برای ایجاد منو از تگ nav استفاده شده است.


کاربرد تگ section

section یعنی بخش، هرگاه بخواهید یک بخش جدید در وبسایت خود ایجاد کنید می‌توانید از این تگ استفاده کنید. در مثال زیر بخشی برای تبلیغات در صفحه وب خود در نظر گرفته‌ایم.



کاربرد تگ article

پست‌های خود را درون تگ article بگذارید! همانطور که از نام این تگ پیداست، این تگ برای ایجاد یک مقاله بکار می‌رود. می‌توانید از این تگ برای نمایش پست‌های خود استفاده کنید.


کاربرد تگ aside

از تگ aside برای ایجاد سایدبار استفاده می‌شود. می‌توان از این تگ به دفعات متعددی در مکان‌های مختلف وبسایت استفاده کرد.



در این درس یاد گرفتیم بجای اینکه برای تمام بخش‌های وبسایت خود از یک تگ استفاده کنیم (مثل تگ div)، از تگ‌های مناسب برای هر بخش استفاده کنیم تا صفحه وب ما از همه جهات بهینه‌تر باشد.

دیدگاهتان را بنویسید

2 پاسخ به “معرفی عناصر layout در HTML”

  1. نرگس گفت:

    سلام وقتتون بخیر و ممنون از آموزش خوبتون /لطفا اجرا شده ی هر قسمت را در مرور گر در بخش آموزش قرار بدهید برای فهم بهتر دانشجو

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *