آشنایی با فرمت دهی متن در HTML

در فصل قبل درباره ی صفت Style توضیحاتی دادیم اما در HTML عناصری هم وجود دارد که مختص فرمت دهی به متون مختلف هستند. در این فصل به آموزش این عناصر خواهیم پرداخت.


 فرمت دهی متن

 HTML از عناصری همچون <b> ، <i> ، <sub> و <sup> برای  فرمت دهی متون استفاده میکند.

عناصر <b> برای بولد کردن و <i> برای ایتلیک کردن(کج کردن) متن استفاده میشوند.

از <sub> و <sup> برای قسمت هایی از متن که نیاز است بالاتر و پایین تر از بقیه ی کلمات در خط قرار گیرند استفاده میشود.

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
خودتان امتحان کنید

عناصر فرمت دهی متن در HTML

برای نمایش شکل های مختلف متن میتوان از عناصر زیر در HTML  استفاده کرد:

  • <b> - متن بولد
  • <strong> - متن مهم
  • <i> - متن ایتلیک (کج)
  • <em> - متن تاکید شده
  • <mark> - متن نشانه گذاری شده (هایلایت شده)
  • <small> - متن کوچک
  • <del> - متن حذف شده
  • <ins> - متن اضافه شده
  • <sub> - متن زیر نویس
  • <sup> - متن بالا نویس

عناصر  <b> و <strong> در HTML 

عنصر <b> متن مورد نظر را بولد می کند بدون اینکه از نظر معنایی اهمیتی بیشتری برای آن در نظر بگیرد.

<b>This text is bold</b>
خودتان امتحان کنید

عنصر <strong> متون قوی را مشخص میکند. از نظر ظاهری متن مورد نظر تفاوتی با زمانی که عنصر <b> را روی آن اعمال می کنیم ندارد.

اما از نظر معنایی این تگ اهمیت بیشتری به متن ما می بخشد و زمانی از آن استفاده میشود که بخواهیم به کاربر بفهمانیم متن مورد نظر ما مهم است.

<strong>This text is strong</strong>
خودتان امتحان کنید

عناصر <i> و <em> در HTML

عنصر <i> متون ایتلیک (کج) را مشخص میکند اما از نظر معنایی اهمیت بیشتری برای آن در نظر نمی گیرد.

<i>This text is italic</i>
خودتان امتحان کنید

عنصر <em> برای متونی استفاده میشود که بر آن تاکید شده است و از نظر معنایی اهمیت بیشتری به متن ما میدهد. 

عنصر <em> از نظر ظاهری تفاوتی با زمانی که از تگ <i> برای متون استفاده میکنیم ندارد.

<em>This text is emphasized</em>
خودتان امتحان کنید

نکته : مرورگر ها <strong> را همچون <b> و <em> را همچون <i> نمایش  میدهند. با این حال تفاوتی در معنای این تگ ها وجود دارد : <b> و <i> برای مشخص کردن متون بولد و ایتلیک استفاده میشوند در حالی که <strong> و <em> مشخص میکنند که متن ما از اهمیت برخوردار است.


 عنصر <small> در HTML

عنصر <small> متون را کوچکتر نشان میدهد :

<h2>HTML <small>Small</small> Formatting</h2>
خودتان امتحان کنید

عنصر <mark> در HTML

عنصر <mark> متن های نشانه گذاری شده یا هایلات شده را مشخص میکند :

<h2>HTML <mark>Marked</mark> Formatting</h2>
خودتان امتحان کنید

عنصر <del> در HTML

عنصر <del> متن های حذف شده را مشخص میکند :

<p>My favorite color is <del>blue</del> red.</p>
خودتان امتحان کنید

عنصر <ins> در HTML

عنصر <ins> متن اضافه شده را مشخص میکند :

<p>My favorite <ins>color</ins> is red.</p>
خودتان امتحان کنید

عنصر <sub> در HTML

عنصر <sub> متن زیر نویس را مشخص میکند :

<p>This is <sub>subscripted</sub> text.</p>
خودتان امتحان کنید

عنصر <sup> در HTML

عنصر <sup> متن بالا نویس را مشخص میکند :

<p>This is <sup>superscripted</sup> text.</p>
خودتان امتحان کنید

 

منتشر شده در ۳۰ اردیبهشت ۱۳۹۶ حمید رضا ملکی ۱۶۹۰ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید