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 – এইচটিএমএল কি এবং HTML শিখবো কিভাবে... HTML কি এবং HTML শিখবো কিভাবে? HTML একটি web based programing language যা ওয়েব সাইত তৈরি করতে ব্যবহার করা হয় এবং আজকাল মোবাইল এর অনেক এপ্লিকেশন বানাতে...
HTML hr ট্যাগ ও hr ট্যাগের ব্যবহার... সাধারণত HTML hr  ট্যাগ কোন ডকুমেন্ট কিংবা কোন লাইনে ব্যবহার করলে নিচের দিকে লম্ব রেখা তৈরি হয়। hr tag আসলে Horizontal Line কে বুঝায়। অনেক সময় কিছু সাই...
HTML comment ট্যাগ কিভাবে ব্যবহার করবেন... Comment অর্থ মন্তব করা । HTML কোডের মন্তব লিখতে comment ট্যাগের ব্যবহার হয়ে থাকে।   html comment  ট্যাগ ব্রাউজারে প্রদর্শিত হয় না কিংবা দেখা যায় না। আ...
HTML u ট্যাগ ও u ট্যাগের ব্যবহার... সাধারণত HTML u ট্যাগ কোন ডকুমেন্টে ব্যবহার করা হলে সে ডকুমেন্টের নিচের দিকে আন্ডারলাইন যুক্ত হয়। আমরা anchor tag ব্যবহার করলে লিংক এর নিচে আন্ডার লাইন...
HTML i ট্যাগ ও i ট্যাগের ব্যবহার... সাধারণত HTML i ট্যাগ ব্যবহার করে যেকোন লেখাকে Italic  বা বাকা করা যায়। অর্থাৎ i ট্যাগ ব্যবহার করলে text গুলো এই ধরনের হয়ে যায় This is html i tag । মাঝ...
HTML meta ট্যাগ ও meta ট্যাগের ব্যবহার... সাধারণত meta ট্যাগ ব্যবহার করে ব্রাউজারকে অতিরিক্ত তথ্য প্রধান করা হয়ে থাকে।  meta ট্যাগের কোন ক্লোজিং ট্যাগ নেই।  আপনি একটি ওয়েব পেজ তৈরি করার সময় এক...

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 *

error: Content is protected !!