تگ های قالب بندی متن

لطفا برای تست کدها از ادیتور آنلاین استفاده کنید.


                                                   ادیتور آنلاین اینجا کلیک کنید

                                                  ادیتور آنلاین اینجا کلیک کنید2

تگ < p > :

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

خواص مهم

 

نام خاصیت

نوع خاصیت

شرح

align

left
right
center
justify

تراز بندی افقی نوشته را در پاراگراف تعیین می کند ، که می تولند یکی از حالت های زیر را داشته باشد : 
-left : نوشته را از سمت چپ تراز می کند .
-right : نوشته را از سمت راست تراز می کند .
-center : نوشته در وسط صفحه یا خانه جدول تراز می شود .
-justify : نوشته به اندازه ای که کل عرض صفحه یا خانه جدول را پر کند ، کش می آید .

 

Example

کد

خروجی

< p > This is a sample paragraph < /p >
< p > This is another paragraph < /p >

This is a sample paragraph

This is another paragraph

 

تگ < h1 > - < h6 > :

این تگ معمولا برای ایجاد تیترها و عنوان ها مورد استفاده قرار می گیرد . متنی که قرار است به عنوان تیتر نمایش داده شود ، بین تگ باز و بسته قرار می گیرد .
< h1 > بزرگترین سایز نوشته را ارائه داده و با بزرگتر شدن عدد بعد از h ، سایز نوشته آن کاهش می یابد و < h6 > کوچکترین سایز نوشته را ارائه می دهد .

خواص مهم

نام خاصیت

نوع خاصیت

شرح

align

left
right
center
justify

تراز بندی افقی نوشته را برای متن عنوان تعیین می کند که می تولند یکی از حالت های زیر را داشته باشد : 
-left : نوشته را از سمت چپ تراز می کند .
-right : نوشته را از سمت راست تراز می کند .
-center : نوشته در وسط صفحه یا خانه جدول تراز می شود .
-justify : نوشته به اندازه ای که کل عرض صفحه یا خانه جدول را پر کند ، کش می آید .

 

Example

کد

خروجی

< h1 > This is header 1 < /h1 >
< h2 > This is header 2 < /h2 >
< h3 > This is header 3 < /h3 >
< h4 > This is header 4< < /h4 >
< h5 > This is header 5 < /h5 >
< h6 > This is header 6 < /h6 >

This is header 1

This is header 2

This is header 3

This is header 4

This is header 5

This is header 6

 

تگ < br > :

به کاربردن این تگ باعث ایجاد یک خط جدید و انتقال نوشته به اول سطر پایینی می شود . همچنین به وسیله آن می توان یک خط خالی ایجاد کرد .
نکته : تگ < br > دارای تگ پایانی نیست و ترکیب < br > ... < /br > غلط است . این تگ باید به وسیله یک علامت / در درون تگ ابتدایی بسته شود .

Example

کد

خروجی

< p > My name is : < br / > Mehrdad < /p >

My name is : 
Mehradad

 

تگ < hr> :

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

Example

کد

خروجی

This is a line < hr / > ok!

This is a line

ok!

 

 

 

تگ < b > :

باعث توپر شدن متنی که درون تگ باز و بسته <b> قرار بگیرد می شود .

Example

کد

خروجی

< b > This is Bold Text < /b >

This is Bold Text

 

تگ < u > :

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

Example

کد

خروجی

< u > This is underline Text < /u >

This is underline Text

 

تگ < em > , < i > :

باعث می شود تا متن درون آن به صورت کج (italic) نماِش داده شود .

Example

کد

خروجی

< i > This is italic Text < /i > 
< em > This is italic Text < /em >

This is italic Text
This is italic Text

 

تگ < big > :

این تگ باعث نمایش بزرگتر محتویات درون آن نسبت به متن خطوط همجوار می شود .

Example

کد

خروجی

My name is < big > Mehrdad < /big >

My name is Mehrdad

 

تگ < small > :

این تگ باعث کوچکتر نمایش دادن محتویات درون آن نسبت به متن خطوط همجوار در صفحه می شود .

Example

کد

خروجی

My name is < small > Mehrdad < /small >

My name is Mehrdad

 

تگ < strong > :

این تگ باعث نمایش توپر و بزرگتر محتویات درون خود نسبت به متن خطوط همجوار آن می شود .

Example

کد

خروجی

My name is < strong > Mehrdad < /strong >

My name is Mehrdad

 

تگ < cite > :

این تگ باعث نمایش محتویات درون خود به صورت کج و متمایز نسبت به متن خطوط همجوار آن می شود .

Example

کد

خروجی

My name is < cite > Mehradad < /cite >

My name is Mehrdad

 

تگ < address > :

از این تگ معمولا برای نمایش آدرس ها در صفحه های وب استفاده می شود . خصوصیت مهم تگ address این است که متن درون خود را به صورت کج (italic) نمایش داده و باعث ایجاد یک خط جدید در ابتدا و انتهای آدرس می شود .

Example

کد

خروجی

< address > 
Washington DC <br / >
New York <br / >
214 Ave.
< /address >

Wshington DC 
New York 
214 Ave.

 

تگ < pre > :

چنانچه در محیط کد نویسی صفحات وب ، بین متن های نوشته شده با کلید space فاصله ایجاد کرده یا با کلید Enter به خط بعدی بروید ، مرورگر این مسئله را نادیده گرفته ، تمام فاصله ها را از بین برده و حداکثر به اندازه یک کاراکتر فاصله ایجاد می کند . برای جلوگیری از این مسئله ، از تگ <pre> استفاده می کنیم . این تگ باعث نمایش متن درون خود با همان شکل و ساختاری که در محیط کد نویسی صفحه وارد شده است ، می شود . همانطور که قبلا ذکر شد ، برای ایجاد فاصله بین حروف از کاراکتر ;nbsp& و رفتن به خط بعدی از تگ < br/ > استفاده می کنیم .

Example

کد

خروجی

< pre > This is a pre
formatted paragraph
it does not have any 
space or linebrake < / pre >

              this is a pre

              formatted paragraph

              it does not have any

              space or linebrake

        

< p > this is a usual paragraph
IE doesn't pay attention to line brakes 
and spaces it shows it like this < /p >

this is a usual paragraph IE doesn't pay attention to line brakes and spaces it shows it like this

 

 

تگ های کد کامپیوتر

تگ های کد کامپیوتر :

از این گروه تگ برای نمایش نوشته های مورد نظر همانند نمایش در محیط های برنامه نویسی استفاده می شوند . این حالت برای استفاده در صفحات آموزش کد نویسی و یا شبیه سازی محیط های برنامه نویسی مناسب هستند .

تگ < code > :

این تگ نوشته را به صورت نوشته های درون محیط های برنامه نویسی قدیمی تبدیل می کند .

Example

کد

خروجی

< code > This is a sample code < /code >

This is a sample code

 

تگ < kbd > :

این تگ نیز حالت خاصی مثل حروف دستگاه تایپ به متن می دهد .

Example

کد

خروجی

< kbd > This text is like a type writer < /kbd >

This text is like a type writer

 

تگ < samp > :

این تگ نیز حالت خاصی مثل نوشته های درون محیط های برنامه نویسی به متن می دهد .

Example

کد

خروجی

< samp > This text is sample text < /samp >

This text is sample text

 

تگ < tt > :

این تگ نیز حالت خاصی از نوشته مثل حروف تلگراف به متن می دهد .

Example

کد

خروجی

< tt > This text is telegraph text < /tt >

This text is telegraph text

 

تگ < var > :

این تگ حالتی برای تعریف متغیرهای برنامه نویسی ایجاد می کند .

Example

کد

خروجی

< var > This is a variable < /var >

This is a variable

 

 

 

تگ های قالب بندی متن

تگ < sub > , < sup > :

از این تگ ها برای ایجاد نوشته های زیر نویس یا اندیس دار استفاده می شود .

Example

کد

خروجی

This is a text < sub > example < /sub >

This is a text example

This is a text < sup > example < /sup >

This is a text example

 

تگ < abbr > :

از این تگ معمولا برای نمایش یک متن کوتاه و خلاصه شده برای یک واژه یا عبارت بزرگتر استفاده می شود . به طور مثال در انگلیسی به جای عبارت et cetra از واژه etc استفاده می کنند .
ویژگی مهم تگ < abbr > این است که می تواند یک مقدار توسط خاصیت title خود گرفته و در هنگام قرار گیری موس بر روی واژه خلاصه شده ، ان نوشته در یک کادر زرد رنگ نمایش دهد .

Example

موس را برای چند لحظه برروی واژه etc برده و صبر کنید .

کد

خروجی

< abbr title ="et cetra" > etc < /abbr >

etc

 

تگ < acronym > :

این تگ نیز دقیقا عملکردی همانند تگ < abbr > دارد و برای ایجاد یک عنوان مخفف برای یک عبارت بزرگتر استفاده می شود .

Example

موس را برای چند لحظه برروی واژه WWW برده و صبر کنید .

کد

خروجی

< acronym title="World Wide Web" > WWW < /acronym >

WWW

 

تگ < bdo > :

این تگ مشخص کننده جهت نمایش متن درون خود است . خاصیت dir مشخص کننده جهت نوشته است ، که دو حالت کلی دارد :
1) rtl : راست به چپ 
2) ltr : چپ به راست 
نکته : برای زبان هایی مثل فارسی یا عربی از جهت راست به چپ و برای زبان های مثل انگلیسی از جهت چپ به راست استفاده می شود .
نکته : از این تگ دیگر استفاده نمی شود و به جای آن از خاصیت direction در style ها استفاده می شود .

مثال bdo

< bdo dir="rtl" >
   . برای زبان فارسی جهت نوشته باید از راست به چپ باشد 
< /bdo > 
< bdo dir="ltr" >
   But for english it must be left to right ! 
< /bdo >

کد

برای زبان فارسی جهت نوشته باید از راست به چپ باشد .
But for english it must be left to right !

خروجی

 

 

 

تگ های قالب بندی متن

تگ < del > :

این تگ باعث کشیده شدن یک خط بر روی نوشته های درون خود می شود .

Example

کد

خروجی

This is not correct < del > 2+2=5 < /del >

This is not correct 2+2=5

 

تگ < ins > :

این تگ برای نشان دادن یک متن جدید وارد شده در صفحه به کار می رود و یک خط زیر نوشته های درون خود می کشد .

خواص مهم

نام خاصیت

نوع خاصیت

شرح

cite

URL مسیر فایل

مشخص کننده پیوند به نقطه دیگری از صفحه است که درباره متن جدید وارد شده توضیحاتی را ارائه می دهد .

datetime

YYYYMMDD
تاریخ

تاریخ و ساعت وارد شدن متن جدید را به درون صفحه نمایش می دهد .



نکته : از ترکیب تگ های <ins > , < del > می توان برای نشان دادن اصلاحات در نوشته های صفحات وب استفاده کرد .

Example

کد

خروجی

Our new price is < del > 1000 < /del > < ins > 800 < /ins >

Our new price is 1000  800

 

تگ < blockquote > :

از این تگ برای نمایش یک متن یا نوشته به صورت نقل قول استفاده می شود . این تگ معمولا برای نمایش اطلاغاتی همچون معانی لغت در واژه نامه ها استفاده شده و باعث می شود متن درون آن کمی جلوتر و یک خط پایینتر از بقیه نوشته ها قذرار بگیرد .

خواص مهم

نام خاصیت

نوع خاصیت

شرح

cite

URL مسیر فایل

مسیر فایل نوشته خلاصه شده را می دهد ، در صورتی که از وب گرفته شده باشد .

 

Example

کد

خروجی

What is an apple ?
< blockqute > 
  It is a sweet fruit with red skin 
< /blockquote >

What is an apple ?

It is a sweet fruit with red skin

 

< q > :

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

Example

کد

خروجی

What is an apple ?
< q > 
  It is a sweet fruit with red skin 
< /q >

What is an apple ? It is a sweet fruit with red skin