تگ hr در HTML

معرفي تگ hr
معرفي تگ hr

تگ hr در html چیست و چه کابردی دارد ؟ برای رسم خط در html چه راه هایی پیش رو داریم ؟ تغییر رنگ تگ hr به چه صورت امکان پذیر است و چگونه می توانیم استایل های دلخواهی را برای این تگ تعریف کنیم ؟ اگر به دنبال پاسخ این سوالات هستید و قصد دارید با خصوصیات یا صفات تگ hr در html و کاربرد تگ hr در html به صورت جامع و به همراه مثال آشنا شوید این مقاله را به هیچ عنوان از دست ندهید. هم چنین در این مقاله 5 صفت پرکاربرد تگ hr را با هم بررسی خواهیم کرد.

با عرض سلام خدمت تمامی علاقمندان به مباحث طراحی سایت با HTML ، با یکی دیگر از جلسات آموزش HTML در خدمت شما عزیزان هستم، در جلسه گذشته به شما تگ br و nobr را آموزش دادیم در این جلسه از اموزش HTML قصد داریم به اموزش تگ hr که به منظور ترسیم خط افقی در HTML به کار می رود ، بپردازیم.

 معرفی تگ hr

با استفاده از این تگ در HTML می‌توانیم در صفحات وب خطوط افقی ایجاد نماییم این تگ از جمله عناصر تهی به شمار می‌رود و نیازی به تگ پایانی ندارد شما می‌توانید تگ hr را به شکل </hr> به کار ببرید. البته می‌توان از این تگ به صورت <hr> نیز استفاده نمود که مربوط به نسخه های قدیمی HTML است .
به منظور درک بهتر چگونگی کشیدن خط در HTML به مثال زیر توجه کنید :

<p>
    Training hr tag 
</p>
<hr/>
نتیجه کد - تگ br
نتیجه کد بالا

صفات تگ hr

این تگ دارای صفت‌های (Attributes) مختلف است که هیچ کدام از این صفت‌ها در HTML5 پشتیبانی نمی‌شوند، و همان‌طور که میدانید اخرین نسخه HTML نیز HTML5 می‌باشد. در HTML5 به جای استفاده از این صفت‌ها ، از CSS برای استایل‌دهی و تغییر رنگ و ظاهر تگ hr استفاده می‌کنند.

در جدول زیر لیست صفت‌های تگ hr را مشاهده می‌نمایید.

صفت ها مقدار توضیحات
align left
center
right
این صفت در HTML5 پشتیبانی نمی‌شود .
با استفاده از صفت align می توانیم محل قرارگیری خط ایجاد شده توسط تگ hr را مشخص نماییم ، این صفت یکی از موارد left ، right و center را به عنوان مقدار می پذیرد.
noshadow noshade این صفت در HTML5 پشتیبانی نمی‌شود.
خط های که با استفاده از تگ hr در صفحه ایجاد می‌نماییم به صورت پیش فرض دارای خطی در زیر خود به عنوان سایه هستند ما می‌توانیم برای حذف این سایه از صفت noshadow که یک صفت بولین (Boolean) است استفاده نماییم.
size pixels این صفت در HTML5 پشتیبانی نمی‌شود.
به صورت پیش‌فرض تگ <hr> دارای ارتفاع است و با صفت size می‌توان میزان ارتفاع خط ایجاد شده توسط تگ hr را کنترل کرد.
width pixels
%
این صفت در HTML5 پشتیبانی نمی‌شود.
به صورت پیش‌فرض تگ </hr> دارای پهنا است و با صفت width می‌توان میزان پهنا یا عرض خط ایجاد شده توسط تگ hr را کنترل کرد .
color 1 . نام رنگ ها

2 . تابع rgb

3 . مبنای هگزادسیمال رنگ ها

از صفت color به منظور تغییر رنگ خط ایجاد شده توسط تگ hr استفاده می‌شود. صفاتی از این دست در HTML که یک رنگ را به عنوان مقدار می پذیرند را می توان به سه روش مقداردهی نمود :

  • استفاده از نام رنگ ها
  • استفاده از تابع RGB
  • استفاده از مبنای هگزادسیمال (مبنای 16) رنگ ها

در جلسات آینده به به معرفی رنگ ها و نحوه استفاده از آن ها در صفحات HTML خواهیم پرداخت.

خصوصیات تگ hr در HTML

  • تگ hr توسط تمامی مرورگرها پشتیبانی می‌شود .
  • تنظیمات پیش فرض CSS بر روی تگ h1 به شرح زیر است
    hr { 
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        border-width: 1px;
    }
    
  • در HTML 4.01، تگ <hr> صرفا نشان دهنده یک خط افقی بود و حالت معنایی نیز نداشت.
  • برخلاف بقیه ورژن‌های دیگر HTML در XHTML، تگ <hr> با یک تگ پایانی بسته می‌شود، همانند: <hr />

اهمیت تگ hr در سئو سایت

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

پایانترم

[box type=”info” class=”question-from-users” width=””]

سوال:

چگونه می‌توانیم تگ hr را شخصی سازی کنیم؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

بسیار خب در این جلسه آموزش HTML با نحوه رسم خط در html آشنا شدیم ، در جلسه آینده به معرفی مابقی تگ های قالب بندی متن در HTML می‌پردازیم. درصورتی که سوالی داشتید حتما در قسمت نظرات این مقاله آموزشی مطرح کنید.

منبع : میزفا

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

36 نظر

36 پاسخ

  1. جواب سوال:
    برای شخصی سازی مورد نظرمان روی تگ hr از کدهای css استفاده می کنیم (حالا بنا به نیاز یا به صورت درخط و یا با روش های دیگه که برای ما بهینه باشه)

  2. سلام
    برای اینکه تگ hr را شخصی سازی کنیم، کافی است به آن استایل دهی کنیم
    مثلا:
    }hr
    ;color: red
    ; border-style: double
    ;border-width: 5px
    ;margin: 20px 5px

    {

  3. از صفت style استفاده کنیم! یا شایدم یه کلاس بهش بدیم و با سی اس اس اوکیش کنیم! یا میتونیم بدون کلاس بنویسیم {} hr بعد استایل بدیم بهش تا تمام خطوط افقیمون یک استایل داشته باشن!

  4. از CSS برای استایل‌دهی و تغییر رنگ و ظاهر تگ hr استفاده می‌کنند.

    1. سلام علی اکبر، درسته. ممنونم. جایزه میزفا آکادمی به زودی برات شارژ میشه.

    1. سلام محمد عزیز، درست نوشتی، هدیه‌ات را در میزفا آکادمی دریافت می‌کنی.

    1. سلام محمد، صفت width در HTML5 ساپورت نمیشه. یک راه دیگه برای شخصی سازی هم هست. مقاله رو دوباره بخون.

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

  6. سلام خسته نباشید من یه سوالی داشتم اینکه چطور میشه بین تگ hr یک متن نوشته بشه؟؟مثل عکسی که فرستادم
    ممنون

  7. سلام عرض میکنم
    واقعا عالی بود
    خسته نباشید میگم
    ببخشید کلا کلا این سوال رو میپرسم
    که کلا امکان ایجاد خط عمودی وجود داره؟
    حالا فقط html هم نباشه مشکلی نیست
    فقط توی علم سایت سازی و سایت نویسی
    امکان ایجاد خط عمودی هستش؟
    مثل این خط افقی بتونیم بسازیم؟
    حالا php/js/css و و و
    باتشکر

    1. سلام کیوان
      بله میشه.
      برای ایجاد خط عمودی در html میتونید از همین تگ h1 استفاده کنید ولی با یک ترفند css
      اول باید یک hr درج کنید مثل کد زیر

      <\hr class="vertical-line" \>
      

      یگ کلاس vertical-line هم دادم، البته بالا هر چی \ گذاشتم رو باید برداری و بعد به کمک css این خط رو میچرخونم:

      .vertical-line{
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      }
      1. خسته نباشید استااااااد عزیز
        خیلی ممنونم
        تازه درحال یادگیری html هستم
        سایت شما عااااالیه
        همه چی رو توضیح داده واضح و قشنگ
        خسته نباشید

        1. سلام کیوان عزیز ، سپاس از این همه انرژیت. امیدوارم توی یادگیری هم این انرژی رو حفظ کنی و به هدف های زیبات برسی. موفق باشی.

  8. سلام خسته نباشید .
    بنده میخوام رنگ و کلفتی خط رو تغییر بدم ولی متاسفانه هرچی توی css با ویژگی color و background-color کار می کنم فایده نداره و حتی وقتی که ویژگی color رو در داخل html و بدنه تگ به کار می برم باز هم رنگ خط تغییری نمی کنه

    1. سلام نیما، برای کلفتی متن از height:10px مثلا استفاده کن حالا میتونی ۱۰ رو به عدد مورد نظرت تغییر بدی. برای تغییر رنگ هم حتما از همون background استفاده کن.

      hr{
      height:10px
      background:red;
      }

      اگر جواب نداد یه !important اضافه کن، اگر بازم جواب نداد کدت رو برامون بفرست چکش کنیم و راهنماییت کنیم.
      راستی ، اگر این هم جواب نداد از این کد میتونی استفاده کنی.

      hr{
      border-top: 10px solid #8c8b8b; 
      }

      موفق باشی.

  9. ببخشید میشه همین تگ های htmlوتوضیحاتش روداخل یک فایل تکست یاپی دی اف به ایمیلم بفرستین

    1. ان شالله دوره مقاله محور تموم بشه چنین کاری رو برای همه کاربرها انجام خواهیم داد و لینک دانلود در سایت قرار میدیم.

    2. سلام برای من لطفا کاربردهمه ی تگ هاروایمیل کنید ممنون

  10. سلام تشکر از سایت خوبتون. من میخوام داخل یک متنی که توی جدول دیتابیس گذاشتم یه خط افقی ایجاد کنم با تگ های پاراگراف بندی میکنم ولی با تگ hr هیچ خطی ایجاد نمیشه دقیقا داخل متن چجوری باید کد بزنم که خط افقی ایجاد بشه؟

    1. سلام دوستم. بستگی به زبان برنامه نویسی داره و متاسفانه نمیشه همینطوری پاسخ این سوال شما رو داد.

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

  12. سلام خسته نباشید. بخوایم مثل همین خط افقی بزاریم ولی خط تیره باشه مثل: – – – –
    تگی هس ؟؟

    1. سلام … ممنون … شما می تونید از کد زیر استفاده کنید.

      <div style="border-top:1px dashed #000"></div>
      
  13. سلام ببخشید لطفا آموز طراحی سایت با دریم ویور هم بزاری در html.ممنون میشم

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

    1. ممنون … چشم حتما به زودی مباحث آموزش HTML رو ادامه میدیم …

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

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

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=