ওয়েব স্কুল বিডি : সুপ্রিয় শিক্ষার্থী বন্ধুরা, শুভেচ্ছা নিয়ো। আমরা গত পর্বে টেবিল (Table) নিয়ে আলোচনা করেছিলাম। আজ তোমাদের বর্ডার নিয়ে আলোচনা করা হলো :
বর্ডার:
বর্ডার ওয়েব পেজের একটি গুরুত্বপূর্ণ উপাদান।এইচ টি এম এল এবং সি এস এস ব্যবহার করে টেমপ্লেট ডিজাইন করার সময় বিভিন্ন উপাদানের জন্য সঠিক রং এবং আকৃতির বর্ডার তৈরি করার উপর ডিজাইনের মাধুর্য অনেকাংশে নির্ভর করে।সি এস এস ব্যবহার করে বিভিন্ন ধরণের বর্ডার তৈরি করা যায়।
বিভিন্ন ধরণের বর্ডার তৈরির ক্ষেত্রে বেশ কিছু বিষয়ের উপর কাজ করতে হয়। এগুলো হচ্ছে
বর্ডার:
বর্ডার ওয়েব পেজের একটি গুরুত্বপূর্ণ উপাদান।এইচ টি এম এল এবং সি এস এস ব্যবহার করে টেমপ্লেট ডিজাইন করার সময় বিভিন্ন উপাদানের জন্য সঠিক রং এবং আকৃতির বর্ডার তৈরি করার উপর ডিজাইনের মাধুর্য অনেকাংশে নির্ভর করে।সি এস এস ব্যবহার করে বিভিন্ন ধরণের বর্ডার তৈরি করা যায়।
বিভিন্ন ধরণের বর্ডার তৈরির ক্ষেত্রে বেশ কিছু বিষয়ের উপর কাজ করতে হয়। এগুলো হচ্ছে
- বর্ডার স্টাইল (Border Style)
- বর্ডার ওয়াইডথ (Border Width)
- বর্ডার কালার (Border Color)
- পৃথক বর্ডার ( Individual Border )
বর্ডার স্টাইল:
বর্ডার স্ট্যাইল নির্দেশ করে বর্ডারটি দেখতে কেমন হবে।বর্ডার স্ট্যাইল তৈরির জন্য Declaration করতে হবে, border-style:dotted এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের বর্ডার স্ট্যাইল তৈরি করা যায়। ডটেড স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:dotted ; ড্যাসেড স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:dashed; ডাবল স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:double; গ্রোভ স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:groove; রিডজ স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:ridge; ইনসেট স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:inset; আউটসেট স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:outset; ।
বর্ডার ওয়াইডথ (Border Width):
বর্ডার ওয়াইডথ নির্দেশ করে বর্ডারটি কতটা মোটা হবে।বর্ডার ওয়াইডথ নির্ধারণের জন্য Declaration করতে হবে, border-width:thin; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের বর্ডার ওয়াইডথ নির্ধারণ করা যায়।থিন বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:thin; মিডিয়াম বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:medium; থিক বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:thick; 1px বা ১ পিক্সেল চওড়া বর্ডার তৈরির জন্য Declaration করতে হবে,border-width:1px; 15px বা ১৫ পিক্সেল চওড়া বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:15px; ।
কোন HTML উপাদানের চারপাশের বর্ডার চার ধরণের ওয়াইডথ এর হতে পারে, এধরণের বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:2px 8px 6px 4px; এখানে ১ম 2px নির্দেশ করে top border ; ২য় 8px নির্দেশ করে right border; ৩য় 6px নির্দেশ করে down border ; ৪র্থ 4px নির্দেশ করে left border।
বর্ডার কালার (Border Color):
বর্ডার কালার নির্দেশ করে বর্ডারটির রং কেমন হবে।বর্ডার কালার নির্ধারণের জন্য Declaration করতে হবে, border-color:yellow; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের বর্ডার কালার নির্ধারণ করা যায়।হলুদ রঙের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:yellow; পিংক কালারের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:pink; rgb পদ্ধতিতেও বর্ডার কালার রির্ধারণ করা যায়, এ পদ্ধতিতে বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:rgb(240,060,155); hex পদ্ধতিতেও বর্ডার কালার রির্ধারণ করা যায়, এ পদ্ধতিতে বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:#ff0000; বর্ডার কালার ট্রান্সপারেন্ট হতে পারে, ট্রান্সপারেন্ট বর্ডার তৈরির জন্য Declaration করতে হবে,border-color:transparent; ।
কোন HTML উপাদানের চারপাশের বর্ডার চার ধরণের রঙের হতে পারে, এধরণের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:#a03090 #f00000 #C06000 #0030F0; এখানে ১ম #a03090 নির্দেশ করে top border color ; ২য় #f00000 নির্দেশ করে right border color; ৩য় #C06000 নির্দেশ করে down border color; ৪র্থ #0030F0; নির্দেশ করে left border color ;
পৃথক বর্ডার ( Individual Border ):
কোন HTML উপাদানের চারপাশের বর্ডার এর স্টাইল, ওয়াইডথ এবং কালার এ সবই ভিন্ন হতে পারে।এ এধরণের বর্ডার তৈরির ক্ষেত্রে উপরের দিকের বর্ডারের জন্য Declaration করতে হবে, border-top:dotted 8px #F00 ; ডান দিকের বর্ডারের জন্য Declaration করতে হবে, border-right:dashed 6px #F60 ; নিচের দিকের বর্ডারের জন্য Declaration করতে হবে, border-bottom:double 6px #C09; বাম দিকের বর্ডারের জন্য Declaration করতে হবে, border-left:solid 5px #960;।
অনুশীলন প্রজেক্ট:
<html>
<head>
<title> www.webschoolbd.com</title>
<style>
body{background:#00CC99;}
#dotted{
<head>
<title> www.webschoolbd.com</title>
<style>
body{background:#00CC99;}
#dotted{
border-style:dotted ;
border-width:thin;
border-color:yellow;
}
#dashed{
#dashed{
border-style:dashed;
border-width:medium;
border-color:pink;
}
#double{
#double{
border-style:double;
border-width:thick;
border-color:rgb(240,060,155);
}
#groove{
#groove{
border-style:groove;
border-width:1px;
border-color:#ff0000;
}
#ridge{
#ridge{
border-style:ridge;
border-width:15px;
border-color:transparent;
}
#inset{
#inset{
border-style:inset;
border-width:2px 8px 6px 4px;
border-color:#a03090 #f00000 #C06000 #0030F0;
}
#outset{
#outset{
border-style:outset;
border-top:dotted 8px #F00 ;
border-right:dashed 6px #F60 ;
border-bottom:double 6px #C09;
border-left:solid 5px #960;
border-right:dashed 6px #F60 ;
border-bottom:double 6px #C09;
border-left:solid 5px #960;
}
</style>
</head>
<body >
<h3 id="dotted">This is an example of dotted border</h3>
<h3 id="dashed">This is an example of dashed border</h3>
<h3 id="double">This is an example of double border</h3>
<h3 id="groove">This is an example of groove border</h3>
<h3 id="ridge">This is an example of ridge border</h3>
<h3 id="inset">This is an example of inset border</h3>
<h3 id="outset">This is an example of outset border</h3>
</body> </body>
</html>
</style>
</head>
<body >
<h3 id="dotted">This is an example of dotted border</h3>
<h3 id="dashed">This is an example of dashed border</h3>
<h3 id="double">This is an example of double border</h3>
<h3 id="groove">This is an example of groove border</h3>
<h3 id="ridge">This is an example of ridge border</h3>
<h3 id="inset">This is an example of inset border</h3>
<h3 id="outset">This is an example of outset border</h3>
</body> </body>
</html>
Tags
CSS