HTML লিস্ট, ক্রমিকবিহীন লিস্ট, ক্রমিকযুক্ত লিস্ট, বর্ণনাযুক্ত লিস্ট, নেস্টেড লিস্ট

HTML লিস্ট, ক্রমিকবিহীন লিস্ট, ক্রমিকযুক্ত লিস্ট, বর্ণনাযুক্ত লিস্ট, নেস্টেড লিস্ট

HTML লিস্ট (HTML List) :

টেক্সটের মধ্যে নম্বর বা বুলেট ব্যবহার করাকে লিস্ট বলে। ওয়েব পেইজকে সুন্দরভাবে সাজানো ও তথ্যকে উপস্থাপন করার জন্য লিস্ট ব্যবহার করা হয়।

ব্যবহার : HTML এ আমরা ৪ ধরনের লিস্টের ব্যবহার দেখতে পাই। যেমন-

১. ক্রমিকবিহীন লিস্ট (Unordered List),

২. ক্রমিকযুক্ত লিস্ট (Ordered List),

৩. বর্ণনামূলক লিস্ট (Description List) ও

৪. নেস্টেড লিস্ট (Nested List)

১. ক্রমিকবিহীন লিস্ট (Unordered List) : কোনো তথ্যের তালিকা কতকগুলো বুলেটের মাধ্যমে চিহ্নিত করাকে ক্রমিকবিহীন লিস্ট বলে। লিস্টের প্রতিটি তালিকাকে একটি বুলেট দিয়ে প্রকাশের জন্য এ ধরনের লিস্ট ব্যবহার করা হয়।

Unordered List চার প্রকারের হয়ে থাকে। HTML কোডে দেখানো হলো :

Disc List এর HTML কোড :

<ul style = ” list-style-type: disc”>

<li> Book </li>

<li> Pen </li>

<li> Pencil </li>

</ul>

আউটপুট :

Circle List এর HTML কোড :

<ul style = “list-style-type: circle”>
<li> Book </li>
<li> Pen </li>
<li> Pencil </li>
</ul>

আউটপুট :

  Square List এর HTML কোড :

<ul style = “list-style-type: square”>
<li> Book </li>
<li> Pen </li>
<li> Pencil </li>
</ul>

আউটপুট :

None List এর HTML কোড :

<ul style = “list-style-type: none”>
<li> Book </li>
<li> Pen </li>
<li> Pencil </li>
</ul>

আউটপুট :

২. ক্রমিকযুক্ত লিস্ট (Ordered List) : কোনো তথ্যের তালিকা কতকগুলো সংখ্যার মাধ্যমে চিহ্নিত করাকে ক্রমিকযুক্ত লিস্ট বলে। লিস্টের প্রতিটি তালিকাকে একটি নম্বর দিয়ে প্রকাশের জন্য এ ধরনের লিস্ট ব্যবহার করা হয়। Ordered List বিভিন্ন প্রকারের হয়ে থাকে। HTML কোডে দেখানো হলো :

Numbers List এর HTML কোড : 

<ol type = “1”>
<li> Book </li>
<li> Pen </li>
<li> Pencil </li>
</ol>

আউটপুট :

 Upper Case List এর HTML কোড :

<ol type = “A”>
<li> Book </li>
<li> Pen </li>
<li> Pencil </li>
</ol>

আউটপুট :

Lower Case List এর HTML কোড :

<ol type = “a”>
<li> Book </li>
<li> Pen </li>
<li> Pencil </li>
</ol>

আউটপুট :

 Roman Upper Case List এর HTML কোড :

<ol type = “I”>
<li> Book </li>
<li> Pen </li>
<li> Pencil </li>
</ol>

আউটপুট :

Roman Lower Case এর HTML কোড :

<ol type = “i”>
<li> Book </li>
<li> Pen </li>
<li> Pencil </li>
</ol>

আউটপুট :

৩. বর্ণনাযুক্ত লিস্ট (Description List) : যে তথ্যে কোনো বুলেট বা নম্বর প্রদর্শিত হয় না তাকে বর্ণনাযুক্ত লিস্ট বলে। এ তালিকায় <dl>, <dt> ও <dd> ট্যাগ ব্যবহার করা হয়।

এখানে, <dl> বর্ণনামূলক তালিকা, <dt> নামের তালিকা এবং <dd> ডেটা বর্ণনা করে।

Description List এর HTML কোড :

<dl>
<dt> Book </dt>
<dd>  NCTB Approved </dd>
<dt> Pen </dt>
<dd> Gel and Marker </dd>
<dt> Pencil </dt>
<dd>  2B & 3B </dd>
</dl>

আউটপুট :

৪. নেস্টেড লিস্ট (Nested List) : কখনো কখনো একটি তালিকার মধ্যে আরেকটি তালিকা ব্যবহার করা হলে তাকে নেস্টেড লিস্ট বলে।

Nested List এর HTML কোড :

<ul> Style = “list – style – type : disc”
<li> Book </li>
<li>Penk
<ul> Style = “list type : Cricle”
<li> Gel Pen </li>
<li> Marker  </li>
</ul>
<ul>
<li> Pencil </li>
</ul>

আউটপুট :