قالبندی متن ها ی 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
جدیدترین ویدئوهای آموزشی
در بخش TV باگتو، آموزش های کوتاه و جدید را مشاهده نمایید
