آموزش قالب بندی HTML به زبان ساده

قالب بندی HTML فرایند قالب بندی متن برای ساختن ظاهر و حس بهتر است. HTML فابلیت قالب بندی متن را بدون استفاده از CSS در اختیار ما قرار می دهد. تگ های قالب بندی بسیاری در HTML وجود دارد. این تگ ها برای مواردی مانند توپر کردن متن، مورب کردن متن یا قرار دادن خط زیر متن استفاده می شوند. تقریباً ۱۴ مورد در دسترس برای نحوه نمایش متن در HTML و XHTML وجود دارد.

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

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

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

در اینجا، ۱۴ تگ قالب بندی متن HTML را در جدول زیر آورده ایم.

نام عنصر	توضیحات
<b>	تگ فیزیکی که متن درون خود را به صورت توپر نمایش می دهد.
<strong>	تگ منطقی است که به مرورگر اطلاع می دهد که متن درون آن اهمیت دارد.
<i>	تگ فیزیکی که متن را به صورت مورب نمایش می دهد.
<em>	تگ منطقی که محتوا را به صورت مورب نمایش می دهد.
<mark>	متن را به صورت علامت گذاری شده و متمایز نمایش می دهد.
<u>	زیر متن یک خط می کشد.
<tt>	متن را به صورت تله تایپ نمایش می دهد. (در ۵HTML پشتیبانی نمی شود.)
<strike>	روی یک قسمت از متن خط می کشد. (در ۵HTML پشتیبانی نمی شود.)
<sup>	محتوا را کمی بالاتر از متن معمول نمایش می دهد.
<sub>	محتوا را کمی پایین تر از متن معمول نمایش می دهد.
<del>	محتوای را به صورت خط خورده (حذف شده) نمایش می دهد.
<ins>	محتوای اضافه شده را نمایش می دهد.
<big>	اندازه قلم متن را براساس اندازه قلم پایه، یک واحد بزرگتر نمایش می دهد.
<small>	اندازه قلم متن را براساس اندازه قلم پایه، یک واحد کوچکتر نمایش می دهد.

۱) متن توپر (بولد)

فهرست عناوین

عناصر قالب بندی و<srong> در HTM

عنصر یک تگ فیزیکی است که محتوا را با قلم توپر نشان می دهد و از نظر منطقی بدون اهمیت است. هر چیزی را در عنصر ………… بنویسید با حروف توپر نمایش داده می شود.

مثال

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

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

تگ تگی منطقی است که محتوا را با قلم توپر نمایش می دهد و اهمیت معنایی آن را به مرورگر اطلاع می دهد. متنی که بین تگ …… قرار می گیرد، به عنوان متن مهم در نظر گرفته می شود.

مثال

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

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

برای یادگیری تمامی محبث های این دوره میتوانید اینجا کلیک کنید.

مثال

<!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>

<!DOCTYPE html>

<html>

<head>

<title>formatting elements</title>

</head>

<body>

<h1>Explanation of formatting element</h1>

This is an important content, and this is normal content

</body>

</html>

۲) متن مورب (ایتالیک)

عناصر قالب بندی و 

عنصر عنصر فیزیکی است که محتوا را به صورت مورب یا کج و بدون هیچ گونه اهمیتی نشان می دهد. اگر چیزی بین عنصر ………… قرار گیرد، با حروف مورب نمایش داده می شود.

مثال

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

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

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

مثال

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

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

مثال

<!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>

<!DOCTYPE html>

<html>

<head>

<title>formatting elements</title>

</head>

<body>

<h1>Explanation of italic formatting element</h1>

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

</body>

</html>

بیشتر بخوانید:

آموزش رایگان HTML مقدماتی تا پیشرفته بخش قالب بندی

۱) متن توپر (بولد)

مثال

مثال

مثال

۲) متن مورب (ایتالیک)

مثال

مثال

مثال

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

۱) متن توپر (بولد)

مثال

مثال

مثال

۲) متن مورب (ایتالیک)

مثال

مثال

مثال

مطالب زیر را حتما مطالعه کنید

آموزش انیمیشن‌سازی با CSS

نحوه اضافه کردن کد PHP در وردپرس

دوره رایگان طراحی فروشگاه اینترنتی!

آموزش ایجاد لیست کشویی وابسته به هم در HTML

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

DOM چیست و چه کاربردی دارد؟

دیدگاهتان را بنویسید لغو پاسخ