<hr> ট্যাগ একটি ওয়েব পেজে অনুভূমিক রেখা আঁকতে ব্যবহৃত হয়। এই ট্যাগটি বিভিন্ন বিভাগের মধ্যে একটি অনুভূমিক রেখা অঙ্কন করে বিষয়বস্তু আলাদা করার জন্য সবচেয়ে দরকারী HTML ট্যাগগুলির মধ্যে একটি। এই গাইডে, আমরা শিখব কিভাবে একটি <hr> এর পুরুত্ব পরিবর্তন করতে হয় বিভিন্ন পদ্ধতিতে CSS ব্যবহার করে ট্যাগ।
সিনট্যাক্স
hr {
height: value;
border: value;
}
HTML এ ঘন্টা ট্যাগ
<hr> ট্যাগ মানে অনুভূমিক নিয়ম। এটি একটি স্ব-ক্লোজিং ট্যাগ যা একটি অনুভূমিক রেখা ব্যবহার করে একটি ওয়েব পৃষ্ঠার অংশগুলির মধ্যে একটি ভিজ্যুয়াল ডিভাইডার তৈরি করে৷
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
hr {
margin: 20px 0;
}
</style>
</head>
<body>
<p>Section 1</p>
<hr>
<p>Section 2</p>
</body>
</html>
Two text sections separated by a thin horizontal line with proper spacing.
পদ্ধতি 1:উচ্চতা সম্পত্তি ব্যবহার করা
এই পদ্ধতিতে, আমরা সরাসরি height ব্যবহার করি <hr> এর পুরুত্ব পরিবর্তন করতে CSS-এর বৈশিষ্ট্য ট্যাগ এই পদ্ধতি নিয়ন্ত্রণ করে অনুভূমিক রেখা কতটা পুরু
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
hr {
height: 5px;
background-color: black;
border: none;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Above the line</p>
<hr>
<p>Below the line</p>
</body>
</html>
Two text sections separated by a thick 5px black horizontal line.
পদ্ধতি 2:বর্ডার সম্পত্তি ব্যবহার করা
এই পদ্ধতিতে, আমরা border-top ব্যবহার করি অথবা border-bottom একটি পুরু অনুভূমিক রেখা তৈরি করতে CSS-এর সম্পত্তি। এই পদ্ধতিটি আরও নমনীয় এবং বিভিন্ন ডিজাইনকে সমর্থন করে যেমন ড্যাশ বা ডটেড লাইন
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
hr {
border: none;
border-top: 6px solid blue;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Above the Line</p>
<hr>
<p>Below the Line</p>
</body>
</html>
Two text sections separated by a thick 6px blue horizontal line.
তুলনা
উপসংহার
আপনি সহজেই <hr> এর পুরুত্ব পরিবর্তন করতে পারেন CSS ব্যবহার করে ট্যাগ। height পদ্ধতিটি কঠিন লাইনের জন্য সোজা, যখন border পদ্ধতি আরো স্টাইলিং নমনীয়তা প্রস্তাব. আপনার ডিজাইনের প্রয়োজনীয়তার উপর ভিত্তি করে বেছে নিন।
