طراحی سایت | طراحی اسلایدر | خدمات سئو | سئو وبسایت | خدمات طراحی وبسایت | پشتیبانی وبسایت |
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

آموزش تگ article در HTML

تگ article در HTML برای ایجاد "مقاله" استفاده می شود."مقاله" محتوا را مستقل از سایر مطالب موجود در سند می داند ، به این دلیل که محتویات آن می تواند به تنهایی مثلاً در سند بیاید .
ذهن انسان محدودیت ندارد.

تگ article در HTML برای ایجاد “مقاله” استفاده می شود.”مقاله” محتوا را مستقل از سایر مطالب موجود در سند می داند ، به این دلیل که محتویات آن می تواند به تنهایی مثلاً در سند بیاید .

تگ article چیست؟

یک ترکیب کاملاً کامل یا مختصر در یک سند ، صفحه ، برنامه یا سایت و این است که ، در اصل ، به طور مستقل توزیع یا قابل استفاده مجدد ، به عنوان مثال. در سندیکا این می تواند یک پست انجمن ، یک مجله یا مقاله روزنامه ، یک مطلب وبلاگ ، یک نظر ارسال شده توسط کاربر ، یک ابزارک یا ابزار تعاملی یا هر یک از مطالب مستقل دیگر باشد.
برچسب <article> در HTML 5 معرفی شد.

Syntax هایه تگ article.

برچسب <article> با عنوان مقاله درج شده بین <article></article>  برچسب های شروع و پایان درج شده است. این برچسب هیچ ویژگی محلی ندارد اما می توانید از هر یک از خصوصیات جهانی و یا ویژگی های محتوای رویداد استفاده کنید.

یه چیزی شبیه به این :

<article>
محتوای مقاله به اینجا می اید...
</article>

مثال : تگ article در HTML

مقاله تکی :

<article>
	<h1> عنوان مقاله </h1>
	<p> توضیحات مقاله و متن مقاله </p>
</article>

مقالات ترکیبی یا چندین مقاله در یک بخش :

<section>
	<h1>سیارات </h1>
	<p>امیدوارم که از این مقالات بیشتر لذت ببرید
سیارات محبوب در جهان  </p>
	<article>
		<h2>زمین </h2>
		<p>سیاره زمین به طور متوسط ، ۹۳ میلیون مایل با خورشید فاصله دارد.
به طور میانگین ۱۸٫۵ مایل در ثانیه در خورشید می چرخد.</p>
	</article>
	<article>
		<h2>مریخ</h2>
		<p>مریخ به طور متوسط ، ۱۴۲ میلیون مایل با خورشید فاصله دارد.
با گردش خورشید به طور میانگین ۱۴٫۵ مایل در ثانیه حرکت می کند.</p>
	</article>
</section>

Headers & Footers

مقالات اغلب شامل سرصفحه و / یا پاورقی است. برای تهیه یک هدر و پاورقی ، عناصر<header> و <footer> را درون عنصر قرار دهید.

مثل :

<article>
	<header>
		<h1>مریخ</h1>
		<p>انتشار ۲هفته پیش </time></p>
	</header>
	<p>مریخ به طور متوسط ، ۱۴۲ میلیون مایل با خورشید فاصله دارد.
با گردش خورشید به طور میانگین ۱۴٫۵ مایل در ثانیه حرکت می کند.</p>
	 <footer>
		<small>اطلاعات ارائه شده توسط ناسا</small>
	</footer>
</article>

نحوه نوشتن مقالات تو در تو | Nested Articles

می توانید برچسب <article> را درون یک برچسب دیگر بزارین . به عنوان مثال ، یک برچسب می تواند مقاله اصلی را ارائه دهد ، در حالی که دارای برچسب های دیگر برای ارائه نظرات کاربران در مورد مقاله اصلی است.همچنین می توانید از تگ <section> برای موارد مرتبط با گروه استفاده کنید ، مانند عناصر که برای ارائه نظرات کاربران استفاده می شود.

<article>
	<h1>مریخ </h1>
	<p>مریخ به طور متوسط ، ۱۴۲ میلیون مایل با خورشید فاصله دارد.
با گردش خورشید به طور میانگین ۱۴٫۵ مایل در ثانیه حرکت می کند.</p>
	<section>
	<h2>کامنت شما </h2>
	<article>
	<header>
		<h3>گفته سولار فلر </h3>
		<p><time datetime="2014-06-05T22:43-08:00">سه ساعت پیش </time></p>
	</header>
		<p>وای ، این اطلاعات من را به زمین باز می گرداند!</p>
	</article>
	<article>
	<header>
		<h3>پلوتون می گوید:</h3>
		<p><time datetime="2014-06-05T23:45-08:00">دو ساعت پیش </time></p>
	</header>
		<p>142 میلیون مایل ... pfft .. این چیزی نیست!</p>
	</article>
	</section>
</article>

آنچه در مثال بالا بعد از اعمال رنگ پس زمینه بر روی عناصر <article> (با استفاده از CSS) درست دیده مشود .

<!DOCTYPE html>
<title>مثال </title>
<style>
.مثالی از مقاله {background:#ccc;padding:10px;}
.مقاله داخل مقاله {background:#fff;margin-bottom:1px;} 
</style>
<div class="example">
<article>
	<h1>مریخ </h1>
	<p>مریخ به طور متوسط ، ۱۴۲ میلیون مایل با خورشید فاصله دارد.
با گردش خورشید به طور میانگین ۱۴٫۵ مایل در ثانیه حرکت می کند.</p>
	<section>
	<h2>کامنت کاربر </h2>
	<article>
	<header>
		<h3>سولار فلر میگوید :</h3>
		<p><time datetime="2014-06-05T22:43-08:00">سه ساعت پیش </time></p>
	</header>
		<p>وای ، این اطلاعات من را به زمین باز می گرداند!</p>
	</article>
	<article>
	<header>
		<h3>پلوتون می گوید:</h3>
		<p><time datetime="2014-06-05T23:45-08:00">دوساعت پیش </time></p>
	</header>
		<p>142 میلیون مایل ... pfft .. این چیزی نیست!</p>
	</article>
	</section>
</article>	
</div>

<article> درمقابل <section>.

می توانید برچسب های <article>  را در برچسب های <section>بزارین و می توانید برچسب های <section>را در برچسب های <article> لانه کنید.

از کدام یک باید استفاده کنید؟

بین عنصر <article> و <section>یه تفاوت ریز هت. هدف از عنصر نمایش بخش عمومی از یک سند یا برنامه است. عنصر<section> از طرف دیگر ، بیانگر مطالب منفرد و مختصر به خود است.در هنگام انتخاب استفاده از برچسب یا یک تگ ، اگر محتوا در صورت هماهنگ ماندن معنی خود را حفظ کرد ، از تگ استفاده کنید.

Attributes

Attributes را می توان به عنصر HTML اضافه کرد تا اطلاعات بیشتری درباره نحوه ظاهر یا رفتار آن عنصر ارائه دهد.تگ address هیچ یک از صفات دیگه را نمیپزیرد .

Attributes زیر در بین عناصر HTML استاندارد است. بنابراین ، شما می توانید از این ویژگی ها با تک address و همچنین با همه برچسب های HTML دیگر استفاده کنید.

  • accesskey
  • autocapitalize
  • class
  • contenteditable
  • data-*
  • dir
  • draggable
  • hidden
  • id
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • part
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
دیدگاه‌های نوشته

Share via
ارسال این به یک دوست