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

تگ <pre>:

در محیط برنامه نویسی HTML اگر بخواهید بین نوشته های خود با  space فاصله ایجاد کنید و با دکمه enter به خط بعد بروید مرورگر این فاصله ها را نادیده گرفته و تمام فاصله ها را از بین می برد و حداکثر به اندازه یک کاراکتر فاصله ایجاد می کند. برای جلوگیری از این مسئله باید از تگ <pre> استفاده کنیم. این تگ باعث نمایش متن درون خود با همان شکل و ساختاری که در محیط کد نویسی صفحه نوشته شده است، می شود.

نکته:برای ایجاد فاصله بین حروف از کاراکتر &nbsp; و برای رفتن به خط بعد از تگ <br> هم می شود استفاده کرد.

 

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

خروجی:

توجه: اگر همین ساختار نوشته را در تگ <p> بزاریم نتیجه کار به شکل زیر خواهد بود:

 

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

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

تگ <code>:

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

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

خروجی:

تگ <kbd>:

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

<kbd> This is Webamooz sait </kbd >

خروجی:

تگ <samp>:

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

<samp > This is Webamooz sait </samp >

خروجی:

تگ <tt>:

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

<tt > This is Webamooz sait </tt >

خروجی:

تگ <var>:

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

<var > This is a variable </var >

خروجی:

 

تگ های <sub> , <sup>:

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

 

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

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

خروجی:

 

تگ های <abbr> , <acronym>:

از این تگ برای نمایش یک کامل شده برای یک واژه و یا عبارت خلاصه شده استفاده می شود. به طور مثال به جای عبارت World Wide Web می نویسند WWW. ویژگی مهم این تگ ها ایت است که می توان یک مقدار توسط خاصیت title خود گرفته و در هنگام قرارگیری موس بر روی آنها واژه کامل آن ها در یک کادر نمایش داده میشود.

 

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

<br />

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

خروجی:

تگ <bdo>:

این تگ مشخص کننده جهت نمایش متن درون خود است. خاصیت dir مشخص کننده جهت نوشته است، که در دو حالت کلی نوشته می شود:

• rtl: راست به چپ
• ltr: چپ به راست

نکته: برای زبان هایی مانند فارسی یا عربی از جهت راست به چپ و برای زبان هایی مانند انگلیسی از چپ به راست استفاده می شود.

نکته: امروزه دیگر از این تگ استفاده نمی شود و به جای آن در زبان CSS از خاصیت directionدر style ها استفاده میشود.

<bdo dir="rtl" >
   . برای زبان فارسی جهت نوشته بايد از راست به چپ باشد 
</bdo > 

<hr />

<bdo dir="ltr" >
   But for english it must be left to right ! 
</bdo >

خروجی:

تگ <del>:

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

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

خروجی:

تگ <ins>:

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

مثال :ترکیب تگ <del> و <ins>

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

خروجی:

تگ های <blockquote> و <q>:

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

 

What is an apple ?

<blockquote>

  It is a sweet fruit with red skin

</blockquote>



<hr />



What is an apple ?

<q >

  It is a sweet fruit with red skin

</q >

خروجی:

سمبل های مخصوص در HTML

برای نوشتن سمبل های مخصوص در محیط برنامه نویسی باید از کد آنها استفاده کرد، که بعد از علامت &# نوشته و در پایان یک ; می گذاریم.

مثال:

<H1>Under ©opy Write law</H1>

خروجی:

نکته: به جای کد می توانیم از نام این کاراکتر ها نیز استفاده کنیم. کد این کاراکتر ها را می توانید در مجموعه ISO Latin1 بیابید.

پس برای مثال قبل از کد زیر هم می توان استفاده کرد:

<H1> Under ©opy Write law </H1>

 

نمونه ای از این کدها در جدول زیر آمده است:

نتیجه	نام حرف	نام نهادی	عدد نهادی
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
©	copyright	©	©
®	registered trademark	®	®
°	degree	°	°
±	plus-or-minus	±	±
²	superscript 2	²	²
³	superscript 3	³	³
μ	micro	µ	µ
¹	superscript 1	¹	¹
¼	fraction 1/4	¼	¼
½	fraction 1/2	½	½
¾	fraction 3/4	¾	¾
	non-breaking space	 	 
<	less than	&lt;	&#60;
>	greater than	&gt;	&#62;
&	ampersand	&amp;	&#38;
“	quotation mark	&quot;	&#34;
‘	apostrophe		&#39;

 

جلسه دوم تگ های قالب بندی نوشته ها در HTML هم اینجا به پایان رسید. برای دیدن جلسه اول قالب بندی نوشته کلیک کنید.

موفق و پیروز باشید.