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 ...

HTML Paragraph Tutorial in Bangla

এইচটিএমএল প্যারাগ্রাফ টিউটোরিয়াল 
(HTML Paragraph Tutorial in Bangla)

কোন লেখা কাজকে প্রকাশ করার ক্ষেত্রে প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়। এটি খুবই সাধারন এবং মৌলিক।

<p> ট্যাগ দারা অনুচ্ছেদ (প্যারাগ্রাফ) নিদের্শ করা হয়। এই ট্যাগ ব্যবহার করার ফলে প্যারাগ্রাফ টেক্সের উপরে নিচে অটোমেটিক ফাকা লাইন সৃষ্টি হয়।

<p>Avoid losing floppy disks with important school...</p>
<p>For instance, let's say you had a HUGE school...</p>


প্রদর্শন:
Avoid losing floppy disks with important school/work projects on them. Use the web
to keep your content so you can access it from anywhere in the world. It's also a quick
way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far)it is easy.

For instance, let's say you had a HUGE school or work project to complete. Off hand,
the easiest way to transfer the documents from your house could be a 3.5" floppy disk.
However, there is an alternative. Place your documents, photos, essays, or videos onto
your web server and access them from anywhere in the world. 

এইচটিএমএল প্যারাগ্রাফ-জাস্টিফিকেশন (HTML paragraph –justification)
ওয়ার্ড ডকুমেন্টে এ আমরা যেভাবে কোন লেখাকে justify করে সবদিকে সমান করতাম তেমনি ভাবে এইচটিএমএল এ justify ব্যবহার করে একই কাজ করতে পারি।

<p align="justify">For instance, let's say you had a HUGE school or work...</p>

প্রদর্শন:
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world. 

 
এইচটিএমএল প্যারাগ্রাফ-মাঝামাঝি (HTML paragraph –centering)
ওয়ার্ড ডকুমেন্টে এর মত প্যারাগ্রাফ এর প্রতেকটি লাইন display window এর মধ্যে অবস্থান করবে।
 
<p align="center">For instance, let's say you had a HUGE school or work...</p>

 প্রদর্শন:

For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world. 

এইচটিএমএল প্যারাগ্রাফ-এলাইন ডানে (HTML paragraph –align right)

ওয়ার্ড ডকুমেন্টে এর মত প্যারাগ্রাফ এর প্রতেকটি লাইন display window এর ডানপাশে অবস্থান করবে। 

<p align="right">For instance, let's say you had a HUGE school or work...</p>

  

প্রদর্শন:

For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world. 

 

HTML Attribute tutorial in Bangla

এইচটিএমএল এট্রিবিউট টিউটোরিয়াল 
(HTML Attribute tutorial in Bangla)

ট্যাগ কে সম্প্রসারন করার জন্য এট্রিবিউট ব্যবহার করা হয়। ধরুন যদি আমরা একটি টেবিল তৈরী করি তবে attributes ব্যাবহার করে টেবিল এর প্রস্থ, উচ্চতা ঠিক করতে পারি। আর attributes value দিয়ে টেবিল এর প্রস্থ ও উচ্চতার মান দিতে পারি।

<tag attributes ="value" attributes ="value">


<table width="150" height="100">

Class বা id attribute এর ব্যবহার প্রায় একই তবে কিছুটা ভিন্নতা আছে। Class বা id attribute সরাসরি ইলিমেন্ট ফরমেটে কোন ভুমিকা নেই তবে পর্দার অন্তরালে এদের ভুমিকা আছে বিশেষ করে জাভাস্ক্রিপ্ট ,সিএসএস (এগুলো সম্পর্কে পরবতি টিউটোরিয়াল এ আলোচনা করা হয়েছে।

<p>Paragraph type 1 Italics</p>
<p>Paragraph type 2 Bold</p>

প্রদর্শন
Paragraph type 1 Italics 
Paragraph type 2 Bold 


এইচটিএমএল নেম এট্রিবিউট (HTML Name Attribute)
Name attribute টি Class বা id attribute হতে ভিন্ন। Name attribute টি প্রায়ই র্ফম বা অন্যান্য ইনপুট ইলিমেন্টের সাথে দেখা যায়। 

<input type="text" name="TextField" />

প্রদর্শন: 



এই attribute টি TextField প্রদর্শনের বিষয়ে ভুমিকা নেই তবে পর্দার অন্তরালে এর অনেক বেশি অবদান(javascript , css)


এইচটিএমএল টাইটেল এট্রিবিউট (HTML- Title attributes)

এই attribute টি কোন এইচটিএমএল এলিমেন্ট এর শিরোনাম এবং ছোট popup টেক্স যুক্ত করে এমন ভাবে যুক্ত করে যখন ওয়েব পেজে ঐ শিরোনামের উপর মাউস রাখা হয় তখন ছোট popup টেক্সটি প্রদর্শন করে।

<h2 title="Hello There!">Titled Heading Tag</h2>

প্রদর্শনTitled Heading Tag 


এইচটিএমএল এলাইন এট্রিবিউট (HTML- align attributes)
যদি আপনি এলিমেন্টের সমান্তরাল অবস্থান পরিবর্তন করতে চান তবে তা align attribute দিয়ে করতে পারেন। align বিভিন্ন ভবে করা যায় যেমন left, right & center । ডিফল্ট হিসাবে left align টি নির্বাচিত থাকে। 


<h2 align="left">Left aligned heading</h2>
<h2 align="center">Centered Heading</h2>
<h2 align="right">Right aligned heading</h2> 
প্রদর্শন

Left aligned heading

Centered Heading

Right aligned heading

Generic attributes:
Attribute দিয়ে ওয়েবপেজ কে সম্পুর্নভাবে কাস্টমাইজ করা যায়। নিচে টেবিলে কিছু এইট্রবিউট দেয়া হল যা অনেক HTML Tag এর সাথে সহজে ব্যবহার করা যায়।

HTML Tag Tutorial in Bangla

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

যখন আপনি এইচটিএমএল ডকুমেন্ট উপর হতে নিচ , ডান হতে বামে সব সময় আপনি ট্যাগ দেখতে পাবেন। এটি এমন ভাবে প্রদর্শিত হবে যেন paragraph দেখতে paragraph এর মতো, টেবিল দেখতে টেবিল এর মতো।
ট্যাগ এর প্রধান তিনটি অংশ আছে
ক. শুরু করার ট্যাগ(opening tag)

খ.ধারনকৃত অংশ(contents)

গ.শেষ করার ট্যাগ (closing tag)।

এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন। 
 <p>A Paragraph Tag</p>

ট্যাগ এর বর্ণ ছোট হাতের অক্ষর হওয়া উচিত। নিচে আরো কতক গুলো ট্যাগ দেখানো হলো।
<body> Body Tag (acts as a content shell)
<p>Paragraph Tag</p>
<h2>Heading Tag</h2>
<b>Bold Tag</b>
<i>Italic Tag</i>
</body> 

Closing ট্যাগ ছাড়া ট্যাগ:

কিছু কিছু ট্যাগ আছে যাদের closing tag দেয়ার প্রয়োজন নেই। তারা কোন এলিমেন্ট ধারন করে না।সে ট্যাগ টি হচ্ছে line break tag এবং তা <br/> রুপে প্রকাশ করা হয়। যা বিশেষ ভাবে ব্যবহার করা হয়। অর্থাৎ একটি লাইন লেখা বাদ দিয়ে অপর লাইন হতে লেখা শুরু করার জন্য এ ট্যাগ টি ব্যবহার করা হয়।

আরো কিছু ট্যাগ আছে যাদেরকে বিশেষভাবে ব্যবহার করা হয় যেমন ইমেজ ট্যাগ, ইনপুট ট্যাগ।

<img src="/../mypic.jpg" /> -- Image Tag
<br /> -- Line Break Tag
<input type="text" size="12" /> -- Input Field

আসলে <img src="/../mypic.jpg" /> এখানে /../ এর জায়গায় আপনার ছবির Location টা লিখতে হবে। যেমন ধরুন,আপনি যে ছবিটা দেখতে চান সেটা আপনার E drive এ new folder এর মধ্যে আছে,ছবিটার নাম Ismail এবং ছবিটা jpg formatএ।তখন আপনাকে যে কোড লিখতে হবে তা হল,
<img src="/E:\New Folder\Ismail.jpg" /> -- Image Tag
<br /> -- Line Break Tag
<input type="text" size="12" /> -- Input Field
 তবে আপনি ছবিটা দেখতে পাবেন।

HTML Elements

এলিমেন্টস(Elements)

এলিমেন্টস হল HTML এর মুল কেন্দ্রবিন্দু।তারা HTML page এর প্রতেকটি টেক্সটের অংশকে বর্ননা করে। এলিমেন্টস গুলো ট্যাগ(tag) এর মাধ্যমে তৈরী। HTML এলিমেন্টগুলি অনেক স্তরে বিদ্যমান।সবকিছু যা আপনার চোখের সামনে Web page এ বিদ্যমান তা হতে পারে Paragraph text, কোন ব্যনার,নেভিগেশন লিংক ইত্যাদি সব কিছুই elements এই পেজটির।

একটি এলিমেন্ট(Element) মুল তিনটি অংশ নিয়ে গঠিত। শুরু করার ট্যাগ(opening tag) ,এলিমেন্ট এর ধারনকৃত অংশ এবং শেষে বন্ধ করার ট্যাগ(closing tag) ।
1.    <p> - opening paragraph tag 
2.    Element Content - paragraph words 
3.    </p> - closing tag

Web page এর অতিব প্রয়োজনীয় চারটি এলিমেন্ট(Element) থাকে এগুলো হলো্: HTML,head, title এবং body elements । এগুলো বিষয়ে নিচে আলোচনা করা হয়েছে।

<html> Element...</html>

সবার প্রথমে HTML লেখার শুরুতে HTML শব্দের প্রথমে এবং শেষে less than ও greater than ( < >) চিহ্ন দিতে হয়। যেমন: <html> । কোন কিছু লেখার পর শেষে </html> ট্যাগটি দিতে হবে। অর্থাৎ <html> Welcome to Bangladesh </html>। Welcome to Bangladesh এই লেখাটি Web page এ প্রদশিত হবে।আমরা খুব সহজে Notepad এ লিখে Web page তৈরী করতে পারি। এজন্য আমদের Notepad Open করতে হবে। প্রথমে

start মেনু All Programs > Accessories >Notepad

তারপর Notepad হবার পর নিম্নের কোডটি লিখবো 
<html>
Welcome to Bangladesh
</html>

এভাবে লেখার পর Notepad এর ফাইল মেনু হতে save এ ক্লিক করব তারপর index.html নামে save করব।

সেভ করা ফাইলটিকে Double click করে open করবো । দেখবো যে লেখাটি Browser এ open হয়েছে। খুব সহজে একটা web Page তৈরী হয়ে গেলো।

<head> element

একটি ডকুমেন্ট head, ডকুমেন্ট সস্বন্ধে মৌলিক ধারনা দেয়। <head> elements যা পেজের header নির্দেশ করে। head elements এর মধ্যে রাখা ট্যাগ সরাসরি ব্রাউজারে প্রদর্শিত হয় না। আমরা টাইটেল এলিমেন্ট এর মাধ্যমে প্রকাশ করতে পারি।

<title> element

<head> এলিমেন্ট এর মাঝে <title> এলিমেন্ট রাখতে হয়। যেই শব্দগুলো title elements এর opening (<title>)এবং closing(</title>) tag এর মধ্যে লেখা হয় তা browser এর টাইটেল বা শিরোনাম হিসাবে প্রদর্শিত হয়।

<html>
<head>
<title> My WebPage!</title>
</head>
</html>



 <body> element
body element যা web page এর প্রদর্শিত সকল বিষয় গুলো ধারন করে। যে সব বিষয় গুলো আমরা web page এ দেখাতে চাই তা body element ট্যাগ এর মধ্যে রাখতে হয়। 

<html>
<head>
<title>My WebPage!</title>
</head>
<body>
Hello World! All my content goes here!
</body>
</html>

এই কোডগুলি নোটপ্যাডে কপি পেস্ট করে .html extension দিয়ে সেভ করে যেকোন ব্রাউজারে খুলুন এবং নিজের তৈরী প্রথম ওয়েব পেজ দেখুন। 

HTML Introduction

ভূমিকা

*এইচটিএমএল (HTML) এর অর্থ হচ্ছে Hyper Text Markup Language.এটা কোন প্রোগ্রামিং ল্যাংগুয়েজ নয়,মার্কআপ ল্যাংগুয়েজ।
 
*ওয়েব ডেভেলপার হতে হলে এই ল্যাংগুয়েজ টি সবার আগে ভালভাবে শিখতে হবে।তবে এটা শেখা খুব সহজ।
 
*এটা শিখলেই আপনি একটা ওয়েব পেজ তৈরী করতে পারবেন।এরপর যদি সিএসএস শেখেন তাহলে ঐ পেজটিতে আরেকটু প্রান দিতে পারবেন
 
*তারপর জাভাস্ক্রিপ্টের পালা, জাভাস্ক্রিপ্ট শিখে এর এপ্লিকেশন করলে আপনার ঐ ওয়েব পেজটি ডাইনামিক হওয়া শূরু হল।সবশেষে পিএইচপি+ ডেটাবেস শিখলে আপনি পূর্নাঙ্গ ডেটাবেস Driven ওয়েবসাইট তৈরী করতে পারবেন। 

যে জিনিস লাগবে এইচটিএমএল শিখতে (অর্থ্যাৎ এইচটিএমএল কোড কোথায় লিখবেন)

নোটপ্যাড। Notepad open করে তৈরী হোন।যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু করুন পরে অন্য কোন এডভান্সড এডিটরে সুইচ করবেন যেমন Netbeans বা Dreamweaver.আর যদি ড্রিমওয়েভার এ কাজের অভিজ্ঞতা থাকে তাহলে তাহলে এখনই শুরু করতে পারেন।
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-


>এইচটিএমএল এলিমেন্ট (Elements)
>এইচটিএমএল ট্যাগ (Tag)
>এইচটিএমএল অ্যাট্রিবিউট (Attribute)