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

অর্ডারড লিস্ট (<ol>), আনঅর্ডারড লিস্ট (<ul>)।

HTML-এ <ol> (Ordered List) এবং <ul> (Unordered List) ট্যাগগুলো আইটেমগুলোর একটি তালিকা তৈরি করতে ব্যবহৃত হয়। এগুলো ওয়েব পেজে তথ্যকে আরও সহজবোধ্য এবং সংগঠিতভাবে উপস্থাপন করতে সাহায্য করে।

1. অর্ডারড লিস্ট (<ol>)

বর্ণনা:

<ol> ট্যাগ একটি ক্রমযুক্ত (নাম্বার বা লেটার অনুযায়ী) তালিকা তৈরি করে।

গঠন:

html
 
<ol>
<li>আইটেম ১</li>
<li>আইটেম ২</li>
<li>আইটেম ৩</li>
</ol>

উদাহরণ:

html
 
<ol>
<li>HTML শেখা</li>
<li>CSS শেখা</li>
<li>JavaScript শেখা</li>
</ol>

আউটপুট:

  1. HTML শেখা
  2. CSS শেখা
  3. JavaScript শেখা

অর্ডার স্টাইল পরিবর্তন (Attributes):

<ol> ট্যাগে বিভিন্ন ধরনের স্টাইল নির্ধারণ করা যায়।

Attribute Description Example
type=”1″ সংখ্যা (default) 1, 2, 3…
type=”A” বড় অক্ষর A, B, C…
type=”a” ছোট অক্ষর a, b, c…
type=”I” বড় রোমান সংখ্যা I, II, III…
type=”i” ছোট রোমান সংখ্যা i, ii, iii…

স্টাইল উদাহরণ:

html
 
<ol type="I">
<li>Introduction</li>
<li>Body</li>
<li>Conclusion</li>
</ol>

আউটপুট:
I. Introduction
II. Body
III. Conclusion

2. আনঅর্ডারড লিস্ট (<ul>)

বর্ণনা:

<ul> ট্যাগ একটি অনিয়মিত (বুলেট পয়েন্ট) তালিকা তৈরি করে।

গঠন:

html
 
<ul>
<li>আইটেম ১</li>
<li>আইটেম ২</li>
<li>আইটেম ৩</li>
</ul>

উদাহরণ:

html
 
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>

আউটপুট:

  • Apple
  • Banana
  • Cherry

বুলেট স্টাইল পরিবর্তন (Attributes):

Attribute Description Example
type=”disc” ডিফল্ট ডট ● Item
type=”circle” খালি গোল ○ Item
type=”square” স্কয়ার বুলেট ■ Item

স্টাইল উদাহরণ:

html
 
<ul type="circle">
<li>Physics</li>
<li>Chemistry</li>
<li>Mathematics</li>
</ul>

আউটপুট:
○ Physics
○ Chemistry
○ Mathematics

নেস্টেড তালিকা (Ordered + Unordered):

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

CSS দিয়ে কাস্টমাইজেশন:

html
 
<style>
ul {
list-style-type: square; /* বুলেট স্টাইল পরিবর্তন */
color: blue;
}
ol {
list-style-type: upper-alpha; /* অর্ডার স্টাইল পরিবর্তন */
color: green;
}
</style>

 

  • <ol> ট্যাগ ক্রমযুক্ত তালিকার জন্য ব্যবহৃত হয়।
  • <ul> ট্যাগ অনিয়মিত তালিকার জন্য ব্যবহৃত হয়।
  • তালিকাগুলো ওয়েবসাইটের তথ্যকে আরও সহজ এবং বোধগম্য করে তোলে।
  • CSS এবং HTML-এর বৈশিষ্ট্যগুলো দিয়ে এগুলো কাস্টমাইজ করা যায়।