HTML List Tutorial in Bangla

এইচটিএমএল লিস্ট টিউটোরিয়াল
(HTML List Tutorial in Bangla)


তিন প্রকারের এইচটিএমএল লিস্ট বিদ্যমান। <ol> tag দিয়ে শুরু করে ধারাবাহিক লিস্ট(ordered list), <ul> ট্যাগ দিয়ে শুরু করে ধারাবাহিকতা হীন লিস্ট(unordered list), <dl> ট্যাগ দিয়ে শুরু করে সংজ্ঞামূলক লিস্ট(definition list)।

<ul> - unordered list; বুলেট
<ol> - ordered list; নম্বর
<dl> - definition list; অভিধান 


এইচটিএমএল ক্রমিক লিস্ট (HTML ordered lists)  

<ol> ট্যাগ দিয়ে ক্রমিক লিস্ট(ordered list) শুরু করা হয়। <li> ট্যাগ দ্বারা দ্রব্যের তালিকা (list item) বোঝায়।তালিকা তৈরীর জন্য <li> ট্যাগ কে আপনার opening (<ol>) এবং closing (</ol>) tag এর মধ্যে রাখতে হয়। ক্রমিক (ordered) অর্থ হচ্ছে নম্বর যেমন ১, ২, ৩ ইত্যাদি।

<h4 align="center">Goals</h4>
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>
</ol>

প্রদর্শন:

Goals

1. Find a Job
2. Get Money
3. Move Out

Start attributes দিয়ে নিজের ইচ্ছানুযায়ী নম্বর হতে লিস্ট শুরু করা যায়।

 <h4 align="center">Goals</h4>
<ol start="4" >
<li>Buy Food</li>
<li>Enroll in College</li>
<li>Get a Degree</li>
</ol>

প্রদর্শন:

Goals

4. Buy Food
5. Enroll in College
6. Get a Degree

এইচটিএমএল ক্রমিক লিস্ট (HTML ordered lists continued)

আরও চার প্রকারের ধারাবাহিক লিস্ট(ordered list) রয়েছে। এগুলো সাধারন ১,২,৩ নম্বরের পরিবর্তে রোমান নম্বর বা বর্ণ হতে পারে তা বড় হাতের বা ছোট হাতের। type attribute ব্যবহার করে নম্বর পরিবর্তন করা হয়।

<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Ordered List Types:
Lower-Case Letters    Upper-Case Letters    Lower-Case Numerals    Upper-Case Numerals 
 a.Find a Job     A.Find a Job     i.Find a Job          I.Find a Job
 b.Get Money   B.Get Money    ii.Get Money       III.Get Money



এইচটিএমএল বিনাক্রম লিস্ট (HTML unordered lists)

<ul> ট্যাগ সাহায্যে বুলেট লিস্ট তৈরী করা হয়। বুলেট লিস্ট আবার তিন প্রকার যেমন ১. squares ২.discs ৩.circles । default হিসাবে সাধারনত full discs ব্যাবহার করা হয়। 

<h4 align="center">Shopping List</h4>
<ul>
<li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>


প্রদর্শন:

Shopping List

• Milk
• Toilet Paper
• Cereal
• Bread

আমরা type attributes ব্যবহার করে unordered list এর অন্যান্য বুলেট ব্যবহার করতে পারি।

<ul type="square">

<ul> type="dics">

<ul> type="circle">type="square" type="disc" type="circle"


এইচটিএমএল ডেফিনেশন লিস্ট (HTML definition lists)

Definition list এর ব্যবহার সাধারনত অভিধানে দেখতে পাই। <dl> tag ব্যাবহার করে Definition list তৈরী করা হয়। যাকে Define অর্থ্যাৎ সংজ্ঞায়িত করতে চাই তাকে bold আকারে দেখানো উচিত। Definition list tag এর মধ্যে আরও দুটি tag অর্ন্তভুক্ত সেগুলো হলো ১. <dt> ২. <dd> ।

<dl> tag: লিস্ট এর শুরু জন্য এই ট্যাগ ব্যবহার করা হয় ।

<dt> tag: যাকে সংজ্ঞায়িত(Define) করবো এই ট্যাগ ব্যবহার করে তার নাম লেখা হয়।

<dd> tag: <dt> tag এ যে নাম লেখা হয়েছে তার সম্পর্কে এখানে আলোচনা হয় ।

<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>

প্রদর্শন:

Fromage

French word for cheese.

Voiture

French word for car.

HTML Line Break Tutorial in Bangla

এইচটিএমএল লাইন ব্রেক টিউটোরিয়াল
(HTML Line Break Tutorial in Bangla)


আমরা আগে দেখেছি লাইন ব্রেক ট্যাগটি অন্যান্য হতে একটু ভিন্ন। লাইন ব্রেক ট্যাগটি একটা লাইন শেষ করে আপনাকে অন্য লাইন হতে লেখা শুরু করতে সাহায্য করবে। এইচটিএমএল এ ট্যাগ দ্বারা লাইন ব্রেক চিহ্নিত করা হয়।মাইক্রোসফট ওয়ার্ডে যেমন Enter দিলে নিচের লাইনে চলে যায়,এটার কাজ ঠিক তেমনই।

<p>
Will Mateson<br />
Box 61<br />
Cleveland, Ohio<br />
</p>

প্রদর্শন:লাইন ব্রেক এর সাহায্যে চিঠির address তৈরী করতে পারি। 
Will Mateson

Box 61

Cleveland, Ohio


আবার চিঠির সমাপ্ত ঘোষনা করতে পারি।

<p>Sincerely,<br />
<br />
<br />
Kevin Sanders<br />
Vice President</p>

 প্রদর্শন:

Sincerely,


Kevin Sanders
Vice President

আরও একটা বিষয় মনে রাখা প্রয়োজন যে লাইন ব্রেক ট্যাগ এর কোন closing tag এর প্রয়োজন নেই। 


HTML horizontal rule:
Horizontal rule কে

ট্যাগ দারা প্রকাশ করা হয়।

ট্যাগটি ব্যবহার করে screen এর উপর সমান্তরাল লাইন প্রদর্শন করে। line break tag এর মত Horizontal rule tag এর কোন closing tag নেই। 
<hr>
Use
<hr><hr>
Them
<hr>
Sparingly
<hr>


প্রদর্শন: 

---

Use

---

---

Them

---

Sparingly

---

Horizontal rule কোন গ্রন্থপঞ্জি বা কোন টেবিলের বিষয় সমুহ প্রকাশ করার ক্ষেত্রে ব্যবহার করা হয়।

<hr>
1. "The Hobbit", JRR Tolkein.
2. "The Fellowship of the Ring" JRR Tolkein. 

 প্রদর্শন:

---

1. "The Hobbit", JRR Tolkein.

2. "The Fellowship of the Ring" JRR Tolkein.

HTML Heading Tutorial in Bangla

এইচটিএমএল হেডিং টিউটোরিয়াল 
(HTML Heading Tutorial in Bangla)


এইচটিএমএল এ হেডিং বা শিরোনাম সাধারনত টাইটেল বা সাবটাইটেল হিসাবে দেখা যায়। হেডিং ট্যাগ এর মধ্যে রাখা টেক্স bold হিসাবে প্রদর্শিত হয় এবং আকার যা হেডিং এর নম্বরের উপর নির্ভর করে। হেডিং নম্বর গুলো ১ হতে ৬ এর মধ্যে সীমাবদ্ধ। এখানে ১ সবচেয়ে বড় এবং ৬ সবচেয়ে ছোট হেডিং

<body>
<h1>Headings</h1>
<h2>are</h2>
<h3>great</h3>
<h4>for</h4>
<h5>titles</h5>
<h6>and subtitles</h6>
</body>

 

Headings

are

great

for

titles

and subtitles

লক্ষ করার বিষয় এইযে প্রতিটি হেডিং এর নিজস্ব লাইন ব্রেক option আছে । এটা হেডিং এর built in attribute । হেডিং লেখার সময় অটোমেটিক লাইন ব্রেক হয়ে যায়।


হেডিং এবং প্যারাগ্রাফ এর একত্রে ব্যবহার: 
আমরা হেডিং এবং paragraph একসাথে ব্যবহার করতে পারি। নিচে উদাহরন দেয়া হল।

<h1 align="center">Essay Example</h1>
<p>Avoid losing floppy disks with important school/work projects...</p>
<p>For instance, let's say you had a
HUGE school or work project to complete. Off ...</p>

প্রদর্শন: 

Essay Example

Avoid losing floppy disks with important school/work projects...
For instance, let's say you had a
HUGE school or work project to complete. Off ...