تگ 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/>
صفات تگ 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 که یک رنگ را به عنوان مقدار می پذیرند را می توان به سه روش مقداردهی نمود :
|
در جلسات آینده به به معرفی رنگ ها و نحوه استفاده از آن ها در صفحات 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 می‌پردازیم. درصورتی که سوالی داشتید حتما در قسمت نظرات این مقاله آموزشی مطرح کنید.
منبع : میزفا
36 پاسخ
جواب سوال:
برای شخصی سازی مورد نظرمان روی تگ hr از کدهای css استفاده می کنیم (حالا بنا به نیاز یا به صورت درخط و یا با روش های دیگه که برای ما بهینه باشه)
سلام
برای اینکه تگ hr را شخصی سازی کنیم، کافی است به آن استایل دهی کنیم
مثلا:
}hr
;color: red
; border-style: double
;border-width: 5px
;margin: 20px 5px
{
سلام
?
از صفت style استفاده کنیم! یا شایدم یه کلاس بهش بدیم و با سی اس اس اوکیش کنیم! یا میتونیم بدون کلاس بنویسیم {} hr بعد استایل بدیم بهش تا تمام خطوط افقیمون یک استایل داشته باشن!
سلام فرهان، آفرین دقیق و کامل نوشتی.
از CSS برای استایل‌دهی و تغییر رنگ و ظاهر تگ hr استفاده می‌کنند.
سلام علی اکبر، درسته. ممنونم. جایزه میزفا آکادمی به زودی برات شارژ میشه.
پاسخ سوال :
از css استفاده میکنیم
سلام محمد عزیز، درست نوشتی، هدیه‌ات را در میزفا آکادمی دریافت می‌کنی.
پاسخ سوال :
با استفاده از صفات تگ hr
مثل width , color
سلام محمد، صفت width در HTML5 ساپورت نمیشه. یک راه دیگه برای شخصی سازی هم هست. مقاله رو دوباره بخون.
با سلام ممنون از سایت خوبتون
من میخواستم خطی که در سایت قرار دادم نصفش کنم باید از چه کدی استفاده کنم
باتشکر
سلام با width این کار بکن.
سلام خسته نباشید من یه سوالی داشتم اینکه چطور میشه بین تگ hr یک متن نوشته بشه؟؟مثل عکسی که فرستادم
ممنون
سلام تینا
میتونید به hr مثلا width بدید.
سلام عرض میکنم
واقعا عالی بود
خسته نباشید میگم
ببخشید کلا کلا این سوال رو میپرسم
که کلا امکان ایجاد خط عمودی وجود داره؟
حالا فقط html هم نباشه مشکلی نیست
فقط توی علم سایت سازی و سایت نویسی
امکان ایجاد خط عمودی هستش؟
مثل این خط افقی بتونیم بسازیم؟
حالا php/js/css و و و
باتشکر
سلام کیوان
بله میشه.
برای ایجاد خط عمودی در html میتونید از همین تگ h1 استفاده کنید ولی با یک ترفند css
اول باید یک hr درج کنید مثل کد زیر
یگ کلاس vertical-line هم دادم، البته بالا هر چی \ گذاشتم رو باید برداری و بعد به کمک css این خط رو میچرخونم:
.vertical-line{ transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); }خسته نباشید استااااااد عزیز
خیلی ممنونم
تازه درحال یادگیری html هستم
سایت شما عااااالیه
همه چی رو توضیح داده واضح و قشنگ
خسته نباشید
سلام کیوان عزیز ، سپاس از این همه انرژیت. امیدوارم توی یادگیری هم این انرژی رو حفظ کنی و به هدف های زیبات برسی. موفق باشی.
سلام خسته نباشید .
بنده میخوام رنگ و کلفتی خط رو تغییر بدم ولی متاسفانه هرچی توی css با ویژگی color و background-color کار می کنم فایده نداره و حتی وقتی که ویژگی color رو در داخل html و بدنه تگ به کار می برم باز هم رنگ خط تغییری نمی کنه
سلام نیما، برای کلفتی متن از height:10px مثلا استفاده کن حالا میتونی ۱۰ رو به عدد مورد نظرت تغییر بدی. برای تغییر رنگ هم حتما از همون background استفاده کن.
hr{ height:10px background:red; }اگر جواب نداد یه !important اضافه کن، اگر بازم جواب نداد کدت رو برامون بفرست چکش کنیم و راهنماییت کنیم.
راستی ، اگر این هم جواب نداد از این کد میتونی استفاده کنی.
hr{ border-top: 10px solid #8c8b8b; }موفق باشی.
ببخشید میشه همین تگ های htmlوتوضیحاتش روداخل یک فایل تکست یاپی دی اف به ایمیلم بفرستین
ان شالله دوره مقاله محور تموم بشه چنین کاری رو برای همه کاربرها انجام خواهیم داد و لینک دانلود در سایت قرار میدیم.
مرسی
سلام برای من لطفا کاربردهمه ی تگ هاروایمیل کنید ممنون
سلام. مقاله سرفصل های html موجوده.
سلام تشکر از سایت خوبتون. من میخوام داخل یک متنی که توی جدول دیتابیس گذاشتم یه خط افقی ایجاد کنم با تگ های پاراگراف بندی میکنم ولی با تگ hr هیچ خطی ایجاد نمیشه دقیقا داخل متن چجوری باید کد بزنم که خط افقی ایجاد بشه؟
سلام دوستم. بستگی به زبان برنامه نویسی داره و متاسفانه نمیشه همینطوری پاسخ این سوال شما رو داد.
سلام بسیار ممنون از سایت خوبتون من کلاس یازدهم رشته ی کامپیوتر هستم و مطالب شما برای من بسیار ساده و قابل فهم بوده اند
با سلام … ممنون…موفق باشید.
سلام خسته نباشید. بخوایم مثل همین خط افقی بزاریم ولی خط تیره باشه مثل: – – – –
تگی هس ؟؟
سلام … ممنون … شما می تونید از کد زیر استفاده کنید.
سلام ببخشید لطفا آموز طراحی سایت با دریم ویور هم بزاری در html.ممنون میشم
با سلام … نرم افزار دریم ویور ، نرم افزار نسبتا خوب جهت ساخت صفحات HTML است . که به ما کمک میکند تا مجبور نشیم کدهای زبان HTML را حفظ کنیم و با چند حرکت و کلیک دستورات به زبان HTML انجام میده … توصیه ما به شما اینه که مستقل از این نرم افزار HTML رو یاد یگیرید و خودتون رو وابسته به یه نرم افزار نکنید اگر که میخواهید یه برنامه نویس حرفه ای بشید اگر همچنان مایلید که کار با دریم ویور را یادبگیرید سایت های فارسی و لاتین بسیار خوبی در این زمینه وجود دارد که به شما کمک زیادی میکنید … موفق باشید.
عالی لطفا درمورد بقیه تگ ها بگید مرسی
ممنون … چشم حتما به زودی مباحث آموزش HTML رو ادامه میدیم …