این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ footer در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ footer در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ footer که از اسمشم مشخصه چیه! تگی است که ما با استفاده از اون میتونیم ( فوتر یا Footer ) یک بخش خاص از صفحه یا هم کل صفحه رو مشخص کنیم.
اینو دیگه خودتونم میدونید ، به پایینی ترین بخش یک تگ یا هم کل صفحه فوتر گفته میشه، مثلا الان همینجا تو سایت فری لرن، پایینی ترین قسمت سایت ( که الان در سایت فری لرن رنگش مشکی هس ) میشه فوتر تموم شد رفت.
در HTML خب ما تگ های مختلفی داریم و هرکدوم هم برای کار خاصی استفاده میشه، مثلا تگ header برای ایجاد کردن قسمت بالایی یا هم هدر استفاده میشه یا مثلا تگ footer برای ایجاد کردن بخش پایینی یا هم فوتر استفاده میشه.
Free-Learn
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ header و footer ( یعنی مثلا یه باکس درست کردیم قسمت بالاییش میشه هدر و قسمت پایینی میشه فوتر )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body> <div> <header> <p>هدر</p> </header> <div> <p>محتوا</p> </div> <footer> <p>فوتر</p> </footer> </div> </body> |
مثال شماره ۲ : همون مثال شماره ۱ هس فقط اومدیم و با استفاده از CSS بهش استایل دادیم
|
1 2 3 4 5 6 |
.my-footer{ background-color:#123456; color:#fff; padding:5px; text-align:center; } |
مثال شماره ۳ : استفاده از تگ Footer در تگ Article برای مشخص کردن فوتر پست های سایت
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="my-box"> <section> <article class="my-content"> <h1>آموزش HTML</h1> <p>آموزش قدم به قدم زبان HTML را میتوانید در سایت من دنبال نمایید.</p> <p>زبان HTML زبان مادر برای طراحی صفحات وب می باشد.</p> <footer class="my-footer"> <p>توسط : صادق اسدی در سال 1400</p> </footer> </article> </section> </div> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ footer در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ footer از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- از چندین تگ footer بصورت همزمان میشه در صفحه استفاده کرد و از این بابت محدودیتی وجود ندارد.
- تو مثال شماره ۲ خب من مثلا اومدم و یه باکس درست کردم بعدش با استفاده از تگ های header و footer براش هدر و فوتر گذاشتم. میخوام اینو بگم که کلا هرچیزی میتونید درست کنید که هدر و فوتر داشته باشید.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ footer را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
footer { display: block; } |
