نمایش متن در HTML

[P O U R I A]

فهرست مطالب:

1. تعیین روش کدگذاری کاراکترها در صفحه HTML
2. نمایش متن از پیش قالب دهی شده با تگ pre در HTML
3. نمایش بلوک نقل قول با تگ blockquote در HTML
4. نمایش نقل قول درون خطی با تگ q در HTML
5. highlight کردن متن (رنگی کردن پس زمینه متن) در HTML

منبع: kelidestan

 

[P O U R I A]

تعیین روش کدگذاری کاراکترها در صفحه HTML

تعیین روش کدگذاری کاراکترها در صفحه HTML

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

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]meta[/B][/COLOR] [COLOR=#000066]http-equiv[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"Content-Type"[/COLOR] [COLOR=#000066]content[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"text/html; charset=encoding"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

که در آن، به جای کلمه encoding، باید نام روش کدگذاری کاراکترها را بنویسیم.

برای صفحات فارسی زبان، می توان تگ <meta> را به صورت زیر نوشت:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]meta[/B][/COLOR] [COLOR=#000066]http-equiv[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"Content-Type"[/COLOR] [COLOR=#000066]content[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"text/html; charset=utf-8"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

 

[P O U R I A]

نمایش متن از پیش قالب دهی شده با تگ pre در HTML

نمایش متن از پیش قالب دهی شده با تگ pre در HTML

همان طور که می دانید، زمانی که HTML می خواهد یک متن را نمایش بدهد، اگر مثلا بین دو کلمه، 6 فاصله وجود داشته باشد، آنگاه HTML آن 6 فاصله را تنها به صورت 1 فاصله در نظر گرفته و نمایش می دهد. حتی اگر دو جمله در دو خط متوالی، درون کدها نوشته شده باشند آنگاه HTML، تنها یک فاصله در بین دو جمله قرار می دهد و بنابراین دو جمله را در دو خط، نمایش نخواهد داد. اما با این توصیفات، شاید ما بخواهیم یک متن را همان طور که نوشته ایم (از پیش قالب دهی شده)، به همان صورت در خروجی HTML داشته باشیم. برای این منظور، تگ pre در HTML به کار می رود تا با آن بتوانیم یک متن از پیش قالب دهی شده را نمایش بدهیم. به مثال زیر توجه کنید :

[h=4]مثال :[/h]

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]pre[/B][/COLOR]>[/COLOR]
welcome
       to
          the
              kelidestan.com
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]pre[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

 

[P O U R I A]

نمایش بلوک نقل قول با تگ blockquote در HTML

نمایش بلوک نقل قول با تگ blockquote در HTML

تگ blockquote در HTML، برای نمایش یک بلوک نقل قول به کار می رود. مرورگرهای اینترنتی، معمولا بلوک های نقل قول را به صورت تو رفته نمایش می دهند. به مثال زیر توجه کنید :

[h=4]مثال :[/h]

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]this is a text.[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]blockquote[/B][/COLOR]>[/COLOR]
text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text,
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]blockquote[/B][/COLOR]>[/COLOR]


[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]this is a text.[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]
مشاهده می کنید که بلوک نقل قول به صورت تو رفته نمایش داده شده است.

 

[P O U R I A]

نمایش نقل قول درون خطی با تگ q در HTML

نمایش نقل قول درون خطی با تگ q در HTML

با استفاده از تگ q در HTML، می توانیم یک نقل قول درون خطی را نمایش بدهیم. به مثال زیر توجه کنید :

[h=4]مثال :[/h]

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
this is a text.

[COLOR=#009900]<[COLOR=#000000][B]q[/B][/COLOR]>[/COLOR]
text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text,
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]q[/B][/COLOR]>[/COLOR]

this is a text.
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

 

[P O U R I A]

highlight کردن متن (رنگی کردن پس زمینه متن) در HTML

highlight کردن متن (رنگی کردن پس زمینه متن) در HTML

برای آنکه بتوانیم یک متن را در HTML ، به صورت highlight درآوریم (یعنی پس زمینه متن را به صورت رنگی نمایش بدهیم)، می توانیم از تگ span و همچنین مشخصه background-color از CSS استفاده کنیم. برای درک این موضوع، به مثال زیر توجه کنید :

[h=4]مثال :[/h]

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]span[/B][/COLOR] [COLOR=#000066]style[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"background-color:yellow"[/COLOR]>[/COLOR]
this is a paragraph.
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]span[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

همان طور که مشاهده می کنید، متن مورد نظر را در میان زوج تگ span قرار داده ایم. همچنین، تگ style برای به کار بردن مشخصه های CSS استفاده می شود (در اینجا ما مشخصه background-color را به کار برده ایم. مشخصه background-color را برابر yellow قرار داده ایم، بنابراین رنگ پس زمینه متن به صورت زرد خواهد بود.

[h=4]نتیجه :[/h]