Html hr tag টিউটোরিয়াল বাংলা

টিউন বিভাগ এইচটিএমএল
প্রকাশিত
জোসস করেছেন

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

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











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

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

যখন আপনি ওয়েবপেজ বা এইচটিএমএল অ্যাপ পেজে 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

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

Level 0

আমি কামাল আহমেদ বাগী। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 4 বছর 2 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 9 টি টিউন ও 5 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 3 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

ভোলা জেলার পশ্চিম ইলিশা ইউনিয়নাধীন, চরপক্ষিয়া গ্রামে, ৫ই শ্রাবণ ১৪০৫ বঙ্গাব্দে যশশ্রীয় মুসলিম পরিবারে জন্মগ্রহণ করেন ৷ বাবা মফিজুল হক একজন স্বনামধন্য ব্যাবসায়ী, মা মরিয়ম বেগম গৃহিণী, তিন ভাই, ও তিন বোনের মধ্য তিনি সবার ছোট ৷ —সংক্ষিপ্ত কামাল আহমেদ বাগী'র "রোমান্টিক কবিতা" এন্ড্রয়েড অ্যাপ ডাউনলোড করুন, ধন্যবাদ ৷ www.kabbd.net


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস