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