فرمت بندی نوشته در HTML

فرمت بندی نوشته در HTML آموزش برنامه نویسی وب درس 8

فرمت بندی نوشته در HTML این امکان را به ما می‌دهد که بتوانیم ارتباط نوشتاری با کیفیتی را با مخاطبین داشته باشیم. در درس مربوط به پاراگراف در HTML با اصول نگارش پارگراف ها در نوشته آشنا شدیم. در اینجا این مبحث را کامل‌تر می‌کنیم.

فرمت بندی نوشته در HTML

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

  • <b> : این تگ سبب کلفت شدن (bold) نوشته می‌شود؛
  • <i>: این تگ سبب کج شدن (italic) شدن نوشته می‌شود؛
  • <mark>: این تگ سبب هایلایت شدن نوشته می‌شود؛
  • <code>: این تگ سبب می‌شود که بتوان کدهای رایانه‌ای را در میانه نوشته‌ها نمایش داد؛
  • <ins> و <del>: این دو تگ برای حذف کردن و اضافه کردن عبارت‌های جایگزین (مثل مبلغ اصلی و مبلغ تخفیف خورده) به کار برده می‌شود.

برای درک بهتر کار هر کدام از این تگ‌ها در فرمت بندی نوشته در HTML ، من کد زیر را برایتان آورده‌ام. سعی کرده‌ام که در کد زیر از تمامی تگ‌های یاد شده در بالا استفاده کنم:

<p>This is <b>bold text</b>.</p>

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

<p>This is <i>italic text</i>.</p>

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

<p>This is <mark>highlighted text</mark>.</p>

<p>This is <code>computer code</code>.</p>

<p>This is <small>smaller text</small>.</p>

<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>

<p>This is <del>deleted text</del>.</p>

<p>This is <ins>inserted text</ins>.</p>

 

خروجی کدهای بالا به صورت زیر است:

فرمت بندی نوشته در HTML

به صورت پیش فرض تگ <strong> در مرورگرها به مانند تگ <b> رندر می‌شود. این موضوع درباره تگ <em> و <i> نیز صادق است. هرچند تفاوت‌هایی معنایی در این زمینه وجود دارد که در جای خود آن‌ها را برایتان بازگو خواهم کرد.

تفاوت میان تگ های <stron> و <b>

هر دو تگ <strong> و <b> برای کلفت کردن نوشته به کار می‌روند. و ازنظر خروجی هیچ تفاوتی با هم ندارند. اما تگ <strong> به عنوان یک تگ معنایی شناخته می‌شود. تگ های معنایی برای موضوع سئو بسیار مهم هستند. همچنین بسیاری از نرم‌افزارهای خزنده وب و یا خوانشگر متن نسبت به این تگ‌ها رفتار متفاوتی نشان می‌دهند. از دید موتورهای جستجوی تگ <strong> در حال اشاره کردن به موضوعی است که از نظر معنایی مهم و اساسی است.

نتیجه این دو تگ را من در مثال زیر به کار برده‌ام:

<p><strong>WARNING!</strong> Please proceed with caution.</p>

<p>The concert will be held at <b>Hyde Park</b> in London.</p>

خروجی این دو خط کد به صورت زیر است:

فرمت بندی نوشته در HTML به صورت کلفت و ضخیم

تفاوت میان تگ های <em> و <i>

به مشابه آنچه که درباره تگ‌های قبلی نیز گفته شد، تگ‌های <i> و <em> هم برای کج کردن نوشته یا اصطلاحا ایتالیک کردن نوشته به کار می‌رود. اما در اینجا تگ <em> بار معنایی بیشتری دارد و نشان دهنده توجه بیشتر نویسنده بر روی مطلب است. در اینجا ممکن است که فرمت بندی نوشته تفاوتی نکند، اما خوانشگرها و خزنده‌های وب رفتار متفاوتی را در این زمینه دارند. این دو تگ برای به کار بردن اصطلاحات، یا توضیحاتی از یک زبان دیگر به کار برده می‌شوند.

در زیر من مثال‌هایی از به کار بردن این دو تگ را برایتان آورده‌ام:

<p>Cats are <em>cute</em> animals.</p>

<p>The <i>Royal Cruise</i> sailed last night.</p>

خروجی قطعه کد بالا به صورت زیر است:

فرمت بندی نوشته در HTML به صورت ایتالیک و یا مورب

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

فرمت بندی نقل قول ها در HTML

با استفاده از تگ <blockquote> شما می‌توانید نقل قول‌ها در HTML را نشان دهید.

تگ blockquote به صورت معمول با یک تو رفتگی در صفحه نمایش داده می‌شوند. و فضای بیشتری در بالا و پایین آن‌ها خالی است. این تگ برای بیان نظرات و یا نقل قول از افراد مختلف در محتوا به کار گرفته می‌شود.

من یک مثال را در زیر آورده‌ام:

<blockquote>

    <p>Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.</p>

    <cite>— Albert Einstein</cite>

</blockquote>

خروجی کد بالا به صورت زیر است:

فرمت بندی نقل قول نوشته در HTML

نکته: تگ <cite> برای توضیح دادن یک منبع مهم در نوشته به کار می‌رود. آن شامل title و موارد دیگر است که به درک بهتر گفته شما کمک می‌کند.

شما می‌توانید تگ blockquote را به صورت <q> تنها نیز وارد کنید. مرورگرها همیشه نوشته‌هایی که در میان این تگ قرار گرفته باشند را به صورت یک نقل قول نشان می‌دهند. در مثال زیر می‌توانید نتیجه را ببینید:

<p>According to the World Health Organization (WHO): <q>Health is a state of complete physical, mental, and social well-being.</q></p>

خروجی کد بالا به صورت زیر خواهد بود:

نوشتن نقل قول در HTML

ایجاد محتوای آدرس‌ها

بسیار از اوقات نیاز است که شما در وب سایت‌های خودتان، آدرس‌هایی را به مشتریان اعلام کنید. این کار می‌تواند با نوشته ساده انجام شود، اما از نظر موتورهای جستجو این موضوع اهمیت چندانی ندارد. برای همین شما می‌توانید از تگ <address> استفاده کنید. این کار می‌تواند به نمایش آدرس‌های شما در موتورهای جستجو کمک کند.

در زیر من نمونه ای از این تگ‌ها را نشان داده‌ام:

<address>

Mozilla Foundation<br>

331 E. Evelyn Avenue<br>

Mountain View, CA 94041, USA

</address>

خروجی کد بالا به صورت زیر است:

نوشتن آدرس در HTML

در اینجا موضوع فرمت بندی نوشته در HTML به پایان رسید. اگر پرسش یا نکته‌ای داشتید در زیر همین پست برای من کامنت بگذارید. من، علی ذکائی، حتما به پرسش‌های شما پاسخ می‌دهم.

No votes yet.
Please wait...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

منو اصلی

question