ADs by Techtunes ADs
ADs by Techtunes ADs

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

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

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

ADs by Techtunes ADs

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




ADs by Techtunes ADs







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

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

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

ADs by Techtunes ADs

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

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

ADs by Techtunes ADs
Level 0

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

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


টিউনস


আরও টিউনস


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


টিউমেন্টস