Curriculum
Course: HTML Mastery: From Basics to Brilliance
Login

Curriculum

HTML Mastery: From Basics to Brilliance

মডিউল ১: পরিচিতি এবং বেসিক HTML : 1. HTML পরিচিতি

0/4

মডিউল ১: পরিচিতি এবং বেসিক HTML : 2. HTML ডকুমেন্ট স্ট্রাকচার

0/2

মডিউল ১: পরিচিতি এবং বেসিক HTML : 3. বেসিক ট্যাগস

0/4

মডিউল ১: পরিচিতি এবং বেসিক HTML : 4. টেক্সট ফরম্যাটিং ট্যাগস

0/3

মডিউল ২: HTML লিস্ট এবং লিঙ্ক: 1. লিস্ট তৈরির ট্যাগস

0/3

মডিউল ২: HTML লিস্ট এবং লিঙ্ক: 2. লিঙ্ক তৈরির ট্যাগ

0/3
Text lesson

নেস্টেড লিস্ট এবং লিস্ট আইটেম (<li>)।

HTML-এ নেস্টেড লিস্ট বলতে একটি লিস্টের ভিতরে আরেকটি লিস্ট তৈরি করা বোঝায়। এটি তথ্যকে আরও গঠনমূলক এবং শ্রেণিবদ্ধভাবে উপস্থাপন করতে ব্যবহৃত হয়। নেস্টেড লিস্টে <li> ট্যাগের ভিতরে আবার <ul> বা <ol> ট্যাগ ব্যবহার করা হয়।

1. লিস্ট আইটেম (<li>)

বর্ণনা:

<li> ট্যাগ HTML-এ লিস্টের প্রতিটি আইটেম বা পয়েন্ট নির্দেশ করে। এটি <ul> (Unordered List) বা <ol> (Ordered List) এর ভেতরে ব্যবহৃত হয়।

গঠন:

html
 
<ul>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম</li>
</ul>

2. নেস্টেড লিস্ট

বর্ণনা:

একটি লিস্টের আইটেমের ভিতরে আরেকটি লিস্ট (অর্ডারড বা আনঅর্ডারড) তৈরি করাই হলো নেস্টেড লিস্ট।

গঠন:

html
 
<ul>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম
<ul>
<li>দ্বিতীয় আইটেমের উপ-আইটেম ১</li>
<li>দ্বিতীয় আইটেমের উপ-আইটেম ২</li>
</ul>
</li>
<li>তৃতীয় আইটেম</li>
</ul>

আউটপুট:

  • প্রথম আইটেম
  • দ্বিতীয় আইটেম
    • দ্বিতীয় আইটেমের উপ-আইটেম ১
    • দ্বিতীয় আইটেমের উপ-আইটেম ২
  • তৃতীয় আইটেম

3. অর্ডারড এবং আনঅর্ডারড লিস্ট একত্রে নেস্টেড

html
 
<ol>
<li>Frontend Development
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend Development
<ul>
<li>Node.js</li>
<li>Python</li>
</ul>
</li>
</ol>

আউটপুট:

  1. Frontend Development
    • HTML
    • CSS
    • JavaScript
  2. Backend Development
    • Node.js
    • Python

4. নেস্টেড লিস্টে গভীরতা বৃদ্ধি

উদাহরণ:

html
 
<ul>
<li>Electronics
<ul>
<li>Mobile Phones
<ul>
<li>Smartphones</li>
<li>Feature Phones</li>
</ul>
</li>
<li>Televisions</li>
</ul>
</li>
<li>Clothing
<ul>
<li>Men's Wear</li>
<li>Women's Wear</li>
</ul>
</li>
</ul>

আউটপুট:

  • Electronics
    • Mobile Phones
      • Smartphones
      • Feature Phones
    • Televisions
  • Clothing
    • Men’s Wear
    • Women’s Wear

5. CSS দিয়ে নেস্টেড লিস্টের স্টাইল পরিবর্তন

html
 
<style>
ul {
list-style-type: disc; /* ডিফল্ট বুলেট */
}
ul ul {
list-style-type: circle; /* নেস্টেড লিস্টের জন্য চিহ্ন */
margin-left: 20px;
}
ol {
list-style-type: decimal; /* অর্ডারড লিস্ট */
}
ol ol {
list-style-type: lower-alpha; /* নেস্টেড অর্ডারড লিস্ট */
margin-left: 20px;
}
</style>

6. লিস্ট আইটেমে কাস্টম কন্টেন্ট

html
 
<ul>
<li><strong>Important:</strong> Remember to check your email.</li>
<li><em>Note:</em> Submit the assignment by 5 PM.</li>
</ul>

আউটপুট:

  • Important: Remember to check your email.
  • Note: Submit the assignment by 5 PM.

 

  • <li> ট্যাগ ব্যবহার করে লিস্টের প্রতিটি আইটেম তৈরি করা হয়।
  • নেস্টেড লিস্ট তথ্যকে শ্রেণিবদ্ধভাবে উপস্থাপনের জন্য কার্যকর।
  • CSS ব্যবহার করে লিস্টের স্টাইল ও ভিজ্যুয়াল পরিবর্তন করা যায়।
  • নেস্টেড লিস্ট দিয়ে জটিল তথ্যকে সহজে উপস্থাপন করা সম্ভব।