آموزش رایگان html
جلسه نهم

قالب بندی متن در HTML

عناصر قالب بندی متن در HTML در جلسه قبل در مورد ویژگی style در عناصر HTML صحبت کردیم. در HTML ، برای قالب بندی متن از عناصر خاصی استفاده میکنیم که در ادامه به آنها خواهیم پرداخت. در HTML ، برای ضخیم (bold) کردن و یا کج (italic) کردن متن و … از عناصری نظیر […]

عناصر قالب بندی متن در HTML

در جلسه قبل در مورد ویژگی style در عناصر HTML صحبت کردیم.

در HTML ، برای قالب بندی متن از عناصر خاصی استفاده میکنیم که در ادامه به آنها خواهیم پرداخت.

در HTML ، برای ضخیم (bold) کردن و یا کج (italic) کردن متن و … از عناصری نظیر <b> و <i> استفاده میکنیم.

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

نمونه هایی از این عناصر عبارتند از :

 

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

 

 

تگ های <b> و <strong> در HTML

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

مثال:

در نمونه کد بالا ، عبارت اولی بصورت عادی و عبارت دومی ، درون تگ <b> نوشته شده است که نمایش آن در مرورگر بصورت زیر میباشد:

 

bold کردن متن در html به کمک تگ <b>

 

تگ <strong> ، علاوه بر ضخیم کردن متن ، اهمیت متن مورد نظر را زیاد (strong) تعریف میکند.

مثال:

در نمونه کد بالا ، عبارت اولی بصورت عادی و عبارت دومی درون تگ <strong> نوشته شده است که نمایش آن در مرورگر به صورت زیر میباشد.

 

 

مهم کردن متن در html به کمک تگ <strong>

 

همانطور که در در دو مثال بالا مشخص است هر دو تگ <b> و <strong> ، باعث ضخیم شدن متن میشوند و در ظاهر باهم تفاوتی ندارند.امّا دقت کنید که تگ <strong> علاوه بر ضخیم کردن متن به مرورگر و موتورهای جستجوگر میفهماند که این متن دارای اهمیت زیادی است ، در صورتیکه تگ <b> چنین مفهومی را بیان نمیکند و صرفاً باعث تغییر ظاهری متن (ضخیم شدن) میشود.

 

 

تگ های <i> و <em> در HTML

تگ <i> ، باعث کج (italic) شدن متن می شود بدون آنکه به بیان اهمیت و یا تاکید بر روی آن بپردازد.

مثال:

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

 

italic کردن متن در html به کمک تگ <i>

 

تگ <em> ، علاوه بر کج کردن متن باعث تعریف یک متن تاکیدی (با اهمیت بالا) میشود.

مثال:

در نمونه کد بالا عبارت اول بصورت عادی و عبارت دوم درون تگ <em> ، نوشته شده است که نمایش آن در مرورگر بصورت زیر میباشد.

 

تاکید کردن روی متن در html به کمک تگ <em>

همانطور که در دو مثال بالا میبینیم ، هر دو تگ <i> و <em> ، باعث کج (italic) شدن متن میشوند و در ظاهر با هم تفاوتی ندارند.اما دقت کنید که تگ <em> ،علاوه بر کج کردن متن ، به مرورگر و موتور های جستجوگر میفهماند که این متن ، یک متنِ تاکید شده است ، در صورتیکه تگ <i> چنین مفهومی را بیان نمیکند و صرفاً باعث تغییر ظاهر متن (کج شدن آن) میشود.

 

تگ <small> در HTML

تگ <small> ، برای کوچک کردن متن استفاده میشود.

مثال:

در نمونه کد بالا کلمه small درون تگ <small> قرار گرفته است و بنابراین در مرورگر کوچک تر از سایر کلمات نمایش داده میشود.(به تصویر زیر نگاه کنید)

 

کوچک کردن متن در html به کمک تگ <small>

 

 

تگ <mark> در HTML

از تگ <mark> ، برای علامت گذاری و برجسته کردن متن استفاده میشود.

مثال:

در نمونه کد بالا ، عبارت Marked ، درون تگ <mark> قرار گرفته است که باعث میشود بصورت هایلایت شده نمایش داده شود.(تصویر زیر)

 

علامت زدن متن در html به کمک تگ <mark>

 

 

تگ <del> در HTML

از تگ <del> ، به منظور نمایش یک متن حذف شده (خط خورده) در HTML استفاده میشود.

مثال:

در نمونه کد بالا عبارت blue درون تگ <del> ، قرار داده شده است که نمایش آن در مرورگر بصورت خط خورده میباشد.(تصویر زیر)

 

خط خوردن متن در html به کمک تگ <del>

 

تگ <ins> در HTML

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

مثال:

در نمونه کد بالا عبارت color درون تگ <ins> قرار داده شده است که نمایش آن در مرورگر بصورت زیر است.

 

تگ <ins> در html

 

تگ <sub> در HTML

در HTML ، از تگ <sub> برای نوشتن زیر نویس استفاده میشود.

مثال:

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

 

نوشتن زیرنویس در Html به کمک تگ <sub>

 

تگ <sup> در HTML

در HTML ، از تگ <sup> برای نوشتن رونویس (برعکس زیرنویس) استفاده میشود.

مثال:

در مثال بالا عبارت superscripted درون تگ <sup> قرار گرفته است که نمایش آن در مرورگر بصورت زیر خواهد بود:

 

استفاده از تگ <sup> در html

عناصر قالب بندی متن در HTML

این جلسه از آموزش HTML را میتوان در جدول زیر خلاصه کرد.

 

تگتوضیحات
<b>متن را ضخیم (bold) میکند
<em>یک متن تاکیدی (تاکید شده) را تعریف میکند
<i>متن را کج (italic) میکند
<small>متن را کوچک میکند
<strong>یک متن مهم (پر اهمیت) را تعریف میکند
<sub>یک متن زیرنویس را تعریف میکند
<sup>یک متن رونویس را تعریف میکند
<ins>یک متن مندرج (بعداً اضافه شده) را تعریف میکند.
<del>یک متن حذف شده (خط خورده) را تعریف میکند.
<mark>یک متن علامتگذاری شده را تعریف میکند.
کلیه حقوق مدرسه مجازی وب متعلق به گروه طراحی وب نگار میباشد.کپی برداری تنها با ذکر منبع مجاز میباشد.