صفحه نخست » مقالات » برنامه نویسی » آموزش HTML » قالب بندی متن HTML

قالب بندی متن HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 3 دقیقه 01 آذر 1399
قالب بندی متن HTML

در این مقاله با نحوه قالب بندی متن HTML آشنا می شویم و با کمک تگ هاب موجود ارائه بهتری از مطالب را خواهیم داشت.

نحوه قالب بندی متن

ابزار قالب بندی متن HTML مشابه مواردی است که در هر ویرایشگر متنی پیدا می کنید (به عنوان مثال MS Word). شما می توانید متن پررنگ را تعریف کنید ، با حروف کج بنویسید ، یا در غیر این صورت ظاهر متن خود را تغییر دهید.

برای استفاده از یک ظاهر طراحی پیشرفته تر ، از یک ظاهر طراحی CSS استفاده کنید. برای استفاده از قالب بندی متن اصلی HTML ، تمام آنچه شما باید انجام دهید این است که محتوایی را که می خواهید اصلاح کنید و در تگ های مناسب قرار دهید – به عنوان مثال ، این متن را به صورت مورب می نویسید:

<h2>Eagles fly <em>above</em> the clouds during rain.</h2>

تگ های قالب بندی متن در HTML با مثال

برای تأکید از تگ <em> استفاده می شود. اکثر مرورگرها متن HTML را درون این تگ ها کج می کنند – با این حال ، این عنصر نه تنها  visual  بلکه معنای  semantic را نیز منتقل می کند:

<em>This text is emphasized.</em>

برای نوشتن ساده italicize متن HTML بدون معنی  semantic ، از تگ <i> استفاده کنید:

<i>This text is in italics.<i>

تگ <strong> متن  important را تعریف می کند. مرورگرها آن را به صورت متن پررنگ نشان می دهند ، اما معنای semantic نیز دارد:

<p>This is <strong>important</strong> text.</p>

برای نوشتن متن ساده و پررنگ و بدون معنای semantic، از تگ <b> استفاده کنید:

<p>Normal text vs <b>Text in bold</b></p>

با استفاده از تگ <u> می توانید متن را در HTML زیر خط بزنید:

Here is some <u>underlined</u> text.

از تگ های <small> می توان برای کوچک کردن متن بدون تغییر ارتفاع خط استفاده کرد.برای اضافه کردن یادداشت ها یا چیزهایی که به اندازه اطلاعات اصلی ضروری نیست مفید است :

<p>Paragraph with <small>smaller text</small> in it.</p>

توجه: یک تگ مخالف به نام <big> از HTML5 حذف شده است.

 

تگ های <mark> متن HTML را با رنگ زرد روشن برجسته می کنند تا با استفاده از قلم برجسته شباهت داشته باشند:

<p>The mark tag is <mark>useful</mark> when you need to highlight important information.</p>

تگ های <del> متن HTML شما را cross out می کنند تا آن را به عنوان پاک شده مشخص کنند:

<p>I am not deleted text, but <del>I am.</del></p>

توجه: این متن هنوز در نسخه نهایی قابل مشاهده است ، بنابراین اگر می خواهید واقعاً آن را حذف کنید از این تگ استفاده نکنید!

تگ های <s> جلوه بصری مشابه <del> ایجاد می کنند اما معنای semantic متفاوتی دارند – آن ها متنی را تعریف می کنند که دیگر مناسب نیست:

<p><s>This text is not relevant.</s></p>
<p>This is the new accurate text.</p>

توجه: از تگ های <strike> برای خط کشی متن نیز استفاده می شود ، اما این عنصر در HTML5 منسوخ شده است.

 

تگ <ins> علامت متن HTML را وارد کرده است:

<ins>This text is inserted</ins>

تگ <sub> متن زیرنویس ایجاد می کند که به اندازه نصف متن معمول است و همچنین دارای خط پایین تر است:

<p>This text contains <sub>subscript</sub> text.</p>

تگ <sup> متن HTML را توصیف می کند. متن را کوچکتر می کند (دقیقاً به عنوان زیرنویس) ، اما متن را که در آن نوشته شده نیز بالا می برد:

<p>The following is <sup>superscript</sup>.</p>

تگ <q> نشان دهنده نقل قول های درون خطی است. اکثر مرورگرها به طور خودکار نقل قول ها را در اطراف متن وارد می کنند:

<p>Everyone knows that
  <q cite="https://www.bitdegree.org/learn/html-basics">HTML is an acronym for Hypertext Markup Language.</q>
</p>

یک نقل قول همچنین می تواند در یک عنصر بلوک نمایش داده شود – برای انجام این کار ، از تگ های <blockquote> استفاده کنید:

<p>There are many ways to gain knowledge: TV, books, Internet, etc. However, imagination starts to fade after childhood. Do not let your inner child fade!</p>
  <blockquote>Imagination is more important than knowledge.</blockquote>

نکات مهم در قالب بندی

  • همه تگ های قالب بندی متن HTML برای تغییر محتوای آن ها استفاده می شود – بنابراین ، آن ها نمی توانند عناصر خالی را تعریف کنند. این بدان معناست که شما نمی توانید تگ بسته را حذف کنید.
  • به خاطر داشته باشید که بیشتر صفحه خوان ها تگ های معنایی را تشخیص می دهند و محتوای آن ها را با لحنی متفاوت تلفظ می کنند.
  • هنگام نوشتن متن در HTML مراقب باشید ، زیرا خوانندگان ممکن است به راحتی آن را با یک لینک پیوندی اشتباه بگیرند.

دوره رایگان html را در دویکس دنبال کنید.

چه امتیازی به این مقاله می دید؟

5 / 1.00
[ 1 رای ]
مطالب مشابه

Related Posts