প্রিয় পাঠক, গত পর্বে বিভিন্ন ডিজাইনের Order list <ol> নিয়ে আলোচনা করেছিলাম। যারা বিভিন্ন টাইপের অর্ডার লিস্ট তৈরি করতে পারি না তারা উপরের লাল লেখায় ক্লিক করতে দেখে আসতে পারি।
এই পর্বে আলোচনা করব <ul> Unorder List নিয়ে। <ol> এর মতোই এই ট্যাগের ভেতরেও অনেক টাইপের লিস্ট তৈরি করা যায়। যেমনঃ
- disc
- circle
- square
- none
ডিফল্ট টাইপ <ul>
ইনপুটঃ
<html>
<head> </head>
<body><ul>
<li> কম্পিউটার </li><li>মোবাইল </li><li>টেবলেট</li>
</ul></body>
</html>
আউটপুটঃ
- কম্পিউটার
- মোবাইল
- টেবলেট
এখানের প্রতিটি ট্যাগ এর ব্যবহার আগেই জেনে এসেছি তার পরও আরেক বার বলে নেই-
এখানে ইনপুট বক্সে <ul > ব্যবহারের কারণ হলো আমাদের টার্গেট হলো unorder list তৈরি করা। আর আন-অর্ডার লিস্ট তৈরির জন্য অবশ্যই এই ট্যাগ এর প্রয়োজন পরে। আর বাকী ট্যাগ গুলোর ভিতরে এই ট্যাগ এর ভিতরে লেখতে হয়ে, যে কারণে আমরা শুরুতে ও শেষে <ul>ও</ul> ব্যবহার করেছি। আর প্রতিটি নামের লিস্ট তৈরির জন্য আলাদা আলাদা ভাবে <li> ট্যাগ ব্যবহার করেছি, আপনারা একবার দুবার নিজে নিজে চেষ্টা করলেই বুঝতে পারবেন যে কোন ট্যাগ কেন ব্যবহার করা হয়েছে। উপরের ইনপুটে কোনো ধরনের টাইপ যোগ করা হয়নি তার পরও আউটপুটে ব্লাক বুলেট আকারের লিস্ট হয়েছে। এর কারণ হলো। এটি আন-অর্ডার লিস্ট ট্যাগের ডিফল্ট টাইপ। এটি দেখতে বেশ সুন্দর এবং এর ব্যবহার ব্যাপক। এখন আমরা বিভিন্ন টাইপের লিস্ট তৈরি শুরু করি -
- type="disc"
এই টাইপটিও একটি জনপ্রিয় টাইপ, এটাকে Unorder list এর ডিফল্ট টাইপ লিস্ট বলা হয়। এটা ব্যবহার করলে লিস্টে আগে একটি বৃত্তাকার বুলেট দেখাবে। আমরা যদি এখন <ul> ট্যাগ এর ভিতর এই টাইপ টি যোগ করি তাহলে দেখা যাক কি হয়-আমরা <ul> এর মাঝে style="disc" যোগ করব-
ইনপুটঃ
<html>
<head> </head>
<body><ul type="disc">
<li> কম্পিউটার </li><li>মোবাইল </li><li>টেবলেট</li>
</ul></body>
</html>
আউটপুটঃ
- কম্পিউটার
- মোবাইল
- টেবলেট
দেখতে পাচ্ছি উপরের ইনপুটে <ul> এর ভিতরে type="disc" ব্যবহার করার পরও আউটপুটে কোনো পরিবর্তন আসে নি। সুতরাং disc একটি ডিফল্ট টাইপ আন-অর্ডার লিস্ট।
- type="circle "
আমরা যদি এখন <ul> ট্যাগ এর ভিতর type circle যোগ করব। এটা যোগ করার ফলে লিস্ট এর পাশে বৃত্তাকার রিং টাইপের চিহ্নের সৃষ্টি হবে।যদি এই টাইপ টি যোগ করি তাহলে দেখা যাক কি হয়-আমরা <ul> এর মাঝে style="circle " যোগ করব-
ইনপুটঃ
<html>
<head> </head>
<body><ul type="circle">
<li> কম্পিউটার </li><li>মোবাইল </li><li>টেবলেট</li>
</ul></body>
</html>
আউটপুটঃ
- কম্পিউটার
- মোবাইল
- টেবলেট
দেখতে পাচ্ছি উপরের ইনপুটে <ul> এর ভিতরে type="circle" ব্যবহার করার পর আউটপুটে পরিবর্তন এসেছে। এখানে বুলেট এর পরবর্তী তে একটি করে বৃত্ত দেখাচ্ছে । সুতরাং circle টাইপের ul লিস্ট সম্পর্কে জানতে পেড়েছি।
- type="square "
আমরা যদি এখন <ul> ট্যাগ এর ভিতর এই টাইপ টি যোগ করি তাহলে এর বর্গাকার টাইপের লিস্ট দেখাবে। দেখা যাক কি হয়-আমরা <ul> এর মাঝে style="square " যোগ করব-
ইনপুটঃ
<html>
<head> </head>
<body><ul type="square ">
<li> কম্পিউটার </li><li>মোবাইল </li><li>টেবলেট</li>
</ul></body>
</html>
আউটপুটঃ
- কম্পিউটার
- মোবাইল
- টেবলেট
দেখতে পাচ্ছি উপরের ইনপুটে <ul> এর ভিতরে type="square " ব্যবহার করার পর আউটপুটে পরিবর্তন এসেছে। এখানে বৃত্তাকার এর পরবর্তী তে একটি করে বর্গাকার চিহ্ন দেখাচ্ছে ।
- type="none "
আমরা যদি এখন <ul> ট্যাগ এর ভিতর none টাইপ টি যোগ করি তাহলে এর কোন টাইপের লিস্ট দেখাবে না। দেখা যাক কি হয়-আমরা <ul> এর মাঝে style="none " যোগ করব-
ইনপুটঃ
<html>
<head> </head>
<body><ul type="none ">
<li> কম্পিউটার </li><li>মোবাইল </li><li>টেবলেট</li>
</ul></body>
</html>
আউটপুটঃ
- কম্পিউটার
- মোবাইল
- টেবলেট
দেখতে পাচ্ছি উপরের ইনপুটে <ul> এর ভিতরে type="none " ব্যবহার করার পর আউটপুটে পরিবর্তন এসেছে। এখানে কোনো টাইপ ই দেখাচ্ছে না। এই ধরনের টাইপ মেনু বারে ব্যবহার করা হয়। যখন কোনো ওয়েবসাইটের মেনুবাড তৈরি করতে হয় তখন এই ধরনের লিস্ট টাইপের প্রয়োজন পরে।
আমরা এখন type= none;. দিয়ে একটি সূচিপত্র তৈরি করি। এবং দেখি লিস্টে ভিতরে কিভাবে আরো এট্রিবিউট ব্যবহার করতে পারি। আমরা আগের মতোই একটি html ডেস্ক তৈরি করে নেই_
ইনপুট -
- <h2 style="color:red;
- font-weight:600;">
- সূচি পত্র</h2>
<ul type="none" style="font-family :Noto Serif Bengali "><li>তথ্য প্রযুক্তির ভূমিকা </li><li>তথ্য প্রযুক্তির বিকাশ </li><li>তথ্য প্রযুক্তির ব্যবহার </li><li>তথ্য প্রযুক্তির গুরুত্ব </li></ul>আউটপুটঃ
সূচি পত্র
- তথ্য প্রযুক্তির ভূমিকা
- তথ্য প্রযুক্তির বিকাশ
- তথ্য প্রযুক্তির ব্যবহার
- তথ্য প্রযুক্তির গুরুত্ব
উপরের ইনপুটে দেখছেন সূচি পত্র লেখাটি <h1> ট্যাগের ভিতরে লেখায় আউটপুটে লেখাটি বাকী গুলোর চেয়ে অনেক বড় দেখাচ্ছে এরপর style এর ভিতরে আমরা এট্রিবিউট উপাদান হিসেবে রং করার জন্য color, বোল্ড বা গাঢ় করার জন্য font-weight :600; এবং ফন্ট স্টাইল করার জন্য ব্যবহার করা হয়েছে। এগুলো শুধু ঐ "বড় সূচি পত্র " লেখাটির জন্য।
এবার আসি নিচের লিস্ট গুলোর ট্যাগের ভিতর - এখানেও সেইম ভাবে < ul> ট্যাগ এর ভিতরে ফন্ট ফেমিলি এবং লিস্ট টাইপ ব্যবহার করা হয়েছে, যার ফলে এত সুন্দর একটা সূচি পত্র গঠন করা হয়েছে।
0 Comments
আপনার মন্তব্য লিখুন!