Professional Documents
Culture Documents
HTML5 Bangla Ebook
HTML5 Bangla Ebook
থম কাশ
০৮ িডেস র, ২০১৫
২৪ অ হায়ণ, ১৪২২
২৫ সফর, ১৪৩৭
লখক
মাহা দ িজহা র রহমান নয়ন
ই- মইলঃ 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
এইচ এমএল ৫ বাংলা ই-বু ক
থম অধ ায়
এই অধ ােয় আমরা এইচ এমএল এর িসনট া িনেয় আেলাচনা করেবা । এই অধ ায় থেকই আপিন এইচ এমএল
কাড লখা করেত পাড়েবন ।
ওেয়ব িডজাইন এবং ডেভলপেম শখার থম ধাপ হে এইচ এমএল । অথাৎ, ওেয়ব িডজাইন িকংবা
ডেভলপেম যা-ই িশখু ন না কন আপনােক থেম এইচ এমএল িশখেত হেব । তেব, এইচ এমএল শখা খু বই সহজ
। ভােলাভােব াক স করেল আপিন িকছু িদেনর মেধ ই এইচ এমএল িশখেত পারেবন ।
ট ট এিডটর ই টল করাঃ এইচ এমএল িশখেত হেল আপনার কি উটার এ এক ট ট এিডটর ই টল করা
থাকেত হেব । িত কি উটার এ উইে াজ ই টল দওয়ার পর িডফ ভােব নাটপ াড (Notepad) ই টল করা
থােক । আপিন চাইেল নাটপ াড াস াস ব বহার করেত পােরন । নাটপ াড াস াস এ বশিকছু বাড়িত িফচার পােবন
। এছাড়া, আরও বশ িকছু ট ট এিডটর রেয়েছ । অন ান ট ট এিডটর স েক জানেত এবং ব বহার করেত
(http://softtech-blog.com/5-popular-code-editors/) এই লখা পড়ুন ।
ওেয়ব াউজার ই টল করাঃ এরপর আপনার কি উটার এ এক ওেয়ব াউজার ই টল করা থাকেত হেব । েত ক
কি উটার এ িডফ ভােব াউজার ই টল করা থােক । েত ক কি উটার এ িডফ ভােব াউজার ই টল করা থােক
। তেব, সটা ই ারেনট এ ে ারার । বশীরভাগ সময় ল করেবন, এসব াউজােরর ভাসন পু রেনা । তাই, আিম
আপনােক বলেবা এক নতুন ভাসেনর াউজার ই টল করার জন । এে ে , আপিন মািজলা ফায়ারফ অথবা গল
5|P a ge
এইচ এমএল ৫ বাংলা ই-বু ক
াম ব বহার করেত পােরন । এছাড়া, আপিন চাইেল অন ান আপে েডট ভাসেনর াউজার ব বহার করেত পােরন ।
এটা, স ূ ণ আপনার িচর উপর িনভরশীল ।
ফাইেলর এ েট ান দশন করােনাঃ আপনারা দখেবন য, আপনােদর কি উটােরর কান ফাইেলর শেষ
ফাইেলর ফরম াট লখা থােক না । অথাৎ, ফাইল কান ফরম াট এ আেছ তা লখা থােক না । যমনঃ সাধারণভােব
এক ছিব আপনার কি উটার এ থাকেব image_name নােম । যিদ আপিন ফাইল এ েটনশন দশন করান তাহেল
ছিব থাকেব image_name.png নােম । ফেল, আমরা সহেজই ফাইেলর ফরম াট সনা করেত পাির । জাভাি
শখার জন কি উটােরর ফাইল ফাইল এ েটনশন দশন করােনা জ ির িকছু নয় । তেব, আপিন আপনার সু িবধার জন
ফাইল এ েটনশন দশন করােত পােরন ।
আপনার কি উটােরর ফাইল ফাইল এ েটনশন দশন করার জন , Control Panel>Folder Options থেক
View এ ি ক করেবন এরপর Hide extensions for known file types থেক কিচ তুেল িদেবন । সবেশষ,
Apply স কের OK বাটেন ি ক করেবন ।
এবার আপনার কি উটােরর িত ফাইেলর এ েটনশন দখেত পাড়েবন । অথাৎ, এক এইচ এমএল ফাইেলর নােমর
পর .html থাকেব, এক িসএসএস ফাইেলর নােমর পর .css থাকেব । ফেল, আপিন সহেজই ফাইেলর ফরম াট সনা
করেত পাড়েবন ।
6|P a ge
এইচ এমএল ৫ বাংলা ই-বু ক
</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> িলখেবা । সব
এইচ এমএল এর েত এই ডক টাইপ ব বহার করেত হেব । অেনেক এইচ এমএল ডকটাইপ এ দন না । িক ,
েফশনাল হেত হেল এ িবষয় কখেনা এিড়েয় যােবন না । কননা, ডকটাইপ ব বহার না করেল িকছু াউজাের কমত
আউটপু ট আেস না । তাই, েত ক এইচ এমএল ফাইেলর েত ডকটাইপ ব বহার করেবন ।
২ । ি তীয় লাইন বু ঝােনার আেগ আিম আপনােদর কােছ এইচ এমএল ট াগ স েক আেলাচনা কের িনই । উপেরর
িলিখত 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> সকশন ।
৫ । আমরা চতুথ লাইন এ meta নােম একটা ট াগ ব বহার কেরিছ । মটা ট াগ এর িভতের charset লখা হেয়েছ। এটােক
বলা হয় এ িবউট । পরবত েত অ া িবউট স েক আরও ধারণা পােবন । ল কের দখু ন meta একটা িসে ল ট াগ ।
কারন, এই ট াগ হেয়েছ িক এই ট াগ এর শষ করা হয়িন । একটা ওেয়বসাইট এর সম লখা কান ফরম াট এ
থাকেব সটা িনেদশ করার জন charset আ িবউট ব বহার করা হয় ।
8|P a ge
এইচ এমএল ৫ বাংলা ই-বু ক
৬ । অ ম লাইন এ Hello World! িলেখিছ এবং এটা াউজাের দিশত হেয়েছ । এটা হে এইচ এমএল ইিলেম ।
করার ট াগ এবং শষকরার ট াগ এর মাঝখােন ইিলেম থােক এবং ইিলেম াউজাের দিশত হয়। িক , ট াগ
াউজাের সরাসির দিশত হয় না ।
সবেশেষ, আপিন ফাইল index.html নােম সভ কেরেছন । এখােন আপিন index লখার পিরবেত যেকােনা ট ট
িলখেত পােরন । এটা আপনার ই া । তেব .html এ েটনশন ক রাখেত হেব । অথাৎ ফাইেলর নােমর পর .html
থাকেত হেব । অেনেক .html এর পিরবেত ভুল কের .txt িদেয় সভ কের াউজাের ওেপন করান । িক এেত কাজ
করেব না ।
<!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
এইচ এমএল ৫ বাংলা ই-বু ক
অথাৎ এইচ এমএল ট ােগর নােমর পের একটা স িদেয় আ িবউট এর নাম িদেত হেব । এরপর একটা সমান (=) িচ
িদেয় ইনভােটড কমা (" ") এর িভতের আ িবউট এর ভ ালু িদেত হেব । এখন আমরা এইচ এমএল আ িবউট এর
একটা উদাহরন দখেবা ।
<meta charset="UTF-8">
এখােন meta নােম একটা ট াগ ব বহার কেরিছ । মটা ট াগ এর িভতের charset="UTF-8" লখা হেয়েছ। এটােক
বলা হয় এ িবউট । এখােন charset লখা হে name এবং UTF-8 লখা হে Value.
10 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
ি তীয় অধ ায়
গত অধ ােয় আমরা এইচ এমএল শখার পূ ব িত স েক জানেবা । এইচ এমএল কাড িকভােব িলখেত হয় এবং
এইচ এমএল কেম িনেয় আেলাচনা কেরিছ । আশা কির থম অধ ায় বু ঝেত অসু িবধা হয়িন । যিদ আপিন থম অধ ায়
ভালভােব বু ঝেত পােড়ন তাহেল এখন থেক আপিন ি তীয় অধ ায় করেত পােড়ন । এ অধ ােয় আমরা
এইচ এমএল এর ট াগ িনেয় আেলাচনা করেবা ।
<!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
এইচ এমএল ৫ বাংলা ই-বু ক
<!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 ফাইল এক াউজাের দশন করান । তাহেল দখেত পারেবন লাইনসমূ হ িনেচ ইেচ সি ত হয়িন
।
<!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 ফাইল াউজাের দশন করান তাহেল ছয় হিডং এর প দখেত পারেবন । িত হিডং এর
পর আিমএইচ এমএল লাইন ক ট াগ ব বহার কেরিছ যন কাডসমূ হ িনেচ িনেচ সি ত হয় ।
এইচ এমএল িলংক স েক ভােলাভােব বু ঝেত িনেচর কাডটু এক ট ট এিডটর যমন নাটপ াড াস াস এ
িলেখ 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
এইচ এমএল ৫ বাংলা ই-বু ক
<!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 (অডার িল ): আমরা কান তািলকা যখন িমক সংখ া অনু যায়ী িলেখ থািক তখন আমরা এইচ এমএল
অডার িল ব বহারকরেত পাির । এখন একটা উদাহরণ িদেল ব াপার আপনােদর কােছ স ূ ণ পির ার হেয় যােব ।
এজন িনেচর কাডটু িলেখ 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 (আন অডার িল ): আমরা কান তািলকা যখন িমক সংখ া অনু যায়ী না িলেখ িল কাশ কের
থািক তখন আমরা এইচ এমএলআন অডার িল ব বহার করেত পাির । এখন একটা উদাহরণ িদেল ব াপার আপনােদর
কােছ স ূ ণ পির ার হেয় যােব ।
<!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 ব বহার না কেরন তাহেল বডারিবহীন টিবল াউজাের দিশত হেব ।
৩। টিবেলর Row অথাৎ সাির িনধারণ করার জন <tr>…</tr> ব বহার করা হেয়েছ ।
19 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
এইচ এমএল ফম
ওেয়বসাইেটর জন এইচ এমএল ফম খু বই পূ ণ । কান ওেয়বসাইট এ িনব ন ি য়া যু করার জন
এইচ এমএল ফম ব বহার করা হয় । এছাড়া, ওেয়বসাইট এ সাচ ব যু করার করার জন এইচ এমএল ফম ব বহার
করা হয় । এইচ এমএল ফম নতুনেদর জন থেম িকছু টা ক ন মেন হেত পাের ।
ট ট িফ
ওেয়বসাইট এ ফম পূ রণ করার সময় িভিজটরেক বশ িকছু তথ ( যমন; নাম, ই- মইল, কানা ইত ািদ) িদেয় ফম
সাবিমট করেত হয় । এসব কাজ আপিন ট ট িফ এর মাধ েম করেত পােরন ।
<!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>
20 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
পাসওয়াড িফ
ওেয়বসাইট এ ফম পূ রণ করার সময় িভিজটরেক ইউজার নম এবং পাসওয়াড িদেয় ফম সাবিমট করেত হয় । এসব কাজ
আপিন পাসওয়াড িফ এর মাধ েম করেত পােরন ।
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Form </title>
</head>
<body>
<form>
Password: <input type="password" />
</form>
</body>
</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>
চকব
আপিন যিদ এমন চান য িভিজটর একািধক িবষয় থেক এক বা একািধক িবষয় বাছাই কের ফম সাবিমট করেব তাহেল
রিডও বাটন ব বহার করেত পােরন ।
<!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>
22 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
পডাউন
পডাউন মনু তির করার জন সাধারণত এইচ এমএল পডাউন ব বহার করা হয় ।
<!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>
ট ট এিরয়া
আপিন যিদ চান য ওেয়বসাইেটর ব বহারকারী কান ম ােসজ অথাৎ বাতা িলেখ আপনার কােছ পাঠােব তাহেল আপিন
ট ট এিরয়া ব বহার করেবন ।
<!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>
সাবিমট বাটন
ওেয়বসাইেটর ফম সাবিমট করার জন সাবিমট বাটন ব বহার করেত হয় ।
<!DOCTYPE HTML>
<html>
<head>
<title> HTML Form </title>
</head>
<body>
<form>
<input type="submit" value="Submit" />
</form>
</body>
</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 © 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
এইচ এমএল ৫ বাংলা ই-বু ক
তৃতীয় অধ ায়
গত অধ ােয় আমরা এইচ এমএল এর বশ িকছু ট াগ িনেয় আেলাচনা কেরিছ । এই অধ ােয় আমরা এইচ এমএল ৫ এর
বশ িকছু ট াগ িনেয় আেলাচনা করেবা ।
<!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>
28 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
ওেয়বসাইেট মনু দওয়ার জন এইচ এমএল নভ ট াগ ব বহার করা হয় । এছাড়া, একািধক িলংক দওয়া জন ও
এইচ এমএল নভ ট াগ ব বহার করা হয় ।
<!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>
<!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>
<!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>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Tutorial </title>
</head>
<body>
<footer>
<p> Copyright © Jihadur Rahman Noyon - All Rights Reserved. </p>
</footer>
</body>
</html>
31 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Audio </title>
</head>
<body>
<audio>
<source src="something.mp3" />
</audio>
</body>
</html>
32 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Video </title>
</head>
<body>
<video>
<source src="something.mp4" />
</video>
</body>
</html>
33 | P a g e
এইচ এমএল ৫ বাংলা ই-বু ক
34 | P a g e