html

تگ های قالب بندی متن – آموزش HTML (جلسه چهارم)

در این قسمت از آموزش، با تعدادی از تگ های HTML آشنا خواهیم شد. اکثر این تگ ها برای کنترل نحوه نمایش متن ها استفاده می شوند، که به همین دلیل به آن ها تگ های قالب بندی متن گفته می شود.

تگ <p>: از این تگ جهت ایجاد یک پاراگراف جدید در صفحه استفاده می شود. هر متنی که داخل تگ باز و بسته <p> قرار بگیرد، محتویان آن پاراگراف را تشکیل می دهد. توجه داشته باشید که با ایجاد یک پاراگراف جدید، نوشته به ابتدای خط بعدی انتقال پیدا می کند.

نکته: هنگامی که در یک ویرایشگر در حال تایپ متون هستید، با فشردن کلید Enter سبب ایجاد یک پاراگراف جدید در متن می شوید.

نحوه نوشتن کد:

<p style="text-align: justify;"><p>This is a sample text</p>

نتیجه کد بالا:

This is a sampletext

تگ پاراگراف یا <p> دارای صفت align می باشد که با استفاده از آن می توان، نحوه چینش متن داخل پاراگراف را، تنظیم کرد. یا به عبارت دیگر، نحوه ترازبندی افقی نوشته در پاراگراف را مشخص می کند که حالات زیر را در بر می گیرد:

Left : متن در سمت چپ صفحه قرار می گیرد.

Right : متن در سمت راست صفحه قرار می گیرد.

Center : متن به صورت وسط چین تنظیم می شود.

Justify: متن را نسبت به کل عرض صفحه یا جدول، از سمت چپ و راست، تراز می کند.


مثال:

نحوه نوشتن کد:

<p align="right">This is a sample text</p>
<p align="left">This is a sample text</p>
<p align="center">This is a sample text</p>
<p align="justify">This is a sample text</p>

 

تگ <b>: متن داخل تگ <b> به صورت ضخیم(Bold) نمایش داده می شود. در مثال زیر عبارت sample به صورت ضخیم نمایش داده خواهد شد:

نحوه نوشتن کد:

<p>This is a <b>sample</b> text</p>

نتیجه کد بالا:

This is a sample text

تگ <i> : متن داخل تگ <i> به صورت کج یا مورب نمایش داده می شود. در مثال زیر عبارت sample به صورت مورب نمایش داده خواهد شد:

نحوه نوشتن کد:

<p>This is a <i>sample</i> text</p>

نتیجه کد بالا:

This is a sample text

 

Tag توضیحات
<em> متن را به صورت emphasized نمایش می دهد.
<strong> متن را به صورت strong نمایش می دهد.
<dfn> جهت تعریف definition term
<code> متن را به صورت computer code نمایش می دهد.
<samp> متن را به صورت sample computer code نمایش می دهد.
<kbd> متن را به صورت keyboard نمایش می دهد.
<var> متن را به صورت variable نمایش می دهد.

 

تگ <u> : عباراتی که داخل تگ <u> قرار می گیرند، یک خط زیر آن ها نمایش داده می شود. در این مثال ، یک خط زیر عبارت sample نمایش داده خواهد شد:

نحوه نوشتن کد:

<p>This is a <u>sample</u> text</p>

نتیجه کد بالا:

This is a sample text

تگ <del> : تگ <del> یک قسمت از متن را که از سند حذف شده است نمایش می دهد. در مثال زیر یک خط بر روی عبارت sample نمایش داده خواهد شد.

نحوه نوشتن کد:

<p>This is a <del>sample</del> text</p>

نتیجه کد بالا:

This is a sample text

تگ <sup> : این تگ متن را به صورت بالانویس نمایش می دهد. از این تگ هنگام نوشتن فرمول های ریاضی و یا پانوشت ها می توان استفاده کرد. در مثال زیر عبارت sampel به صورت بالانویس نمایش داده شده است.

نحوه نوشتن کد:

<p>This is a <sup>sample</sup> text</p>

نتیجه کد بالا:

This is a sample text

تگ <sub> : این تگ متن را به صورت زیرنویس نمایش می دهد. از این تگ به هنگام نوشتن فرمول های شیمی می توان استفاده کرد. در مثال زیر عبارت sampel به صورت زیرنویس نمایش داده شده است.

نحوه نوشتن کد:

<p>This is a <sub>sample</sub> text</p>

نتیجه کد بالا:

This is a sample text

تگ <big> : این تگ قسمتی از متن را به صورت درشتر نمایش می دهد. در مثال زیر عبارت sampel به صورت زیرنویس نمایش داده شده است.

نحوه نوشتن کد:

<p>This is a <big>sample</big> text</p>

نتیجه کد بالا:

This is a sample text

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

نحوه نوشتن کد:

<p>This is a <small>sample</small> text</p>

نتیجه کد بالا:

This is a sample tex

در ادامه با آموزش مباحث دیگر HTML، همراه ما باشید…

Related Articles

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

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

Close