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


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

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

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

  1. Alireza گفت:

    سلام، تویه قسمته فیلتر میشه افکت های خاصی به مثلا عکسمون داد، خب منم یک عکس رو تویه یک دیو در قسمت background-image اوردم و بهش بلور دادم، و داخل اون دیو هم یک دیو دیگه قرار دادم اما اون بلوری که به دیو پدر داده بودم رویه دیو داخلیش هم تاثیر گذاشت، کاری میشه کرد که فقط رویه دیو پدر تاثیر بذاره و به اجزای داخلیش کاری نداشته باشه؟

    • سلام علیرضا جان.
      وقتی به یک باکس افکتی میدی اون افکت به محتوای درون اون باکس (یعنی کل کدهای داخلش) هم اعمال میشه.
      پس برای اینکار دیگه نمی‌تونی باکس موردنظرت رو درون باکسی که بهش افکت بلور دادی بزاری. مجبوری این دوتا باکس رو درکنار هم قرار بدی و از ویژگی position: absolute; برای لایه بندی این دوتا باکس استفاده کنی. برای یادگیری ویژگی position می‌تونی به آموزش “کار با ویژگی Position” مراجعه کنی.

  2. نجفی گفت:

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

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

    • ...... گفت:

      از ای دی فقط یباراستفاده میشه یعنی نمیتونی به تعداد مکررمثل کلاس ازش استفاده کنی برای همین در هدر فوتر ونویگیشن که فقط یبار در سایت کاربرد داره از ای دی استفاده میکنی و از کلاس برای ارتیکل سکشن که به تعداد زیاد تو وباستفاده میکنی میزاری

  3. sia گفت:

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

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

    • مهدی گفت:

      سلام
      کلا بعضی از مرورگر ها مارجین دارن به صورت پیشفرض برای حل این مشکل میتونید تو فایل css متصل شده به اون صفحتون در بالای صفحه این کد رو قرار بدید :

      *{
      margin:0px
      padding:0px
      }

      فکر کنم مشکلتون حل میشه

    • mrms گفت:

      سلام.من هم مشکل ایشون رو دارم
      مارجین و پدینگ ۰ هم دادم و width 100% هم دادم.اما مسکلم حل نشد.هدر از بالا فیکس نمیشه و نمیچسبه به صفحه و هرکاری کردم راهی پیدا نکردم

    • سلام وقت بخیر
      خود تگ های body و html احتمالا margin یا padding دارن باید این ویژگیه هارو با مقدار صفر براشون تنظیم کنید
      اگر اینکارو کردید اما همچنان از هدر از بالا نچسبید
      به خود هدر padding بدید. مهم نیست چه اندازه‌ای.
      موفق باشید

  4. سینا گفت:

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

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

  5. نرگس گفت:

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

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

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