লিস্টস – ফ্রি HTML ও CSS কোর্স – ক্লাস ৫

এইচটিএমএল অরডার্ড লিস্ট (1, 2, 3 … গণনা করার উপাদানগুলি সহ) এবং সংখ্যার পরিবর্তে বুলেটের সাথে একটি আনর্ডারড লিস্ট উভয় তৈরি করার একটি উপায় সরবরাহ করে। লিস্টগুলি আইটেমগুলির একটি তালিকা তৈরী করার একটি ভাল উপায় এবং এইচটিএমএল স্টাইলিং আপনাকে এ কাজ করতে দেয়।

অরডার্ড লিস্ট

অর্ডার করা তালিকা কীভাবে তৈরি করা যায় তার একটি উদাহরণ এখানে রয়েছে:

<p>Here is a list of ordered items:</p>
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

আদেশযুক্ত তালিকার একটি “type” অ্যার্টিবিউট রয়েছে যা ব্যবহারের জন্য সংখ্যার পদ্ধতি সংজ্ঞায়িত করে।

সংখ্যা ব্যবহার করে গণনা করতে, টাইপ = “1” ব্যবহার করুন:

<p>Here is a list of ordered items:</p>
<ol type="1">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

বড় হাতের অক্ষর ব্যবহার করে গণনা করতে, টাইপ = “A” ব্যবহার করুন:

<p>Here is a list of ordered items:</p>
<ol type="A">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

ছোট হাতের অক্ষর ব্যবহার করে গণনা করতে, টাইপ = “a” ব্যবহার করুন:

<p>Here is a list of ordered items:</p>
<ol type="a">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

বড় হাতের রোমান সংখ্যার সাহায্যে গণনা করতে, টাইপ = “I” ব্যবহার করুন:

<p>Here is a list of ordered items:</p>
<ol type="I">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

ছোট হাতের রোমান সংখ্যার সাহায্যে গণনা করতে, টাইপ = “i” ব্যবহার করুন:

<p>Here is a list of ordered items:</p>
<ol type="i">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

আনর্ডারড লিস্ট

আনর্ডারড লিস্ট কীভাবে তৈরি করা যায় তার উদাহরণ এখানে হল:

<p>Here is a list of unordered items:</p>    
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

লিস্ট স্টাইলের বৈশিষ্ট্যগুলি পরিবর্তন করতে, আমরা সিএসএস অ্যাট্রিবিউট list-style-type ব্যবহার করতে পারি। উপলভ্য আনর্ডারড লিস্ট এর প্রকারগুলি হল:

  • disc
  • circle
  • square
  • none

disc list-style-type এর একটি উদাহরণ হল:

<p>Here is a list of unordered items:</p>    
<ul style="list-style-type: disc">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

circle list-style-type এর একটি উদাহরণ হল:

<p>Here is a list of unordered items:</p>    
<ul style="list-style-type: circle">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

square list-style-type এর একটি উদাহরণ হল:

<p>Here is a list of unordered items:</p>    
<ul style="list-style-type: square">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

none list-style-type এর একটি উদাহরণ হল:

<p>Here is a list of unordered items:</p>    
<ul style="list-style-type: none">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Leave a Comment