উদাহরণ ১: অর্ডারড লিস্ট

ক্রমানুসারে তালিকা যেমন ধাপে ধাপে নির্দেশনা।

1. কম্পিউটার চালু করুন।
2. ব্রাউজার খুলুন।
3. ওয়েবসাইটে প্রবেশ করুন।

কোড:

<ol>
    <li>কম্পিউটার চালু করুন।</li>
    <li>ব্রাউজার খুলুন।</li>
    <li>ওয়েবসাইটে প্রবেশ করুন।</li>
</ol>
        

ব্যাখ্যা: <ol> ট্যাগ সংখ্যা দিয়ে ক্রমানুসারে আইটেম প্রদর্শন করে।

উদাহরণ ২: আনঅর্ডারড লিস্ট

বুলেট পয়েন্ট দিয়ে তালিকা, যেমন কেনাকাটার তালিকা।

• দুধ
• ডিম
• রুটি

কোড:

<ul>
    <li>দুধ</li>
    <li>ডিম</li>
    <li>রুটি</li>
</ul>
        

ব্যাখ্যা: <ul> ট্যাগ বুলেট পয়েন্ট দিয়ে আইটেম প্রদর্শন করে।

উদাহরণ ৩: ডেসক্রিপশন লিস্ট

টার্ম এবং তাদের বর্ণনার জন্য।

এইচটিএমএল

হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ, ওয়েব পেজ তৈরির জন্য।

সিএসএস

ক্যাসকেডিং স্টাইল শীট, ওয়েব পেজের স্টাইলিংয়ের জন্য।

কোড:

<dl>
    <dt>এইচটিএমএল</dt>
    <dd>হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ, ওয়েব পেজ তৈরির জন্য।</dd>
    <dt>সিএসএস</dt>
    <dd>ক্যাসকেডিং স্টাইল শীট, ওয়েব পেজের স্টাইলিংয়ের জন্য।</dd>
</dl>
        

ব্যাখ্যা: <dt> টার্ম এবং <dd> বর্ণনা নির্দেশ করে।

উদাহরণ ৪: নেস্টেড লিস্ট

একটি লিস্টের মধ্যে আরেকটি লিস্ট তৈরি।

• ফল
  • আপেল
  • কলা
• সবজি
  • গাজর
  • ব্রকোলি

কোড:

<ul>
    <li>ফল
        <ul>
            <li>আপেল</li>
            <li>কলা</li>
        </ul>
    </li>
    <li>সবজি
        <ul>
            <li>গাজর</li>
            <li>ব্রকোলি</li>
        </ul>
    </li>
</ul>
        

ব্যাখ্যা: একটি লিস্টের মধ্যে আরেকটি লিস্ট তৈরি করা যায়।

উদাহরণ ৫: সিএসএস দিয়ে লিস্ট স্টাইলিং

কাস্টম বুলেট এবং ব্যাকগ্রাউন্ড সহ লিস্ট।

• কাস্টম আইটেম ১
• কাস্টম আইটেম ২
• কাস্টম আইটেম ৩

1. ক্রমানুসারে আইটেম ১
2. ক্রমানুসারে আইটেম ২

কোড:

<style>
    ul.custom-list {
        list-style-type: square;
        padding-left: 20px;
    }
    ul.custom-list li {
        background-color: #e6f3ff;
        margin: 5px 0;
        padding: 5px;
        border-radius: 3px;
    }
    ol.custom-list {
        list-style-type: upper-roman;
        padding-left: 20px;
    }
</style>
<ul class="custom-list">
    <li>কাস্টম আইটেম ১</li>
    <li>কাস্টম আইটেম ২</li>
    <li>কাস্টম আইটেম ৩</li>
</ul>
<ol class="custom-list">
    <li>ক্রমানুসারে আইটেম ১</li>
    <li>ক্রমানুসারে আইটেম ২</li>
</ol>
        

ব্যাখ্যা: সিএসএস দিয়ে বুলেট স্টাইল এবং ব্যাকগ্রাউন্ড পরিবর্তন করা হয়েছে।