এইচটিএমএল লিস্ট - HTML List


তথ্যাবলী কে ওয়েব পেজে সুন্দর ভাবে তালিকা বা লিস্ট আকারে প্রদর্শন করার জন্য লিস্ট ট্যাগ ব্যবহার করা হয়। নিচে কিছু ফুলের নাম দেখুন, যেগুলো একটি লিস্ট আকারে প্রদর্শিত হয়েছে।


সর্বাধিক জনপ্রিয় লিস্ট ২ প্রকার। যথা -
১) অর্ডারড লিস্ট বা নাম্বারড লিস্ট,
২) আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট,
এছাড়াও আরও এক প্রকার লিস্ট আছে, তা হল -
৩) ডেফিনেশন লিস্ট বা বর্ণনামূলক লিস্ট।


অর্ডারড লিস্ট বা নাম্বারড লিস্ট

তথ্যাবলীকে ক্রমিক নং বা সিরিয়াল নাম্বার অনুসারে উপস্থাপনের জন্য যে পদ্ধতির লিস্ট ব্যবহার করা হয় তাকে অর্ডারড লিস্ট বা নাম্বারড লিস্ট বলে। এটি একটি ব্লক লেভেল এলিমেনট।

অর্ডারড লিস্ট বা নাম্বারড লিস্ট উপস্থাপন করা হয় <ol>...</ol> ট্যাগ দিয়ে এবং প্রতিটি লিস্ট আইটেম উপস্থাপন করা হয়<li>...</li> ট্যাগ দিয়ে যেগুলো <ol> ও </ol> ট্যাগ এর মাঝে অবস্থান করে।

উদাহরণ


<ol>
  <li> This is a list. </li>
  <li> This is a list. </li>
  <li> This is a list. </li>
</ol>

কোড এডিটর


নোট - এখানে ডিফল্ট স্টাইল টাইপ রুপে 1, 2, 3 ইত্যাদি প্রদর্শিত হয়।


অর্ডার লিস্টের বাবহ্রিত চিহ্ন

<ol> ট্যাগের সাথে সিএসএস type এট্রিবিউট ব্যবহার করে লিস্ট আইটেম গুলো চিহ্নিত করার ধরণসমূহ নির্ধারণ করা যায়।

লিস্ট আইটেম গুলো সংখ্যা দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে "1", নিচে একটি উদাহরণ দেখুন।

উদাহরণ


<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

কোড এডিটর


লিস্ট আইটেম গুলো ছোট হাতের ইংরেজি অক্ষর দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে "A", নিচে একটি উদাহরণ দেখুন।

উদাহরণ


<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

কোড এডিটর


লিস্ট আইটেম গুলো ছোট হাতের ইংরেজি অক্ষর দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে "a", নিচে একটি উদাহরণ দেখুন।

উদাহরণ


<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

কোড এডিটর


লিস্ট আইটেম গুলো বড় হাতের রোমান সংখ্যা দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে "I", নিচে একটি উদাহরণ দেখুন।

বড় হাতের রোমান সংখ্যা


<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

কোড এডিটর


লিস্ট আইটেম গুলো ছোট হাতের রোমান সংখ্যা দিয়ে প্রদর্শন করতে হলে type এট্রিবিউটের মান নির্ধারণ করতে হবে "i", নিচে একটি উদাহরণ দেখুন।

ছোট হাতের রোমান সংখ্যা


<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

কোড এডিটর



আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট

তথ্যাবলীকে বিভিন্ন সিম্বল বা বুলেট ব্যবহার করে উপস্থাপনের জন্য যে পদ্ধতির লিস্ট তৈরি করা হয় তাকে আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট বলে। এটি একটি ব্লক লেভেল এলিমেনট।

আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট উপস্থাপন করা হয় <ul> ... </ul> ট্যাগ দিয়ে এবং প্রতিটি লিস্ট আইটেম উপস্থাপন করা হয় <li> ... </li> ট্যাগ দিয়ে যেগুলো <ul> ও </ul> ট্যাগ এর মাঝে অবস্থান করে।

উদাহরণ


<ol>
 <li> This is a list. </li>
 <li> This is a list. </li>
 <li> This is a list. </li>
 </ol>
 </body>

কোড এডিটর


নোট - এখানে ডিফল্ট স্টাইল টাইপ রুপে কাল রঙের বৃত্ত প্রদর্শিত হয়।


আন-অর্ডার লিস্টে ব্যবহৃত চিহ্ন

সিএসএস list-style-type প্রোপার্টি ব্যবহার করে আন-অর্ডার লিস্টে বিভিন্ন ধরনের চিহ্ন প্রদর্শন করা যায়।

সিএসএস list-style-type প্রোপার্টি ব্যবহার করে আন-অর্ডার লিস্টের বিভিন্ন মান বা value এর জন্য কিরকম চিহ্ন প্রদর্শিত হবে তা নিছে দেখুন -

লিস্ট আইটেম গুলো Disc ছিনহ দিয়ে প্রদর্শন করতে হলে list-style-type এট্রিবিউটের মান নির্ধারণ করতে হবে "disc", নিচে একটি উদাহরণ দেখুন।

উদাহরণ


<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

কোড এডিটর


লিস্ট আইটেম গুলো Circle ছিনহ দিয়ে প্রদর্শন করতে হলে list-style-type এট্রিবিউটের মান নির্ধারণ করতে হবে "circle", নিচে একটি উদাহরণ দেখুন।

উদাহরণ


<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

কোড এডিটর


লিস্ট আইটেম গুলো Square ছিনহ দিয়ে প্রদর্শন করতে হলে list-style-type এট্রিবিউটের মান নির্ধারণ করতে হবে "square", নিচে একটি উদাহরণ দেখুন।

উদাহরণ


<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

কোড এডিটর


লিস্ট আইটেম গুলো যদি কোন ছিনহ ছাড়া প্রদর্শন করতে চান, তবে list-style-type এট্রিবিউটের মান নির্ধারণ করতে হবে "none", নিচে একটি উদাহরণ দেখুন।

উদাহরণ


<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

কোড এডিটর



ডেফিনেশন লিস্ট বা বর্ণনামূলক লিস্ট

ডেফিনেশন বা বর্ণনামূলক লিস্ট হল এমন এক প্রকার লিস্ট যার প্রতিটি লিস্ট আইটেম এর সাথে একটি করে সংক্ষিপ্ত বিবরণ বা ডেফিনেশন থাকে। এটি একটি ব্লক লেভেল এলিমেনট।

ওয়েব পেজে ডেফিনেশন লিস্ট বা বর্ণনামূলক লিস্ট উপস্থাপন করা হয় <dl>...</dl> ট্যাগ দিয়ে। প্রতিটি লিস্ট আইটেম উপস্থাপন করা হয়<dt>...</dt> ট্যাগ দিয়ে যেগুলো <dl> ও </dl> ট্যাগ এর মাঝে অবস্থান করে। প্রতিটি লিস্ট আইটেম এর সংক্ষিপ্ত বিবরণ বা ডেফিনেশন ঐ লিস্ট আইটেম টির পরে <dd> ও </dd> ট্যাগ এর মাধ্যমে লেখা হয়।

উদাহরণ


<dl>
  <dt>Coffee</dt>
  <dd> - black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

কোড এডিটর



নেস্টেড বা Nested লিস্ট

এইচটিএমএল লিস্টের মধ্যে পূনরায় লিস্ট তৈরি করা যায়, মানে কোন একটি লিস্ট আইটেমের জায়গায় আমরা আবার একটি লিস্ট তৈরি করতে পারি। অর্থাৎ কোন লিস্টের ভেতরে আবার লিস্ট তৈরি করতে পারি। নিচে একটি উদাহরণের মাদ্ধমে বিষয়টি দেখুন।

উদাহরণ


<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

কোড এডিটর


নোট - কোন এইচটিএমএল লিস্টের মধ্যে যেকোন এইচটিএমএল এলিমেন্ট, যেমন - কোন নতুন লিস্ট, ছবি, প্যারাগ্রাফ, লিংক ইত্যাদি। রাখা যেতে পারে।


আনুভূমিক বা Horizontal লিস্ট

সিএসএস স্টাইল কোড ব্যবহার করে, লিস্ট এলিমেন্তকে বিভিন্ন স্থানে ব্যবহার করা যায়। ওয়েব পেজের মেনুবার তৈরি তার অন্যতম একটি উদাহরণ। লিস্টকে ব্যবহার করে খুব সহজেই কোন আনুভূমিক বা Horizontal এবং উলম্ব বা Vertical মেনুবার তৈরি করা যায়। নিচে একটি উদাহরণ দেখুন, যেখানে সিএসএস ব্যবহার করে একটি মেনু বার তৈরি করা হয়েছে।

উদাহরণ


<!DOCTYPE html>
  <html>
  <head>
  <style>
ul{list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333333;}
li {float: left;}
li a {display: block;color: white;text-align: center;padding: 16px;text-decoration: none;}
li a:hover {background-color: #111111;} 
</style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>

কোড এডিটর


সিএসএস সম্পর্কে আরও জানতে আমাদের সিএসএস টিউটোরিয়াল দেখুন।