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

aside ট্যাগ ও HTML aside ট্যাগের ব্যবহার... aside ট্যাগ কোন ডকুমেন্ট এর সাথে রিলেটেড বিষয় গুলকে আলাদা রাখবার জন্য ব্যবহার হয়। এক কথায় কোন প্রবন্ধ বা আটিকেল এর সাথে সম্পর্ক যুক্ত বিষয় গুল একটু সা...
HTML datalist ট্যাগ ও HTML datalist এর ব্যবহার... datalist ট্যাগ একটি input ট্যাগের উপাদান, এটির পূর্বনির্ধারিত বিকল্পগুলির একটি তালিকাকে নির্দিষ্ট করে থাকে। অনেক সময় কিছু কিছু সাইটে বা ফর্মে দেখা যায়...
area ট্যাগ ও map ট্যাগের ব্যবহার উদাহরন সহ... map ট্যাগ এবং area ট্যাগ এই দুটো আসলে একে অপরের সাথে কানেক্টটেড। অনেকটা ul li এবং ol li এই দুইটো ট্যাগের সাথে সর্ম্পকের মতো। যেমন এর আগে আমরা দেখিয়েছি...
HTML iframe ট্যাগ ও iframe ট্যাগের ব্যবহার... সাধারণত iframe ট্যাগ ব্যবহার করে একটি ওয়েবসাইটের মধ্যে অন্য একটি ওয়েবসাইট কিংবা ওয়েবপেজ ভিউ করানো হয়ে থাকে। ধরুন, আপনি কোন একটি ওয়েবসাইট অন্য কোন ওয়েব...
HTML – এইচটিএমএল কি এবং HTML শিখবো কিভাবে... HTML কি এবং HTML শিখবো কিভাবে? HTML একটি web based programing language যা ওয়েব সাইত তৈরি করতে ব্যবহার করা হয় এবং আজকাল মোবাইল এর অনেক এপ্লিকেশন বানাতে...
HTML এ div ট্যাগ ও div ট্যাগের ব্যবহার... HTML এ একটি নির্দিষ্ট অংশকে আলাদাভাবে স্টাইল কিংবা ব্লক আকারে তৈরি করবার জন্য সাধারণত div ট্যাগ ব্যবহার করা হয়ে থাকে।  আমরা যখন একটি ওয়েবসাইট ভিজিট কর...

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 !!