0 محصولات
نمایش سبد خرید
اموزش تک header در html
کاربرد تگ header چیست؟
تگ header حاوی محتوای مقدماتی برای نزدیکترین تقسیم بندی اجداد خود یا عنصر ریشه مقطعی آن است.
بخش مطالب محتوایی است که دامنه عنوان ها و پاورقی ها را مشخص می کند. عناصر زیر به عنوان محتوای تقسیم بندی دسته بندی می شوند: <article>, <aside>, <nav>, <section> بخش بندی عناصر ریشه می تواند اصول مطالب خاص خود را داشته باشد ، اما بخشها و عناوین داخل این عناصر به اصول مطالب اجداد آنها کمک نمی کند. برچسب های زیر به عنوان ریشه های بخش بندی طبقه بندی می شوند (<blockquote> ، <body> ، <fieldset> ، <figure> ، <td>).
عنوان ها می توانند حاوی عنوان ها ، زیرعنوان ها ، اطلاعات نسخه ، فرم های جستجو ، آرم ها ، کنترل های پیمایش و غیره باشند.
طریقه نوشتن header
تگ header به عنوان <header> </header> با محتوای هدر بین برچسب های شروع و پایان درج شده است.
مثل این:
<header>
Header content...
</header>مثال ها
یک مثال ساده از header
<!DOCTYPE html>
<title>Example</title>
<style>
.example header,
.example article,
.example footer,
.example main,
.example nav {
border: 1px solid orange;
padding: 3px;
margin: 3px;
width: 50%;
}
.example header {
background: #FDF7D3;
}
</style>
<div class="example">
<header>Header...</header>
<main>
Main...
<article>Article...</article>
<article>Article...</article>
<article>Article...</article>
</main>
<footer>Footer...
<nav>Nav...</nav>
</footer>
</div>تگهای داخل header
یک header به طور معمول شامل یک عنوان برای بخش است (اگرچه این مورد نیازی نیست). یک header همچنین می تواند حاوی پیمایش ، جستجو ، آرم و سایر مطالب باشد. عناوین سند در این مثال ، header حاوی یک عنوان برای کل سند است. این سند شامل سه مقاله جداگانه در مورد همان موضوع است.
<!DOCTYPE html>
<title>Example</title>
<style>
.example header,
.example article,
.example footer,
.example main,
.example nav {
border: 1px solid orange;
padding: 3px;
margin: 3px;
width: 80%;
}
.example header {
background: #FDF7D3;
}
</style>
<div class="example">
<header>
<h1>Mindfulness Articles</h1>
</header>
<main>
Main...
<article>
Mindfulness article 1...
</article>
<article>
Mindfulness article 2...
</article>
<article>
Mindfulness article 3...
</article>
</main>
<footer>Footer...
<nav>Nav...</nav>
</footer>
</div>تگ header داخل تگ article
در این مثال ، header در داخل یک article وجود دارد. این بدان معنی است که header برای تگ article (و نه لزوماً کل صفحه) اعمال می شود.
<!DOCTYPE html>
<title>Example</title>
<style>
.example header,
.example article,
.example footer,
.example main,
.example nav {
border: 1px solid orange;
padding: 3px;
margin: 3px;
width: 80%;
}
.example header {
background: #FDF7D3;
}
.example header>p {
font-weight: bold;
}
</style>
<div class="example">
<main>
Main...
<article>
Article...
<header>
<h1>Become a Zen Master Today</h1>
<p>Five experts share their knowledge for attaining enlightenment.</p>
</header>
<p>In our recent journey through South East Asia, we...</p>
</article>
</main>
<footer>Footer...
<nav>Nav...</nav>
</footer>
</div>مثال فرم جستجو
در این مثال ، header شامل یک آرم و یک فرم جستجو است.
<!DOCTYPE html>
<title>Example</title>
<style>
.example header,
.example article,
.example footer,
.example main,
.example nav {
border: 1px solid orange;
padding: 3px;
margin: 3px;
width: 80%;
}
.example header {
background: #FDF7D3;
}
</style>
<div class="example">
<header>
<img src="{your logo}" alt="Logo">
<input type="search" name="q"><input type="submit" value="Search">
</header>
<main>
Main...
<article>
Article...
</article>
</main>
<footer>Footer...
<nav>Nav...</nav>
</footer>
</div>ویژگی های تک header
header هیچ ویژگی منحصر به فردی ندارد.
مارا در شبکه های اجتمایی دنبال کنید.