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>
আউটপুট :
