دوره آموزش ووکامرس

معرفی عناصر 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)، از تگ‌های مناسب برای هر بخش استفاده کنیم تا صفحه وب ما از همه جهات بهینه‌تر باشد.

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

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

  1. نرگس گفت:

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

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

  2. سینا گفت:

    سلام. لطفا یک مطلب بنویسید در مورد اینکه هر وبسایت از چه بخش هایی تشکیلی شده و برای هر بخش باید چه layout بزاریم.

    • سلام سینا جان
      ممنون از پیشنهاد شما. این مطلب دقیقا برای همین‌کاره. سعی می‌کنیم با استفاده از چندتا تصویر مثال‌هارو واضح‌تر کنیم تا بیشتر قابل درک بشه.

  3. sia گفت:

    سلام
    وقتی هدر با این روش میزنم یا اصلا کدهای نمومه شما رو کپی پیست میکنم از سمت چپ و راست قسمتی خالیه و جز هدر نیست
    با بک گراند رنگی هدر مشخص میشه
    دقیقا 8پیکسل که با مارجین چپ و راست 8- پیکسل کاملا به دو طرف میجسبه
    علتش چیه؟
    چجوری حل میشه بدون مارجین؟
    چرا هدر تمام عرض رو نمیگیره؟

    • سلام به صورت پیش فرض که هدر تمام عرض صفحه رو میگیره مگر اینکه به خود تگ یا تگ‌های والد max-width یا margin و padding داده باشید.
      میتونید به تگ body , header یه width صدرصد و پدینگ و مارجین صفر بدید.

  4. نجفی گفت:

    سلام ممنون از محتوای مفید و ارزشمند.
    من نمیدونم کی از ویژگی آیدی استفاده باید کرد و کی از ویژگی کلاس.
    البته در درس های قبل مطالب رو خوندم ولی متوجه نشدم.
    مثلا در همین درس، چرا برای تگ aside از class استفاده شد ولی برای تگ header و یا footer از id استفاده شد؟

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

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

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