প্রিয় পাঠক, আমরা এতদিন html এর বিভিন্ন ট্যাগ সম্পর্কে ধারণা পেয়েছি। আজ দেখব কিভাবে html দিয়ে যেকোনো স্টাইলের লিস্ট তৈরি করা যায়। ত
আমরা ট্যাগ গুলো পড়ে পেয়েছি যে লিস্ট তৈরির জন্য বেশ কয়েকটি ট্যাগ এর প্রয়োজন পরে। আরো জেনেছি যে HTML দিয়ে এই দুই রকমের লিস্ট তৈরি করা যায়।
- Order list
- Un Order list
- Order list
অর্ডার লিস্ট তৈরি করতে <ol> এবং <li> ট্যাগ এর প্রয়োজন হয়। এছাড়াও সৌন্দর্য বৃদ্ধির জন্য আরো কয়েকটি ট্যাগ এবং এট্রিবিউট ব্যবহার করা যায়। আমরা যদি সাধারণ ভাবে অর্ডার লিস্ট তৈরি করি তাহলে নাম্বার অনুযায়ী দেখাবে। যেমনঃ- 1,2,3,4 এরকম। কিন্তু যদি বিভিন্ন স্টাইলের নাম্বার ব্যবহার করি তাহলে এই ট্যাগ এর ভিতরে আরো এট্রিবিউট ব্যবহার করতে হবে। অর্ডার লিস্ট এই কয়েকটি type এ লেখা যায়-
ডিফল্ট -
|
|
|
|
|
|
|
|
|
|
উপরের টেবিলের সবগুলো টাইপ আমরা লাইভ চর্চা করব।
আগে দেখব যে নরমাল বলতে কোনো টাইপ ব্যবহার না করে লিস্ট তৈরি করলে কেমন দেখায়।
তাই নিচে একটি কোডিং টেস্ট দেখি-
ইনপুটঃ
<html>
<head> </head>
<body><ol>
<li> বাংলা </li><li>ইংরেজি </li><li>আই.সি.টি. </li>
</ol></body>
</html>
আউটপুটঃ
- বাংলা
- ইংরেজি
- আই.সি.টি.
উপরের ইনপুটে কোনো ধরনের টাইপ যোগ করা হয়নি তার পরও আউটপুটে ইংরেজি নাম্বার আকারের লিস্ট হয়েছে। এর কারণ হলো। এটি অর্ডার লিস্ট ট্যাগের ডিফল্ট টাইপ।
এখন আমরা <ol> ট্যাগ এর ভিতরে type বয়বহার করে করে পরিবর্তন গুলো দেখব।
ত দেখা যাক type ="1" ব্যবহার করলে কেমন রেজাল্ট আসে-
- type=" 1 "
আমরা <ol> এর ভিতর type="1" যোগ করি।
ইনপুটঃ
<html>
<head> </head>
<body><ol type=" 1 ">
<li> বাংলা </li><li>ইংরেজি </li><li>আই.সি.টি. </li>
</ol></body>
</html>
আউটপুটঃ
- বাংলা
- ইংরেজি
- আই.সি.টি.
উপরের ইনপুটে দেখতে পাচ্ছি <ol> ট্যাগ এর ভিতরে type="1" যোগ করার পরে আউট পুটে কোনো পরিবর্তন আসে নি। সুতরাং আমাদের ডিফল্ট আর type =1 এর রেজাল্ট একই।
এবার আমরা একই যায়গায় type="A" যোগ করে দেখি-
- type=" A "
আমরা <ol> এর ভিতর type="A" যোগ করি।
ইনপুটঃ
<html>
<head> </head>
<body><ol type=" A ">
<li> বাংলা </li><li>ইংরেজি </li><li>আই.সি.টি. </li>
</ol></body>
</html>
আউটপুটঃ
- বাংলা
- ইংরেজি
- আই.সি.টি.
উপরের ইনপুটে দেখতে পাচ্ছি <ol> ট্যাগ এর ভিতরে type="A" যোগ করার পরে লিস্ট টাইপ পরিবর্তন হয়ে A, B, C তে রূপান্তর হয়েছে। সুতরাং টাইপ পরিবর্তন করার সাথে সাথে আমাদের আউটপুটের ধরন পরিবর্তন হয়।
এবার আমরা একই স্থানে type="a " প্রয়োগ করে দেখি কি হয়-
- type=" a "
আমরা <ol> এর ভিতর type="a" যোগ করি।
ইনপুটঃ
<html>
<head> </head>
<body><ol type=" a ">
<li> বাংলা </li><li>ইংরেজি </li><li>আই.সি.টি. </li>
</ol></body>
</html>
আউটপুটঃ
- বাংলা
- ইংরেজি
- আই.সি.টি.
উপরের ইনপুটে দেখতে পাচ্ছি <ol> ট্যাগ এর ভিতরে type="a" যোগ করার পরে লিস্ট টাইপ পরিবর্তন হয়ে a,b,c তে রূপান্তর হয়েছে। সুতরাং টাইপ পরিবর্তন করার সাথে সাথে আমাদের আউটপুটের ধরন পরিবর্তন হয়।
এবার আমরা একই স্থানে type="I " প্রয়োগ করে দেখি কি হয়-
- type=" I "
আমরা <ol> এর ভিতর type="I" যোগ করি।
ইনপুটঃ
<html>
<head> </head>
<body><ol type=" a ">
<li> বাংলা </li><li>ইংরেজি </li><li>আই.সি.টি. </li>
</ol></body>
</html>
আউটপুটঃ
- বাংলা
- ইংরেজি
- আই.সি.টি.
উপরের ইনপুটে দেখতে পাচ্ছি <ol> ট্যাগ এর ভিতরে type="I" যোগ করার পরে লিস্ট টাইপ পরিবর্তন হয়ে I,II,III তে রূপান্তর হয়েছে। সুতরাং টাইপ পরিবর্তন করার সাথে সাথে আমাদের আউটপুটের ধরন পরিবর্তন হয়।
এবার আমরা একই স্থানে type="i " প্রয়োগ করে দেখি কি হয়-
- type=" i"
আমরা <ol> এর ভিতর type="i" যোগ করি।
ইনপুটঃ
<html>
<head> </head>
<body><ol type=" i ">
<li> বাংলা </li><li>ইংরেজি </li><li>গণিত </li><li>আই.সি.টি. </li>
</ol></body>
</html>
আউটপুটঃ
- বাংলা
- ইংরেজি
- গণিত
- আই.সি.টি.
উপরের ইনপুটে দেখতে পাচ্ছি <ol> ট্যাগ এর ভিতরে type="I" যোগ করার পরে লিস্ট টাইপ পরিবর্তন হয়ে i,ii,iii তে রূপান্তর হয়েছে। সুতরাং টাইপ পরিবর্তন করার সাথে সাথে আমাদের আউটপুটের ধরন পরিবর্তন হয়।
প্রিয় পাঠক এভাবে আমরা যেকোনো html প্লেসে বিভিন্ন রকম স্টাইলের লিস্ট তৈরি করতে পারি। এছাড়াও আরো একটি ট্যাগ <ul> সম্পর্কে আলোচনা করার বাকী রয়েছে যা পরবর্তী পোস্টে আলোচনা করা হলো। লিস্ট তৈরি করার ক্ষেত্রে দুটিই অনেক ভূমিকা রাখে।ঠিক এরকমই ul ট্যাগ এর ভিতরেও আমাদের type লিখে বিভিন্ন স্টাইল করতে পারব। তাই <ul> ট্যাগ এর ব্যবহার দেখতে চাইলে অবশ্যই নিচের লেখাটিতে ক্লিক করবেন। ফলে আপনাকে <ul> এর পেজে নিয়ে যাবে।
0 Comments
আপনার মন্তব্য লিখুন!