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

2 | P a g e

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

লখক মাহা দ িজহা র রহমান নয়ন

ই- মইলঃ 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/

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

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

3 | P a g e

িকছু কথা

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

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

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

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

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

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

4 | P a g e

সূচীপ থম অধ ায়

-এইচ এমএল িক? -এইচ এমএল শখার পূব িত -এইচ এমএল িসনট া -এইচ এমএল ইিলেম -এইচ এমএল আ িবউট -এইচ এমএল কেম - এইচ এমএল ভ ািলেডটর

ি তীয় অধ ায় -এইচ এমএল প ারা াফ -এইচ এমএল লাইনে ক - এইচ এমএল হিডং -এইচ এমএল িলংক - এইচ এমএল ইেমজ -এইচ এমএল িল - এইচ এমএল টিবল -এইচ এমএল ফম - এইচ এমএল এনটাই - এইচ এমএল আইে ম

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

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

5 | P a g e

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

এইচ এমএল িক? HTML এর পূণ প হে Hyper Text Markup Language. এটা একটা মাকাআপ ল া ুেয়জ । এইচ এমএল কান

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

। ভােলাভােব াক স করেল আপিন িকছু িদেনর মেধ ই এইচ এমএল িশখেত পারেবন ।

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

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

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

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

ওেয়ব াউজার ই টল করাঃ এরপর আপনার কি উটার এ এক ওেয়ব াউজার ই টল করা থাকেত হেব । েত ক কি উটার এ িডফ ভােব াউজার ই টল করা থােক । েত ক কি উটার এ িডফ ভােব াউজার ই টল করা থােক

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

থম অধ ায়

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

6 | P a g e

াম ব বহার করেত পােরন । এছাড়া, আপিন চাইেল অন ান আপে েডট ভাসেনর াউজার ব বহার করেত পােরন । এটা, স ূণ আপনার িচর উপর িনভরশীল ।

মািজলা ফায়ারফ ডাউনেলাড করার জন (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 থাকেব । ফেল, আপিন সহেজই ফাইেলর ফরম াট সনা করেত পাড়েবন ।

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

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

7 | P a g e

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

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

উপের আমরা এইচ এমএল এর াকচার িলখলাম । এটা এইচ এমএল এর সবেশষ ভাসন এইচ এমএল ৫ এর াকচার । এবার আমরা এক উদাহরণ দখব এবং উদাহরেন িব ািরত আেলাচনা করেবা । এইচ এমএল করার জন থেমই িনেচর কাডটু নাটপ াড এ িলখুন: This is Title Hello World!

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

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

8 | P a g e

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

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

যাইেহাক, যেহতু আমরা এইচ এমএল৫ ব বহার করিছ তাই আমরা ধু িলখেবা । সব এইচ এমএল এর েত এই ডক টাইপ ব বহার করেত হেব । অেনেক এইচ এমএল ডকটাইপ এ দন না । িক ,

েফশনাল হেত হেল এ িবষয় কখেনা এিড়েয় যােবন না । কননা, ডকটাইপ ব বহার না করেল িকছু াউজাের কমত আউটপুট আেস না । তাই, েত ক এইচ এমএল ফাইেলর েত ডকটাইপ ব বহার করেবন ।

২ । ি তীয় লাইন বুঝােনার আেগ আিম আপনােদর কােছ এইচ এমএল ট াগ স েক আেলাচনা কের িনই । উপেরর িলিখত html, head, title, body েত ক েক ট াগ বলা হয় । একটু ল কের দখুন ট াগ Less Than িচ িদেয় হয় এবং Greater Than িচ িদেয় শষ হয় । তাই, , , , লখা হেয়েছ । ায়

েত ক ট াগ এর এবং শষ আেছ । তাই, যখন ট াগ হেয়েছ তখন ট াগ এভােব শষ হেয়েছ । ট াগ শষ করার জন Less Than িচে র পের একটা Forward Slash (/) িচ িদেত হয় । ট াগ সরাসির

াউজাের দশন কের না । তাই দখুন index.html ফাইল ওেপন করার পর কান ট াগ াউজাের দিশত হয়িন । ধু ইিলেম সমূহ াউেজর দিশত হয় । এইচ এমএল ট াগ এর মাঝখােন য ট ট থােক তা হে ইিলেম ।

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

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

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

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

9 | P a g e

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

াউজাের সরাসির দিশত হয় না ।

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

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

এইচ এমএল করার ট াগ এবং শষ করার ট াগ এর িভতের য কে থােক তা-ই হে ইিলেম । এক

এইচ এমএল ড েম ওেপন করেল আমরা াউজাের যা দখেত পাই, তাই হে ইিলেম ।

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

HTML Element

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

This is Title Hello World!

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

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

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

10 | P a g e

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

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

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

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

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

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

দিশত হয় না ।

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

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

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

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

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

11 | P a g e

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

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

এখন আমরা এইচ এমএল প ারা াফ ট াগ িনেয় আেলাচনা করেবা । এইচ এমএল এ কান ট ট লখার জন সাধারণত

এইচ এমএল প ারা াফ ট াগ ব বহার করা হয় । প ারা াফ ট াগ ব বহার কের আমরা ট টেক কেয়ক ভােগ িবভ

কের ফলেত পাির । এছাড়া, এ এইচ এমএল এর খুবই পূণ এক ট াগ । আপনােদর কােছ িবষয় পির ার করার

জন এখন এক উদাহরণ িদি । থেম িনেচর কাডটু এক ট ট এিডটর যমন নাটপ াড াস াস এ িলেখ

index.html নােম সভ ক ন;

HTML Paragraph

Bangladesh is our Country. It is a very beautiful Country.

It is a small country. But it has a Large Population.

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

িবভ হেয় গেছ ।

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

ি তীয় অধ ায়

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

12 | P a g e

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

এইচ এমএল লাইন ক ট াগ কান লাইন ক করার জন ব বহার করা হয় । আমরা মাইে াসফট কান ওয়াড লাইন

শষ কের নতুন লাইন করার জন িকেবাড এ এ ার (Enter) স কির । একইভােব এইচ এমএল এ কান লাইন

ছেড় নতুন লাইন করার জন এইচ এমএল লাইন ক -আপ ট াগ ব বহার করা হয় । লাইনে ক-আপ ট াগ

এইচ এমএল এর ব িত ম ট াগসমূেহর এক । কননা , লাইনে ক ট াগ অন ান ট াগ এর মত নয় । লাইন ক আপ

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

HTML Line Break

Bangladesh is our Country.

It is a Very Beatiful Country.

It has a large population.

এবার index.html ফাইল ওেপন কের দখুন লাইনসমূহ লাইন ক-আপ ট াগ অনুযায়ী শষ হেয়েছ । যিদ লাইনে ক

আপ ট াগ ব বহার করা ছাড়া উপেরর কাডটু র আউটপুট াউজাের দশন করােনা হেতা তাহেল কমন দখােতা সটা

জানেত লাইন ক –আপ ট াগ কেট িদেয় আবার াউজাের দশন করান । অথাৎ িনেচর কাডটু index.html নােম

সভ ক ন;

HTML Line Break

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

13 | P a g e

Bangladesh is our Country.

It is a Very Beatiful Country.

It has a large population.

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

।

এইচ এমএল হিডং

এখন আমরা এইচ এমএল হিডং িনেয় আেলাচনা করেবা । আমরা যখন কান কে এরিশেরানাম িলখেত যাই তখন

আমরা এইচ এমএল হিডং ট াগ ব বহার কির । এইচ এমএলএর হিডং ট াগ ছয় । এখন আমরা ছয় হিডং ট াগ এর

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

HTML Heading This is Heading One
This is Heading Two
This is Heading Three
This is Heading Four
This is Heading Five
This is Heading Six

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

14 | P a g e

এবার index.html ফাইল াউজাের দশন করান তাহেল ছয় হিডং এর প দখেত পারেবন । িত হিডং এর

পর আিমএইচ এমএল লাইন ক ট াগ ব বহার কেরিছ যন কাডসমূহ িনেচ িনেচ সি ত হয় ।

এইচ এমএল িলংক

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

ওেয়বসাইেটর মনুসহ ায় সব ধরেনর কে এ এইচ এমএল িলংক ব বহার করা হয় । এইচ এমএল এ িলংক ব বহার করার জন Anchor (অ ানেকার) ট াগ ব বহার করা হয় এবং সােথ href অ া িবউট ব বহার করা হয় । এইচ এমএল িলংক এর গঠন হে ;

Keyword

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

িলেখ index.html নােম সভ ক ন; HTML Link

Click Here to Visit SoftTech-Blog.

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

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

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

15 | P a g e

এইচ এমএল ইেমজ

ওেয়বসাইেটর জন ইেমজ ব বহার করা খুবই পূণ । এক ওেয়বসাইেটরেলােগা থেক কের িবিভ অংেশ

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

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

HTML Image

একটা িবষয় খয়াল রাখেবন, আপনার ইেমজ এবং এইচ এমএল ফাইল যিদ একসােথ থােকতাহেল এই প িতেত কাজ

করেব । যিদ, আপনার index.html ফাইল ড টপ এ এবং ইেমজ ফাইল এক images ফা ার এর িভতের থােক

তাহেল আপনােক এভােব িলখেত হেব ।

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

আসেব না ।

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

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

16 | P a g e

এইচ এমএল িল

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

এইচ এমএল িল ব বহার কির । এইচ এমএল এ সাধারণত ই ধরেনর িল রেয়েছ । এ ই িল হে ;

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

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

HTML List HTML CSS JavaScript PHP WordPress

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

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

17 | P a g e

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

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

HTML List HTML CSS JavaScript PHP WordPress

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

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

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

18 | P a g e

এইচ এমএল টিবল

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

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

HTML Table Serial No. Class Students 01 Class Six 90 02 Class Seven 90 03 Class Eight 88

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

19 | P a g e

04 Class Nine 87 05 Class Ten 89

কাড িবে ষণঃ

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

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

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

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

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

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

20 | P a g e

এইচ এমএল ফম

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

এইচ এমএল ফম তির করার জন … ট াগ ব বহার করা হয় এবং … ট াগ এর িভতের বশ িকছু ট াগ ব বহার করা হয় ।

ট ট িফ

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

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

HTML Form Name:
E-mail:

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

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

21 | P a g e

পাসওয়াড িফ

ওেয়বসাইট এ ফম পূরণ করার সময় িভিজটরেক ইউজার নম এবং পাসওয়াড িদেয় ফম সাবিমট করেত হয় । এসব কাজ আপিন পাসওয়াড িফ এর মাধ েম করেত পােরন ।

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

HTML Form Password:

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

রিডও বাটন

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

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

HTML Form

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

22 | P a g e

Priority: High
Medium
Low

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

চকব

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

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

HTML Form Department: Sales Support

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

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

23 | P a g e

পডাউন

পডাউন মনু তির করার জন সাধারণত এইচ এমএল পডাউন ব বহার করা হয় ।

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

HTML Form Marital Status: Married Unmarried

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

ট ট এিরয়া

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

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

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

24 | P a g e

HTML Form Massage:

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

সাবিমট বাটন

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

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

HTML Form

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

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

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

25 | P a g e

HTML Form Name:
E-mail:
Password:
Marital Status: Married Unmarried
Priority: High
Medium
Low
Department: Sales Support
Massage:

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

বুঝেত পারেবন না ।

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

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

26 | P a g e

আমরা ওেয়বসাইট এ কিপরাইট, ডমাক ইত ািদ িচ ব বহার কের থািক । এসব িচ হে এইচ এমএল এনটাই ।

এনটাই হয় এমপারেস )&( িচ ারা এরপর এনটাই নাম লখা হয় এবং শেষ এক সিমেকালন );( িদেত

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

HTML Entity

Copyright © Website Name - All Rights Reserved.

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

এইচ এমএল আইে ম

এইচ এমএল আইে ম বলেত বুঝায় আমােদর এইচ এমএল ফাইেলর একটা িনিদ জায়গার মেধ অন একটা

ওেয়বসাইেটর কে দশন করােনা । অথাৎ ,যিদ আপিন কখেনা এমন চান য ,আপনার ওেয়বসাইট এ অন একটা

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

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

index.html নােম সভ ক ন;

HTML IFrame

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

27 | P a g e

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

দিশত হেয়েছ ।

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

আ িবউট ব বহার করেত হেব । যমন;

HTML IFrame

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

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

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

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

28 | P a g e

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

বশ িকছু ট াগ িনেয় আেলাচনা করেবা ।

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

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

হডার ট াগ ব বহার করা হয় । অথাৎ, এক ওেয়বসাইট এর হডার এ এক বা একািধক হিডং থাকেত পাের, লােগা

থাকেত পাের, মনু থাকেত পাের । এসব কে সব সময় এইচ এমএল হডার ট াগ এর িভতের থােক ।

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

HTML Header SoftTech-Blog Let's Learn Something

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

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

তৃতীয় অধ ায়

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

29 | P a g e

ওেয়বসাইেট মনু দওয়ার জন এইচ এমএল নভ ট াগ ব বহার করা হয় । এছাড়া, একািধক িলংক দওয়া জন ও

এইচ এমএল নভ ট াগ ব বহার করা হয় ।

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

HTML Nav SoftTech-IT SoftTech-Blog

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

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

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

ট াগ ব বহার করা হয় ।

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

HTML Tutorial

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

30 | P a g e

HTML

HTML is a markup Language. It is Easy to Learn.

HTML

HTML is a markup Language. It is Easy to Learn.

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

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

আমরা যিদ কান পা িলখেত চাই তাহেল আমরা এইচ এমএল আ েকল (HTML Article) ট াগ ব বহার করেত

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

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

HTML Tutorial HTML

HTML is a markup Language. It is Easy to Learn.

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

31 | P a g e

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

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

এক ওেয়বসাইট শেষ ফুটার অংশ থােক । ওেয়বসাইট এর ফুটার এিরয়া িনধারণ কের দওয়ার জন এইচ এমএল

Footer ট াগ ব বহার করা হয় । অথাৎ, এক ওেয়বসাইট এর ফুটার এ কিপরাইট তথ থাকেত পাের, সাইটম াপ থাকেত

পাের, যাগােযাগ তথ থাকেত পাের । এসব কে সব সময় এইচ এমএল ফুটার ট াগ এর িভতের থােক ।

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

HTML Tutorial

Copyright © Jihadur Rahman Noyon - All Rights Reserved.

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

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

32 | P a g e

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

ওেয়বসাইট এ অিডও যাগ করার জন এইচ এমএল অিডও ট াগ ব বহার করা হয় । এইচ এমএল

ট াগ িভতের ট াগ ব বহার করেত হয় । ট াগ এ src আ িবউট এ অিডও ফাইেলর

এ েট ানসহ ফাইেলর নাম িদেত হেব ।

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

HTML Audio

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

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

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

33 | P a g e

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

ওেয়বসাইট এ িভিডও যাগ করার জন এইচ এমএল িভিডও ট াগ ব বহার করা হয় । এইচ এমএল িভিডও ট াগ ব বহার

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

হেব ।

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

HTML Video

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

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

34 | P a g e

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

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

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