html ol ul tag ও li tag এর ব্যবহার

HTML এর মধ্যে দুই ধরনের লিস্ট তৈরি করা যায় প্রথমটি হচ্ছে অর্ডারড লিস্ট এবং দ্বিতীয়টি আনঅর্ডারড লিস্ট। আন অর্ডারড লিস্ট হচ্ছে ul ( Unordered list ) এবং অর্ডারড লিস্টস হচ্ছে ol (ordered list) ।   একটি ওয়েব পেজকে বিভিন্ন লিস্ট আকারে সাজাতে ol কিংবা ul ট্যাগের ব্যাবহার হয়ে থাকে আর এদের চিলড্রেন আকারে থাকে li tag যা আসলে প্রতিটি আইটেম কে রিপ্রেজেন্ট করে এবং li = list item   ।  নিচে html ol ul tag ও li tag সম্পর্কে দেখানো হল।

আমরা প্রথমে ol, ul ও li ট্যাগ সম্পর্কে জেনে নেই । সাধারণত একটি ওয়েব পেজ লিস্ট তৈরি করতে তিন ধরনের ট্যাগ ব্যাবহার করা হয়ে থাকে।

html ol ul tag এর ব্যবহার

আমরা ol ট্যাগ এর দুইটি উদাহরন নিচে দিয়েছি । প্রথমটিতে শুধু ol ব্যবহার করে তিনটি লিস্ট করেছি ।

<ol>
  <li>Phone</li>
  <li>Computer</li>
  <li>iPad</li>
</ol>

নিজে চেষ্ঠা করুন

উপরের কোড এর প্রিভিউ হবে নিচের মতো । যেখানে ১ থেকে শুরু হয়ে ৩ পর্য়ন্ত হয়েছে কারন এখানে ৩টি আইটেম আছে ।

1. Phone
2. Computer
3. iPad

এবার নিচে আর একটি ol tag এর ব্যবহার তুলে ধরেছি যেখানে আমরা একটি এট্রিবিউট ব্যবহার করেছি । ধরুন আপনি লিট টি শুরু করতে চাচ্ছেন ৫০ থেকে, তাহলে ol tag  এর ভিতটে এট্রিবিউট আকারে এড করতে পারেন start=’50’

<ol start="50">
  <li>Phone</li>
  <li>Computer</li>
  <li>iPad</li>
</ol>

নিজে চেষ্ঠা করুন

উপরের কোড গুলোর প্রিভিউ নিচের মতো হবে । আর যেহেতু আমরা start=’50’ এট্রিবিউট  যোগ করেছি, তাই আমাদের লিস্টটি শুরু হযেছে ৫০ থেকে ।

50. Phone
51. Computer
52. iPad

এবার আলোচনা করা যাক ul ট্যাগের ব্যাবহার

ul ট্যাগের ব্যাবহার

ol এর মতো ul এর  মার্কআপও প্রায় একই করম, শুধু ol এর যায়গায় ul  দিলেই হলো । ul  ট্যাগের ব্যাবহার নিচে দেখানো হল।

 <ul>
   <li>Computer</li>
   <li>Phone</li>
   <li>iPad</li>
 </ul>

নিজে চেষ্ঠা করুন

এরপর কোড গুলো সেভ করুন। এবার যেকোন ব্রাউজারে গিয়ে রান করুন। রান করা হয়ে গেলে নিচের ছবির মতো একটি বুলেট আকারে লিস্ট দেখা যাবে। নিচের ছবিতে লক্ষ করুন।

ul ট্যাগে ব্যাবহার করে উপরের ছবিটির মতো লিস্ট তৈরি করা যায়।

তো এই ছিলো html ol ul tag ও li tag সম্পর্কে কিছু কথা । উপরের কোড গুলোকে আপানর কোড এডিটর এ লিখে প্র্যাকটিস করতে ভুলবেন না 🙂