এইচটিএমএল লিস্ট (HTML List)

এক নজরে এইচটিএমএল লিস্ট সংক্রান্ত ট্যাগসমূহ

ট্যাগ	বর্ণনা
<ul>	আন-অর্ডার লিস্ট তৈরি করার জন্য ব্যবহার করা হয়।
<ol>	অর্ডার লিস্ট তৈরি করার জন্য ব্যবহার করা হয়।
<li>	আন-অর্ডার এবং অর্ডার লিস্টের লিস্ট আইটেম তৈরি করার জন্য ব্যবহার করা হয়।
<dl>	ডেস্ক্রিপশন লিস্ট তৈরি করার জন্য ব্যবহার করা হয়।
<dt>	ডেস্ক্রিপশন লিস্টের মধ্যে যেই আইটেমটি বর্ণনা করা হবে সেটিকে নির্দেশ করে।
<dd>	ডেস্ক্রিপশন লিস্টের কোন একটি আইটেম বর্ণনা করার জন্য ব্যবহার করা হয়।

এইচটিএমএল আন-অর্ডার লিস্ট

আন-অর্ডার লিস্ট তৈরি করার জন্য <ul> ট্যাগ এবং আনঅর্ডার লিস্টের লিস্ট আইটেম তৈরি করার জন্য <li> ট্যাগ ব্যবহার করা হয়।

আন-অর্ডার লিস্টের লিস্ট আইটেমগুলো ডিফল্টভাবে বুলেট চিহ্ন(ছোট কালো বৃত্ত) দ্বারা চিহ্নিত হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল আন-অর্ডার লিস্ট</title>
</head>
<body>
	<h4>একটি আনঅর্ডার লিস্ট</h4>
	<ul>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ul>
</body>
</html>

ফলাফল

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

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

বুলেট

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল আন-অর্ডার লিস্ট</title>
</head>
<body>
	<h4>ডিস্ক বুলেট চিহ্নসহ আনঅর্ডার লিস্ট</h4>
	<ul style="list-style-type:disc">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ul>
</body>
</html>

ফলাফল

সার্কেল

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল আন-অর্ডার লিস্ট</title>
</head>
<body>
	<h4>সার্কেল বুলেট চিহ্নসহ আনঅর্ডার লিস্ট</h4>
	<ul style="list-style-type:circle">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ul>
</body>
</html>

ফলাফল

বর্গক্ষেত্র

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল আন-অর্ডার লিস্ট</title>
</head>
<body>
	<h4>বর্গক্ষেত্রের ন্যায় বুলেট চিহ্নসহ আনঅর্ডার লিস্ট</h4>
	<ul style="list-style-type:square">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ul>
</body>
</html>

ফলাফল

স্টাইলবিহীন

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>কোন প্রকার বুলেট চিহ্ন ব্যতীত আনঅর্ডার লিস্ট</h4>
	<ul style="list-style-type:none">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ul>
</body>
</html>

ফলাফল

এইচটিএমএল অর্ডার লিস্ট

অর্ডার লিস্ট তৈরি করার জন্য <ol> ট্যাগ এবং অর্ডার লিস্টের লিস্ট আইটেমগুলো তৈরি করার জন্য <li> ট্যাগ ব্যবহার করা হয়।

লিস্ট আইটেমগুলো ডিফল্টভাবে সংখ্যা দ্বারা চিহ্নিত হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>এইচটিএমএল অর্ডার লিস্ট</h4>
	<ol>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ol>
</body>
</html>

ফলাফল

অর্ডার লিস্টকে চিহ্নিত করার বিভিন্ন ধরণসমূহ

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

সংখ্যা

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>সংখ্যাযুক্ত অর্ডার লিস্ট</h4>
	<ol type="1">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ol>
</body>
</html>

ফলাফল

বড় হাতের ইংরেজি অক্ষর

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>বড় হাতের ইংরেজি অক্ষরযুক্ত অর্ডার লিস্ট</h4>
	<ol type="A">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ol>
</body>
</html>

ফলাফল

ছোট হাতের ইংরেজি অক্ষর

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>ছোট হাতের ইংরেজি অক্ষরযুক্ত অর্ডার লিস্ট</h4>
	<ol type="a">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ol>
</body>
</html>

ফলাফল

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

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>বড় হাতের রোমান সংখ্যা দিয়ে অর্ডার লিস্ট</h4>
	<ol type="I">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Cold-Drinks</li>
	</ol>
</body>
</html>

ফলাফল

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

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>ছোট হাতের রোমান সংখ্যা দিয়ে অর্ডার লিস্ট</h4>
	<ol type="i">
		<li>Coffee</li>
		<li>Teaa</li>
		<li>old-Drinks</li>
	</ol>
</body>
</html>

ফলাফল

এইচটিএমএল ডেস্ক্রিপশন লিস্ট

ডেস্ক্রিপশন লিস্ট(Description Lists) হলো এমন লিস্ট যার প্রতিটি আইটেমের বর্ণনা দেয়া থাকে।

<dl> ট্যাগের মাধ্যমে ডেস্ক্রিপশন লিস্ট তৈরি করা হয়। <dt> ট্যাগের মাধ্যমে লিস্ট আইটেমকে নির্দিষ্ট করা হয় এবং <dd> ট্যাগের মাধ্যমে ডেস্ক্রিপশন লিস্টের প্রতিটি আইটেমের বর্ণনা দেয়া হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
	<h4>একটি লিস্টের বর্ণনা</h4>
	<dl>
		<dt>Coffe</dt>
			<dd> - black hot drink</dd>
		<dt>Milk</dt>
			<dd> - white cold drink</dd>
	</dl>
</body>
</html>

ফলাফল

নেস্টেড(Nested) এইচটিএমএল লিস্ট

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>

	<h4>একটি নেস্টেড লিস্ট</h4>
	<ul>
		<li>Coffee</li>
		<li>Tea
			<ul>
				<li>Black Tea</li>
				<li>Green Tea</li>
			</ul>
		</li>
		<li>Cold-Drinks</li>
	</ul>

</body>
</html>

ফলাফল

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

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

এইচটিএমএল লিস্টকে সিএসএস এর মাধ্যমে বিভিন্নভাবে স্টাইল করা যায়।

ওয়েবপেজের জন্য মেনু তৈরি করার ক্ষেত্রে আনুভূমিক লিস্টের ব্যবহার একটি জনপ্রিয় পদ্ধতি।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
	<style>
	ul#menu li {
		display:inline;
	}
	</style>
</head>
<body>
	<h4>আনুভূমিক লিস্ট</h4>
	<ul id="menu">
		<li>এইচটিএমএল</li>
		<li>সিএসএস</li>
		<li>জাভাস্ক্রিপ্ট </li>
		<li>পিএইচপি</li>
	</ul>
</body>
</html>

ফলাফল

মেনু তৈরি করার উদাহরনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
	<title>এইচটিএমএল উদাহরণ</title>
	<style>
	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #CC9999;
	}
	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>
	<h4>মেনু তৈরি</h4>
	<ul>
		<li><a class="active" href="#home">হোম</a></li>
		<li><a href="#news">নিউজ</a></li>
		<li><a href="#contact">বিনোদন</a></li>
		<li><a href="#about">খেলা</a></li>
	</ul>
</body>
</html>

ফলাফল

অধ্যায়ের সারাংশ

আন-অর্ডার লিস্ট তৈরি করার জন্য <ul> এলিমেন্ট ব্যবহার করা হয়।
লিস্টের আইটেম গুলোকে স্টাইল করার জন্য সিএসএস list-style-type প্রোপার্টি ব্যবহার করা হয়।
অর্ডার লিস্ট তৈরি করার জন্য <ol> এলিমেন্ট ব্যবহার করা হয়।
লিস্ট আইটেমগুলোকে অন্তর্ভূক্ত করার জন্য <li> এলিমেন্ট ব্যবহার করা হয়।
ডেস্ক্রিপশন লিস্ট তৈরি করার জন্য <dl> এলিমেন্ট ব্যবহার করা হয়।
ডেস্ক্রিপশন লিস্টের ডেটাকে বর্ণনা(describe) করার জন্য এইচটিএমএল <dd> এলিমেন্ট ব্যবহার করা হয়।
একটি লিস্টের মধ্যে অন্য আরেকটি লিস্ট ব্যবহার করাকে নেস্টেড বলা হয়।
একটি লিস্টের মধ্যে অন্যান্য এইচটিএমএল এলিমেন্টও রাখা যায়।
লিস্টকে আনুভূমিকভাবে প্রদর্শন করানোর জন্য সিএসএস float:left অথবা display:inline প্রোপার্টি ব্যবহার করা হয়।

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল ফর্ম

এইচটিএমএল৫

এইচটিএমএল মিডিয়া

এইচটিএমএল এপিআই

এইচটিএমএল রেফারেন্স

এইচটিএমএল লিস্ট (HTML List)

এক নজরে এইচটিএমএল লিস্ট সংক্রান্ত ট্যাগসমূহ

এইচটিএমএল আন-অর্ডার লিস্ট

উদাহরণ

ফলাফল

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

বুলেট

ফলাফল

সার্কেল

ফলাফল

বর্গক্ষেত্র

ফলাফল

স্টাইলবিহীন

ফলাফল

এইচটিএমএল অর্ডার লিস্ট

উদাহরণ

ফলাফল

অর্ডার লিস্টকে চিহ্নিত করার বিভিন্ন ধরণসমূহ

সংখ্যা

ফলাফল

বড় হাতের ইংরেজি অক্ষর

ফলাফল

ছোট হাতের ইংরেজি অক্ষর

ফলাফল

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

ফলাফল

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

ফলাফল

এইচটিএমএল ডেস্ক্রিপশন লিস্ট

উদাহরণ

ফলাফল

নেস্টেড(Nested) এইচটিএমএল লিস্ট

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

অধ্যায়ের সারাংশ

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য