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 ট্যাগ সম্পর্কে জেনে নেই । সাধারণত একটি ওয়েব পেজ লিস্ট তৈরি করতে তিন ধরনের ট্যাগ ব্যাবহার করা হয়ে থাকে।

 1. ol tag ব্যাবহার করে 1 2 3 4 নাম্বার লিস্ট আকারে দেখানো যায়। ol  tag কে অর্ডার ট্যাগ বলা হয়।
2.  ul tag ব্যাবহার করে বুলেট আকারে লিস্ট দেখানো যায়।  ul tag কে আনঅর্ডার ট্যাগ বলা হয়।
3. li tag ব্যাবহার করে ol বা ul ট্যাগ এর ভিতরের লিস্ট আইটেম গুলো দিতে হয় । 

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’ এট্রিবিউট  যোগ করেছি, তাই আমাদের লিস্টটি শুরু হযেছে ৫০ থেকে ।

  1. Phone
  2. Computer
  3. 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 সম্পর্কে কিছু কথা । উপরের কোড গুলোকে আপানর কোড এডিটর এ লিখে প্র্যাকটিস করতে ভুলবেন না 🙂

Related Post

HTML এ div ট্যাগ ও div ট্যাগের ব্যবহার... HTML এ একটি নির্দিষ্ট অংশকে আলাদাভাবে স্টাইল কিংবা ব্লক আকারে তৈরি করবার জন্য সাধারণত div ট্যাগ ব্যবহার করা হয়ে থাকে।  আমরা যখন একটি ওয়েবসাইট ভিজিট কর...
HTML comment ট্যাগ কিভাবে ব্যবহার করবেন... Comment অর্থ মন্তব করা । HTML কোডের মন্তব লিখতে comment ট্যাগের ব্যবহার হয়ে থাকে।   html comment  ট্যাগ ব্রাউজারে প্রদর্শিত হয় না কিংবা দেখা যায় না। আ...
এইচটিএমএল ট্যাগ – html tag ও html attributes... আমাদের আজকের আলোচনার বিষয় এইচটিএমএল ট্যাগ ( html tag ) ও এট্রিবিউট নিয়ে।  এর আগের আর্টিকেল এ আমরা জেনেছিলাম কিভাবে এইচটিএমএল দিয়ে Hello World লিখা যায়...
HTML এ বাংলা লিখবো কিভাবে... HTML এ বাংলা লিখলেই বাংলা আসেনা অনেক ওয়েব ব্রাউজারে কারন আমরা ওয়েব পেজে যে বাংলা লিখি সেটি ইউনিকোড ভিত্তিক । বাংলা লিখবার জন্য আসলে html এ character s...
Html দিয়ে কিভাবে Table তৈরি করবেন... HTML Table সাধারণত একটি ওয়েবপেজে ব্যাবহার করা হয়। Table ব্যাবহার করে আমরা অনেক ডাটা কলাম সারিবব্ধ ভাবে সাজাতে পারি। এইচটিএমএল টেবিল তৈরি করার আগে আপনা...

You may also like...

1 Response

  1. Md. Tannveer Alam says:

    sir kivabe audio song, and bangla likhbo.. please ektu janale valo hoto

Leave a Reply

Your email address will not be published. Required fields are marked *

*