آموزش طراحی سایتآموزش HTML

تگ hr در HTML

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

آموزش طراحی سایت با HTML 

با عرض سلام خدمت تمامی علاقمندان به مباحث طراحی سایت با 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 را مشاهده می‌نمایید.

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

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> برای جدا کردن دو موضوع در صفحه وب استفاده می‌شود و  می‌توان گفت در نگاه سئو این تگ دارای معنا می‌باشد. در صورتی که تمایل دارید درمورد سئو سایت اطلاعاتی بیشتری کسب نمایید من شما را به خواندن مقالات آموزش سئو سایت میزفا دعوت می کنیم.

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

منبع : میزفا

برچسب ها

علی اسمعیلی

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

نوشته های مشابه

‫13 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

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

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

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

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

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

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

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

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

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

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

پاسخی بگذارید

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

همچنین ببینید

بستن
دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر