فرمت دهی در HTML – برنامه نویسی HTML بخش چهاردهم
فرمت دهی در HTML راهی است که شما می توانید با کمک آن نحوه نمایش محتواها در صفحه های وب را مدیریت کنید و خوانایی نوشته های خودتان را افزایش دهید. شما می توانید از تگ های معنایی (Semantic) بهره بگیرید و همچنین جلوه های بصری بهتری را به محتواهای خودتان نسب دهید.
فرمت دهی HTML (HTML Formatting) با استفاده از تگ های فیزیکی و منطقی در زبان HTML انجام می شود. در این نوشته ما مواردی را درباره درست کردن ظاهر نوشته ها با استفاده از تگ های HTML خواهیم آموخت.
در اینجا بگذارید ببینیم که تگ های فیزیکی و منطقی در زبان HTML شامل چه مواردی می شوند.
- تگ های فیزیکی (Physical Tags): تگ هایی هستند که برای نمایش داده و بصری سازی محتواها در یک صفحه HTML به کار گرفته می شوند.
- تگ های منطقی (Logical Tags): تگ هایی هستند که برای ایجاد معناها و ایجاد منطق در نوشته ها به کار گرفته می وشند. در اینجا تعداد کمی از تگ های منطقی وجود دارند که برای دستگاه های خوانشی و نیز برای ایجاد جلوه های بصری بهتر بر روی مرورگرها به کار گرفته می شوند.
استفاده از فرمت دهی در HTML
بدون فرمت دهی در HTML هیچکدام از نوشته های شما نه زیبا خواهند بود و نه زشت و هیچ جلوه بصری در آن ها دیده نمی شود. اما با استفاده از فرمت دهی در HTML نه تنها نوشته های شما چشم نواز تر می شوند، بلکه از نظر بصری نیز جلوه بهتری پیدا می کنند و سایت شما زیباتر خواهد بود. در اینجا چند دلیل وجود دارد که شما باید از فرمت دهی در HTML استفاده کنید.
فرمت دهی در HTML می تواند از جنبه های مختلفی کاربردی و مهم باشند:
- در اینجا شما می توانید نوشته ها را واضح تر کنید و در نتیجه قصد خودتان را بهتر به کاربر نشان دهید. شما می توانید عبارت های کلیدی را های لایت کرده و یا اطلاعات معنادار بیشتری را در اختیار کاربران قرار دهید. برای مثال می توانید نقل قول ها را متمایز کرده و یا با استفاده از زیر خط برخی از جمله های مهم را متفاوت از دیگر جمله ها نشان دهید.
- فرمت دهی در HTML به موتورهای جستجو کمک می کنند که بتوانند به نحوه بهتری ساختارهای صفحه وب را شناسایی کند و در نتیجه در بهینه سازی کمک زیادی به آن ها می کنند و می توانند سبب ارتقاء رتبه صفحه های وب شما شوند.
- فرمت دهی به شما کمک می کند که بتوانید طرح بندی صفحه ها را بهبود ببخشید در نتیجه آن خوانایی نوشته ها و محتواهای شما نیز افزایش پیدا می کند.
تگ های فرمت دهی در HTML
در جدول زیر شما می توانید فهرستی را از تگ های فرمت دهی در HTML را مشاهده کنید. این تگ ها برای نوشته های موجود در صفحه های وب کاربرد دارند:
| نام تگ | توضیحات | دسته بندی |
| <b> | از این تگ برای ضخیم تر کردن نوشته ها (Blod) استفاده می شود. | تگ فیزیکی |
| <i> | از این تگ برای ایجاد نوشته ها (Italic) استفاده می شود. | تگ فیزیکی |
| <big> | با کمک این تگ نوشته های شما بزرگتر نشان داده می شود. این تگ در HTML 5.0 پشتیبانی نمی شود. | تگ فیزیکی |
| <u> | این تگ برای ایجاد زیرخط در نوشته ها به کار می رود. | تگ فیزیکی |
| <strike> | این تگ برای ایجاد خط رو نوشته به کار می رود. این تگ در HTML 5.0 پشتیبانی نمی شود. | تگ فیزیکی |
| <tt> | این تگ برای ایجاد حالت خطی تله تایپ (فونت با حروف یک اندازه) به کار می رود. این تگ در HTML 5.0 پشتیبانی نمی شود. | تگ فیزیکی |
| <strong> | این تگ برای ضخیم تر کردن نوشته ها به کار می رود. این تگ کاربرد معنایی دارد و نشان دهنده اهمیت یک نوشته است. | تگ منطقی |
| <em> | این تگ برای مورب نشان دادن نوشته ها به کار می رود. این تگ کاربرد معنایی دارد و نشان دهنده تاکید بر بخشی از نوشته است. | تگ منطقی |
| <sub> | این تگ برای ایجاد زیرنویس به کار می رود (که سبب می شود نوشته کمی کوچکتر در زیر خط مبنا نوشته شود) | تگ های دیگر |
| <sup> | این تگ برای ایجاد توان نویسی به کار می رود (که سبب می شود نوشته کمی کوچکتر و در بالای خط مبنا نوشته شود) | تگ های دیگر |
| <ins> | این تگ نشان دهنده اضافه شدن محتوا به نوشته اصلی است و اغلب به صورت زیرخط خواهد بود. | تگ های دیگر |
| <del> | این تگ نشان دهنده محتوای حذف شده یا پاک شده است و اغلب با کشیدن یک خط بر روی نوشته نشان داده می شود. | تگ های دیگر |
| <mark> | این تگ برای های لایت کردن نوشته اغلب با بک گراند زرد به کار می رود. | تگ های دیگر |
تگ های فرمت بندی به همراه مثال های مرتبط.
در ادامه این نوشته ما از مثال هائی از تگ های فرمت بندی HTML را برای شما نشان می دهیم.
تگ <b> در HTML
تگ <b> برای ایجاد نوشته های ضخیم به کار می رود. در اینجا هیچ جنبه منطقی وجود ندارد و تنها نشان دهنده ضخیم سازی خطوط نوشته است.
مثال
در این مثال ما از تگ برای ایجاد ضخامت بیشتر در نوشته ها استفاده کرده ایم.
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
خروجی کار:
The following word uses a bold typeface.
تگ <strong> در HTML
تگ <strong> برای ایجاد خطوط ضخیم تر در نوشته ها به کار گرفته می شود و نشان دهنده اهمیت بخش نوشتاری انتخابی در میان سایر بخش های نوشته است.
نکته: تگ<b>سبب می شود که نوشته تنها ضخیم تر دیده شود، در حالیکه تگ<strong>سبب می شود که نوشته شما هم ضخیم تر دیده شود و هم با اهمیت تر تشخیص داده شود.
مثال
در این مثال ما از تگ <strong> برای نشان دادن اهمیت نوشته استفاده کرده ایم.
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
خروجی:
The following word uses a strong typeface.
تگ <i> در HTML
هر محتوایی که در میان تو تگ باز و بسته <i>… </i> قرار بگیرد، به صورت ایتالیک (مورب) نشان داده می شود.
مثال
این مثال نشان دهنده نحوه استفاده از تگ<i>در HTML است.
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
خروجی:
The following word uses a italicized typeface.
تگ <em> در HTML
تگ <em> می تواند برای تاکید بر روی بخشی از نوشته به صورت معنایی به کار گرفته شود. در این حالت مرورگرها متوجه تغییر لحن نوشتار شما می شوند.
مثال
در مثال زیر ما از تگ <em> برای ایجاد تاکید بر روی بخشی از نوشته استفاده کردیم.
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>
خروجی
The following word uses a emphasized typeface.
تگ <big> در HTML
هر بخشی که در میان دو تگ<big> …</big> قرار بگیرد بزرگتر از نوشته های اطراف خودش نمایش داده می شود.
مثال
در مثال زیر شما می توانید نحوه استفاده از تگ <big> را مشاهده کنید. خروجی حاصل از این تگ در کد به صورت نوشته های بزرگتر نمایش داده می شود.
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>Hello Welcome to <big>Hostbaz</big>.</p>
</body>
</html>
خروجی:
Hello Welcome to Hostbaz.
تگ <small> در HTML
محتواهائی که بین دو تگ<small> … </small> قرار بگیرند، نسبت به نوشته هایی که در اطراف آن ها هستند به صورت کوچکتر نمایش داده می شوند.
مثال
این مثال نشان دهنده استفاده از تگ <small> در یک صفحه HTML است. همانطور که در نتیجه خواهید دید، نوشته های قرار گرفته در میان این تگ کوچکتر از بخش های دیگر نمایش داده می شود.
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>Hello Welcome to <small>hostbaz</small>.</p>
</body>
</html>
خروجی:
Hello Welcome to hostbaz.
تگ <sup> در HTML
هر محتوائی که در میان دو تگ <sup> … </sup> قرار بگیرد، به صورت توان یا بالانویس در نوشته ظاهر می شود. در اینجا نوشته از خط مبنا بالاتر نشان اده می شود و اندازه فونت آن کاهش پیدا می کند. این کار سبب می شود نوشته حالت توان نویسی پیدا کند.
مثال
در این مثال ما از تگ <sup> برای نمایش نوشته های توانی استفاده کرده ایم.
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface. </p>
</body>
</html>
تگ <sub> در HTML
هر نوشته ای که بین دو تگ <sub> … </sub> قرار بگیرند، می تواند به صورت زیر نویس (ایندکس) در کنار نوشته اصلی ظاهر می شوند. این نوشته ها با فونت کوچکتر نوشته شده و پائین تر از خط مبنای نوشته قرار می گیرند. اغلب از این نوشته ها برای نگارش فرمول های شیمیایی و یا سایر موارد استفاده می شود.
مثال
در این مثال ما نحوه استفاده از تگ <sub> را به شما نشان داده ایم. در خروجی این کد همانطور که مشاهده خواهید کرد، نوشته ایندکس در پائین صفحه نمایش ظاهر می شود.
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface. </p>
</body>
</html>
تگ <ins> در HTML
هر محتوایی که در درون تگ <ins> … </ins> بیشتر به شکل یک نوشته با یک زیر خط نشان داده می شود. این تگ به معنای نوشته افزوده شده به نوشته اصلی است.
مثال
در مثال زیر ما از تگ های <ins> و <del> برای وارد کردن و حذف نوشته ها استفاده کرده ایم.
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
تگ <del> در HTML
محتواها در درون تگ <del> … </del> به شکل نوشته حذف شده اغلب با یک خط افقی کشیده شده بر روی نوشته محتوایی نمایش داده می شوند.
مثال
در مثال زیر ما از تگ های <del> و <ins> برای نشان دادن نوشته حذف شده و نوشته جایگزین اضافه شده به متن استفاده کرده ایم.
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>Hello welcome to <del>Madras</del> <ins>Chennai</ins></p>
</body>
</html>
تگ <u> در HTML
هر محتوائی که در میان دو تگ <u> … </u>قرار بگیرند، به صورت یک نوشته با زیر خط نمایش داده می شوند.
مثال
در مثال زیر ما از تگ <u> برای نمایش زیر خط استفاده کرده ایم.
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
تگ <strike> در HTML
محتوایی که در میان دو تگ <strike> … </strike> قرار می گیرند، به صورت نوشته ای با یک خط بر روی آن نوشته در صفحه وب نمایش داده می شود.
مثال
در مثال زیر ما از تگ <strike> استفاده کرده ایم تا بتوانیم نوشته را به صورت یک نوشته خط خورده در صفحه وب نمایش دهیم.
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
تگ <mark> در HTML
تگ <mark> برای های لایت کردن نوشته ها به کار گرفته می شود و می توان از آن برای نشان دادن بخش های مهم یک نوشته استفاده کرد.
مثال
در مثال زیر ما از تگ <mark> برای نشان دادن بخش مهم در نوشته استفاده می کنیم.
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <mark>strikethrough</mark> typeface.</p>
</body>
</html>
تگ <tt> در HTML
هر محتوایی که بین دو تگ <tt> … </tt> قرار بگیرد با استفاده از حروف تک اندازه (Monospaced Font) نمایش داده می شود. بیشتر فونت هایی که ما به صورت معمول استفاده می کنیم دارای عرض های متفاوتی برای هر کدام از حروف هستند. برای مثال حرف m و I دارای اندازه عرضی متفاوتی هستند. اما در حروف تک اندازه این حروف به یک اندازه هستند و در نتیجه امکان کنترل شرایط چاپ در دستگاه های تله تکس فراهم می شود.
مثال
در مثال زیر ما از تگ <tt> برای ایجاد نوشته های با حروف تک عرض استفاده کرده ایم.
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>