HTML লিস্টের এডভান্স ব্যবহার: শিখুন Nested Lists In HTML (পর্ব ৫) HTML টিউটোরিয়াল
🔹 HTML লিস্টের এডভান্স ব্যবহার (নেস্টেড লিস্ট, কাস্টম স্টাইল)
এখানে কোড এবং ব্যাখ্যা দেওয়া হলো, যাতে তুমি ধাপে ধাপে বুঝতে পারো! 🎬😃
📌 HTML লিস্টের এডভান্স ব্যবহার কী?
📌 HTML লিস্টের আরও উন্নত ফিচার আছে, যেমন:
✅ নেস্টেড লিস্ট (একটি লিস্টের ভেতরে আরেকটি লিস্ট)
✅ কাস্টম স্টাইল (CSS দিয়ে লিস্টের ডিজাইন পরিবর্তন করা)
✅ HTML লিস্টের এডভান্স কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced HTML Lists</title>
<style>
/* Custom Styling for Unordered List */
.custom-ul {
list-style-type: square;
color: blue;
}
/* Custom Styling for Ordered List */
.custom-ol {
list-style-type: upper-roman;
color: green;
}
/* Nested List Styling */
.nested-ul {
list-style-type: circle;
margin-left: 20px;
color: red;
}
</style>
</head>
<body>
<h1>Advanced HTML Lists</h1>
<!-- Nested Unordered List -->
<h2>Nested Unordered List</h2>
<ul class="custom-ul">
<li>Fruits
<ul class="nested-ul">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables
<ul class="nested-ul">
<li>Carrot</li>
<li>Broccoli</li>
</ul>
</li>
</ul>
<!-- Nested Ordered List -->
<h2>Nested Ordered List</h2>
<ol class="custom-ol">
<li>Morning Routine
<ol class="nested-ul">
<li>Wake up</li>
<li>Brush Teeth</li>
<li>Exercise</li>
</ol>
</li>
<li>Work Routine
<ol class="nested-ul">
<li>Check Emails</li>
<li>Attend Meetings</li>
<li>Write Code</li>
</ol>
</li>
</ol>
</body>
</html>
🔹 ১. নেস্টেড লিস্ট (একটি লিস্টের ভেতরে আরেকটি লিস্ট)
👉 "আমরা HTML-এ নেস্টেড লিস্ট ব্যবহার করতে পারি, যেখানে একটি লিস্টের ভেতরে আরেকটি লিস্ট রাখা যায়। এটি সাধারণত ক্যাটাগরির মধ্যে সাব-ক্যাটাগরি দেখানোর জন্য ব্যবহৃত হয়।"
📌 কোড রেফারেন্স:
✅ <ul> এর মধ্যে <ul> রাখা হয়েছে → "এটি নেস্টেড আনঅর্ডার্ড লিস্ট।"
✅ <ol> এর মধ্যে <ol> রাখা হয়েছে → "এটি নেস্টেড অর্ডার্ড লিস্ট।"
💡 অতিরিক্ত তথ্য:
👉 "আমরা চাইলে <ul> ও <ol> একসাথে নেস্টেড করতে পারি।"
🔹 ২. কাস্টম লিস্ট স্টাইল (CSS ব্যবহার করে লিস্ট স্টাইল পরিবর্তন করা)
👉 "আমরা CSS ব্যবহার করে লিস্টের ডিফল্ট মার্কার পরিবর্তন করতে পারি।"
📌 কোড রেফারেন্স:
✅ .custom-ul { list-style-type: square; color: blue; } → "এই CSS কোড লিস্টের মার্কার স্কয়ার (■) করে এবং টেক্সটের কালার ব্লু করে।"
✅ .custom-ol { list-style-type: upper-roman; color: green; } → "এই CSS কোড লিস্টের মার্কার রোমান সংখ্যা (I, II, III) করে এবং টেক্সটের কালার গ্রিন করে।"
💡 অতিরিক্ত তথ্য:
👉 "আমরা চাইলে আরও কাস্টম ডিজাইন করতে পারি, যেমন লিস্ট আইটেমের স্পেসিং, ব্যাকগ্রাউন্ড কালার, ও হোভার ইফেক্ট যোগ করা যায়।"
