অর্ডারড এবং আনঅর্ডারড লিস্ট (<ol>, <ul>, <li>)

লিস্টস এবং টেবিলস - এক্সএইচটিএমএল (XHTML) - Web Development

424

এক্সএইচটিএমএল (XHTML)-এ লিস্ট তৈরির জন্য <ol>, <ul>, এবং <li> ট্যাগগুলো ব্যবহৃত হয়। এই ট্যাগগুলো দিয়ে আপনি সাজানো বা সাজানো না থাকা তালিকা তৈরি করতে পারেন। তালিকা একেবারে সাধারণ HTML-এ যেমন থাকে, তেমনই XHTML-এও একইভাবে ব্যবহার করা হয়, তবে XHTML-এ এগুলোর সঠিকভাবে বন্ধন এবং কেস সেনসিটিভ ব্যবহার করতে হবে।


১. অর্ডারড লিস্ট ()

অর্ডারড লিস্ট (Ordered List) হলো একটি তালিকা যেখানে আইটেমগুলো একটি নির্দিষ্ট ক্রমে (সিকোয়েন্স) দেখানো হয়। এই লিস্টে সাধারণত প্রতিটি আইটেম একটি নম্বর বা সংখ্যা দ্বারা চিহ্নিত থাকে। এটি <ol> ট্যাগ দ্বারা শুরু হয় এবং <li> (List Item) ট্যাগের মধ্যে প্রতিটি আইটেম লেখা হয়।

১.1 অর্ডারড লিস্টের গঠন

<ol>
    <li>প্রথম আইটেম</li>
    <li>দ্বিতীয় আইটেম</li>
    <li>তৃতীয় আইটেম</li>
</ol>

এখানে:

  • <ol> ট্যাগ তালিকাটির শুরু নির্দেশ করে।
  • <li> ট্যাগ ব্যবহার করে প্রতিটি তালিকা আইটেম নির্ধারণ করা হয়।

১.2 অর্ডারড লিস্টের নম্বরিং পরিবর্তন

আপনি চাইলে <ol> ট্যাগে type অ্যাট্রিবিউট ব্যবহার করে নম্বরিংয়ের ধরন পরিবর্তন করতে পারেন। বিভিন্ন type মান ব্যবহার করা যায়, যেমন:

  • type="1": সাধারণ সংখ্যা (1, 2, 3, ...)
  • type="A": বড় হাতের অক্ষর (A, B, C, ...)
  • type="a": ছোট হাতের অক্ষর (a, b, c, ...)
  • type="I": বড় রোমান সংখ্যা (I, II, III, ...)
  • type="i": ছোট রোমান সংখ্যা (i, ii, iii, ...)

উদাহরণ:

<ol type="A">
    <li>প্রথম আইটেম</li>
    <li>দ্বিতীয় আইটেম</li>
    <li>তৃতীয় আইটেম</li>
</ol>

এই কোডটি আইটেমগুলিকে বড় হাতের অক্ষরে (A, B, C) নম্বরিত করবে।


২. আনঅর্ডারড লিস্ট ()

আনঅর্ডারড লিস্ট (Unordered List) হলো একটি তালিকা যেখানে আইটেমগুলো নির্দিষ্ট ক্রমে সাজানো থাকে না এবং সাধারণত প্রতিটি আইটেম একটি বুলেট পয়েন্ট (•) দিয়ে চিহ্নিত থাকে। এটি <ul> ট্যাগ দ্বারা শুরু হয় এবং প্রতিটি আইটেম <li> ট্যাগের মধ্যে লেখা হয়।

২.1 আনঅর্ডারড লিস্টের গঠন

<ul>
    <li>প্রথম আইটেম</li>
    <li>দ্বিতীয় আইটেম</li>
    <li>তৃতীয় আইটেম</li>
</ul>

এখানে:

  • <ul> ট্যাগ আনঅর্ডারড লিস্টের সূচনা নির্দেশ করে।
  • <li> ট্যাগ ব্যবহার করে প্রতিটি আইটেম নির্ধারণ করা হয়।

৩. নেস্টেড লিস্ট (Nested Lists)

এক্সএইচটিএমএল (XHTML)-এ আপনি লিস্টের মধ্যে আরেকটি লিস্ট যুক্ত করতে পারেন, অর্থাৎ নেস্টেড লিস্ট তৈরি করতে পারেন। এটি বিভিন্ন সাব-আইটেম বা সেকশনের জন্য ব্যবহৃত হয়। একটি লিস্টের মধ্যে অন্য একটি লিস্ট <ul> বা <ol> ট্যাগে নেস্ট করা যায়।

৩.1 নেস্টেড অর্ডারড লিস্ট (Ordered Nested List)

<ol>
    <li>প্রথম আইটেম
        <ol>
            <li>সাব আইটেম ১</li>
            <li>সাব আইটেম ২</li>
        </ol>
    </li>
    <li>দ্বিতীয় আইটেম</li>
</ol>

এখানে প্রথম আইটেমের মধ্যে একটি নেস্টেড অর্ডারড লিস্ট রয়েছে, যা সাব আইটেম হিসেবে প্রদর্শিত হবে।

৩.2 নেস্টেড আনঅর্ডারড লিস্ট (Unordered Nested List)

<ul>
    <li>প্রথম আইটেম
        <ul>
            <li>সাব আইটেম ১</li>
            <li>সাব আইটেম ২</li>
        </ul>
    </li>
    <li>দ্বিতীয় আইটেম</li>
</ul>

এখানে প্রথম আইটেমের মধ্যে একটি নেস্টেড আনঅর্ডারড লিস্ট রয়েছে, যা বুলেট পয়েন্ট দিয়ে প্রদর্শিত হবে।


৪. লিস্টের স্টাইল এবং কাস্টমাইজেশন

এক্সএইচটিএমএল ডকুমেন্টে লিস্টের স্টাইল কাস্টমাইজ করতে CSS ব্যবহার করা যায়। CSS-এর মাধ্যমে আপনি লিস্টের বুলেট, নম্বরিং, মার্জিন, প্যাডিং ইত্যাদি নিয়ন্ত্রণ করতে পারেন।

উদাহরণ: CSS দিয়ে লিস্ট স্টাইল কাস্টমাইজ

<style type="text/css">
    ul {
        list-style-type: square;
        margin-left: 20px;
    }
    ol {
        list-style-type: upper-alpha;
    }
</style>

এই কোডের মাধ্যমে:

  • আনঅর্ডারড লিস্টের আইটেমগুলো স্কোয়ার বুলেট দিয়ে প্রদর্শিত হবে।
  • অর্ডারড লিস্টে আইটেমগুলো বড় হাতের অক্ষর (A, B, C, ...) দিয়ে নম্বরিত হবে।

এক্সএইচটিএমএল (XHTML)-এ <ol>, <ul>, এবং <li> ট্যাগগুলো লিস্ট তৈরি করতে ব্যবহৃত হয়। আপনি অর্ডারড (সংখ্যাযুক্ত) বা আনঅর্ডারড (বুলেট পয়েন্ট) লিস্ট তৈরি করতে পারেন এবং সেগুলোকে নেস্টেড (ভিতরে অন্য লিস্ট থাকা) করা যায়। লিস্টের স্টাইল এবং কাস্টমাইজেশন CSS-এর মাধ্যমে সম্পন্ন করা যায়। XHTML ডকুমেন্টে সঠিকভাবে ট্যাগ বন্ধন এবং কেস সেনসিটিভ ব্যবহার নিশ্চিত করতে হবে, যা এক্সএইচটিএমএল এর নিয়ম অনুযায়ী ব্রাউজার এবং সার্ভারকে সঠিকভাবে ডকুমেন্টটি রেন্ডার করতে সাহায্য করে।

Content added By
Promotion

Are you sure to start over?

Loading...