hr tag টিউটোরিয়াল বাংলা
প্রথমে হরিজোনাল রুলস সম্পর্কে একটু জেনে নেয়া উচিত ৷ এই ট্যাগকে সংক্ষিপ্ত এইচআর ট্যাগ নামে ডাকা হয় ৷ ওয়েবসাইটে অনেকগুলো কন্টেন্টের যুক্ত হলে, আলাদাভাবে দেখানোর জন্য লাইন ব্রেক নামক কিছু ব্যবহার করা হয়, এটাই এইচআর ট্যাগ ৷ এরকম ১০টি স্টাইলিশ ট্যাগ নিয়ে আজকের আলোচনা ৷ একদম নিচে টিউটোরিয়াল দেয়া আছে, প্রতি ট্যাগের সোর্সকোড বুঝতে সমস্যা হলে নিচে টিউটোরিয়াল দেখুন, বিশেষ প্রয়োজনে কম্মেন্ট করে জানান ৷

;
KAB-BD FORUM বিনামূল্যে রেজিস্টেশন

</p> <hr style=color:#919090;background-color:green;height:5px;border:solid />

<br /> h1.hidden {visibility: hidden;}</p> <h1 class="hidden">this code mirrors by-<a href="www.Kamalahmedbagi.blogspot"Kamal Ahmed Bagi</h1> <hr style="width: 100%;height: 8px;margin: 0 auto;border: none;background-color: #898989" /> <br />

</p> <hr style="width: 100%;height: 16px;margin: 0 auto;border: none;background-color: pink" /> h1.hidden {visibility: hidden;}</p> <h1 class="hidden">this code mirrors by-<a href="www.Kamalahmedbagi.blogspot"Kamal Ahmed Bagi</h1> <p>

</p> <hr style="width: 100%;height: 16px;margin: 0 auto;border: none;background-color: yellow" /> h1.hidden {visibility: hidden;}</p> <h1 class="hidden">this code mirrors by-<a href="www.Kamalahmedbagi.blogspot"Kamal Ahmed Bagi</h1> <p>

</p> <hr style="border:1px solid gold;height:3px;background-color:blue" />

</p> <hr style=color:Black;background-color:Black;border:0;width:100%;height:1px /> <p>h1.hidden {visibility: hidden;}</p><div class="d-flex justify-content-center grey lighten-5 mb-3 py-3"> <div class="tAds tAds-AD position-relative"> <script>OA_show('tAds_LargeRectangle_1');</script><noscript><a target=_blank href='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/cl.php?n=e9b150c'><img class=lazy border=0 alt src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src='https://adx.techtunes.io/WctSzEu4VaG9mD4/DvR9YCaCru65UAs9/avw.php?zoneid=12&n=e9b150c' /></a></noscript> </div> </div> <h1 class="hidden">this code mirrors by-<a href="www.Kamalahmedbagi.blogspot"Kamal Ahmed Bagi</h1> <p>

<br /> h1.hidden {visibility: hidden;}</p> <h1 class="hidden">this code mirrors by-<a href="www.Kamalahmedbagi.blogspot"Kamal Ahmed Bagi</h1> <hr style="height: 15px;border: 5px outset #999999;background-color: #0000ff" />

এইচটিএমএল হরিজনাল রুলস ট্যাগ টিউটোরিয়াল

প্রথমেই ক্ষমাপ্রার্থী কারণ টেকটিউনস কতৃপক্ষ আমাকে (সাধারণ ইউজারদের) অ্যানিমেশন প্রয়োগের অনুমোদন দিচ্ছে না বিধায়, ৫টি অসাধারণ কোড মুছে ফেলতে হয়েছে ৷ তবুও আপনাকে সুপারিশ করবো, বিশেষ প্রয়োজন হলে আমার ব্যক্তিগত সাইটে উক্ত সোর্সকোডগুলো পাবেন ৷ যাক শুরু করি ৷

যখন আপনি ওয়েবপেজ বা এইচটিএমএল অ্যাপ পেজে hr ট্যাগ লিখেন তখন উক্ত লেখার নিচে একটি লাম্বা দাঁগ কেটে যায় ৷ hr ট্যাগের দৈর্ঘ বা প্রস্ত নেই, এবং সব ব্রাউজার সমর্থন করে, এটি বেশি ভালো দেখায় যখন ব্যাকগ্রাউন্ড সিলভার "Silver" কালার থাকে ৷

যখন hr ট্যাগকে style.css রূপ দিবেন তখন দৈর্ঘ, প্রস্ত, সীমান্ত (border) প্রান্ত (margin) এবং প্যাডিংয়ের প্রসঙ্গ আসে ৷

উপরে ১০টি উদাহরণ দেয়া হয়েছে, এখন একটি তৈরি করে দেখাবো, আশা করি উপরের দশটি ট্যাগকেই কাস্টমাইজ করতে পারবেন ৷

☞এখন কাস্টমাইজ করে দেখাবো উপরের ৪ নং ট্যাগকে, যারা প্রিভিউ উপরে দেখতে পাবেন☜

hr style="width: 70%; height: 16px; width
স্টাইলের জন্য হরিজনাল রুলস নেয়া হলে ইন্ড ট্যাগ অথবা দিয়েই শেষ হয়, যদিও কিছু ক্ষেত্রে সামান্য ব্যতিক্রম তাই শুধু <hr এরপর style উপরে দেখুন ৷ (পাশে ছড়িয়ে থাকা) 70% আছে, রেসপনসিভের জন্য 100% দিতে পারেন ৷ চাইলে px ব্যবহার করতে পারেন, অটো রেসপনসিভ হবে ৷

display: block; margin: 0 auto; border: dotted
এই ট্যাগে দুটি স্টাইল আছে, একটি ব্যাকগ্রাউন্ড আরেকটি
বর্ডার display: none; করলে বর্ডার হাইড হবে ৷
margin মানে স্থানান্তর, এখানে অটো করা আছে ৷ বর্ডার dotted করা আছে ৷ border স্টাইলের জন্য নিচের বর্ডারগুলো দিতে পারেনঃ solid, dashed, dotted, double, groove, hidden, inherit, initial, inset, none, outset, ridge ইত্যাদি ৷

border-radius: 0 0 20px 20px;box-shadow: 6px 6px 12px green;
এখানে মূলত দুটো বর্ডার সেট করা, border: dotted কল করে উপরের পার্টকে border-radius: নিচের পার্টকে 0 0 20px থেকে 0 0 উঠিয়ে দিলে border: dotted নিষ্ক্রিয় হয়ে চারপাশ গোল হবে ৷ box-shadow: অংশ সবুজ কালারকে নিচের ছড়িয়ে দেয় ৷ প্রথম 6px বাড়ালে কালার ডান দিকে যাবে, দ্বিতীয়টি বাম দিকে, শেষেরটি নিচে ৷

KAB-BD FORUM বিনামূল্যে রেজিস্টেশন

background-color: yellow"/>
ব্যাকগ্রাউন্ডে যেকোন কালার ব্যবহার করতে পারেন, ওয়েবসাইটের ক্ষেত্রে কালার কোড ব্যবহার করবেন, নচেত্ সব ব্রাউজারে সমর্থন নাও করতে পারে ৷ কিছু কালার কোডঃ #ff0000, #ff8000, #ffbf00, #0080ff, #ff00ff, #ff0040

লেখকের কথাঃ
যা হোক আমি আশা করি ওয়েবসাটের লাইন ব্রেক সম্পর্কে মোটামুটি ধারণা পেয়েছেন, তবুও বুঝতে সমস্যা হলে কম্মেন্টে জানানোর সুপারিশ করবো, ভালো লাগলে অবশ্যই শেয়ার করবেন, ধন্যবাদ ৷ আরো সোর্সকোড প্রয়োজন হলে মূল টিউটোরিয়াল দেখুন কৃতজ্ঞতায়ঃ কামাল আহমেদ বাগী