آموزش تگ footer در HTML

آموزش تگ 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 از صفات و رویدادهای عمومی
تگ footer
قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.
نکات و توضیحات
- میتوانیم از چندین تگ footer بصورت همزمان استفاده کنیم و هیچ محدودیتی برای آن وجود ندارد.
- سعی کنید در تمامی بخش هایی که میسازید از هدر و فوتر استفاده کنید.
- استفاده از تگ های footer تو در تو به هیچ عنوان مجاز نیست.
دستورات پیش فرض CSS
اغلب مرورگرها تگ footer
را بشکل کد هایی CSS به شکل زیر نشان میدهند. شما عزیزان نیز میتوانید بدون هیچ تغییر خاصی از این کد ها استفاده کنید.
footer { display: block; }
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید