এইচটিএমএল এর <ul> ট্যাগটি আনঅর্ডার্ড বা বুলেটেড লিস্ট ডিফাইন করে ।
আনঅর্ডার্ড এইচটিএমএল লিস্ট
আনঅর্ডার্ড লিস্ট শুরু হয় <ul> ট্যাগ দিয়ে এবং এর প্রতিটি আইটিম শুরু হয় <li> ট্যাগ দিয়ে ।
লিস্ট আইটেম গুলো ডিফল্ট ভাবে বুলেটেড মার্কড হয় আনঅর্ডার্ড লিস্ট এর ক্ষেত্রে ।
উদাহরণ
<ul> <li>Computer</li> <li>Phone</li> <li>iPad</li> </ul>
একটি লিস্ট আইটেম অর্থাৎ <li> এর ভেতরে আপনি HTML এর যেকোন এলিমেন্ট যেমন ছবি, আর একটি অর্ডার্ড বা আন অর্ডার্ড লিস্ট কিংবা টেবিল নিতে পারেন ।
আনঅর্ডার্ড লিস্ট এর মার্ক বা চিহ্ন পরিবর্তন
list-style-type css property ব্যবহার করে Unorder List এর মার্ক বা বুলেট গুলো পরিবর্তন করা যায় । এটি নিচের যে কোন একটি ভেলু নেয় ।
| Value | Description |
| dist | এটি ডিফল্ট যে মার্কটি আসে সেটি । |
| circle | মার্কটি সার্কেল বা বৃত্ত করে দেয় । |
| square | মার্ক টি স্কয়ার বা চারকোনা করে দেয় । |
| none | বুলেট মার্কটি অপসারণ করে বা উঠিয়ে দেয় । |
list style type disc ব্যবহার করে লিস্ট আইটেম গুলোর বুলেট গুলো ডিস্ক বা ভরাট বৃত্তের মতো করা যায় ।
লিস্ট স্টাইল Disc এর উদাহরণ
<ul style="list-style-type:disc;"> <li>Computer</li> <li>Phone</li> <li>iPad</li> </ul>
list style type circle ব্যবহার করে লিস্ট আইটেম গুলোর বুলেট গুলোকে সার্কেল বা বৃত্তের মতো করা যায় ।
লিস্ট স্টাইল Circle এর উদাহরণ
<ul style="list-style-type:circle;"> <li>Computer</li> <li>Phone</li> <li>iPad</li> </ul>
Square ব্যবহার করে লিস্ট আইটেম গুলোর বুলেট গুলোকে স্কয়ার বা বর্গ এর মতো করা যায় ।
লিস্ট স্টাইল Square এর উদাহরণ
<ul style="list-style-type:square;"> <li>Computer</li> <li>Phone</li> <li>iPad</li> </ul>
none ব্যবহার করে লিস্ট আইটেম গুলোর বুলেট উঠিয়ে ফেলা যায় ।
লিস্ট স্টাইল none এর উদাহরণ
<ul style="list-style-type:none;"> <li>Computer</li> <li>Phone</li> <li>iPad</li> </ul>
Nested HTML Lists
একটি লিস্ট বা তালিকার ভেতরে আর একটি লিস্ট রাখলে সেটাকে নেস্টেড লিস্ট বলে ।
উদাহরণ
<ul>
<li>Computer
<ul>
<li>Laptop</li>
<li>Desktop</li>
</ul>
</li>
<li>Phone</li>
<li>iPad</li>
</ul>
Horizontal List
আমরা এ পর্যন্ত যে আন অর্ডার্ড লিস্ট গুলো নিয়ে কাজ করলাম সেগুলো সবগুলোই Vertical List বা উল্লম্ব তালিকা । কিন্তু আনুভুমিক তালিকা বা Horizontal list নিতে গেলে CSS ব্যবহার করা লাগবে । চলুন দেখি কেমন করে ।
উদাহরন
<!DOCTYPE html>
<html>
<head>
<title> Horizontal List </title>
<style>
ul {
margin:0;
padding:0;
background: DarkCyan;
}
ul li {
display:inline-block;
}
li a {
text-decoration:none;
display:inline-block;
color:white;
line-height:40px;
padding:0 15px;
}
li a:hover {
background:black;
text-decoration:none;
}
</style>
</head>
<body>
<h1> Horizontal List Style like menu</h1>
<p>In this exaple, we have crated a navigation example using unorderd list and style them as well.</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</body>
</html>
