1. বিসক এইচ এমএল
- মাঃ িজহা র রহমান নয়ন
[ থম সং রণ]
কাশনায়
ওেয়ব িডজাইন & ডেভলপেম" #প

2. 2
থম সং রণ
১১ আগ', ২০১৩
২৭ -াবন, ১৪২০
০৩ শাওয়াল, ১৪৩৪
লখক
মাঃ িজহা র রহমান নয়ন
ওেয়বসাইট: http://www.tutopost.com
ই- মইল: jihadur.rahman.noyon@gmail.com
ফইসবুক আইিড: www.fb.me/cybershot.info
কাশক
ওেয়ব িডজাইন & ডেভলপেম" #প
ফইসবুক #পঃ www.fb.me/groups/html.web
ওেয়বসাইটঃ http://www.itsbd.net
ডাউনেলাড িল4ঃ http://www.books.itsbd.net
সাির5ক সহেযািগতায়
মাঃ িজহান হাসান
ওেয়বসাইট: www.me.itsbd.net
ই- মইল: itpressbd@gmail.com
ফইসবুক: www.facebook.com/itpressbd

3. 3
িকছু কথা
HTML (এইচ এমএল) এর পূ=ণ>প হে? Hyper Text Markup
Language (হাইপার ট@ট মা=কআপ লAাংBেয়জ). এটা এক মা=ক-আপ লAাংBেয়জ । ম
বানারস লী ১৯৯০ সােল সর5 থম এই মা=কআপ লAাংBেয়জ Fতির কGন । ওেয়ব িডজাইন এবং
ওেয়ব ডেভলপেম" িশখেত এইচ এমএল েয়াজন হয় । মূলত, এইচ এমএল হে? ওেয়ব
িডজাইন এবং ডেভলপেম" শখার থম ধাপ । কননা, আমােদর দেহর কাঠােমা গঠন করার
জনA রেয়েছ ক4াল । Kক তমিন এইচ এমএল হে? এক ওেয়বসাইট এর ক4াল । অ=থাৎ, এ
এক ওেয়ব সাইেটর কাঠােমা গঠন কের ।
‘ বিসক এইচ এমএল বাংলা ই-বুক’ বই েত আিম িত িবষয় অতAO সুPরভােব
উপQাপন করার চRা কেরিছ । আিম মেন কির, একজন িবেগনার খুব সহেজই বই পেড়
এইচ এমএল িশখেত পারেবন । এই বই কােশ আিম িবেশষভােব ধনAবাদ জানাই, িজহান
হাসান ভাইেক িযিন বই কােশ আমােক উৎসাহ দান কেরেছন এবং সামিTকভােব সাহাযA
কেরেছন ।
এই বইেয়র পাঠক িহেসেব আপিন-ই হে?ন সবেচেয় বড় সমােলাচক । আপনার মOবAই
আমার কােছ অিত মূলAবান । সামিTক বAাপাের আপনােদর যেকােনা পরাম=শ আমােক উৎসািহত
কের । তাই, বই সUে=ক কান মOবA, V, অিভমত িকংবা সমসAা থাকেল আমােক অবগত
কGন । এছাড়া, আমার লখা বই েত কান ভলু -W খুঁেজ পেল অনুTহ কের আমােক জানােবন
। আিম পরব=তী সং রেণ তা সংেশাধন করার চRা করব ।
এই বই র সর5YZ আমার । তাই, অনুমিত বAতীত এই বইেয়র কান অংশ কিপ করেবন না
। েয়াজেন, বই র পূ=ণা[ কিপ সকেলর কােছ িবতরণ কGন ।
G হউক আপনার ওেয়ব িডজাইন & ডেভলপেম" এর যা]া । ভ কামনা রইল ।
- মাঃ িজহা র রহমান নয়ন
[সত=কতাঃ এই বই িব_েয়র জনA নয় । বই সU=ণ িবনামূেলA িবতরণেযাগAূ ]
[Caution: This book is not to sell. Its free to distribute]
© মাঃ িজহা র রহমান নয়ন bারা সর5YZ সংরিcত ।

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>&nbsp) ট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>
উদাহরণঃ

15. 15
িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Example for Text-Formatting </title>
</head>
<body>
<u> I am Underline </u> <br/>
<b> I am Bold <b/> <br/>
<i> I am Italic </i> <br/>
</body>
</html>
ওেয়ব kাউজাের কাডBেলা িনেচর মত দি=শত হেব;
এইচ এমএল এনটাই ঃ
অেনক সময় ওেয়ব পইজ এ কিপরাইট, šডমা=ক, রিজ'া=ড šডমা=ক এর িচ‘ িদেত হয় ।
এBেলা-ই হে? এনটাই । এনটাই হল Symbol এর কাvিনক িবষয় ।
েতAক এনটাই র Gেত এমপারেস• (&) িদেত হয় ।তারপর Entity এর নাম । যমনঃ © িলখেত হেল
&copy বAবহার করেত হেব ।
িকছু এনটাই জ

16. 16
এনটাই জ (Description) এনটাই র নাম (Input) দ=শন (Output)
Copyright &copy ©
Registered trademark &reg ®
Less than &lt <
Greater than &gt >
Quotation mark &quot “
Black diamond suit &diams ♦
Black heart suit &hearts ♥
Black clubs suit &clubs ♣
Black spade suit &spades ♠
Greek capital letter theta &Theta Θ
Trademark &trade ™
Black small circle &bull; •
Cent &cent; ¢
Ampersand &amp &
*এছাড়া (http://entitycode.com/) সাইট এ আরও এনটাই পােবন ।
এইচ এমএল হিডং
যখন পা' এর িশেরানাম লখা হয় তখন হিডং টAাগ বAবহার করা হয় । হিডং এর টAাগ ছয় ।
এBেলা হলঃ <h1>, <h2>, <h3>, <h4>, <h5> এবং <h6> । এই হিডং Bেলার মেধA সবেচেয়
বড় হল <h1> । বািক Bেলা _েম _েম ছাট ।
উদাহরণঃ
িনেচর কাডBেলা এক নাটপAাড এ িলখুন;
<html>
<head>
<title> This is Example for Heading </title>
</head>
<body>
<h1> This is Heading One </h1>
<h2> This is Heading Two </h2>
<h3> This is Heading Three </h3>
<h4> This is Heading Four </h4>
<h5> This is Heading Five </h5>
<h6> This is Heading Six </h6>

17. 17
</body>
</html>
ফাইল ওেপন কGন দখেবন এক ওেয়ব kাউজাের িনেচর মত দি=শত হেব;
এইচ এমএল কালার
ওেয়ব িডজাইন এ কালােরর BGZ অপিরহারA । এক ওেয়বেপইজ ক সুPর এবং ডাইনািমক করার
জনA কালার বAবহার করেত হেব । তাছাড়া, আমরা জািন কালার অ=থাৎ রং ছাড়া কান িকছু সুPর করা স›ব নয়
। আপিন িবিভs কালার বAবহার কের সাইট িডজাইন করেত পােরন ।
১৬ মৗিলক কালােরর নামঃ
Black, White, Green, Red
Blue, Yellow, Silver, Purple
Gray, Lime, Fuchsia, Aqua
Olive, Navy, Teal, Maroon.

18. 18
এইচ এমএল এ কালারBেলা দ=শন করার জনA কালার কাড বAবহার করা হয় । কালার কাড লখার জনA
ছয় িডিজট বAবহার করা হেয় থােক । যমন; “কাল” রেঙর কালার কাড “000000”
এইচ এমএল কালার কাডসমূহ
এছাড়া, Pixie নামক সফটওয়Aােরর মাধAেম যেকােনা সাইেটর কালার কাড জানেত পারেবন । আপিন য
এক ওেয়বসাইেটর অংেশর কালার কাড চান সই অংেশ মাউস পেয়"ার রাখেলই কািžত কালার লাড

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>

30. 30
<table border="1">
<tr>
<th>SN</th>
<th>Name</th>
<th>Course</th>
<th>Price</th>
</tr>
<td>01</td>
<td>SEO</td>
<td>1 Months</td>
<td>3,000 </td>
</tr> <tr>
<td>02</td>
<td>Web Design</td>
<td>3 Month</td>
<td>5,000</td>
</tr> <tr>
<td>03</td>
<td>Web Development</td>
<td>6 Months</td>
<td>10,000</td>
</tr> <tr>
<td>04</td>
<td> Graphics Design</td>
<td>6 Months</td>
<td>15,000</td>
</tr> <tr>
</table>
</body>
</html>
এবার কাডBেলা এক নাটপAাড এ সভ কের তা kাউেজর ওেপন কGন;

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

33. 33
<option>Web Design </option>
<option> Web Development </option>
<option> SEO </option>
<option> Hosting </option>
<option> Domain </option>
</select>
<br/><br/>
<font face="arial" size="3">
Department:
</font>
<input type="checkbox" value="checkbox1"
name="checkbox">
<font face="SolaimanLipi" size="4">
Sales
</font>
<input type="checkbox" value="checkbox"
name="checkbox">
<font face="SolaimanLipi" size="4">
Technical Support
</font>
<br/><br/>
<font face="arial" size="3">
<font face="arial" size="3">
Priority:
</font>
<select name="Prioity">
<option>High</option>
<option> Medium </option>
<option> Low </option>
</Select>
<br/><br/>
Your Massage:
</font>
<textarea rows="5" cols="30"></textarea><br />
<font face="SolaimanLipi" color="#fe0321" size="4">
<input type="submit" name="submit" value="Submit">
<br/><br/>
<input type="reset" value="Back" name="clear">
</form>
</center>

34. 34
</body>
</html>
এবার কাডBেলা এক নাটপAাড এ সভ কের তা kাউেজর ওেপন কGন;
কাড"েলার ব াখ াঃ
Input Type: িফp(খািলঘর) িক হেব তা এখােন িলখেত হেব ।এখােন “Text” িসেলr করেত হেব ।
Value: িফp(খািলঘর) এ বাকA িক থাকেব তা এখােন িলখেত হেব । যমন, আিম িলেখিছ
(value=”Insert Your Name”) ।

35. 35
Size: িফp(খািলঘর) কতট” ল©া হেব তা িলখেত হেবু ।
Max Length: িফp(খািলঘর) এ সের5াª কত ব=ণ লখা যােব তা এখােন িলেখ িদেত হেব । যমন, আিম
(maxlength=”15″) িদেয়িছ । এখন ১৫ র বিশ ব=ণ িদেয় নাম লখা যােব না ।
Name: এ িদেয় এ jিবউট এর নাম িচি‘ত করা যায় । এ বAবহার করার ফেল সহেজই বুঝা যােব য িক
এ jিবউট বAবহার করা হেয়েছ ।
এইচ এমএল মটা টAাগ
সাধারণত মটা টAাগ বAবহার কের িকওয়া=ড Qাপন করা হেয় থােক । মটা টAাগ সা=চ ইি«ন
অপ মাইেজশেনর জনA অতAO BGZপূ=ণ । মটা টAাগ ধু এইচ এমএল এর নয় সা=চ ইি«ন অপ মাইেজশন
(এসইও) এর এক BGZপূ=ণ অংশ । আপনার ওেয়ব সাইট এর িভিজটর বাড়ােনার সবেচেয় সহজ উপায় হে?
এসইও । িভিজটর হে? ওেয়বসাইট এর াণ । অ=থাৎ, িভিজটর ছাড়া ওেয়বসাইট এর কান মূলA নই । আপিন
যিদ একবার আপনার সাইট Bগেলর থম পেজ িনেয় আসেত পােরন তাহেল আপনােক আর িভিজটর িনেয়
িচOা করেত হেব না । সুতরাং, আপনার সাইট Bগেলর থম পেজ আনার জনAই এসইও ।
মটা টAাগ <head>…</head> এর মােঝ বসােত হয় ।
<meta name="description" content="এসইও করার জনA এখােন সাইেটর সংিc¬ িববরণ
িলখেত হেব"/>
যমনঃ <meta name="description" content="TutoPost Blog was created
on 01 May, 2013. This is a site dedicated to teaching people how to use
WordPress & Search Engine Optimization"/>
<meta name="keywords" content="এখােন সাইেটর জনA িকওয়া=ডBেলা িলখেত হেব"/>
যমনঃ <meta name="keywords" content="wordpress tutorial,
Wordpress Plugin, tutorials, WP tutorial step by step, theme
development tutorial"/>
এইচ এমএল িডভ

36. 36
ওেয়বসাইটেক িবিভs অংেশ িবভ™ করার জনA এইচ এমএল িডভ বAবহার করা হয় । ডাইনািমক
সাইট Fতির করেত িডভ এর িবকv নই । Div এিলেম" Bেলা হেলা Block এিলেম" যারা অOরােল থেক
অনAানA টAাগ Bেলােক একে] কের। এছাড়া, িডভ িসএসএস এর এক অতAO BGZপূ=ণ এক উপাদান ।
িনেচর কাড িলেখ Div.html নােম সভ কGনঃ
<html>
<head>
<title> Beginner Wordpress & SEO Tutorial </title>
</head>
<center>
<body bgcolor="#1189B7" text="#FFFFFF">
<h1>
TutoPost
</h1>
</br>
</center>
<div id="categories" align="center">
<a href="/">HOME</a> |
<a href="/">About Us</a> |
<a href="/">Contact Us</a> |
<a href="/">FAQ</a> |
<a href="/">Privacy</a> |
<a href="/">Terms</a> |
</div>
</body>
</html>
এবার কাডBেলা এক নাটপAাড এ সভ কের তা kাউেজর ওেপন কGন;

37. 37
এইচ এমএল mম
ওেয়বসাইেট বAব’ত এক পইজ এর ভতের আেরক পইজ দ=শন করেত এইচ এমএল mম
বAবহার করেত হয় । এছাড়া, ওেয়বসাইটেক িবিভs অংেশ িবভ™ করার জনA এইচ এমএল mম বAবহার করা
হয় । mম বAবহার করার জনA (<frame>….</frame>) টAাগ বAবহার করা হয় এবং সােথ “src”
অ=থাৎ Source িলখেত হেব । যমনঃ <frame scr= “এখােন এক এইচ এমএল ফাইল িকংবা কান
ওেয়ব সাইেটর Kকানা”> </frame>
িত mম বAবহার করার সময় এর height এবং width িন=ধারণ কের িদেত হয় ।
ব=তমােন, mম তমন বAবহার করা হয় না । িদন িদন mেমর বAবহার ®াস পাে? । কননা,
ওেয়বসাইেট অিতির™ mেমর বAবহার ওেয়বসাইেটর লআউট জ ল হেয় পেড় । এেত িবিভs সমসAা দখা
দয় । তাই, এইচ এমএল mম িনেয় তমন আেলাচনা করলাম না । তেব, মুটামু একটা ধারনা দওয়া হেয়েছ
।

38. 38
“ধনAবাদ বই পড়ার জনA । বই সUে=ক কান মOবA, V, অিভমত িকংবা
সমসAা থাকেল আমােক অবগত কGন । এছাড়া, আমার লখা বই েত কান
ভলু -W খুঁেজ পেল অনুTহ কের আমােক জানােবন । আিম পরব=তী
সং রেণ তা সংেশাধন করার চRা করব ।”
―সমা¬―