آموزش تگ footer در HTML

10 شهریور 1401
ارسال شده توسط
آموزش html css

آموزش تگ footer در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ footer در HTML به صورت کامل آشنا بشید.

تگ footer در HTML

تگ footer یکی از تگ های معروف HTML  است که در آموزش تگ footer در HTML به آن خواهیم پرداخت. همان طور که از نام آن پیداست برای پاورقی سایت استفاده میشود. این تگ ، تگی است که ما با استفاده از اون میتوانیم بخش خاص از صفحه را که پاورقی نام دارد را طراحی کنیم. میتوانیم این بخش را فقط یکبار طراحی کنیم و در تمامی صفحات از آن استفاده کنیم.

همان طورکه میدانید به پایین ترین بخش یک وبسایت فوتر گفته میشود. به عنوان مثال الان در همین سایت وردپرس پوش، پایین سایت میتوانید را مشاهده کنید. تمام…

در HTML ما تگ های مختلفی داریم که هر کدام هم کارایی خاصی دارند. برای مثال از تگ header برای ایجاد کردن قسمت بالایی سایت یا همان هدر استفاده میشود و در مقابل آن از تگ footer برای ایجاد کردن بخش پایینی سایت استفاده میگردد. این دو تا تگ از تگ های ضروری هر وبسایتی هستند که بدلیل مهم بودن بخش های مورد طراحی اهمیت زیادی در طراحی و همچنین سئوی وبسایت دارند.

سه مثال برای تگ footer در HTML

در ادامه دوره آموزشی HTML CSS پروژه محور به سه تا از مثال های این تگ میپردازیم که شما عزیزان میتوانید با مشاهده آنها درک بهتری از این تگ داشته باشید.

مثال اول : استفاده هم زمان از تگ های header و footer مثلا ساختن یک وبسایت یا صفحه که هم داراری بخش هدر میباشد و هم دارای بخش فوتر

<body>
<div>
    <header>
       <p>هدر</p>
    </header>
 
    <div>
      <p>محتوا</p>
    </div>
 
    <footer>
      <p>فوتر</p>
    </footer>
</div>
</body>

راستی اگر دنبال آموزش html css پروژه محور در تبریز هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید

مثال دوم : همانند مثال اول میباشد. تنها تفاوتی که دارد این است که از کد های CSS اختصاصی برای استایل دهی استفاده کرده ایم.

.my-footer{
   background-color:#123456;
   color:#fff;
   padding:5px;
   text-align:center;
}

آخرین مثال : استفاده کردن از تگ footer در داخل تگ Article برای مشخص کردن فوتر پست های سایت

<div class="my-box">
 <section>
   <article class="my-content">
      <h1>آموزش HTML</h1>
      <p>آموزش قدم به قدم زبان HTML در سایت وردپرس پوش.</p>
      <p>زبان HTML زبان مادر برای طراحی صفحات وب می باشد.</p>
    <footer class="my-footer">
        <p>توسط : میلاد علیزاده در سال 1401</p>
    </footer>
   </article>
 </section>
</div>

پشتیبانی مرورگرها از تگ footer

در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ footer در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…
آموزش تگ footer در HTML

پشتیبانی تگ footer از صفات و رویدادهای عمومی

تگ footer قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.

نکات و توضیحات

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

دستورات پیش فرض CSS

اغلب مرورگرها تگ footer را بشکل کد هایی CSS به شکل زیر نشان میدهند. شما عزیزان نیز میتوانید بدون هیچ تغییر خاصی از این کد ها استفاده کنید.

footer {
   display: block;
}

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

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