مقالات باگتو

قالبندی متن ها ی HTML یا HTML Formatting
قالبندی متن ها ی HTML یا HTML Formatting

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

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

در html  تگ های قالب بندی به دو دسته تقسیم می شوند:

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

تگ های منطقی: برایا فزودن مقدارهای معنایی ومنطقی به متن مورد استفاده قرار می گیرند.

 

تگتوضیحات 
<b> این یک تگ فیزکی است و باعث می شود متن بزرگتر ازنوشته های دیگر باشد
<strong>از دسته تگ های منطقی است و به مرورگر می گوید این متن مهم است. 
<i>برای نمایش متن بصورت مورب  یا همان italic  استفاده میشود
<em>یک تگ معنایی برای نمایش دادن متن بصورت italic استفاده می شود.
<mark>برای برجسته نشاندن متن استفاده می شود
<u>

زیر متن نوشته شده خطی ترسیم می کند

<tt>

برای نمایش متن  teletype در مروگر به کار میرود این تگ  درhtml5 پشتیبانی نمی شود

<strike>این تگ برای ترسیم یک قسمت از متن بر روی متن استفاده می شود.در HTML5 پشتیبانی نمی شود
<sup>متن را کمی بالاتر ازخط عادی نمایشن می دهد
<sub>متن را کمی پایین تر ازخط عادی نمایشن می دهد
<del>برای نمایش محتوای حذف شده استفاده می شود
<ins>محتوای اضافه شده را نمایش می دهد
<big> از این تگ  برای افزایش اندازه متن  یک واحد بزرگتر از معمولی نشان می دهد.
<small>از این تگ برای کاهش اندازه متن یک واحد کوچکتر از اندازه فونت پایه استفاده می شود.

 

 

1) متن پررنگ با bold text

در htmlعناصر<b> و<strong>  متن های  پررنگ را ایجاد می کنند.

تگ <b> یک تگ فیزیکی است که متن را بدون اهمیت منطقی پررنگ می کند. هر چیزی را که در میان تگ b></b> بنویسی پررنگ ترنمایش داده می شود.

این مثال را ببینید:

<p> <b>Write Your First Paragraph in bold text.</b></p>     

خروجی :

.Write Your First Paragraph in bold text

 

 

 تگ <strong>متن را  بصورت بزرگتر نشان می دهد با این تفاوت که از لحاظ منطقی به مرروگر می گوید این مطلب مهم است. هر متنی که بین تگ <strong>.......</strong> قرار بگیرد مهم است.

این مثال را ببینید:

<p><strong>This is an important content</strong>, and this is normal content</p>

خروجی :

This is an important content, and this is normal content

 

مثال:

<!DOCTYPE html>  
<html>  
<head>  
    <title>formatting elements</title>  
</head>  
<body>  
<h1>Explanation of formatting element</h1>  
<p><strong>This is an important content</strong>, and this is normal content</p>  
</body>  
</html>  

خروجی:

formatting elements

Explanation of formatting element

This is an important content, and this is normal content

 

 

2) متن مورب یا Italic Text 

تگ های <i>و <em>  تگ هایی هستند که در html متن را ایتالیک می سازد.

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

این مثال را ببینید:

<p> <i>Write Your First Paragraph in italic text.</i></p>  

خروجی :

.Write Your First Paragraph in italic text

 

 

اما تگ <em>  متن را از نظر منطقی ومعنایی  ایتالیک نمایش می دهد.

این مثال را ببینید:

<p><em>This is an important content</em>, which displayed in italic font.</p>

خروجی :

.This is an important content, which displayed in italic font

مثال :

<!DOCTYPE html>  
<html>  
<head>  
    <title>formatting elements</title>  
</head>  
<body>  
<h1>Explanation of italic formatting element</h1>  
<p><em>This is an important content</em>, which displayed in italic font.</p>  
</body>  
</html>  

خروجی :

formatting elements

Explanation of italic formatting element

.This is an important content, which displayed in italic font

 

 

3) علامت گذاری شده یا HTML Marked formatting

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

این مثال را ببینید:

<h2>  I want to put a <mark> Mark</mark> on your face</h2>   

 خروجی :

I want to put a Mark on your face

 

 

4) متن زیرخط دار یا Underlined Text

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

این مثال را ببینید:

<p> <u>Write Your First Paragraph in underlined text.</u></p>

خروجی :

.Write Your First Paragraph in underlined text

 

5) Strike

این مثال را ببینید:

<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>  

خروجی :

.Write Your First Paragraph with strikethrough

 

 

6)Monospaced Font

اگر می خواهید حروف به یک اندازه یکسان باشد ، باید مطالب را با عنصر <tt> ............. </tt> بنویسید. فضای یکسانی بین حروف ایجاد می کند.

این مثال را ببینید:

<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>     

خروجی:

.Hello Write Your First Paragraph in monospaced fon

 

این عنصر در html5 پشتیبانی نمی شود.

7) متن فوق متن یا Superscript Text

اگر محتوا را درون عنصر <sup> .............. </sup> قرار دهید ، در متن فوق نشان داده شده است. به این معناست که نیمی از ارتفاع کاراکتر را بالاتر از سایر متن  نشان می دهد.

این مثال را ببینید:

<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p> 

خروجی:

.Hello Write Your First Paragraph in superscript

 

 

8)Subscript Text

اگر محتوا را درون عنصر <sub> .............. </sub> قرار دهید ، در زیر نمایش داده شود. به این معناست که نیمی از ارتفاع کاراکتر را در زیر کاراکترهای دیگر نشان داده شود.

این مثال را ببینید:

<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p> 

خروجی :

.Hello Write Your First Paragraph in subscript

 

9) Deleted Text یا متن حذف شده

هر چیزی که درعنصر  <del> .......... </del> قرار گیرد به عنوان متن حذف شده نمایش داده می شود.

این مثال را ببینید :

<p>Hello <del>Delete your first paragraph.</del></p>  

خروجی :

.Hello Delete your first paragraph

 

10) متن درج شه یا Inserted Text

هر چیزی که درون <ins> .......... </ins> قرار گیرد به عنوان متن درج شده نمایش داده می شود.

این مثال را ببینید :

<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>  

خروجی:

.Delete your first paragraph.Write another paragraph

 

11) متن بزرگتر یاLarger Text


اگر می خواهید اندازه قلم خود را بزرگتر از بقیه متن قرار دهید ، محتوا را درون <big> ......... </big> قرار دهید. این عنصر اندازه متن را  یک سایز بزرگتر ازقبلی افزایش می دهد.

این مثال را با ببینید:

<p>Hello <big>Write the paragraph in larger font.</big></p>  

خروجی:

.Hello Write the paragraph in larger font

 

12) متن کوچکتر یا Smaller Text

اگر می خواهید اندازه قلم خود را از بقیه متن کوچکتر کنید ، محتوا را درون برچسب <small> ....... </small> قرار دهید. این  عنصر اندازه متن  رایک سایز کوچکتراز  قبلی کاهش می دهد.

این مثال را ببینید:

<p>Hello <small>Write the paragraph in smaller font.</small></p> 

خروجی:

.Hello Write the paragraph in smaller font

 

مقاله قبلی     مقاله بعدی

تگ‌ها
اشتراک

0 نظرات