X

X

X

HTML এ তালিকা প্রদর্শণ


HTML List Example

ক্রমহীন লিস্ট

  • Item
  • Item
  • Item
  • Item

ক্রমহীন লিস্টের উদাহরণ:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

নিজে নিজে চেষ্টা করুন »


ক্রমহীন লিস্ট তৈরি করার নিয়ম

ক্রমহীন তালিকা <ul> দিয়ে শুরু হয়। এর প্রতিটি লিস্ট আইটেম  <li> ট্যাগ দিয়ে শুরু হয়।

সাধারণভাবে লিস্ট আইটেমসমূহ বুলেট দ্বারা নির্দেশিত হবে।

Code Example

<h2>An unordered HTML list</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ক্রমহীন লিস্টে বিভিন্ন মার্কার প্রদর্শণ

CSS list-style-type ব্যবহার করে বিভিন্ন মার্কার সেট করা যায়:

মান বর্ণনা
disc বুলেট মার্কার প্রদর্শিত হবে।
circle বৃত্তাকার মার্কার প্রদর্শিত হবে।
square বর্গাকার মার্কার প্রদর্শিত হবে।
none কোনো মার্ক প্রদর্শিত হবে না।

Code Example

<h2>Unordered List with Disc Bullets</h2>

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Code Example

<h2>Unordered List with Circle Bullets</h2>

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Code Example

<h2>Unordered List with Square Bullets</h2>

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Code Example

<h2>Unordered List without Bullets</h2>

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ক্রমিক লিস্ট প্রদর্শন

ক্রমিক লিস্ট <ol> দিয়ে এবং এর প্রতিটি আইটেম <li> ট্যাগ দিয়ে শুরু হয়।

সাধারণভাবে সংখ্যা দ্বারা প্রতিটি আইটেম ক্রমান্বয়ে প্রদর্শিত হবে।

Code Example

<h2>An ordered HTML list</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ক্রমিক লিস্টে বিভিন্ন সংখ্যা পদ্ধতির ব্যবহার

 type attribute <ol> tag এ ব্যবহারের মাধ্যমে, আইটেমের মার্কার সেট করতে হয়:

ধরণ বর্ণনা
type=”1″ ক্রমিক চিহ্ন ডেসিমেল নাম্বার দ্বারা নির্দেশিত হবে।
type=”A” ক্রমিক চিহ্ন বড় হাতের অক্ষর দ্বারা নির্দেশিত হবে।
type=”a” ক্রমিক চিহ্ন ছোট হাতের অক্ষর দ্বারা নির্দেশিত হবে।
type=”I” ক্রমিক চিহ্ন বড় হাতের রোমান অক্ষর দ্বারা প্রদর্শিত হবে।
type=”i” ক্রমিক চিহ্ন ছোট হাতের রোমান অক্ষর দ্বারা প্রদর্শিত হবে।

Numbers :

<h2>Ordered List with Numbers</h2>

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Uppercase Letters:

<h2>Ordered List with Letters</h2>

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Lowercase Letters:

<h2>Ordered List with Lowercase Letters</h2>

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Uppercase Roman Numbers:

<h2>Ordered List with Roman Numbers</h2>

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Lowercase Roman Numbers:

<h2>Ordered List with Lowercase Roman Numbers</h2>

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML বর্ণনামূলক তালিকা

HTML দ্বারা বর্ণনামূলক তালিকাও প্রদর্শণ করা যায়। বর্ণনামূলক তালিকা হচ্ছে প্রতিটি আইটেমে একটি করে শিরোনাম এবং তার একটি বর্ণনামূলক অনুচ্ছেদ থাকে।

<dl> দ্বারা বর্ণনামূলক তালিকা তৈরি করা হয়,  <dt> ট্যাগ দ্বারা টার্মের নাম, এবং <dd> ট্যাগ বর্ণনা হিসেবে কাজ করে।

Code Example

<h2>A Description List</h2>

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


লিস্টের ভেতরে লিস্ট

লিস্টের ভেতরেও লিস্ট তৈরি করা যায়। নিচের উদারণ লক্ষ্য করুন।

Code Example

<h2>A Nested List</h2>

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: লিস্ট আইটেমে অন্য যেকোনো ইলামেন্ট রাখা যায়। যেমন, ছবি, ভিডিও , টেবিল, ডিভ ইত্যাদি।


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

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

Code Example

<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>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


চ্যাপ্টার সারাংশ

  • HTML <ul> ব্যবহার করে ক্রমহীন লিস্ট তৈরি করণ।
  • CSS list-style-type প্রোপার্টি ব্যবহার করে বিভিন্ন লিস্টের মার্কার তৈরি করণ।
  • HTML <ol>ব্যবহার করে ক্রমিক লিস্ট তৈরি করণ।
  • HTML type attribute ব্যবহার করে ক্রমিক মার্কার তৈরি করণ।
  • HTML <li> element এর মাধ্যমে লিস্ট আইটেম তৈরি করণ।
  • HTML <dl> element এর মাধ্যমে বর্ণনামূলক লিস্ট তৈরি করণ।
  • HTML <dt> element এর মাধ্যমে বর্ণনার টার্ম তৈরি করণ।
  • HTML <dd> element to describe the term in a description list


HTML লিস্ট তৈরিতে ব্যবহৃত ট্যাগসমূহ

ট্যাগ বর্ণনা
<ul> ক্রমহীন লিস্ট তৈরিতে ব্যবহৃত হয়।
<ol> ক্রমিক লিস্ট তৈরিতে ব্যবহৃত হয়।
<li> লিস্ট আইটেম তৈরিতে ব্যবহৃত হয়।
<dl> বর্ণনামূলক লিস্ট তৈরিতে ব্যবহৃত হয়।
<dt> বর্ণনামূলক লিস্টে টার্ম তৈরিতে ব্যবহৃত হয়।
<dd> বর্ণনামূলক লিস্টে টার্মকে বর্ণনা করার জন্য ব্যবহৃত হয়।