طراحی سایت ساناتک
0
تگ footer و article در HTML5

تگِ footer

همان طور که از header برای مارک آپ کردن بالای صفحه سایت مان استفاده کردیم از footer نیز می توانیم برای کنار هم قرار دادن محتوای بخش های پایانی صفحه سایت استفاده کنیم. برای مثال پیام های کپی رایت، افزونه های Navigation (Privacy Policies، بیانیه های دسترسی پذیری یا Accessibility)، اطلاعات Hosting سایت و ... . سایت پروژه ما از این گونه محتوا تهی است، اما به طور کلی مارک آپ نهایی باید به این شکل باشد:

<body>

<header>…</header>

<nav>…</nav>

<h1>Main heading</h1>

<p>Content </p>

<footer>Copyright 2011. All rights reserved. Site maintained by

bob@bubbleunder.com</footer>

</body>

به خاطر سپردن این مارک آپ ساده است، اما در نظر داشته باشید که شما می توانید بیش از یک footer در سایت خود استفاده کنید، می توانید بیش از یک header نیز داشته باشید.—البته در صورتی که در یک تگِ بخش بندی دیگری از HTML5 قرار داشته باشند، تگی مانند article، بیایید نگاهی به آن بیاندازیم.

تگِ article

احتمالاً بهترین زمان هایی که می توانید از Article بهره گیرید به صورت زیر هستند:

  1. در یک وب‌سایت جدید—هر آیتم خبری را می توان درون یک تگِ article قرار داد.
  2. در یک بلاگ—به طوری که هر پست درون یک ariticle جای گیرند.

نمونه ای که می توان به عنوان مارک آپ قابل قبول و کاربردی در یک سایت خبری از آن استفاده کرد:

<article id="newsstory12534345">

<h2>Police track down missing girl's kidnapper</h2>

<p>Reporter: Fred Parker</p>

<p>Police have reported ...</p>

...

<p>Published on 24 March, 2011</p>

</article>

توسعه دهندگان وب می توانند اندکی کار را پیشرفته تر و پیچیده تر نمایند؛ با استفاده از header و footer درون یک aside. تقریباً مشخص است که برای یک خبر چه بخشی را می توان درون header و چه بخشی را می توان درون footer قرار داد:

<article id="newsstory12534345">

<header>

<h2>Police track down missing girl's kidnapper</h2>

<p>Reporter: Fred Parker</p>

</header>

<p>Police have reported ...</p>

...

<footer>

<p>Published on 24 March, 2011</p>

</footer>

</article>

در آخر می توانیم مارک آپ را اندکی پیشرفت دهیم. در مثال مربوط به سایت خبری heading استفاده شده از نوع دوم یعنی h2 بود. همانطور که حدث می زنید می توانیم از باقی انواع عنواین نیز استفاده کنیم که تمرین خوبی برای شما می باشد. در نظر داشته باشید که تگِ article می تواند یک تگِ دربر گیرنده است بر همین اساس می توانیم از عناوین h1، h2 و ... نیز در آن استفاده کنیم.

<article id="newsstory12534345">

<header>

<h1>Police track down missing girl's kidnapper</h1>

<p>Reporter: Fred Parker</p>

</header>

<p>Police have reported ...</p>

...

<h2>Sub-heading goes here</h2>

<p>In further developments ...</p>

<footer>

<p>Published on 24 March, 2011</p>

</footer>

</article>

این بدان معنا است که شما می توانید به هر تعدادی که در نظر دارید در سایت خود تگِ h1 داشته باشید اما آن ها باید درون تگ های دربرگیرنده (مانند article در مثال بالا) باشند.

تعداد بازدید: 372
نویسنده: هانیه سهرابی
مطالب دیگر آموزش طراحی سایت
باگ‌ های شناخته شده مرورگرهاراستی‌ آزمایی کدهای CSS و HTML بعد از طراحی سایترفع خطاهای احتمالی هنگام طراحی سایتدقیق‌ تر شدن در استفاده از jQueryنمایش کپشن‌ های تصاویر درون گالری سایت
verification