آموزش تگ hr در HTML

آموزش تگ hr در HTML

تگ <hr> در HTML برای ایجاد یک خط افقی جداکننده در صفحه وب استفاده می‌شود. این تگ یک خط افقی از لحاظ ظاهری ایجاد می‌کند که به عنوان یک جداکننده بین محتواهای مختلف در یک صفحه استفاده می‌شود. در این مقاله، تمامی جزئیات ویژگی‌ها و حالت‌های تگ <hr> را بررسی خواهیم کرد و با مثال‌هایی آن‌ها را توضیح می‌دهیم.

1. تگ hr در HTML

تگ <hr> یک تگ خالی (یا بدون بسته شدن) است که یک خط افقی جداکننده را در صفحه وب ایجاد می‌کند.

متن قبلی
<hr>
متن بعدی

2. ویژگی‌های تگ hr

تگ <hr> هیچ ویژگی خاصی ندارد.

3. مثال کامل

<p>متن اول</p>
<hr>
<p>متن دوم</p>

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

4. استفاده با ارتفاع مشخص

می‌توان ارتفاع خط افقی را با استفاده از ویژگی height تنظیم کرد.

<p>متن اول</p>
<hr height="5">
<p>متن دوم</p>

در این مثال، ارتفاع خط افقی به 5 پیکسل تنظیم شده است.

5. استفاده با رنگ مشخص

می‌توان رنگ خط افقی را با استفاده از ویژگی color تنظیم کرد.

<p>متن اول</p>
<hr color="blue">
<p>متن دوم</p>

در این مثال، رنگ خط افقی به آبی تنظیم شده است.

6. استفاده با عرض مشخص

می‌توان عرض خط افقی را با استفاده از ویژگی width تنظیم کرد.

<p>متن اول</p>
<hr width="50%">
<p>متن دوم</p>

در این مثال، عرض خط افقی به 50٪ تنظیم شده است.

7. استفاده با استایل CSS

می‌توان از استایل‌های CSS برای سفارشی‌سازی خط افقی استفاده کرد.

<p>متن اول</p>
<hr style="border-color: red; border-width: 2px; border-style: dashed;">
<p>متن دوم</p>

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

نتیجه

تگ <hr> در HTML برای ایجاد یک خط افقی جداکننده در صفحه وب استفاده می‌شود. این تگ می‌تواند با استفاده از ویژگی‌ها و استایل‌های CSS به طور سفارشی‌سازی شده و به منظور جدا کردن بخش‌های مختلف محتوا در صفحه وب استفاده شود.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

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

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.