4. 4
সূচীপ]
িবষয় পৃeা নং
০১। এইচ এমএল িক? ৫
০২। এইচ এমএল শখার পূর5 hিত ৫
০৩। এইচ এমএল এর গঠন ৬
০৪। এইচ এমএল টAাগ, এ jিবউটস & ইিলেম" ৭
০৫। এইচ এমএল লাইনেkক-আপ & পAারাTাফ ১০
০৬। এইচ এমএল ট@ট ফরমAা ং ১৪
০৭। এইচ এমএল এনটাই & হিডং ১৫
০৮। এইচ এমএল কালার ১৭
০৯। এইচ এমএল িল' ১৯
১০। এইচ এমএল িল4 & ই- মইল ২৩
১১। এইচ এমএল ইেমজ, অিডও & িভিডও ২৫
১২। এইচ এমএল টিবল ২৯
১৩। এইচ এমএল ফ=ম ৩১
১৪। এইচ এমএল মটা টAাগ ৩৫
১৫। এইচ এমএল িডভ ৩৬
১৬। এইচ এমএল mম ৩৭
5. 5
িবসিমnািহর রাহমািনর রািহম
এইচ এমএল িক?
HTML (এইচ এমএল) এর পূ=ণ>প হে? Hyper Text Markup Language (হাইপার
ট@ট মা=কআপ লAাংBেয়জ). এটা এক মা=ক-আপ লAাংBেয়জ । ম বানারস লী ১৯৯০ সােল সর5 থম এই
মা=কআপ লAাংBেয়জ Fতির কGন । সর5 থম িতিনই ওেয়ব িনেয় গেবষণা কের ওেয়ব Fতরী কেরন ১৯৮৯ সােল
। তখন িতিন ইউেরােপর পাি=টকAাল িফিজ@ লAাবেরটিরর একজন কিUউটার িবেশষo িছেলন । ওয়া=p ওয়াইড
ওেয়েবর তqাবধান করেছ ওয়া=p ওয়াইড ওেয়ব কনেসাি=টয়াম (W3C) নােম এক অলাভজনক িতRান । ।
ম বানারস লী হে?ন এই অলাভজনক িতeােনর িডেরrর । ওেয়ব িডজাইন এবং ওেয়ব ডেভলপেম"
িশখেত এইচ এমএল েয়াজন হয় । এইচ এমএল এর মাধAেম খুব সহেজ এক ওেয়ব পইজ বানােনা যায় ।
মুলত এইচ এমএল হে? ওেয়ব িডজাইন এবং ডেভলপেম" শখার থম ধাপ । HTML শখা খুবই সহজ
।
আপিন এইচ এমএল না িশেখও িবিভs সফটওয়Aার বAবহার কের ওেয়ব পইজ Fতির করেত পােরবন ।
িকt, ওেয়ব পইজ Fতির করার িকছু cে] আপিন সফটওয়Aার বAবহার করেত পারেবন না অ=থাৎ
সফটওয়Aার এর মাধAেম আপনার সাইেটর যথাযথভােব কা'মাইজ করেত পারেবন না । কা'মাইজ করেত
িকংবা ওেয়ব সাইেটর জনA নতন আিuেকশন Fতির করেত আপনােক কািডং েয়াগ করেত হেবু । আর
কািডং িশখেত হেল অবশAই এইচ এমএল জানা থাকেত হেব । সহজ কথায়, আপিন যিদ ওেয়ব িডজাইন
িকংবা ওেয়ব ডেভলপেম" এর জগেত যেত চান তাহেল আপনােক সর5 থম এইচ এমএল িশখেতই হেব ।
তাই, ওেয়ব সাইট Fতির করেত এইচ এমএল শখার কান িবকv নই ।
এইচ এমএল শখার পূর5 hিত
এইচ এমএল িশখেত কিUউটার এর বিসক ধারণা থাকেলই চলেব । HTML িশখেত এক ট@ট
এিডটর ( যমন; Notepad) েয়াজন হেব । িত কিUউটার এ িডফwভােব নাটপAাড দওয়া থােক ।
তেব, আডভাx ট@ট এিডটর ( যমন; নাটপAাড uাস uাস) হেল ভাল হেব । কারণ, সাধারণ নাটপAাড এবং
নাটপAাড uাস uাস এর মেধA বশ িকছু পা=থকA রেয়েছ যা ববহার করেল বুঝেত পারেবন । এছাড়া, আপিন
অAােডািব ি{মওেয়ভার বAবহার করেত পােরন । আর সই সােথ কিUউটার এ এক ই"ারেনট kাউজার
( যমন; মািজলা ফায়ারফ@, Bগল _াম, অেপরা ইতAািদ) ইxটল করা থাকেত হেব । িত কিUউটার এ
িডফwভােব ই"ারেনট এ@uেরর kাউজার ইxটল করা থােক ।
নাটপAাড uাস uাস (Notepad ++) ডাউনেলাড করেত (http://notepad-plus-
plus.org/download/v6.3.3.html) এখােন ি•ক কGন ।
6. 6
এইচ এমএল এর গঠন
এইচ এমএল গঠেন ই সকশন থােক । এেদর মেধA এক হে? হড (<head>) সকশন এবং
অপর হে? বিড (<body>) সকশন । এছাড়া, এইচ এমএল িশখেত য শ‰Bিল ভালভােব জানেত হেবঃ
1. এইচ এমএল ইিলেম" (Elements)
2. এইচ এমএল টAাগ (Tag)
3. এইচ এমএল অAা jিবউট (Attribute)
*পরব=তীেত টAাগ, ইিলেম" এবং অAা jিবউট িনেয় িবhািরত আেলাচনা করা হেব ।
এইচ এমএল G করেত হেল থেম িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Page Title </title>
</head>
<body>
This my first Web Page!
</body>
</html>
এবার কাডBেলা index.html নােম সভ কGন । এখন, ফাইল ওেপন কGন দখেবন এক ওেয়ব
kাউজাের িনেচর মত দি=শত হেব;
7. 7
ব াখ াঃ এইচ এমএল লখার Gেত HTML শে‰র থেম Less than(<) এবং শেষ Greater
than ( >) িচ‘ িদেত হয়। যমন: <html> । এইচ এমএল এর িত টAাগ (িকছু বAিত_ম) G এবং
শষ করেত হয় । যমন; <body>…</body>
• এইচ এমএল এ বAব’ত html, head, title, body ইতAািদ এBেলা হে? টAাগ ।
• যেকান টAাগ <> িচ‘ িদেয় G হয়
• টAাগBেলা </> িচ‘ িদেয় শষ হয় ।
• েতAক টAাগ ছাট হােতর অcের(Small Letter) িলখেত হেব।
এইচ এমএল টAাগ
টAাগ এইচ এমএল এর এক অপিরহারA উপাদান । এইচ এমএল শখার মূল উে“শAই হে?
এইচ এমএল টAাগ এর কাজ সUে=ক অবগত হওয়া । এইচ এমএল G করার জনA টAাগ বAবহার করা হয় ।
টAাগ সরাসির kাউজাের দি=শত হেব না ।
টAাগ এর িতন অংশ থােকঃ
1. G করার টAাগ
2. ধারনকৃ ত টAাগ
3. শষ করার টAাগ
চলুন এক উদাহরণ দখা যাক;
<html>
<head>
<title> This is Page Title </title>
</head>
<body>
This my first Web Page!
</body>
</html>
এবার উপেরর কাডBেলা লcA কGন । উপের বAব’ত (<>) িচ‘Bেলা হে? G করার টAাগ,
(html) লখা হে? ধারনকৃ ত টAাগ । (</>) িচ‘Bেলা হে? শষ করার টAাগ ।
*টAাগ এর ব=ণ সব-সময় ছাট হােতর অcর হওয়া উিচত ।
8. 8
এইচ এমএল টAাগ এর তািলকা
টAাগ ব=ণনা
<html> </html> এইচ এমএল ড”েম" িনে=দশ কের
<head> </head> এইচ এমএল এর হড অংশ িনে=দশ কের ।
<title> </title> ড”েম" টাইেটল িনে=দশ কের।
<body> </body>) াTােমর মূল content অংশ িনে=দশ কের।
<h> </h> হডার িনে=দশ কের ।
<p> </p> পAারাTাফ িনে=দশ কের ।
<b> </b> Bold ( বাp) ট@ট িনে=দশ কের।
<i> </i> Italic (ইটািলক) ট@ট িনে=দশ কের।
<u> </u> Underline (আ•ারলাইন) ট@ট িনে=দশ কের ।
<a> </a> Anchor (িল4) টAাগ িনে=দশ কের ।
<font> </font> ফ" এর পAারািমটার িনে=দশ কের ।
<br/> লাইন kকআপ টAাগ
<img/> ইেমজ টAাগ
*িকছু িকছু টAাগ আেছ যBেলা শষ করার টAাগ ছাড়া । এসব টAাগ কান ইিলেম" ধারণ কের না ।
যমনঃ লাইন kক টAাগ (</br>) ।
এইচ এমএল ইিলেম"
ইিলেম" হে? এইচ এমএল(HTML) এর মূল কPjিবPু । ইিলেম" শে‰র অ=থ হে?
উপাদান/উপকরণ । অ=থাৎ, এ এইচ এমএল এর উপাদান । ইিলেম" থােক G করার টAাগ এবং শষ করার
টAাগ এর মােঝ ।
অ=থাৎ ইিলেম" এর গঠন,
<এখােন G করার টAাগ> এখােন ইিলেম" থাকেব </এখােন শষ করার টAাগ>
উদাহরণঃ
9. 9
<html>
<head>
<title> This is Page Title </title>
</head>
<body>
This my first Web Page!
</body>
</html>
এখােন, (This is Page Title This my first Web Page!) হে? ইিলেম" । এ
সরাসির kাউজাের দ=শন হেব । আর (html, head, title) এBেলা হে? টAাগ । এBেলা ইিলেম"
এর >েপর পিরব=তন কের । আসেল টAাগ এবং ইিলেম" এর মেধA বিশ পা=থকA নই ।
এইচ এমএল ইিলেম"
এ jিবউটস টAাগ ক িবেশিষত(Modify) কের । টAােগর cমতা বাড়ােনার জনA এ jিবউটস বAবহার
করা হয় । যখন, এইচ এমএল িদেয় এক টUেলট Fতির করা হেব তখন সই টUেলেটর িবিভs 'াইল,
মান বৃি— করেত এ jিবউটস বAবহার করেত হেব । এ jিবউটস এর কাজ অেনকটা িসএসএস এর মত ।
উদাহরণঃ
িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Example of Background Color </title>
</head>
<body bgcolor="black">
<font size="3" Face="New Time Roman" Color="red">
HTML Stands for Hyper Text Markup Language.
There are many reasons why HTML is important.
With HTML you can create your own Web site.
It is used in conjunction with JavaScript and CSS to make the page you see.
It is used to formtat the text, & links everthing you see on the page.
</font>
</body>
</html>
এবার কাডBেলা index.html নােম সভ কGন । এখন, ফাইল ওেপন কGন দখেবন এক ওেয়ব
kাউজাের িনেচর মত দি=শত হেব;
10. 10
এইচ এমএল লাইন kক-আপ
লাইন kক-আপ (<br/>) টAাগ বAবহার করেল লাইনBেলা িনেচ িনেচ সি˜ত হয় । মাইে_াসফট
ওয়া=ড এ আমরা িনেচ যাওয়ার জনA Enter বAবহার কির । Kক তমিন, এইচ এমএল এ িনেচ যাওয়ার জনA
লাইন kক-আপ টAাগ বAবহার করা হয় ।
উদাহরণঃ
িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Example of Line Breakup </title>
</head>
<body>
HTML Stands for Hyper Text Markup Language.
There are many reasons why HTML is important.
With HTML you can create your own Web site.
It is used in conjunction with JavaScript and CSS to make the page you see.
It is used to formtat the text, & links everthing you see on the page.
</body>
</html>
11. 11
এবার কাডBেলা index.html নােম সভ কGন । এখন, ফাইল ওেপন কGন দখেবন এক ওেয়ব
kাউজাের িনেচর মত দি=শত হেব;
উপের দখুন আিম লাইনBেলা িনেচ িনেচ লখা সেqও িনেচ িনেচ সি˜ত হয় িন ।
এবার িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Example of Line Breakup </title>
</head>
<body>
HTML Stands for Hyper Text Markup Language. <br/>
There are many reasons why HTML is important. <br/>
With HTML you can create your own Web site.<br/>
It is used in conjunction. <br/>
It is used to formtat the text.<br/>
</body>
</html>
এবার কাডBেলা index.html নােম সভ কGন । এখন, ফাইল ওেপন কGন দখেবন এক ওেয়ব
kাউজাের িনেচর মত দি=শত হেব;
12. 12
এইচ এমএল লাইন পAারাTাফ
আমরা যিদ এক রচনা/গv িলখেত যায় তাহেল স গv েক কেয়ক অনুে?দ এ িবভ™ কির ।
পAারাTাফ টAাগ বAবহার করেল েতAক অনুে?দ এর মাঝখােন ফাকা রাখা যােব । এজনA এক আি=টেকল ক
অনুে?দ এ িবভ™ করার জনA এইচ এমএল এ পAারাTাফ টAাগ বAবহার করেত হয় ।
উদাহরণঃ
িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Example Without Paragraph </title>
</head>
<body>
HTML (Hyper-text Mark-up Language) is what formats web pages. It is
used in conjunction with JavaScript and CSS to make the page you see. It is
used to formtat the text, layout, images, links, everthing you see on the page.
The combination of these three elements has come to be known as XHTML.
Without HTML there would be no websites or pages.
HTML Stands for Hyper Text Markup Language. There are many reasons
why HTML is important. With HTML you can create your own Web site. It
is used in conjunction with JavaScript and CSS to make the page you see. It
is used to formtat the text, & links everthing you see on the page.
13. 13
</body>
</html>
এবার কাডBেলা index.html নােম সভ কGন । এখন, ফাইল ওেপন কGন দখেবন এক ওেয়ব
kাউজাের িনেচর মত দি=শত হেব;
উপের দখুন আিম লাইনBেলা িনেচ িনেচ লখা সেqও িনেচ িনেচ সি˜ত হয় িন ।
এবার িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Example of Paragraph </title>
</head>
<body>
<p> HTML (Hyper-text Mark-up Language) is what formats web pages. It is
used in conjunction with JavaScript and CSS to make the page you see. It is
used to formtat the text, layout, images, links, everthing you see on the page.
The combination of these three elements has come to be known as XHTML.
Without HTML there would be no websites or pages. </p>
<p> HTML Stands for Hyper Text Markup Language. There are many
reasons why HTML is important. With HTML you can create your own
14. 14
Web site. It is used in conjunction with JavaScript and CSS to make the page
you see. It is used to formtat the text, & links everthing you see on the page.
</p>
</body>
</html>
এবার কাডBেলা index.html নােম সভ কGন । এখন, ফাইল ওেপন কGন দখেবন এক ওেয়ব
kাউজাের িনেচর মত দি=শত হেব;
*যিদ আপিন একলাইন এর বিশ ফঁ াকা রাখেত চান তাহেল আপনােক (<p>...</p> ) টAাগ
বAবহার করেত হেব ।
এইচ এমএল ট@ট ফরমAা ং
এক ওেয়ব সাইট Fতির করার সময় ওেয়ব সাইেটর ফ"Bেলার িবিভs Gপ দওয়া হয় । যমন;
বাp, ইতািলক, আ•ারলাইন ইতAািদ । ওেয়বেপেজর ফ"েক িবিভs Gপ িদেত এইচ এমএল ট@ট ফরমAা ং
বAবহার করা হয় ।
ট@ট ফরমAা ংBেলার মেধA বাp, ইতািলক, আ•ারলাইন-ই বAবহার করা হেয় থােক ।
<b>এখােন কান ট@ট িলখেত তা বাp আকাের দখােব </b>
<i> এখােন কান ট@ট িলখেত তা ইতািলক আকাের দখােব </i>
<u> এখােন কান ট@ট িলখেত তা আ•ারলাইন আকাের দখােব </u>
উদাহরণঃ
19. 19
পেয় যােবন । সফটওয়Aার সাইজ মা] ১১ িকেলাবাইট । সফটওয়Aার
(http://www.nattyware.com/pixie.php) এখান থেক ডাউনেলাড িদেত পারেবন । অথবা
(http://html-color-codes.info) সাইট এ কালারেকাড পােবন ।
এইচ এমএল িল'
এক পূ=ণা[ ওেয়বেপজ করার জনA যেথR টAােগর বAবহার আমরা িশেখিছ । এখন এইচ এমএল িল' টAাগ এর
িবhািরত জানেবা । িডকশনারী, টিলেফান গাইড, অAাে{স বুক, াইস িল' ইতAািদ িবিভs cে] িল' এর
বAবহার রেয়েছ । এখন এই িল' বা তািলকা Fতরী করার ি_য়া িশখেবা । সাধারণত এইচ এমএল এ ই ধরেনর
িল' বAবহার করা হয়;
1. অ=ডার িল' (Order List)
2. আন-অ=ডার িল' (Un-Order List)
অডার িল : অ=ডার িলR এ তািলকাBেলার িল' পরAায়_েম(িসিরয়াল) থােক । অ=ডার িল' Fতির করার জনA
(<ol>…</ol>) টAাগ বAবহার করা হয় । ‘OL’ দারা ‘Ordered List’ বুঝােনা হয় । এরপর, িত
িল' Fতির করার জনA (<li>…</li>) টAাগ বAবহার করেত হয় ।
উদাহরণঃ
িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Example of Ordered List </title>
</head>
<body>
<ol>This is Example Of Ordered List;
<li>List One</li>
<li>List Two</li>
<li>List Three</li>
<li>List Four</li>
<li>List Five</li>
</ol>
</body>
</html>
ফাইল ওেপন কGন দখেবন এক ওেয়ব kাউজাের িনেচর মত দি=শত হেব;
20. 20
অ=ডার িল' Fতির করার সময় বশ িকছু অAা jিবউট বAবহার করা হেয় থােক । যমন; িনেচর
কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Example of Order List </title>
</head>
<body>
<h4> Number Style </h4>
<ol type="1"/>
<li>Web Design </li>
<li>Web Development </li>
<li>SEO & Blogging </li>
<li> E-mail Marketing </li> <br/>
<h4> Roman Style </h4>
<ol type="I"/>
<li>Web Design </li>
<li>Web Development </li>
<li>SEO & Blogging </li>
<li> E-mail Marketing </li> <br/>
<h4> Letter Style </h4>
<ol type="A"/>
<li>Web Design </li>
<li>Web Development </li>
<li>SEO & Blogging </li>
<li> E-mail Marketing </li>
</body>
</html>
21. 21
এবার আপিন যিদ কাডBেলা এক kাউজাের দ=শন করান, তাহেল িনেচর িচে]র মত দখেত
পারেবন;
আন-অডার িল : আন-অ=ডার িলR এ তািলকাBেলার িল' পরAায়_েম(িসিরয়াল) থােক না । আন-অ=ডার
িল' Fতির করার জনA (<ul>…</ul>) টAাগ বAবহার করা হয় । ‘UL’ দারা ‘Un-Ordered List’
বুঝােনা হয় । এরপর, িত িল' Fতির করার জনA (<li>…</li>) টAাগ বAবহার করেত হয় ।
উদাহরণঃ
িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Example of Un-ordered List </title>
22. 22
</head>
<body>
<ul>This is Example Of Un-ordered List;
<li>List One</li>
<li>List Two</li>
<li>List Three</li>
<li>List Four</li>
<li>List Five</li>
</ul>
</body>
</html>
ফাইল ওেপন কGন দখেবন এক ওেয়ব kাউজাের িনেচর মত দি=শত হেব;
অ=ডার িল' এর মত আন-অ=ডার িল'ও Fতির করার সময় বশ িকছু অAা jিবউট বAবহার করা হেয়
থােক ।
যমন; িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<body>
<h3>Disc Style list</h3>
<ul type="disc">
<li>Web Design </li>
<li>Web Development </li>
<li>SEO & Blogging </li>
23. 23
<li> E-mail Marketing </li> <br/>
<h3>Square Style list</h3>
<ul type="square">
<li>Web Design </li>
<li>Web Development </li>
<li>SEO & Blogging </li>
<li> E-mail Marketing </li>
</body>
</html>
ফাইল ওেপন কGন দখেবন এক ওেয়ব kাউজাের িনেচর মত দি=শত হেব;
এইচ এমএল িল4
িল4 এইচ এমএল এর অতAO BGZপূ=ণ এক িবষয় । এক ওেয়বসাইেট িবিভs ইনফরেমশন
ইনেড@ থােক । ইনেড@ এর িত আইেটম এর উপর ি•ক করেল আেরক পজ চেল আেস । আর িনি=দR
িকছু ট@ট বা ইেমেজর সােথ এইচ এমএল ফাইেলর িলংক Fতির কের এই পজ Fতির করা হয় । িল4
দওয়ার জনA Anchor টAাগ বAবহার করা হয় এবং সােথ “href” অ=থাৎ Hypertext Reference
24. 24
িলখেত হেব । যমনঃ <a href= “এখােন সাইট এর িল4” >এখােন আপনার পছPমত নাম িদন যটােত
ি•ক করেল আপনার কািžত সাইট এ েবশ করেব </a>
িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Example of HTML Link </title>
</head>
<body>
<a href="http://www.tutopost.com">TutoPost Blog </a>
was created on 01 May, 2013. This is a site dedicated to teaching people
how to use WordPress & Search Engine Optimization
</body>
</html>
এবার কাডBেলা index.html নােম সভ কGন । এখন, ফাইল ওেপন কGন দখেবন এক ওেয়ব
kাউজাের িনেচর মত দি=শত হেব;
এখন আপিন যিদ “TutoPost Blog” ি•ক কেরন তাহেল www.tutopost.com এ েবশ করেব ।
এইচ এমএল ই- মইল
ওেয়বসাইেট যাগােযাগ Qাপন করার জনA মূলত ই- মইল বAবহার করা হয় । এইচ এমএল িল4 এর
মত ই- মইল এর জেনAও Anchor টAাগ বAবহার করা হয় । ই- মইেলর গঠন মূলত িল4 এর মত । যমন; <a
25. 25
href= “mailto: এখােন আপনার ইেমইল এে{স” >এখােন আপনার পছPমত নাম িদন যটােত ি•ক
করেল আপনার কািžত ইেমইল এ মইল করা যােব</a>
িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Example of HTML E-Mail </title>
</head>
<body>
f you require any more information or have any questions about our privacy
policy, please feel free to <a href=
"mailto:jihadur.rahman.noyon@gmail.com"> Contact Me </a> With Us.
</body>
</html>
এবার কাডBেলা index.html নােম সভ কGন । এখন, ফাইল ওেপন কGন দখেবন এক ওেয়ব
kাউজাের িনেচর মত দি=শত হেব;
এইচ এমএল ইেমইজ
ওেয়বেপইজেক আক=ষণীয়ভােব ফু েয় তলেত ইেমইজ বAবহােরর িবকv নইু । ইেমজ বAবহার করার
জনA (<img>) টAাগ বAবহার করা হয় । এটা মূলত এক িসে[ল টAাগ । যমনঃ <img scr= “এখােন
ইেমেজর এ@েটনসহ ইেমেজর নাম”/>
িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
26. 26
<html>
<head>
<title> This is Example of Images </title>
</head>
<body>
<img src="books.png"/>
</body>
</html>
এবার কাডBেলা এক নাটপAাড এ সভ কের তা kাউেজর ওেপন কGন;
এইচ এমএল অিডও
ওেয়ব সাইট এ অিডও সংেযাজন এক আক=ষণীয় প—িত । ওেয়ব সাইট এ অিডও সংেযাজন এর জনA
.wav অিডও বAবহার করা হেয় থােক । ওেয়ব সাইট এ অিডও সংেযাজন এর জনA অAাংকর টAাগ বAবহার করা
হেয় থােক । এটা মূলত এইচ এমএল িল4 এর মতই । যমনঃ <a href= “এখােন এ@েটনসহ অিডও
ফাইেলর নাম” >এখােন আপনার পছPমত নাম িদন যটােত ি•ক করেল অিডও চালু হেব </a>
িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Example of Audio </title>
</head>
<body>
<a href="Windows Battery Critical.wav"> Click to Play </a>
27. 27
</body>
</html>
এবার কাডBেলা এক নাটপAাড এ সভ কের তা kাউেজর ওেপন কGন;
“Click to Play” এ ি•ক করেল অিডও ফাইল চালু হেব ।
এইচ এমএল িভিডও
ওেয়ব সাইট এ িভিডও সংেযাজন এক আক=ষণীয় প—িত । ওেয়ব সাইট এ অিডও সংেযাজন এর
জনA mp4 ,mpg, avi, mov, vob িভিডও ফাইল বAবহার করা হেয় থােক । ওেয়ব সাইট এ িভিডও
সংেযাজন এর জনA অAাংকর টAাগ বAবহার করা হেয় থােক । এইচ এমএল িভিডও এবং এইচ এমএল অিডও
এর মেধA কান পা=থকA নই । যমন;
<html>
<head>
<title> This is Example of Video</title>
</head>
<body>
<a href="trailer.3gp"> Click to Play </a>
</body>
</html>
28. 28
“Click to Play” এ ি•ক করেল িভিডও ফাইল চালু হেব ।
এইচ এমএল ইেমজ, অিডও & িভিডও এর িকছু িনে=দশনা
১। এইচ এমএল ইেমজ, অিডও & িভিডও িনেয় আিম য উদাহরণBেলা িদেয়িছ সটার মেধA আমার
এইচ এমএল ফাইল ও আমার িমিডয়া একই িডেরrিরেত আেছ । .যিদ একসােথ না থােক তাহেল আপনােক
আপনার িমিডয়া ফাইল য িডেরrিরেত আেছ স দিখেয় িদেত হেব । যমনঃ মেন কGন, আপনার Fতির
করা এইচ এমএল ফাইল Desktop আেছ এবং আপনার িমিডয়া ফাইল (ইেমজ, অিডও & িভিডও)
My Document এ আেছ ।
এেcে] আপনার এইচ এমএল ফাইেলর কাড হেবঃ
<html>
<head>
<title> This is Example of Media </title>
</head>
<body>
<img src="C:/Documents and Settings/TutoPost/My
Documents/Downloads/books.png"/>
</body>
</html>
অ=থাৎ আিম উপেরর কাড এ আমার িমিডয়া ফাইেলর িডেরrির দিখেয় িদেয়িছ ।
২। যিদ আপিন ইেমজ কান ওেয়বসাইট থেক িদেত চান তাহেল ইেমেজর নােমর পিরবে=ত আপনার ইেমেজর
িল4 িদেত হেব । যমনঃ <img src="আপনার ইেমজ এর িল4"/>
এেcে] আপনার এইচ এমএল ফাইেলর কাড হেবঃ
<html>
<head>
<title> This is Example of Media </title>
</head>
<body>
<img src="http://books.itsbd.net/wp-content/uploads/2012/04/ books.png"/>
</body>
</html>
29. 29
৩। আপিন যিদ আপনার িমিডয়া ফাইল অনA পােশ (ডােন, মাঝখােন) বসােত চান তাহেল ইেমজ টAাগ এর
সােথ (align) এ jিবউট বAবহার করেত হেব ।
যমনঃ
<html>
<head>
<title> This is Example of Media </title>
</head>
<body>
<img align="right" src="http://books.itsbd.net/wp-
content/uploads/2012/04/html2.png"/>
</body>
</html>
*আশা কির বুঝেত পেরেছন ।
এইচ এমএল টিবল
ওেয়বসাইেট তথA উপQাপেনর জনA টিবল বAবহার করা হয় । ইচ এমএল এ টিবল Fতির করার জনA
(<table>…….<table>) টAাগ বAবহার করা হয় । টিবল Fতির করা মুটামু একট ঝােমলার কাজু ।
1. এইচ এমএল টিবল Fতির করার জনA (<table>…….<table>) টAাগ বAবহার করা হয় ।
2. (<table border="1">) এখােন টিবল এর ব=ডার িলখেত হেব । “1″ এর Qােন টিবল ব=ডার
িহেসেব "3" , "2" ইতAািদ বAবহার করেত পারেবন ।
3. (<tr> </tr>) টিবেলর সাির Fতির করার জনA বAবহার করা হয় ।
4. (<td> </td>) টিবেলর সল Fতির করার জনA বAবহার করা হয় ।
উদাহরণ;
িনেচর কাডBেলা িলেখ Table.html নােম সভ কGনঃ
<html>
<head>
<title> This is Example of Video </title>
</head>
<body>
<body>
31. 31
এইচ এমএল ফ=ম
এইচ এমএল ফ=ম ডাইনািমক সাইটেরর জনA অতAO BGZপূ=ণ িবষয় । এক ওেয়ব পইজ এর লগ
ইন িসে'ম, িনব¦ন িসে'ম, যাগােযােগর ফ=ম সহ বAবহারকারীর তথA সংTহ করা যায় এইচ এমএল ফ=ম এর
সাহােযA ।
এইচ এমএল ফ=ম Fতির করা একট কKনু । এইচ এমএল ফ=ম Fতির করার পূের5 বশ িকছু এ jিবউট এর বAবহার
জানেত হেবঃ
1. ট@ট & পাসওয়া=ড িফp
2. চকব@
3. রিডও বাটন
4. ট@ট এিরয়া
5. {পডাউন মনুA
6. সাবিমট & িরেসট বাটন ।
ট ট & পাসওয়াড িফ ঃ কান সাইট এ ফ=ম পূরণ করার সময় িকছু তেথAর উ§র িদেত হয় । আপিন য
জায়গায় তেথAর উ§র িদেত হয় স -ই হে? ট@ট িফp ।
চকব ঃ একসােথ এক বা একািধক অপশন বাছাই করার জনA চকব@ বAবহার করেত হয় ।
রিডও বাটনঃ একসােথ এক বা একািধক অপশন থেক এক অপশন বাছাই করার জনA রিডও বাটন বAবহার
করেত হয় ।
32. 32
ট ট এিরয়াঃ বAবহারকারী যখােন তার মAােসজ/বা=তা িলখেব স হে? ট@ট এিরয়া ।
পডাউন মনু ঃ একসােথ এক বা একািধক অপশন থেক এক অপশন বাছাই বািক অপশনBেলা আর
দখােব না । এই প—িত-ই হে? {পডাউন মনুA ।
সাবিমট & িরেসট বাটনঃ যখন কান িকছু কাশ করার জনA য বাটেন ি•ক করা হয় স -ই হে? সাবিমট
বাটন ।
এবার আসুন এক ফ=ম Fতির কির । এজনA িনেচর কাডBেলা িলেখ এক নাটপAাড এ সভ কGন;
<html>
<head>
<title> This is Example of HTML Form </title>
</head>
<body>
<center>
<font face="arial" size="5">
<u>
Provide Your Information
</u>
</font>
<br/><br/>
<form name="information" method="post"
action="information.php">
<font face="arial" size="3">
Your Name:
</font>
<input type="text" value="Insert Your name"
name="name">
<br/><br/>
<font face="arial" size="3">
Your E-mail:
</font>
<input type="text" value="Insert Your E-mail"
name="name">
<br/><br/>
<font face="arial" size="3">
Related Service
</font>
<select name="Services">
![বিসক এইচ এমএল
- মাঃ িজহা র রহমান নয়ন
[ থম সং রণ]
কাশনায়
ওেয়ব িডজাইন & ডেভলপেম" #প](https://image.slidesharecdn.com/basichtmlbyjihadurrahmannoyon-140501134805-phpapp01/85/basic-html-by-jihadur-rahman-noyon-1-320.jpg)
