এইচটিএমএল/লিস্ট

ওয়েব পেইজে এ তালিকা তৈরি করতে লিস্ট ট্যাগ ব্যবহার করতে হয়। এইচটিএমএল এ প্রধানত ৩ ধরণের তালিকা তৈরি করা যায়:

• ক্রমিক তালিকা (Ordered list): তালিকার ভুক্তিগুলোকে সংখ্যা, বর্ণ বা রোমান হরফে ক্রমিক নং দেওয়া হয়।
• ক্রম বিহীন তালিকা(Unordered list): এ তালিকায় ভুক্তিগুলোর ক্রমিক নং থাকে না। বুলেট, ডিস্ক ইত্যাদি প্রতীকের সাহায্যে তালিকা তৈরি হয়।
• সঙ্গা তালিকা(Definition list): এ তালিকার ভুক্তিগুলোর অধীনে এদের সঙ্গা লেখা হয়।

অর্ডারড লিস্ট (ক্রমিক তালিকা)

অর্ডারড লিস্ট তৈরিতে <ol>... ...</ol> ট্যাগ ব্যবহৃত হয়। এর ভেতর প্রতিটি ভুক্তিকে <li>... ...</li> ট্যাগের ভেতর রাখতে হয়। যেমন:

• কোড

    <ol>
      <li>C</li>
      <li>C++</li>
      <li>Java</li>
    </ol>
  

• আউটপুট:

1. C
2. C++
3. Java

অ্যাট্রিবিউট

আরও দেখুন: অ্যাট্রিবিউট কী

ol ট্যাগের অ্যাট্রিবিউটগুলোর মধ্যে উল্লেখযোগ্য হল type এবং start। টাইপ অ্যাট্রিবিউট দিয়ে গণনার ধরন (সংখ্যা/ রোমান/ বর্ণ) এবং স্টার্ট অ্যাট্রিবিউট দিয়ে কত থেকে গণনা শুরু করতে হবে তা নির্ধারণ করা হয়। কোনো অ্যাট্রিবিউট না দিলে ডিফল্ট হিসেবে 1,2,3... এভাবে গণনা হবে এবং 1 থেকেই গণনা শুরু হবে।

স্টাইল অ্যাট্রিবিউট

গণনার ধরন	অ্যাট্রিবিউট ও ভ্যালু সহ ট্যাগ
1, 2, 3 ...	<ol type='1'>
a, b, c ...	<ol type='a'>
A, B, C ...	<ol type='A'>
i, ii, iii, iv...	<ol type='i'>
I, II, III, IV...	<ol type='I'>

স্টাইল অ্যাট্রিবিউট

কত থেকে গণনা শুরু করতে হবে তা এ ট্যাগের ভ্যালু হিসেবে উল্লেখ করতে হয়। যেমন: রোমান (i, ii, iii,...) পদ্ধতিতে গণনা ৩ থেকে শুরু করতে চাইলে অ্যাট্রিবিউট হবে- <ol type='i' start='3'>

উদাহরণ

• কোড:

    <ol type='i' start='3'>
      <li>Monitor</li>
      <li>Printer</li>
      <li>Speaker</li>
    </ol>
  

• আউটপুট:

iii. Monitor
 iv. Printer
  v. Speaker

আনঅর্ডারড লিস্ট (ক্রম বিহীন তালিকা)

আনঅর্ডারড লিস্ট তৈরিতে <ul>... ...</ul> ট্যাগ ব্যবহৃত হয়। এর ভেতর প্রতিটি ভুক্তিকে <li>... ...</li> ট্যাগের ভেতর রাখতে হয়। যেমন:

• কোড:

    <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>
  

• আউটপুট:

• First item
• Second item
• Third item

অ্যাট্রিবিউট

আরও দেখুন: অ্যাট্রিবিউট কী

তালিকায় বুলেটের ধরন নির্ধারণ করতে ul ট্যাগের ভেতর type অ্যাট্রিবিউট ব্যবহার করতে হয়। ভ্যালু হিসেবে circle, disc বা square উল্লেখ করতে হয়। টাইপ নির্ধারণ না করলে ডিফল্ট হিসেবে circle বুলেট ব্যবহৃত হয়।

বুলেটের ধরন	অ্যাট্রিবিউট ও ভ্যালু সহ ট্যাগ
•	<ul type =“circle”>
৹	<ul type="disc">
▪	<ul type="square">

• উদাহরণ:

    <ul type='disc'>
      <li>Football </li>
      <li>Cricket</li>
      <li>Basketball</li>
    </ul>
  

• আউটপুট:

৹ Football
৹ Cricket
৹ Basketball 

ডেফিনেশন লিস্ট

এ তালিকায় প্রথমে একটি বিষয় (মোটা হরফে) এবং পরের লাইনে তার সঙ্গা, তারপর আরেকটি বিষয় (মোটা হরফে) এবং তাল পরের লাইনে তার সঙ্গা এভাবে সাজানো হয়। অর্থাৎ,

• কোড:

    <dl>
      <dt>Term 1</dt>
      <dd>Definition of Term 1</dd>
      <dt>Term 2</dt>
      <dd>Definition of Term 2</dd>
    </dl>
  

আউটপুট:

Term 1

Definition of Term 1

Term 2

Definition of Term 2

আবার একটি বিষয়ের একাধিক সঙ্গাও দেওয়া যায়। যেমন:

• কোড:

    <dl>
      <dt>Mouse</dt>
      <dd>Small mammal</dd>
      <dd>Input device for a computer</dd>
    </dl>
  

• আউটপুট:

Mouse

Small mammal

Input device for a computer

সঙ্গা বড় হলে একে একাধিক অনুচ্ছেদে বিভক্ত করা যায়। এক্ষেত্রে dd ট্যাগের অধীনে p ট্যাগ ব্যবহার করতে হয়। যেমন:

• কোড:

    <dl>
      <dt>Term 2</dt>
      <dd>
        <p>First paragraph of the definition.</p>
        <p>Second paragraph of the definition.</p>
      </dd>
    </dl>
  

• আউটপুট:

Term 2

First paragraph of the definition.

Second paragraph of the definition.

উপতালিকা

তালিকার একটি ভুক্তির অধীনে আরেকটি তালিকা তৈরি করা যায়। যেমন:

• কোড:

  <ul>
    <li>Input device      
      <ul>
        <li>Mouse </li>
        <li>Keyboard</li>
      </ul>
    </li>
    <li>Output device      
      <ul>
        <li>Monitor</li>
        <li>Printer</li>
      </ul>
    </li>
  </ul>
  

• আউটপুট:

• Input device
  • Mouse
  • Keyboard
• Output device
  • Monitor
  • Printer

তবে এক্ষেত্রে খেয়াল রাখবেন যে, যে ভুক্তির অধীনে উপতালিকা তৈরি করেছেন তার li ট্যাগ ক্লোজ করার আগেই উপতালিকার জন্য ul ট্যাগ দিতে হবে। উপতালিকা তৈরি শেষে ul ক্লোজ করার পর li ট্যাগ ক্লোজ করতে হবে।

• ভুল পদ্ধতি:

  <ul>
    <li>Lists</li>
    <ul>
      <li>Numbered Lists</li>
      <li>Unnumbered Lists</li>
    </ul>
  </ul>
  

  এখানে মূল তালিকার li ট্যাগ ক্লোজ করে তারপর উপতালিকার ul ট্যাগ ব্যবহার করা হয়েছে। তাই এখানে উপতালিকা তৈরি হবে না।

উদাহরণ

<html>
  <head>
    <title>Pancakes</title>
  </head>
  <body>
    <h1>A Recipe for Pancakes</h1>
    <p>From <a href="http://en.wikibooks.org/wiki/Cookbook:Pancake">Wikibooks Cookbook</a>.</p>
    <p>These pancakes make a good breakfast for a family.
       They go well with real maple syrup.
       They are healthy too (as long as you don't over do the syrup)
       since whole wheat flour contributes to your fiber intake.
    </p>
    <h2>Ingredients</h2>
    <ul>
      <li>1 cup whole wheat flour</li>
      <li>1 tablespoon common granulated sugar</li>
      <li>2 teaspoons baking powder</li>
      <li>1/4 teaspoon salt</li>
      <li>1 egg</li>
      <li>1 cup milk</li>
      <li>2 tablespoons oil</li>
      <li>additional oil for frying</li>
    </ul>
    <h2>Procedure</h2>
    <ol>
      <li>Oil a frying pan.</li>
      <li>Mix the dry ingredients in one bowl.</li>
      <li>In another bowl, scramble the egg, then add the other wet ingredients.
          This includes the 2 tablespoons of oil.</li>
      <li>Mix the dry and wet ingredients together,
          well enough to eliminate dry spots but no more.</li>
      <li>Heat the frying pan to medium temperature.
          The pan is hot enough when a drop of water dances around
          rather than simply boiling away.</li>
      <li>Pour a pancake, about 4 inches in diameter using about a 1/4 cup of batter.</li>
      <li>The pancake will bubble. When the bubbling settles down and
          the edges are slightly dry, flip the pancake.</li>
      <li>When the pancake looks done, remove it and start another one.</li>
    </ol>
    <h2>Toppings</h2>
    <p>Traditionally, pancakes are topped with butter and maple syrup.
       Other toppings can include strawberries, applesauce, cinnamon, or sugar.
    </p>
 </body>
</html>