html

تگ های قالب بندی متن – قسمت دوم (جلسه پنجم)

در این قسمت از آموزش، به ادامه معرفی تگ های قالب بندی متن می پردازیم:

تگ <h1> – <h6> :
تگ های سری h معمولا برای ایجاد عناوین و تیترها مورد استفاده قرار می گیرند. عبارتی که قرار است به عنوان تیتر نمایش داده شوند، بین تگ باز و بسته قرار می گیرند. <h1> بزرگترین سایز نوشته را ارائه داده و با افزایش عدد بعد از h، خواص آن نوشته کاهش می یابد و <h6> دارای کوچکترین سایز نوشته می باشد.

باید توجه کرد که از تگ های سری h جهت سایز عناوین و متن، نباید استفاده کرد، این تگ ها جهت اهمیت عبارات و عناوین مورد استفاده قرار می گیرند.

نحوه نوشتن کد:

<h1> This is header 1 </h1>
<h2> This is header 2 </h2>
<h3> This is header 3 </h3>
<h4> This is header 4 </h4>
<h5> This is header 5 </h5>
<h6> This is header 6 </h6>

نتیجه کد بالا:

This is header 1

This is header 2

This is header 2

This is header 2

This is header 2
This is header 2

هر شش تگ فوق دارای صفت align هستند، که می توان نحوه چینش متن داخل heading را بوسیله آن، کنترل کرد که شامل مقادیر زیر می باشد:

Left : تیتر در سمت چپ صفحه قرار می گیرد.

Right : تیتر در سمت راست صفحه قرار می گیرد.

Center : تیتر به صورت وسط چین تنظیم می شود.

Justify: متن داخل  heading  را از هر دو طرف تراز می کند.

تگ <br> :
با استفاده از این تگ میتوان یک شکست خط ایجاد کرد، بدین صورت که هنگام استفاده باعث ایجاد یک خط جدید و انتقال نوشته به اول سطر پایینی می شود. تگ <br> دارای تگ پایانی نیست و این تگ باید با یک علامت / در درون تگ ابتدایی بسته شود، بدین صورت <br/> . که البته در HTML5 بسته بودن این تگ دیگر حائز اهمیت نیست.

نکته: هنگامی که در یک ویرایشگر در حال تایپ متون هستید، با فشردن ترکیب کلید های shift + enter سبب ایجاد یک شکست خط در متن می شوید.

مثال:

نحوه نوشتن کد:

<p>This is a <br>sample text</p>

نتیجه کد بالا:

This is a
sample text

تگ <hr> :
با استفاده از این تگ می توان یک خط افقی در صفحه ایجاد کرد. این تگ نیز همانند تگ <br> ، دارای تگ پایانی نیست و جهت استفاده از آن فقط کافی است در تگ ابتدایی بسته شود. که البته در HTML5 بسته بودن این تگ دیگر حائز اهمیت نیست.

مثال:

نحوه نوشتن از کد:

<p>This is a sample text</p>
<hr>
<p>This is a sample text</p>

نتیجه کد بالا:

This is a sample text


This is a sample text

در ادامه سری آموزش های HTML، با ما همراه باشید….

Related Articles

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Close