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প্রোপার্টি ব্যবহার করা হয়
No comments