এইচ এমএল ৫ বাংলা ই-বু ক

থম কাশ
০৮ িডেস র, ২০১৫
২৪ অ হায়ণ, ১৪২২
২৫ সফর, ১৪৩৭

লখক
মাহা দ িজহা র রহমান নয়ন
ই- মইলঃ jihadur.rahman.noyon@gmail.com
ফইসবু ক আইিডঃ www.fb.com/mdjrnoyon

স াদনায়
মাহা দ তির ল মাওলা সু জন
ধান িনবাহী কমকতা,
সফটেটক-আই ই উট
ফইসবু ক আইিডঃ https://facebook.com/sujan4g

সহেযািগতায়
মাহা দ আরাফাত রহমান
ব ব াপনা পিরচালক,
ময়মনিসংহেসাস
ফইসবু ক আইিডঃ https://www.facebook.com/Arafat.Rahman.MSS

কাশনায়
সফটেটক আই ই উট
প িলংকঃ https://facebook.com/groups/softtechit
ওেয়বসাইটঃ http://softtech-it.com/
সফটেটক- গঃ http://softtech-blog.com/
সফটেটক আই ু েড স ফারামঃ https://www.facebook.com/groups/917221218313615/

এই বই িব েয়র জন নয়
বই স ূ ণ িবনামূ েল িবতরণেযাগ

2|P a ge
এইচ এমএল ৫ বাংলা ই-বু ক

িকছু কথা
আিম িজহা র রহমান নয়ন । পশা িহেসেব একজন ছা । পাশাপািশ ওেয়ব ডেভলপেম এ কাজ করিছ ।
ওয়াডে স িনেয় কাজ করেত বশ ভাল লােগ । যু ি িনেয় িলখেত ভালবািস তাই িনয়িমত সফটেটক
গ (www.softtech-blog.com) এ যু ি িনেয় লখােলিখ কির ।

যারা ওেয়ব িডজাইন এবং ডেভলপেম িশখেত চাে ন তাঁেদর থেমই এইচ এমএল িশখেত হেব ।
তাঁেদর কথা িচ া কেরই এইচ এমএল৫ বই লখা হেয়েছ । তাই, আিম বই েত িত িবষয় সহজভােব
উপ াপন করার চ া কেরিছ । যন, যারা ওেয়ব িডজাইন এবং ডেভলপেম িশখেত চান তাঁরা সহেজই
িত িবষয় বু ঝেত পােরন ।

যেহতু আপিন এই বই ডাউনেলাড কেরেছন, তাই আিম ধের িনি আপিন ওেয়ব িডজাইন এবং
ডেভলপেম িশখেত আ হী । বই পড়ার সময় অবশ ই িত িবষয় াক স করেবন । কখেনা কিপ-
প কের াক স করেবন না ।

আিম ধন বাদ জানায় সফটেটক-আই এর ধান িনবাহী কমকতা মাহা দ তির ল মাওলা সু জন (Mtm
Sujan) ভাইেক িযিন আমােক বই কাশ করেত সাহায কেরেছন । এছাড়া, উনার হাত ধেরই এতটু
আসেত পেরিছ ।

এই বইেয়র পাঠক িহেসেব আপনার যেকােনা ম ব আমার কােছ পূণ । আপনােদর যেকােনা
পরামশ আমােক উৎসািহত কের । এই বই স েক কান ম ব , িকংবা কান সমস া থাকেল আমােক
অবগত ক ন ।

- িজহা র রহমান নয়ন

3|P a ge
এইচ এমএল ৫ বাংলা ই-বু ক

সূ চীপ
থম অধ ায়
-এইচ এমএল িক?
-এইচ এমএল শখার পূ ব িত
-এইচ এমএল িসনট া
-এইচ এমএল ইিলেম
-এইচ এমএল আ িবউট
-এইচ এমএল কেম
- এইচ এমএল ভ ািলেডটর
ি তীয় অধ ায়
-এইচ এমএল প ারা াফ
-এইচ এমএল লাইনে ক
- এইচ এমএল হিডং
-এইচ এমএল িলংক
- এইচ এমএল ইেমজ
-এইচ এমএল িল
- এইচ এমএল টিবল
-এইচ এমএল ফম
- এইচ এমএল এনটাই
- এইচ এমএল আইে ম
তৃতীয় অধ ায়
- এইচ এমএল হডার (Header)
- এইচ এমএল নভ (HTML Nav)
- এইচ এমএল সকশন (Section)
- এইচ এমএল আ েকল (Article)
- এইচ এমএল ফু টার (Footer)
- এইচ এমএল অিডও (Audio)
- এইচ এমএল িভিডও (Video)

4|P a ge
এইচ এমএল ৫ বাংলা ই-বু ক

থম অধ ায়
এই অধ ােয় আমরা এইচ এমএল এর িসনট া িনেয় আেলাচনা করেবা । এই অধ ায় থেকই আপিন এইচ এমএল
কাড লখা করেত পাড়েবন ।

এইচ এমএল িক?

HTML এর পূ ণ প হে Hyper Text Markup Language. এটা একটা মাকাআপ ল া ু েয়জ । এইচ এমএল কান
া ািমং ল া ু েয়জ নয় । এটা িদেয় ওেয়বসাইেটর কাঠােমা গঠন করা হয় । এইচ এমএল এর সবেশষ ভাসন হে
এইচ এমএল ৫ । এেত নতুন অেনক িফচার যাগ করা হেয়েছ ।

ওেয়ব িডজাইন এবং ডেভলপেম শখার থম ধাপ হে এইচ এমএল । অথাৎ, ওেয়ব িডজাইন িকংবা
ডেভলপেম যা-ই িশখু ন না কন আপনােক থেম এইচ এমএল িশখেত হেব । তেব, এইচ এমএল শখা খু বই সহজ
। ভােলাভােব াক স করেল আপিন িকছু িদেনর মেধ ই এইচ এমএল িশখেত পারেবন ।

এইচ এমএল শখার পূ ব িত

এইচ এমএল িশখেত হেল আপনার কি উটার এর বিসক ধারণা থাকেলই চলেব । এইচ এমএল শখার পূ েব
আপনােদর িকছু পূ ব িতর েয়াজন রেয়েছ । আিম তা িনেচ আেলাচনা কেরিছ ।

ট ট এিডটর ই টল করাঃ এইচ এমএল িশখেত হেল আপনার কি উটার এ এক ট ট এিডটর ই টল করা
থাকেত হেব । িত কি উটার এ উইে াজ ই টল দওয়ার পর িডফ ভােব নাটপ াড (Notepad) ই টল করা
থােক । আপিন চাইেল নাটপ াড াস াস ব বহার করেত পােরন । নাটপ াড াস াস এ বশিকছু বাড়িত িফচার পােবন
। এছাড়া, আরও বশ িকছু ট ট এিডটর রেয়েছ । অন ান ট ট এিডটর স েক জানেত এবং ব বহার করেত
(http://softtech-blog.com/5-popular-code-editors/) এই লখা পড়ুন ।

নাটপ াড াস াস ডাউনেলাড করার জন (https://notepad-plus-plus.org/) এই িলংক এ ি ক ।

ওেয়ব াউজার ই টল করাঃ এরপর আপনার কি উটার এ এক ওেয়ব াউজার ই টল করা থাকেত হেব । েত ক
কি উটার এ িডফ ভােব াউজার ই টল করা থােক । েত ক কি উটার এ িডফ ভােব াউজার ই টল করা থােক
। তেব, সটা ই ারেনট এ ে ারার । বশীরভাগ সময় ল করেবন, এসব াউজােরর ভাসন পু রেনা । তাই, আিম
আপনােক বলেবা এক নতুন ভাসেনর াউজার ই টল করার জন । এে ে , আপিন মািজলা ফায়ারফ অথবা গল

5|P a ge
এইচ এমএল ৫ বাংলা ই-বু ক
াম ব বহার করেত পােরন । এছাড়া, আপিন চাইেল অন ান আপে েডট ভাসেনর াউজার ব বহার করেত পােরন ।
এটা, স ূ ণ আপনার িচর উপর িনভরশীল ।

মািজলা ফায়ারফ ডাউনেলাড করার জন (https://www.mozilla.org/en-US/firefox/new/) এই িলংক ি ক

ক ন এবং গল াম ডাউনেলাড করার জন (https://www.google.com/chrome/) এই িলংক এ ি ক ক ন ।

ফাইেলর এ েট ান দশন করােনাঃ আপনারা দখেবন য, আপনােদর কি উটােরর কান ফাইেলর শেষ
ফাইেলর ফরম াট লখা থােক না । অথাৎ, ফাইল কান ফরম াট এ আেছ তা লখা থােক না । যমনঃ সাধারণভােব
এক ছিব আপনার কি উটার এ থাকেব image_name নােম । যিদ আপিন ফাইল এ েটনশন দশন করান তাহেল
ছিব থাকেব image_name.png নােম । ফেল, আমরা সহেজই ফাইেলর ফরম াট সনা করেত পাির । জাভাি
শখার জন কি উটােরর ফাইল ফাইল এ েটনশন দশন করােনা জ ির িকছু নয় । তেব, আপিন আপনার সু িবধার জন
ফাইল এ েটনশন দশন করােত পােরন ।

আপনার কি উটােরর ফাইল ফাইল এ েটনশন দশন করার জন , Control Panel>Folder Options থেক
View এ ি ক করেবন এরপর Hide extensions for known file types থেক কিচ তুেল িদেবন । সবেশষ,
Apply স কের OK বাটেন ি ক করেবন ।

এবার আপনার কি উটােরর িত ফাইেলর এ েটনশন দখেত পাড়েবন । অথাৎ, এক এইচ এমএল ফাইেলর নােমর
পর .html থাকেব, এক িসএসএস ফাইেলর নােমর পর .css থাকেব । ফেল, আপিন সহেজই ফাইেলর ফরম াট সনা
করেত পাড়েবন ।

ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত

সফটেটক-আই ু েড স ফারাম েপ ক ন

6|P a ge
এইচ এমএল ৫ বাংলা ই-বু ক

এইচ এমএল িসনট া

এখন আিম এইচ এমএল এর গঠন স েক আেলাচনা করেবা । েত কটা লাইন বু ঝার চ া ক ন । যিদ কান লাইন
বু ঝেত অসু িবধা হয় তাহেল আমােক জানােবন । মেন রাখেবন, এই অংশ টু না বু ঝেল বািক অংশ বু ঝেত পারেবন না ।
তাই মেনােযাগ িদেয় বু ঝার চ া ক ন ।

থেম আমরা এইচ এমএল ৫ এর াকচার দখেবা;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>

উপের আমরা এইচ এমএল এর াকচার িলখলাম । এটা এইচ এমএল এর সবেশষ ভাসন এইচ এমএল ৫ এর াকচার
।

এবার আমরা এক উদাহরণ দখব এবং উদাহরেন িব ািরত আেলাচনা করেবা । এইচ এমএল করার জন থেমই
িনেচর কাডটু নাটপ াড এ িলখু ন:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> This is Title </title>
</head>
<body>
Hello World!
</body>
</html>

এবার কাডটু নাটপ াড এ িলেখ index.html নােম সভ ক ন । তাহেল আপিন Hello World! লখা দখেত
পারেবন ।

7|P a ge
এইচ এমএল ৫ বাংলা ই-বু ক

কাড িবে ষণ
আিম বু ঝেত পারিছ আপনারা এখেনা হয়ত িকছু ই বু ঝেত পােরন িন । কান সমস া নই । আিম এখন িত লাইন
আপানেদর বু িঝেয় িদি ।

১। থম লাইন িলেখ াউজারেক বু ঝােনা হেয়েছ য এটা একটা এইচ এমএল ড েম । আমরা এইচ এমএল৫
ব বহার করিছ তাই আমরা <!DOCTYPE HTML> ব বহার করিছ । যিদ আমরা এইচ এমএল ৪.০১ ব বহার করতাম
তাহেল িনেচর মত িলখেত হেতা;

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

যাইেহাক, যেহতু আমরা এইচ এমএল৫ ব বহার করিছ তাই আমরা ধু <!DOCTYPE HTML> িলখেবা । সব
এইচ এমএল এর েত এই ডক টাইপ ব বহার করেত হেব । অেনেক এইচ এমএল ডকটাইপ এ দন না । িক ,
েফশনাল হেত হেল এ িবষয় কখেনা এিড়েয় যােবন না । কননা, ডকটাইপ ব বহার না করেল িকছু াউজাের কমত
আউটপু ট আেস না । তাই, েত ক এইচ এমএল ফাইেলর েত ডকটাইপ ব বহার করেবন ।

২ । ি তীয় লাইন বু ঝােনার আেগ আিম আপনােদর কােছ এইচ এমএল ট াগ স েক আেলাচনা কের িনই । উপেরর
িলিখত html, head, title, body েত ক েক ট াগ বলা হয় । একটু ল কের দখু ন ট াগ Less Than িচ িদেয়
হয় এবং Greater Than িচ িদেয় শষ হয় । তাই, <html>, <head>, <title>, <body> লখা হেয়েছ । ায়
েত ক ট াগ এর এবং শষ আেছ । তাই, যখন <html> ট াগ হেয়েছ তখন ট াগ </html> এভােব শষ
হেয়েছ । ট াগ শষ করার জন Less Than িচে র পের একটা Forward Slash (/) িচ িদেত হয় । ট াগ সরাসির
াউজাের দশন কের না । তাই দখু ন index.html ফাইল ওেপন করার পর কান ট াগ াউজাের দিশত হয়িন । ধু
ইিলেম সমূ হ াউেজর দিশত হয় । এইচ এমএল ট াগ এর মাঝখােন য ট ট থােক তা হে ইিলেম ।

৩ । ি তীয় লাইন হে ট াগ । সম এইচ এমএল কাড <html> ট াগ এর মােঝ িলখেত হয় । দশম লাইন এ <html>
এর ট াগ শষ করা হেয়েছ । <html> ট াগ এর সকশন রেয়েছ এক হে <head> সকশনএবং অপর হে
<body> সকশন ।

৪। তৃতীয় লাইন হে এক ট াগ যা ষ লাইন এ শষ হেয়েছ । একইভােব, <body> এক ট াগ যা পরবত েত ট াগ

শষ করা হেয়েছ ।

৫ । আমরা চতুথ লাইন এ meta নােম একটা ট াগ ব বহার কেরিছ । মটা ট াগ এর িভতের charset লখা হেয়েছ। এটােক
বলা হয় এ িবউট । পরবত েত অ া িবউট স েক আরও ধারণা পােবন । ল কের দখু ন meta একটা িসে ল ট াগ ।
কারন, এই ট াগ হেয়েছ িক এই ট াগ এর শষ করা হয়িন । একটা ওেয়বসাইট এর সম লখা কান ফরম াট এ
থাকেব সটা িনেদশ করার জন charset আ িবউট ব বহার করা হয় ।

8|P a ge
এইচ এমএল ৫ বাংলা ই-বু ক
৬ । অ ম লাইন এ Hello World! িলেখিছ এবং এটা াউজাের দিশত হেয়েছ । এটা হে এইচ এমএল ইিলেম ।
করার ট াগ এবং শষকরার ট াগ এর মাঝখােন ইিলেম থােক এবং ইিলেম াউজাের দিশত হয়। িক , ট াগ
াউজাের সরাসির দিশত হয় না ।

সবেশেষ, আপিন ফাইল index.html নােম সভ কেরেছন । এখােন আপিন index লখার পিরবেত যেকােনা ট ট
িলখেত পােরন । এটা আপনার ই া । তেব .html এ েটনশন ক রাখেত হেব । অথাৎ ফাইেলর নােমর পর .html
থাকেত হেব । অেনেক .html এর পিরবেত ভুল কের .txt িদেয় সভ কের াউজাের ওেপন করান । িক এেত কাজ
করেব না ।

এইচ এমএল ইিলেম

এইচ এমএল করার ট াগ এবং শষ করার ট াগ এর িভতের য কে থােক তা-ই হে ইিলেম । এক
এইচ এমএল ড েম ওেপন করেল আমরা াউজাের যা দখেত পাই, তাই হে ইিলেম ।

এইচ এমএল ইিলেম এর িসনট া হে ;

<tagname> HTML Element </tagname>

িবষয় আরও পির ার করার জন এখন আিম এক উদাহরন িদি ;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> This is Title </title>
</head>
<body>
Hello World!
</body>
</html>

উপেরর উদাহরেন আমরা Hello World! িলেখিছ এবং এটা াউজাের দিশত হেয়েছ । এটাই- হে এইচ এমএল
ইিলেম । করার ট াগ এবং শষকরার ট াগ এর মাঝখােন ইিলেম থােক এবং ইিলেম াউজাের দিশত হয়
িক , ট াগ াউজাের সরাসির দিশত হয় না ।

ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত

সফটেটক-আই ু েড স ফারাম েপ ক ন

9|P a ge
এইচ এমএল ৫ বাংলা ই-বু ক

এইচ এমএল আ িবউট

এইচ এমএল আ িবউট খু বই পূ ণ একটা টিপক । এইচ এমএল এর িকছু ট াগ আেছ যা সাধারণভােব িলখেল কাজ
কের না । এসব ট াগ এ অ া িবউট ব বহার করা হয় । এইচ এমএল আ িবউট এর ই অংশ থােক এক হে name
এবং অপর হে Value. এইচ এমএল অ া িবউট লখার িনয়ম হে ;
<tagname attributename="value"> This is Element </tagname>

অথাৎ এইচ এমএল ট ােগর নােমর পের একটা স িদেয় আ িবউট এর নাম িদেত হেব । এরপর একটা সমান (=) িচ
িদেয় ইনভােটড কমা (" ") এর িভতের আ িবউট এর ভ ালু িদেত হেব । এখন আমরা এইচ এমএল আ িবউট এর
একটা উদাহরন দখেবা ।

<meta charset="UTF-8">

এখােন meta নােম একটা ট াগ ব বহার কেরিছ । মটা ট াগ এর িভতের charset="UTF-8" লখা হেয়েছ। এটােক
বলা হয় এ িবউট । এখােন charset লখা হে name এবং UTF-8 লখা হে Value.

এইচ এমএল কেম

কাড কাশ করার জন কেম অত পূ ণ । আপিন যখন হাজারহাজার লাইন এইচ এমএল িলখেবন তখন আপিন
কান কাড িক জন িলেখেছন তা িকভােব সনা করেবন? তাই, আমরা কেম ব বহার কের সহেজই বু ঝেত পাির য
কান কাড িক কারেন ব বহার করা হেয়েছ । এছাড়া, আপিন কেম ব বহার কের কান কােডর কায ম িগত রাখেত
পােরন । অথাৎ, আপিন যিদ চান য এইচ এমএল কান অংশ িগত রাখেত পােরন । এইচ এমএল কেম াউজাের
দিশত হয় না ।

এইচ এমএল কেম লখার িসনট া হে ;

<!-- Write Your HTML Comment Here -->

আশা কির বু ঝেত পেড়েছন ।

এইচ এমএল ভ ািলেডটর

আপিন িকছু এইচ এমএল কাড িলখেলন এখন এসব কাড স ক িনয়েম লখা হেয়েছ িক না সটা পরী া করার ,জন
আপিন এইচ এমএল ভ ািলেডটর ব বহার করেত পােরন । কাড ভ ািলেডট করার মাধ েম কাথাও ভুল আেছ িকনা
িকংবা কাড স ক িনয়েম িলেখেছন িকনা তা দখেত পারেবন ।
এইচ এমএল ভ ািলেডটর ব বহার করেত (https://validator.w3.org/) িলংক এ যান ।

10 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক

ি তীয় অধ ায়
গত অধ ােয় আমরা এইচ এমএল শখার পূ ব িত স েক জানেবা । এইচ এমএল কাড িকভােব িলখেত হয় এবং
এইচ এমএল কেম িনেয় আেলাচনা কেরিছ । আশা কির থম অধ ায় বু ঝেত অসু িবধা হয়িন । যিদ আপিন থম অধ ায়
ভালভােব বু ঝেত পােড়ন তাহেল এখন থেক আপিন ি তীয় অধ ায় করেত পােড়ন । এ অধ ােয় আমরা
এইচ এমএল এর ট াগ িনেয় আেলাচনা করেবা ।

এইচ এমএল প ারা াফ

এখন আমরা এইচ এমএল প ারা াফ ট াগ িনেয় আেলাচনা করেবা । এইচ এমএল এ কান ট ট লখার জন সাধারণত
এইচ এমএল প ারা াফ ট াগ ব বহার করা হয় । প ারা াফ ট াগ ব বহার কের আমরা ট টেক কেয়ক ভােগ িবভ
কের ফলেত পাির । এছাড়া, এ এইচ এমএল এর খু বই পূ ণ এক ট াগ । আপনােদর কােছ িবষয় পির ার করার
জন এখন এক উদাহরণ িদি । থেম িনেচর কাডটু এক ট ট এিডটর যমন নাটপ াড াস াস এ িলেখ
index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Paragraph </title>
</head>
<body>
<p> Bangladesh is our Country. It is a very beautiful Country. </p>
<p>It is a small country. But it has a Large Population. </p>
</body>
</html>

এবার কাডটু এক াউজাের দশন করার দখেত পারেবন য আমরা য ট ট ব বহার কেরিছ তা ই অনু ে েদ
িবভ হেয় গেছ ।

ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত

সফটেটক-আই ু েড স ফারাম েপ ক ন

11 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক

এইচ এমএল লাইনে ক

এইচ এমএল লাইন ক ট াগ কান লাইন ক করার জন ব বহার করা হয় । আমরা মাইে াসফট কান ওয়াড লাইন
শষ কের নতুন লাইন করার জন িকেবাড এ এ ার (Enter) স কির । একইভােব এইচ এমএল এ কান লাইন
ছেড় নতুন লাইন করার জন এইচ এমএল লাইন কআপ ট াগ -আপ ট াগ ব বহার করা হয় । লাইনে ক-
ব িত ম ট াগসমূ েহর এক । কননা এইচ এমএল এর, লাইনে ক ট াগ অন ান ট াগ এর মত নয় । লাইন ক আপ
ট াগ লখা হয় <br /> এভােব । িবষয় ভাল কের বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Line Break </title>
</head>
<body>
<p> Bangladesh is our Country. </p><br />
<p>It is a Very Beatiful Country. </p><br />
<p>It has a large population. </p>
</body>
</html>

এবার index.html ফাইল ওেপন কের দখু ন লাইনসমূ হ লাইন ক-আপ ট াগ অনু যায়ী শষ হেয়েছ । যিদ লাইনে ক
আপ ট াগ ব বহার করা ছাড়া উপেরর কাডটু র আউটপু ট াউজাের দশন করােনা হেতা তাহেল কমন দখােতা সটা
জানেত লাইন ক –আপ ট াগ কেট িদেয় আবার াউজাের দশন করান । অথাৎ িনেচর কাডটু index.html নােম
সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Line Break </title>
</head>

12 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
<body>
<p> Bangladesh is our Country. </p>
<p>It is a Very Beatiful Country. </p>
<p>It has a large population. </p>
</body>
</html>

এবার index.html ফাইল এক াউজাের দশন করান । তাহেল দখেত পারেবন লাইনসমূ হ িনেচ ইেচ সি ত হয়িন
।

এইচ এমএল হিডং

এখন আমরা এইচ এমএল হিডং িনেয় আেলাচনা করেবা । আমরা যখন কান কে এরিশেরানাম িলখেত যাই তখন
আমরা এইচ এমএল হিডং ট াগ ব বহার কির । এইচ এমএলএর হিডং ট াগ ছয় । এখন আমরা ছয় হিডং ট াগ এর
উদাহরণ দখেবা । এজন িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Heading </title>
</head>
<body>
<h1>This is Heading One </h1><br />
<h2>This is Heading Two </h2><br />
<h3>This is Heading Three </h3><br />
<h4>This is Heading Four </h4><br />
<h5>This is Heading Five </h5><br />
<h6>This is Heading Six </h6><br />
</body>
</html>

13 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
এবার index.html ফাইল াউজাের দশন করান তাহেল ছয় হিডং এর প দখেত পারেবন । িত হিডং এর
পর আিমএইচ এমএল লাইন ক ট াগ ব বহার কেরিছ যন কাডসমূ হ িনেচ িনেচ সি ত হয় ।

এইচ এমএল িলংক

ওেয়বসাইট এ এইচ এমএল িলংক খু বই পূ ণ । আমরা যখন ওেয়বসাইট এ কান িলংক িদেত চাই তখন
এইচ এমএল িলংক ব বহার কের থািক । আমরা অেনক সময় পা এ দিখ য, সফটওয় ার ডাউনেলাড করেত
এখােন ি ক ক ন’ এ রকম লখা । তখন সাধারণত ‘এখােন’ লখা েত এক িলংক যু থােক । ফেল, ‘এখােন’
লখা েত ি ক করেল নতুন এক িলংক ওেপন হয় । এ প িত এইচ এমএল িলংক এর মাধ েম করা হয় ।
ওেয়বসাইেটর মনু সহ ায় সব ধরেনর কে এ এইচ এমএল িলংক ব বহার করা হয় । এইচ এমএল এ িলংক ব বহার
করার জন Anchor (অ ানেকার) ট াগ ব বহার করা হয় এবং সােথ href অ া িবউট ব বহার করা হয় ।
এইচ এমএল িলংক এর গঠন হে ;

<a href="link"> Keyword </a>

এইচ এমএল িলংক স েক ভােলাভােব বু ঝেত িনেচর কাডটু এক ট ট এিডটর যমন নাটপ াড াস াস এ
িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Link </title>
</head>
<body>
<p> <a href="http://www.softtech-blog.com"> Click Here </a> to Visit SoftTech-Blog. </p>
</body>
</html>

এখন index.html ফাইল াউজাের রান কিরেয় Click Here এ ি ক করেল সফটেটক গ এ চেল যােব ।

ওেয়ব িডজাইন, ওেয়ব ডেভলপেম , ওয়াডে স এবং ি ল াি ং উেটািরয়াল পেত

সফটেটক- গ িভিজট ক ন

14 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক

এইচ এমএল ইেমজ

ওেয়বসাইেটর জন ইেমজ ব বহার করা খু বই পূ ণ । এক ওেয়বসাইেটরেলােগা থেক কের িবিভ অংেশ
ইেমজ ব বহার করা হয় । এইচ এমএল ইেমজ ব বহার করার জন <img src="" alt="" /> ট াগ ব বহার করা হয়
। img এক িসে ল ট াগ । এই ট াগ এর িভতের src এবং alt এ িবউট ব বহার করেত হয় । alt অ া িবউট এ ইেমজ
এর নাম িদেত পােরন । এখােন আপিন ইেমজ এর সােথ াসি ক যেকােনা নাম ব বহার করেত পােরন । alt আ িবউট
ব বহার না করেলও img ট াগ কাজ কের । তেব, alt আ িবউট ব বহার করা উিচত । আপনােদর বু ঝার সু িবধােথ আিম
আপনােদর কােছ এখন এক উদাহরণ িদেবা ।

এজন িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Image </title>
</head>
<body>
<img src="images/logo.png" alt="Logo" />
</body>
</html>

একটা িবষয় খয়াল রাখেবন, আপনার ইেমজ এবং এইচ এমএল ফাইল যিদ একসােথ থােকতাহেল এই প িতেত কাজ
করেব । যিদ, আপনার index.html ফাইল ড টপ এ এবং ইেমজ ফাইল এক images ফা ার এর িভতের থােক
তাহেল আপনােক <img src="images/images-name.png" alt="Image Name" /> এভােব িলখেত হেব ।

যিদ ফাইেলর িডের ির স কভােব না দন এবং ফাইেলর এ েট ান না দন তাহেল ইেমজ এর আউটপু ট কভােব
আসেব না ।

ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত

সফটেটক-আই ু েড স ফারাম েপ ক ন

15 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক

এইচ এমএল িল
এইচ এমএল িল ব বহার কের আপিন কান িকছু র তািলকা কাশ করেত পােরন ।আমরা ওেয়বসাইেটর মনু তির
করার সময় সাধারণত এইচ এমএল িল ব বহার কেরথািক । এছাড়া, আমরা কান িকছু পেয় আকাের িলখেত চাইেল
এইচ এমএল িল ব বহার কির । এইচ এমএল এ সাধারণত ই ধরেনর িল রেয়েছ । এ ই িল হে ;

 Order List (অডার িল )

 Unorder List (আন অডার িল )

Order List (অডার িল ): আমরা কান তািলকা যখন িমক সংখ া অনু যায়ী িলেখ থািক তখন আমরা এইচ এমএল
অডার িল ব বহারকরেত পাির । এখন একটা উদাহরণ িদেল ব াপার আপনােদর কােছ স ূ ণ পির ার হেয় যােব ।
এজন িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML List </title>
</head>
<body>
<ol>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<li> PHP </li>
<li>WordPress</li>
</ol>
</body>
</html>

কাড িবে ষণঃ আমরা সাত ন র লাইেন olব বহার কেরিছ । olমােন হে Order List এবং িত িল এর জন
olএর িভতের li ব বহার করা হয় ।

16 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
Un order List (আন অডার িল ): আমরা কান তািলকা যখন িমক সংখ া অনু যায়ী না িলেখ িল কাশ কের
থািক তখন আমরা এইচ এমএলআন অডার িল ব বহার করেত পাির । এখন একটা উদাহরণ িদেল ব াপার আপনােদর
কােছ স ূ ণ পির ার হেয় যােব ।

এজন িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML List </title>
</head>
<body>
<ul>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<li> PHP </li>
<li>WordPress</li>
</ul>
</body>
</html>

কাড িবে ষণঃ আমরা সাত ন র লাইেন ulব বহার কেরিছ । ul মােন হে Un Order List এবং িত িল এর
জন ulএর িভতের li ব বহার করা হয় ।

ওেয়ব িডজাইন, ওেয়ব ডেভলপেম , ওয়াডে স এবং ি ল াি ং উেটািরয়াল পেত

সফটেটক- গ িভিজট ক ন

17 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক

এইচ এমএল টিবল

আমরা যখন কান তথ উপ াপন কির, সাধারণত আমরা টিবল ব বহার কির । এছাড়া, িবিভ ধরেনর উপা উপ াপন
করার জন টিবল ব বহার কের থািক । একইভােব, আমরা ওেয়বসাইেট কান ধরেনর উপা উপ াপন করার জন
এইচ এমএল টিবল ব বহার কের থািক । এইচ এমএল টিবল িকছু টা জ ল । নতুনেদর থম থম বু ঝেত অসু িবধা হেত
পাের ।

এইচ এমএল এ টিবল ব বহার করার জন এইচ এমএল <table>…</table> ট াগ ব বহার করেত হয় । থেম চলু ন
আমরা একটা উদাহরণ দেখ আিস পের আমরা িবে ষণ করেবা । এজন িনেচর কাডটু িলেখ index.html নােম সভ
ক ন;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> HTML Table </title>
</head>
<body>
<table border="1">
<tr>
<th> Serial No. </th>
<th> Class </th>
<th> Students </th>
</tr>
<td> 01 </td>
<td> Class Six </td>
<td> 90 </td>
<tr></tr>
<td> 02 </td>
<td> Class Seven </td>
<td> 90 </td>
<tr> </tr>
<td> 03 </td>
<td> Class Eight </td>
<td> 88 </td>

18 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
<tr> </tr>
<td> 04 </td>
<td> Class Nine </td>
<td> 87 </td>
<tr> </tr>
<td> 05 </td>
<td> Class Ten </td>
<td> 89 </td>
<tr> </tr>
</table>
</body>
</html>

কাড িবে ষণঃ

১ । আমরা থেম <table>…</table> ট াগ এর মােঝ border ব বহার কেরিছ । কননা, এখােন আমরা টিবল এর
বডার িনধারণ কেরিছ । এজন আমরা বডার ১ িদেয়িছ । আপিন বডার ২ ব বহার কের কাডটু রান করান । তাহেল িবষয়
পির ার হেয় যােব । আপিন যিদ border ব বহার না কেরন তাহেল বডারিবহীন টিবল াউজাের দিশত হেব ।

২ । টিবেলর হডার িনধারণ করার জন <th>…</th> ব বহার করা হেয়েছ ।

৩। টিবেলর Row অথাৎ সাির িনধারণ করার জন <tr>…</tr> ব বহার করা হেয়েছ ।

৪ । টিবেলর সল িনধারণ করার জন <td>…</td> ব বহার করা হেয়েছ ।

ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত

সফটেটক-আই ু েড স ফারাম েপ ক ন

19 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক

এইচ এমএল ফম
ওেয়বসাইেটর জন এইচ এমএল ফম খু বই পূ ণ । কান ওেয়বসাইট এ িনব ন ি য়া যু করার জন
এইচ এমএল ফম ব বহার করা হয় । এছাড়া, ওেয়বসাইট এ সাচ ব যু করার করার জন এইচ এমএল ফম ব বহার
করা হয় । এইচ এমএল ফম নতুনেদর জন থেম িকছু টা ক ন মেন হেত পাের ।

এইচ এমএল ফম তির করার জন <form>…</form> ট াগ ব বহার করা হয় এবং <form>…</form> ট াগ এর

িভতের বশ িকছু ট াগ ব বহার করা হয় ।

ট ট িফ
ওেয়বসাইট এ ফম পূ রণ করার সময় িভিজটরেক বশ িকছু তথ ( যমন; নাম, ই- মইল, কানা ইত ািদ) িদেয় ফম
সাবিমট করেত হয় । এসব কাজ আপিন ট ট িফ এর মাধ েম করেত পােরন ।

এ স েক আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Form </title>
</head>
<body>
<form>
Name: <input type="text" /> <br />
E-mail: <input type="text" /> <br />
</form>
</body>
</html>

এবার index.html ফাইল একই াউজাের ওেপন ক ন ।

20 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
পাসওয়াড িফ
ওেয়বসাইট এ ফম পূ রণ করার সময় িভিজটরেক ইউজার নম এবং পাসওয়াড িদেয় ফম সাবিমট করেত হয় । এসব কাজ
আপিন পাসওয়াড িফ এর মাধ েম করেত পােরন ।

এ স েক আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Form </title>
</head>
<body>
<form>
Password: <input type="password" />
</form>
</body>
</html>

এবার index.html ফাইল একই াউজাের ওেপন ক ন ।

রিডও বাটন
আপিন যিদ এমন চান য িভিজটর একািধক িবষয় থেক এক িবষয় বাছাই কের ফম সাবিমট করেব তাহেল রিডও
বাটন ব বহার করেত পােরন ।

এ স েক আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Form </title>
</head>

21 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
<body>
<form>
Priority: <input type="radio" name="priority" Value="High" /> High <br />
<input type="radio" name="priority" Value="Medium" /> Medium <br />
<input type="radio" name="priority" Value="Low" /> Low
</form>
</body>
</html>

এবার index.html ফাইল একই াউজাের ওেপন ক ন ।

চকব
আপিন যিদ এমন চান য িভিজটর একািধক িবষয় থেক এক বা একািধক িবষয় বাছাই কের ফম সাবিমট করেব তাহেল
রিডও বাটন ব বহার করেত পােরন ।

এ স েক আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Form </title>
</head>
<body>
<form>
Department:
<input type="checkbox" name="department" Value="Sales" /> Sales
<input type="checkbox" name="department" Value="Support" /> Support
</form>
</body>
</html>

এবার index.html ফাইল একই াউজাের ওেপন ক ন ।

22 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
পডাউন
পডাউন মনু তির করার জন সাধারণত এইচ এমএল পডাউন ব বহার করা হয় ।

এ স েক আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Form </title>
</head>
<body>
<form>
Marital Status: <select name="Status">
<option> Married </option>
<option> Unmarried </option>
</select>
</form>
</body>
</html>

এবার index.html ফাইল একই াউজাের ওেপন ক ন ।

ট ট এিরয়া
আপিন যিদ চান য ওেয়বসাইেটর ব বহারকারী কান ম ােসজ অথাৎ বাতা িলেখ আপনার কােছ পাঠােব তাহেল আপিন
ট ট এিরয়া ব বহার করেবন ।

এ স েক আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">

23 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
<title> HTML Form </title>
</head>
<body>
<form>
Massage: <textarea rows="5" cols="30"> </textarea>
</form>
</body>
</html>

এবার index.html ফাইল একই াউজাের ওেপন ক ন ।

সাবিমট বাটন
ওেয়বসাইেটর ফম সাবিমট করার জন সাবিমট বাটন ব বহার করেত হয় ।

এ স েক আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<title> HTML Form </title>
</head>
<body>
<form>
<input type="submit" value="Submit" />
</form>
</body>
</html>

এবার index.html ফাইল একই াউজাের ওেপন ক ন ।

এখন আমরা এক এইচ এমএল ফম তির করেবা । এজন িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>

24 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
<head>
<meta charset="UTF-8">
<title> HTML Form </title>
</head>
<body>
<form>
Name: <input type="text" /> <br />
E-mail: <input type="text" /> <br />
Password: <input type="password" /> <br />
Marital Status: <select name="Status">
<option> Married </option>
<option> Unmarried </option>
</select> <br />
Priority: <input type="radio" name="priority" Value="High" /> High <br />
<input type="radio" name="priority" Value="Medium" /> Medium <br />
<input type="radio" name="priority" Value="Low" /> Low <br />
Department:
<input type="checkbox" name="department" Value="Sales" /> Sales
<input type="checkbox" name="department" Value="Support" /> Support <br />
Massage: <textarea rows="5" cols="30"> </textarea> <br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

কাড কিপ না কের, অবশ ই কাডটু িনেজর হােত িলখেবন । কাড কিপ কের াক স করেল আপনারা তমন িকছু
বু ঝেত পারেবন না ।

এইচ এমএল এনটাই

25 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
আমরা ওেয়বসাইট এ কিপরাইট, ডমাক ইত ািদ িচ ব বহার কের থািক । এসব িচ হে এইচ এমএল এনটাই ।
এনটাই হয় এমপারেস (&) িচ ারা এরপর এনটাই নাম লখা হয় এবং শেষ এক সিমেকালন (;) িদেত
হয় । এখন আমরা কিপরাইট এর এনটাই তির করেবা । এজন িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Entity </title>
</head>
<body>
<p> Copyright &copy; Website Name - All Rights Reserved. </p>
</body>
</html>

এইচ এমএল এনটাই এর নাম জানেত গল এ সাচ িদেত পােরন ।

এইচ এমএল আইে ম

এইচ এমএল আইে ম বলেত বু ঝায় আমােদর এইচ এমএল ফাইেলর একটা িনিদ জায়গার মেধ অন একটা
ওেয়বসাইেটর কে দশন করােনা । অথাৎআপনার ওেয়বসাইট এ অন একটা ,যিদ আপিন কখেনা এমন চান য ,
ওেয়বসাইট এর কে শা করেব তাহেল এইচ এমএল আইে ম ট াগ ব বহার করেত পােড়ন ।

এইচ এমএল আইে ম ভােলাভােব বু ঝােত আপনােদর এখন একটা উদাহরণ িদি । িনেচর কাডটু িলেখ
index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML IFrame </title>
</head>
<body>

26 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
<iframe src="http://softtech-blog.com"></iframe>
</body>
</html>

এবার যিদ আিম index.html ফাইল এক ওেয়ব াউজাের ওেপন কির, তাহেল দখেবন সফটেটক গ ওেয়বসাইট
দিশত হেয়েছ ।

এখন আপিন চাইেল ম বড় িকংবা ছাট করেত পােড়ন । এে ে , আপনােক height এবং width নােম ই
আ িবউট ব বহার করেত হেব । যমন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML IFrame </title>
</head>
<body>
<iframe src="http://softtech-blog.com" height="600" width="700"></iframe>
</body>
</html>

তেব, সব ওেয়বসাইট আইে ম এ ব বহার করা যায় না । যমন, ফইসবু ক, গল এসব ওেয়বসাইট আপিন চাইেলও
আইে ম ট াগ এ ব বহার করেত পাড়েবন না। আশা কির, বু ঝেত পেড়েছন ।

ওেয়ব িডজাইন, ওেয়ব ডেভলপেম , ওয়াডে স এবং ি ল াি ং উেটািরয়াল পেত

সফটেটক- গ িভিজট ক ন

27 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক

তৃতীয় অধ ায়

গত অধ ােয় আমরা এইচ এমএল এর বশ িকছু ট াগ িনেয় আেলাচনা কেরিছ । এই অধ ােয় আমরা এইচ এমএল ৫ এর
বশ িকছু ট াগ িনেয় আেলাচনা করেবা ।

এইচ এমএল হডার (HTML Header)

এক ওেয়বসাইট েতই হডার অংশ থােক । ওেয়বসাইট এর হডার এিরয়া িনধারণ কের দওয়ার জন এইচ এমএল
হডার ট াগ ব বহার করা হয় । অথাৎ, এক ওেয়বসাইট এর হডার এ এক বা একািধক হিডং থাকেত পাের, লােগা
থাকেত পাের, মনু থাকেত পাের । এসব কে সব সময় এইচ এমএল হডার ট াগ এর িভতের থােক ।

িবষয় আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Header </title>
</head>
<body>
<header>
<h1> SoftTech-Blog </h1>
<h3> Let's Learn Something </h3>
</header>
</body>
</html>

এবার index.html ফাইল এক াউজাের ওেপন ক ন ।

এইচ এমএল নভ (HTML Nav)

28 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
ওেয়বসাইেট মনু দওয়ার জন এইচ এমএল নভ ট াগ ব বহার করা হয় । এছাড়া, একািধক িলংক দওয়া জন ও
এইচ এমএল নভ ট াগ ব বহার করা হয় ।

িবষয় আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Nav </title>
</head>
<body>
<nav>
<a href="http://www.softtech-it.com"> SoftTech-IT </a>
<a href="http://www.softtech-blog.com"> SoftTech-Blog </a>
</nav>
</body>
</html>

এবার index.html ফাইল এক াউজাের ওেপন ক ন ।

এইচ এমএল সকশন (HTML Section)

ওেয়বসাইট এক বা একািধক সকশন থাকেত পাের । েত ক সকশন এ এইচ এমএল সকশন (HTML Section)
ট াগ ব বহার করা হয় ।

িবষয় আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Tutorial </title>
</head>
<body>

29 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
<section>
<h2> HTML </h2>
<p> HTML is a markup Language. It is Easy to Learn. </p>
</section>
<section>
<h2> HTML </h2>
<p> HTML is a markup Language. It is Easy to Learn. </p>
</section>
</body>
</html>

এবার index.html ফাইল এক াউজাের ওেপন ক ন ।

এইচ এমএল আ েকল (HTML Article)

আমরা যিদ কান পা িলখেত চাই তাহেল আমরা এইচ এমএল আ েকল (HTML Article) ট াগ ব বহার করেত
পাির । অথাৎ গ পা , ফারাম, গ , ইত ািদ লখার জন এইচ এমএল আ েকল ট াগ ব বহার করা হয় ।

িবষয় আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Tutorial </title>
</head>
<body>
<article>
<h2> HTML </h2>
<p> HTML is a markup Language. It is Easy to Learn. </p>
</article>
</body>

30 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
</html>

এবার index.html ফাইল এক াউজাের ওেপন ক ন ।

এইচ এমএল ফুটার (HTML Footer)

এক ওেয়বসাইট শেষ ফুটার অংশ থােক । ওেয়বসাইট এর ফুটার এিরয়া িনধারণ কের দওয়ার জন এইচ এমএল
Footer ট াগ ব বহার করা হয় । অথাৎ, এক ওেয়বসাইট এর ফুটার এ কিপরাইট তথ থাকেত পাের, সাইটম াপ থাকেত
পাের, যাগােযাগ তথ থাকেত পাের । এসব কে সব সময় এইচ এমএল ফুটার ট াগ এর িভতের থােক ।

িবষয় আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Tutorial </title>
</head>
<body>
<footer>
<p> Copyright &copy; Jihadur Rahman Noyon - All Rights Reserved. </p>
</footer>
</body>
</html>

এবার index.html ফাইল এক াউজাের ওেপন ক ন ।

31 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক

এইচ এমএল অিডও (HTML Audio)

ওেয়বসাইট এ অিডও যাগ করার জন এইচ এমএল অিডও ট াগ ব বহার করা হয় । এইচ এমএল <audio> </audio>
ট াগ িভতের <source /> ট াগ ব বহার করেত হয় । <source /> ট াগ এ src আ িবউট এ অিডও ফাইেলর
এ েট ানসহ ফাইেলর নাম িদেত হেব ।

িবষয় আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Audio </title>
</head>
<body>
<audio>
<source src="something.mp3" />
</audio>
</body>
</html>

এবার index.html ফাইল এক াউজাের ওেপন ক ন ।

ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত

সফটেটক-আই ু েড স ফারাম েপ ক ন

32 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক

এইচ এমএল িভিডও (HTML Video)

ওেয়বসাইট এ িভিডও যাগ করার জন এইচ এমএল িভিডও ট াগ ব বহার করা হয় । এইচ এমএল িভিডও ট াগ ব বহার
করার িনয়ম অেনকটা এইচ এমএল অিডও ট াগ এর মতই । এইচ এমএল <video> </video> ট াগ িভতের <source
/> ট াগ ব বহার করেত হয় । <source /> ট াগ এ src আ িবউট এ িভিডও ফাইেলর এ েট ানসহ ফাইেলর নাম িদেত
হেব ।

িবষয় আরও ভােলাভােব বু ঝেত িনেচর কাডটু িলেখ index.html নােম সভ ক ন;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Video </title>
</head>
<body>
<video>
<source src="something.mp4" />
</video>
</body>
</html>

এবার index.html ফাইল এক াউজাের ওেপন ক ন ।

33 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক

ধন বাদ আপনােক এইচ এমএল৫ বই পড়ার জন ।

এই বই স েক কান ম ব , িকংবা কান সমস া থাকেল আমােক অবগত ক ন । বই
পেড় আপনারা কতটু িশখেত পেড়েছন, তা আমােক জানােত ভুলেবন না এবং বই েত
কান ভুল -খুঁেজ পেল অবশ ই আমােক জানােবন । তাহেল, আিম বই র পরবত
সং রেণ ভুল সংেশাধন করার চ া করেবা ।

- িজহা র রহমান নয়ন

34 | P a g e