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



তথ্যাবলী কে ওয়েব পেজে সুন্দর ভাবে তালিকা বা লিস্ট আকারে প্রদর্শন করার জন্য লিস্ট ট্যাগ ব্যবহার করা হয়।


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


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

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

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

উদাহরণ দেখুন

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


নোট - এখানে ডিফল্ট স্টাইল টাইপ রুপে 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> ট্যাগ এর মাঝে অবস্থান করে।

উদাহরণ দেখুন

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


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


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

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

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

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

উদাহরণ

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


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







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.