এইচটিএমএল লিস্ট কি? – HTML List

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

  • সূর্যমুখী,
  • দোলনচাঁপা,
  • হাসনাহেনা,
  • কাঠগোলাপ।

সর্বাধিক জনপ্রিয় লিস্ট ২ প্রকার। যথা –

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

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

এছাড়াও আরও এক প্রকার লিস্ট আছে, তা হল –

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

এইচটিএমএল লিস্ট – 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>

 

এইচটিএমএল লিস্ট কি? – What is HTML List : আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট কাকে বলে?

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

আনঅর্ডারড লিস্ট বা বুলেটেড লিস্ট উপস্থাপন করা হয় <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>

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

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

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

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

circle – এই মানের জন্য লিস্টের আইটেম গুলো চক্র বা circle আকারে প্রদর্শিত হয়।

disc – এই মানের জন্য লিস্টের আইটেম গুলো বুলেট অর্থাৎ বৃত্ত আকারে প্রদর্শিত হয়। এই টা সিএসএস list-style-type প্রোপার্টির default মান।

square – এই মানের জন্য লিস্টের আইটেম গুলো বর্গাকার হয়ে প্রদর্শিত হয়।

none – এই মানের জন্য কোন ছিনহ প্রদর্শিত হয় না।

লিস্ট আইটেম গুলো 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>

ডেফিনেশন লিস্ট বা বর্ণনামূলক লিস্ট – What is HTML List

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

ওয়েব পেজে ডেফিনেশন লিস্ট বা বর্ণনামূলক লিস্ট উপস্থাপন করা হয় <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>

 

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

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

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

এইচ টি এম এল লিস্ট – H T M L L I S T

Pin It on Pinterest

Share This
My title page contents