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

ওয়েবসাইটে গুগল ম্যাপ যোগ করবো কিভাবে... অনেক সময় কিছু কিছু ওয়েবসাইটে ভিজিট করার সময় আমরা Google Map দেখে থাকি। আমরা অনেকেই জানি Google Map ব্যবহার করে রোড়ম্যাপ, লোকেশন ট্র্যাক সহ অনেক ধরনের ...
এইচটিএমএল ট্যাগ – html tag ও html attributes... আমাদের আজকের আলোচনার বিষয় এইচটিএমএল ট্যাগ ( html tag ) ও এট্রিবিউট নিয়ে।  এর আগের আর্টিকেল এ আমরা জেনেছিলাম কিভাবে এইচটিএমএল দিয়ে Hello World লিখা যায়...
HTML এ বাংলা লিখবো কিভাবে... HTML এ বাংলা লিখলেই বাংলা আসেনা অনেক ওয়েব ব্রাউজারে কারন আমরা ওয়েব পেজে যে বাংলা লিখি সেটি ইউনিকোড ভিত্তিক । বাংলা লিখবার জন্য আসলে html এ character s...
HTML এ div ট্যাগ ও div ট্যাগের ব্যবহার... HTML এ একটি নির্দিষ্ট অংশকে আলাদাভাবে স্টাইল কিংবা ব্লক আকারে তৈরি করবার জন্য সাধারণত div ট্যাগ ব্যবহার করা হয়ে থাকে।  আমরা যখন একটি ওয়েবসাইট ভিজিট কর...
HTML – এইচটিএমএল কি এবং HTML শিখবো কিভাবে... HTML কি এবং HTML শিখবো কিভাবে? HTML একটি web based programing language যা ওয়েব সাইত তৈরি করতে ব্যবহার করা হয় এবং আজকাল মোবাইল এর অনেক এপ্লিকেশন বানাতে...
aside ট্যাগ ও HTML aside ট্যাগের ব্যবহার... aside ট্যাগ কোন ডকুমেন্ট এর সাথে রিলেটেড বিষয় গুলকে আলাদা রাখবার জন্য ব্যবহার হয়। এক কথায় কোন প্রবন্ধ বা আটিকেল এর সাথে সম্পর্ক যুক্ত বিষয় গুল একটু সা...
ওয়েবসাইটে Youtube ভিডিও অ্যাড করবো কিভাবে... ইতি পূর্বে আমরা আলোচনা করেছি কিভাবে ওয়েবসাইটে গুগল ম্যাপ প্রর্দশন করা যায়। তারই ধারাবাহিকতায় আজকে আমরা আলোচনা করবো কিভাবে Youtube এর ভিডিও ওয়েবসাইটে প...
area ট্যাগ ও map ট্যাগের ব্যবহার উদাহরন সহ... map ট্যাগ এবং area ট্যাগ এই দুটো আসলে একে অপরের সাথে কানেক্টটেড। অনেকটা ul li এবং ol li এই দুইটো ট্যাগের সাথে সর্ম্পকের মতো। যেমন এর আগে আমরা দেখিয়েছি...
HTML address ট্যাগ এর ব্যবহার... কোন তথ্য বা নথির যোগাযোগের ক্ষেত্রে address ট্যাগ ব্যবহার করা হয়। আবার ওয়েব পেজে কোন ঠিকান লেখবার জন্যও address ট্যাগ ব্যবহার করা হয়ে থাকে। ধরুন, আপনি...
HTML iframe ট্যাগ ও iframe ট্যাগের ব্যবহার... সাধারণত iframe ট্যাগ ব্যবহার করে একটি ওয়েবসাইটের মধ্যে অন্য একটি ওয়েবসাইট কিংবা ওয়েবপেজ ভিউ করানো হয়ে থাকে। ধরুন, আপনি কোন একটি ওয়েবসাইট অন্য কোন ওয়েব...

You may also like...

1 Response

  1. Md. Tannveer Alam বলেছেন:

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

মন্তব্য করুন

আপনার ই-মেইল এ্যাড্রেস প্রকাশিত হবে না। * চিহ্নিত বিষয়গুলো আবশ্যক।