Uploaded byShadowExclusive
1,029 views

HTML5 Bangla Ebook.pdf

HTML5 Bangla Ebook by Jihadur Rahoman Nayon

Embed presentation

Download to read offline
এইচ এমএল ৫ বাংলা ই-বুক 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 এইচ এমএল িসনট া এখন আিম এইচ এমএল এর গঠন স েক আেলাচনা করেবা । েত কটা লাইন বুঝার চ া ক ন । যিদ কান লাইন বুঝেত অসুিবধা হয় তাহেল আমােক জানােবন । মেন রাখেবন, এই অংশ ট ু না বুঝেল বািক অংশ বুঝেত পারেবন না । তাই মেনােযাগ িদেয় বুঝার চ া ক ন । থেম আমরা এইচ এমএল ৫ এর াকচার দখেবা; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> উপের আমরা এইচ এমএল এর াকচার িলখলাম । এটা এইচ এমএল এর সবেশষ ভাসন এইচ এমএল ৫ এর াকচার । এবার আমরা এক উদাহরণ দখব এবং উদাহরেন িব ািরত আেলাচনা করেবা । এইচ এমএল করার জন থেমই িনেচর কাডট ু নাটপ াড এ িলখুন: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> This is Title </title> </head> <body> Hello World! </body> </html> এবার কাডট ু নাটপ াড এ িলেখ index.html নােম সভ ক ন । তাহেল আপিন Hello World! লখা দখেত পারেবন ।
এইচ এমএল ৫ বাংলা ই-বুক 8 | P a g e কাড িবে ষণ আিম বুঝেত পারিছ আপনারা এখেনা হয়ত িকছুই বুঝেত পােরন িন । কান সমস া নই । আিম এখন িত লাইন আপানেদর বুিঝেয় িদি । ১। থম লাইন িলেখ াউজারেক বুঝােনা হেয়েছ য এটা একটা এইচ এমএল ড েম । আমরা এইচ এমএল৫ ব বহার করিছ তাই আমরা <!DOCTYPE HTML> ব বহার করিছ । যিদ আমরা এইচ এমএল ৪.০১ ব বহার করতাম তাহেল িনেচর মত িলখেত হেতা; <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> যাইেহাক, যেহতু আমরা এইচ এমএল৫ ব বহার করিছ তাই আমরা ধু <!DOCTYPE HTML> িলখেবা । সব এইচ এমএল এর েত এই ডক টাইপ ব বহার করেত হেব । অেনেক এইচ এমএল ডকটাইপ এ দন না । িক , েফশনাল হেত হেল এ িবষয় কখেনা এিড়েয় যােবন না । কননা, ডকটাইপ ব বহার না করেল িকছু াউজাের কমত আউটপুট আেস না । তাই, েত ক এইচ এমএল ফাইেলর েত ডকটাইপ ব বহার করেবন । ২ । ি তীয় লাইন বুঝােনার আেগ আিম আপনােদর কােছ এইচ এমএল ট াগ স েক আেলাচনা কের িনই । উপেরর িলিখত html, head, title, body েত ক েক ট াগ বলা হয় । একট ু ল কের দখুন ট াগ Less Than িচ িদেয় হয় এবং Greater Than িচ িদেয় শষ হয় । তাই, <html>, <head>, <title>, <body> লখা হেয়েছ । ায় েত ক ট াগ এর এবং শষ আেছ । তাই, যখন <html> ট াগ হেয়েছ তখন ট াগ </html> এভােব শষ হেয়েছ । ট াগ শষ করার জন Less Than িচে র পের একটা Forward Slash (/) িচ িদেত হয় । ট াগ সরাসির াউজাের দশন কের না । তাই দখুন index.html ফাইল ওেপন করার পর কান ট াগ াউজাের দিশত হয়িন । ধু ইিলেম সমূহ াউেজর দিশত হয় । এইচ এমএল ট াগ এর মাঝখােন য ট ট থােক তা হে ইিলেম । ৩ । ি তীয় লাইন হে ট াগ । সম এইচ এমএল কাড <html> ট াগ এর মােঝ িলখেত হয় । দশম লাইন এ <html> এর ট াগ শষ করা হেয়েছ । <html> ট াগ এর সকশন রেয়েছ এক হে <head> সকশনএবং অপর হে <body> সকশন । ৪। তৃ তীয় লাইন হে এক ট াগ যা ষ লাইন এ শষ হেয়েছ । একইভােব, <body> এক ট াগ যা পরবত েত ট াগ শষ করা হেয়েছ । ৫ । আমরা চতু থ লাইন এ meta নােম একটা ট াগ ব বহার কেরিছ । মটা ট াগ এর িভতের charset লখা হেয়েছ। এটােক বলা হয় এ িবউট । পরবত েত অ া িবউট স েক আরও ধারণা পােবন । ল কের দখুন meta একটা িসে ল ট াগ । কারন, এই ট াগ হেয়েছ িক এই ট াগ এর শষ করা হয়িন । একটা ওেয়বসাইট এর সম লখা কান ফরম াট এ থাকেব সটা িনেদশ করার জন charset আ িবউট ব বহার করা হয় ।
এইচ এমএল ৫ বাংলা ই-বুক 9 | P a g e ৬ । অ ম লাইন এ Hello World! িলেখিছ এবং এটা াউজাের দিশত হেয়েছ । এটা হে এইচ এমএল ইিলেম । করার ট াগ এবং শষকরার ট াগ এর মাঝখােন ইিলেম থােক এবং ইিলেম াউজাের দিশত হয়। িক , ট াগ াউজাের সরাসির দিশত হয় না । সবেশেষ, আপিন ফাইল index.html নােম সভ কেরেছন । এখােন আপিন index লখার পিরবেত যেকােনা ট ট িলখেত পােরন । এটা আপনার ই া । তেব .html এ েটনশন ক রাখেত হেব । অথাৎ ফাইেলর নােমর পর .html থাকেত হেব । অেনেক .html এর পিরবেত ভ ু ল কের .txt িদেয় সভ কের াউজাের ওেপন করান । িক এেত কাজ করেব না । এইচ এমএল ইিলেম এইচ এমএল করার ট াগ এবং শষ করার ট াগ এর িভতের য কে থােক তা-ই হে ইিলেম । এক এইচ এমএল ড েম ওেপন করেল আমরা াউজাের যা দখেত পাই, তাই হে ইিলেম । এইচ এমএল ইিলেম এর িসনট া হে ; <tagname> HTML Element </tagname> িবষয় আরও পির ার করার জন এখন আিম এক উদাহরন িদি ; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> This is Title </title> </head> <body> Hello World! </body> </html> উপেরর উদাহরেন আমরা Hello World! িলেখিছ এবং এটা াউজাের দিশত হেয়েছ । এটা - ই হে এইচ এমএল ইিলেম । করার ট াগ এবং শষকরার ট াগ এর মাঝখােন ইিলেম থােক এবং ইিলেম াউজাের দিশত হয় িক , ট াগ াউজাের সরাসির দিশত হয় না । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত সফটেটক-আই ু েড স ফারাম েপ ক ন
এইচ এমএল ৫ বাংলা ই-বুক 10 | P a g e এইচ এমএল আ িবউট এইচ এমএল আ িবউট খুবই পূণ একটা টিপক । এইচ এমএল এর িকছু ট াগ আেছ যা সাধারণভােব িলখেল কাজ কের না । এসব ট াগ এ অ া িবউট ব বহার করা হয় । এইচ এমএল আ িবউট এর ই অংশ থােক এক হে name এবং অপর হে Value. এইচ এমএল অ া িবউট লখার িনয়ম হে ; <tagname attributename="value"> This is Element </tagname> অথাৎ এইচ এমএল ট ােগর নােমর পের একটা স িদেয় আ িবউট এর নাম িদেত হেব । এরপর একটা সমান (=) িচ িদেয় ইনভােটড কমা (" ") এর িভতের আ িবউট এর ভ ালু িদেত হেব । এখন আমরা এইচ এমএল আ িবউট এর একটা উদাহরন দখেবা । <meta charset="UTF-8"> এখােন meta নােম একটা ট াগ ব বহার কেরিছ । মটা ট াগ এর িভতের charset="UTF-8" লখা হেয়েছ। এটােক বলা হয় এ িবউট । এখােন charset লখা হে name এবং UTF-8 লখা হে Value. এইচ এমএল কেম কাড কাশ করার জন কেম অত পূণ । আপিন যখন হাজারহাজার লাইন এইচ এমএল িলখেবন তখন আপিন কান কাড িক জন িলেখেছন তা িকভােব সনা করেবন? তাই, আমরা কেম ব বহার কের সহেজই বুঝেত পাির য কান কাড িক কারেন ব বহার করা হেয়েছ । এছাড়া, আপিন কেম ব বহার কের কান কােডর কায ম িগত রাখেত পােরন । অথাৎ, আপিন যিদ চান য এইচ এমএল কান অংশ িগত রাখেত পােরন । এইচ এমএল কেম াউজাের দিশত হয় না । এইচ এমএল কেম লখার িসনট া হে ; <!-- Write Your HTML Comment Here --> আশা কির বুঝেত পেড়েছন । এইচ এমএল ভ ািলেডটর আপিন িকছু এইচ এমএল কাড িলখেলন , এখন এসব কাড স ক িনয়েম লখা হেয়েছ িক না সটা পরী া করার জন আপিন এইচ এমএল ভ ািলেডটর ব বহার করেত পােরন । কাড ভ ািলেডট করার মাধ েম কাথাও ভ ু ল আেছ িকনা িকংবা কাড স ক িনয়েম িলেখেছন িকনা তা দখেত পারেবন । এইচ এমএল ভ ািলেডটর ব বহার করেত (https://validator.w3.org/) িলংক এ যান ।
এইচ এমএল ৫ বাংলা ই-বুক 11 | P a g e গত অধ ােয় আমরা এইচ এমএল শখার পূব িত স েক জানেবা । এইচ এমএল কাড িকভােব িলখেত হয় এবং এইচ এমএল কেম িনেয় আেলাচনা কেরিছ । আশা কির থম অধ ায় বুঝেত অসুিবধা হয়িন । যিদ আপিন থম অধ ায় ভালভােব বুঝেত পােড়ন তাহেল এখন থেক আপিন ি তীয় অধ ায় করেত পােড়ন । এ অধ ােয় আমরা এইচ এমএল এর ট াগ িনেয় আেলাচনা করেবা । এইচ এমএল প ারা াফ এখন আমরা এইচ এমএল প ারা াফ ট াগ িনেয় আেলাচনা করেবা । এইচ এমএল এ কান ট ট লখার জন সাধারণত এইচ এমএল প ারা াফ ট াগ ব বহার করা হয় । প ারা াফ ট াগ ব বহার কের আমরা ট টেক কেয়ক ভােগ িবভ কের ফলেত পাির । এছাড়া, এ এইচ এমএল এর খুবই পূণ এক ট াগ । আপনােদর কােছ িবষয় পির ার করার জন এখন এক উদাহরণ িদি । থেম িনেচর কাডট ু এক ট ট এিডটর যমন নাটপ াড াস াস এ িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Paragraph </title> </head> <body> <p> Bangladesh is our Country. It is a very beautiful Country. </p> <p>It is a small country. But it has a Large Population. </p> </body> </html> এবার কাডট ু এক াউজাের দশন করার দখেত পারেবন য আমরা য ট ট ব বহার কেরিছ তা ই অনুে েদ িবভ হেয় গেছ । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত সফটেটক-আই ু েড স ফারাম েপ ক ন ি তীয় অধ ায়
এইচ এমএল ৫ বাংলা ই-বুক 12 | P a g e এইচ এমএল লাইনে ক এইচ এমএল লাইন ক ট াগ কান লাইন ক করার জন ব বহার করা হয় । আমরা মাইে াসফট কান ওয়াড লাইন শষ কের নতু ন লাইন করার জন িকেবাড এ এ ার (Enter) স কির । একইভােব এইচ এমএল এ কান লাইন ছেড় নতু ন লাইন করার জন এইচ এমএল লাইন ক - আপ ট াগ ব বহার করা হয় । লাইনে ক - আপ ট াগ এইচ এমএল এর ব িত ম ট াগসমূেহর এক । কননা , লাইনে ক ট াগ অন ান ট াগ এর মত নয় । লাইন ক আপ ট াগ লখা হয় <br /> এভােব । িবষয় ভাল কের বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Line Break </title> </head> <body> <p> Bangladesh is our Country. </p><br /> <p>It is a Very Beatiful Country. </p><br /> <p>It has a large population. </p> </body> </html> এবার index.html ফাইল ওেপন কের দখুন লাইনসমূহ লাইন ক-আপ ট াগ অনুযায়ী শষ হেয়েছ । যিদ লাইনে ক আপ ট াগ ব বহার করা ছাড়া উপেরর কাডট ু র আউটপুট াউজাের দশন করােনা হেতা তাহেল কমন দখােতা সটা জানেত লাইন ক –আপ ট াগ কেট িদেয় আবার াউজাের দশন করান । অথাৎ িনেচর কাডট ু index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Line Break </title> </head>
এইচ এমএল ৫ বাংলা ই-বুক 13 | P a g e <body> <p> Bangladesh is our Country. </p> <p>It is a Very Beatiful Country. </p> <p>It has a large population. </p> </body> </html> এবার index.html ফাইল এক াউজাের দশন করান । তাহেল দখেত পারেবন লাইনসমূহ িনেচ ইেচ সি ত হয়িন । এইচ এমএল হিডং এখন আমরা এইচ এমএল হিডং িনেয় আেলাচনা করেবা । আমরা যখন কান কে এরিশেরানাম িলখেত যাই তখন আমরা এইচ এমএল হিডং ট াগ ব বহার কির । এইচ এমএলএর হিডং ট াগ ছয় । এখন আমরা ছয় হিডং ট াগ এর উদাহরণ দখেবা । এজন িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Heading </title> </head> <body> <h1>This is Heading One </h1><br /> <h2>This is Heading Two </h2><br /> <h3>This is Heading Three </h3><br /> <h4>This is Heading Four </h4><br /> <h5>This is Heading Five </h5><br /> <h6>This is Heading Six </h6><br /> </body> </html>
এইচ এমএল ৫ বাংলা ই-বুক 14 | P a g e এবার index.html ফাইল াউজাের দশন করান তাহেল ছয় হিডং এর প দখেত পারেবন । িত হিডং এর পর আিমএইচ এমএল লাইন ক ট াগ ব বহার কেরিছ যন কাডসমূহ িনেচ িনেচ সি ত হয় । এইচ এমএল িলংক ওেয়বসাইট এ এইচ এমএল িলংক খুবই পূণ । আমরা যখন ওেয়বসাইট এ কান িলংক িদেত চাই তখন এইচ এমএল িলংক ব বহার কের থািক । আমরা অেনক সময় পা এ দিখ য, সফটওয় ার ডাউনেলাড করেত এখােন ি ক ক ন’ এ রকম লখা । তখন সাধারণত ‘এখােন’ লখা েত এক িলংক যু থােক । ফেল, ‘এখােন’ লখা েত ি ক করেল নতু ন এক িলংক ওেপন হয় । এ প িত এইচ এমএল িলংক এর মাধ েম করা হয় । ওেয়বসাইেটর মনুসহ ায় সব ধরেনর কে এ এইচ এমএল িলংক ব বহার করা হয় । এইচ এমএল এ িলংক ব বহার করার জন Anchor (অ ানেকার) ট াগ ব বহার করা হয় এবং সােথ href অ া িবউট ব বহার করা হয় । এইচ এমএল িলংক এর গঠন হে ; <a href="link"> Keyword </a> এইচ এমএল িলংক স েক ভােলাভােব বুঝেত িনেচর কাডট ু এক ট ট এিডটর যমন নাটপ াড াস াস এ িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Link </title> </head> <body> <p> <a href="http://www.softtech-blog.com"> Click Here </a> to Visit SoftTech-Blog. </p> </body> </html> এখন index.html ফাইল াউজাের রান কিরেয় Click Here এ ি ক করেল সফটেটক গ এ চেল যােব । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম , ওয়াডে স এবং ি ল াি ং উেটািরয়াল পেত সফটেটক- গ িভিজট ক ন
এইচ এমএল ৫ বাংলা ই-বুক 15 | P a g e এইচ এমএল ইেমজ ওেয়বসাইেটর জন ইেমজ ব বহার করা খুবই পূণ । এক ওেয়বসাইেটরেলােগা থেক কের িবিভ অংেশ ইেমজ ব বহার করা হয় । এইচ এমএল ইেমজ ব বহার করার জন <img src="" alt="" /> ট াগ ব বহার করা হয় । img এক িসে ল ট াগ । এই ট াগ এর িভতের src এবং alt এ িবউট ব বহার করেত হয় । alt অ া িবউট এ ইেমজ এর নাম িদেত পােরন । এখােন আপিন ইেমজ এর সােথ াসি ক যেকােনা নাম ব বহার করেত পােরন । alt আ িবউট ব বহার না করেলও img ট াগ কাজ কের । তেব, alt আ িবউট ব বহার করা উিচত । আপনােদর বুঝার সুিবধােথ আিম আপনােদর কােছ এখন এক উদাহরণ িদেবা । এজন িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Image </title> </head> <body> <img src="images/logo.png" alt="Logo" /> </body> </html> একটা িবষয় খয়াল রাখেবন, আপনার ইেমজ এবং এইচ এমএল ফাইল যিদ একসােথ থােকতাহেল এই প িতেত কাজ করেব । যিদ, আপনার index.html ফাইল ড টপ এ এবং ইেমজ ফাইল এক images ফা ার এর িভতের থােক তাহেল আপনােক <img src="images/images-name.png" alt="Image Name" /> এভােব িলখেত হেব । যিদ ফাইেলর িডের ির স কভােব না দন এবং ফাইেলর এ েট ান না দন তাহেল ইেমজ এর আউটপুট কভােব আসেব না । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত সফটেটক-আই ু েড স ফারাম েপ ক ন
এইচ এমএল ৫ বাংলা ই-বুক 16 | P a g e এইচ এমএল িল এইচ এমএল িল ব বহার কের আপিন কান িকছুর তািলকা কাশ করেত পােরন ।আমরা ওেয়বসাইেটর মনু তির করার সময় সাধারণত এইচ এমএল িল ব বহার কেরথািক । এছাড়া, আমরা কান িকছু পেয় আকাের িলখেত চাইেল এইচ এমএল িল ব বহার কির । এইচ এমএল এ সাধারণত ই ধরেনর িল রেয়েছ । এ ই িল হে ;  Order List (অডার িল )  Unorder List (আন অডার িল ) Order List (অডার িল ): আমরা কান তািলকা যখন িমক সংখ া অনুযায়ী িলেখ থািক তখন আমরা এইচ এমএল অডার িল ব বহারকরেত পাির । এখন একটা উদাহরণ িদেল ব াপার আপনােদর কােছ স ূণ পির ার হেয় যােব । এজন িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML List </title> </head> <body> <ol> <li> HTML </li> <li> CSS </li> <li> JavaScript </li> <li> PHP </li> <li>WordPress</li> </ol> </body> </html> কাড িবে ষণঃ আমরা সাত ন র লাইেন olব বহার কেরিছ । olমােন হে Order List এবং িত িল এর জন olএর িভতের li ব বহার করা হয় ।
এইচ এমএল ৫ বাংলা ই-বুক 17 | P a g e Un order List (আন অডার িল ): আমরা কান তািলকা যখন িমক সংখ া অনুযায়ী না িলেখ িল কাশ কের থািক তখন আমরা এইচ এমএলআন অডার িল ব বহার করেত পাির । এখন একটা উদাহরণ িদেল ব াপার আপনােদর কােছ স ূণ পির ার হেয় যােব । এজন িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML List </title> </head> <body> <ul> <li> HTML </li> <li> CSS </li> <li> JavaScript </li> <li> PHP </li> <li>WordPress</li> </ul> </body> </html> কাড িবে ষণঃ আমরা সাত ন র লাইেন ulব বহার কেরিছ । ul মােন হে Un Order List এবং িত িল এর জন ulএর িভতের li ব বহার করা হয় । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম , ওয়াডে স এবং ি ল াি ং উেটািরয়াল পেত সফটেটক- গ িভিজট ক ন
এইচ এমএল ৫ বাংলা ই-বুক 18 | 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>
এইচ এমএল ৫ বাংলা ই-বুক 19 | P a g e <tr> </tr> <td> 04 </td> <td> Class Nine </td> <td> 87 </td> <tr> </tr> <td> 05 </td> <td> Class Ten </td> <td> 89 </td> <tr> </tr> </table> </body> </html> কাড িবে ষণঃ ১ । আমরা থেম <table>…</table> ট াগ এর মােঝ border ব বহার কেরিছ । কননা, এখােন আমরা টিবল এর বডার িনধারণ কেরিছ । এজন আমরা বডার ১ িদেয়িছ । আপিন বডার ২ ব বহার কের কাডট ু রান করান । তাহেল িবষয় পির ার হেয় যােব । আপিন যিদ border ব বহার না কেরন তাহেল বডারিবহীন টিবল াউজাের দিশত হেব । ২ । টিবেলর হডার িনধারণ করার জন <th>…</th> ব বহার করা হেয়েছ । ৩। টিবেলর Row অথাৎ সাির িনধারণ করার জন <tr>…</tr> ব বহার করা হেয়েছ । ৪ । টিবেলর সল িনধারণ করার জন <td>…</td> ব বহার করা হেয়েছ । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত সফটেটক-আই ু েড স ফারাম েপ ক ন
এইচ এমএল ৫ বাংলা ই-বুক 20 | P a g e এইচ এমএল ফম ওেয়বসাইেটর জন এইচ এমএল ফম খুবই পূণ । কান ওেয়বসাইট এ িনব ন ি য়া যু করার জন এইচ এমএল ফম ব বহার করা হয় । এছাড়া, ওেয়বসাইট এ সাচ ব যু করার করার জন এইচ এমএল ফম ব বহার করা হয় । এইচ এমএল ফম নতু নেদর জন থেম িকছুটা ক ন মেন হেত পাের । এইচ এমএল ফম তির করার জন <form>…</form> ট াগ ব বহার করা হয় এবং <form>…</form> ট াগ এর িভতের বশ িকছু ট াগ ব বহার করা হয় । ট ট িফ ওেয়বসাইট এ ফম পূরণ করার সময় িভিজটরেক বশ িকছু তথ ( যমন; নাম, ই- মইল, কানা ইত ািদ) িদেয় ফম সাবিমট করেত হয় । এসব কাজ আপিন ট ট িফ এর মাধ েম করেত পােরন । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Form </title> </head> <body> <form> Name: <input type="text" /> <br /> E-mail: <input type="text" /> <br /> </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন ।
এইচ এমএল ৫ বাংলা ই-বুক 21 | P a g e পাসওয়াড িফ ওেয়বসাইট এ ফম পূরণ করার সময় িভিজটরেক ইউজার নম এবং পাসওয়াড িদেয় ফম সাবিমট করেত হয় । এসব কাজ আপিন পাসওয়াড িফ এর মাধ েম করেত পােরন । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Form </title> </head> <body> <form> Password: <input type="password" /> </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন । রিডও বাটন আপিন যিদ এমন চান য িভিজটর একািধক িবষয় থেক এক িবষয় বাছাই কের ফম সাবিমট করেব তাহেল রিডও বাটন ব বহার করেত পােরন । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Form </title> </head>
এইচ এমএল ৫ বাংলা ই-বুক 22 | P a g e <body> <form> Priority: <input type="radio" name="priority" Value="High" /> High <br /> <input type="radio" name="priority" Value="Medium" /> Medium <br /> <input type="radio" name="priority" Value="Low" /> Low </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন । চকব আপিন যিদ এমন চান য িভিজটর একািধক িবষয় থেক এক বা একািধক িবষয় বাছাই কের ফম সাবিমট করেব তাহেল রিডও বাটন ব বহার করেত পােরন । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Form </title> </head> <body> <form> Department: <input type="checkbox" name="department" Value="Sales" /> Sales <input type="checkbox" name="department" Value="Support" /> Support </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন ।
এইচ এমএল ৫ বাংলা ই-বুক 23 | P a g e পডাউন পডাউন মনু তির করার জন সাধারণত এইচ এমএল পডাউন ব বহার করা হয় । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Form </title> </head> <body> <form> Marital Status: <select name="Status"> <option> Married </option> <option> Unmarried </option> </select> </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন । ট ট এিরয়া আপিন যিদ চান য ওেয়বসাইেটর ব বহারকারী কান ম ােসজ অথাৎ বাতা িলেখ আপনার কােছ পাঠােব তাহেল আপিন ট ট এিরয়া ব বহার করেবন । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8">
এইচ এমএল ৫ বাংলা ই-বুক 24 | P a g e <title> HTML Form </title> </head> <body> <form> Massage: <textarea rows="5" cols="30"> </textarea> </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন । সাবিমট বাটন ওেয়বসাইেটর ফম সাবিমট করার জন সাবিমট বাটন ব বহার করেত হয় । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <title> HTML Form </title> </head> <body> <form> <input type="submit" value="Submit" /> </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন । এখন আমরা এক এইচ এমএল ফম তির করেবা । এজন িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html>
এইচ এমএল ৫ বাংলা ই-বুক 25 | 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> কাড কিপ না কের, অবশ ই কাডট ু িনেজর হােত িলখেবন । কাড কিপ কের াক স করেল আপনারা তমন িকছু বুঝেত পারেবন না । এইচ এমএল এনটাই
এইচ এমএল ৫ বাংলা ই-বুক 26 | P a g e আমরা ওেয়বসাইট এ কিপরাইট, ডমাক ইত ািদ িচ ব বহার কের থািক । এসব িচ হে এইচ এমএল এনটাই । এনটাই হয় এমপারেস ) & ( িচ ারা এরপর এনটাই নাম লখা হয় এবং শেষ এক সিমেকালন ) ; ( িদেত হয় । এখন আমরা কিপরাইট এর এনটাই তির করেবা । এজন িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Entity </title> </head> <body> <p> Copyright &copy; Website Name - All Rights Reserved. </p> </body> </html> এইচ এমএল এনটাই এর নাম জানেত গল এ সাচ িদেত পােরন । এইচ এমএল আইে ম এইচ এমএল আইে ম বলেত বুঝায় আমােদর এইচ এমএল ফাইেলর একটা িনিদ জায়গার মেধ অন একটা ওেয়বসাইেটর কে দশন করােনা । অথাৎ , যিদ আপিন কখেনা এমন চান য , আপনার ওেয়বসাইট এ অন একটা ওেয়বসাইট এর কে শা করেব তাহেল এইচ এমএল আইে ম ট াগ ব বহার করেত পােড়ন । এইচ এমএল আইে ম ভােলাভােব বুঝােত আপনােদর এখন একটা উদাহরণ িদি । িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML IFrame </title> </head> <body>
এইচ এমএল ৫ বাংলা ই-বুক 27 | 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> তেব, সব ওেয়বসাইট আইে ম এ ব বহার করা যায় না । যমন, ফইসবুক, গল এসব ওেয়বসাইট আপিন চাইেলও আইে ম ট াগ এ ব বহার করেত পাড়েবন না। আশা কির, বুঝেত পেড়েছন । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম , ওয়াডে স এবং ি ল াি ং উেটািরয়াল পেত সফটেটক- গ িভিজট ক ন
এইচ এমএল ৫ বাংলা ই-বুক 28 | P a g e গত অধ ােয় আমরা এইচ এমএল এর বশ িকছু ট াগ িনেয় আেলাচনা কেরিছ । এই অধ ােয় আমরা এইচ এমএল ৫ এর বশ িকছু ট াগ িনেয় আেলাচনা করেবা । এইচ এমএল হডার (HTML Header) এক ওেয়বসাইট েতই হডার অংশ থােক । ওেয়বসাইট এর হডার এিরয়া িনধারণ কের দওয়ার জন এইচ এমএল হডার ট াগ ব বহার করা হয় । অথাৎ, এক ওেয়বসাইট এর হডার এ এক বা একািধক হিডং থাকেত পাের, লােগা থাকেত পাের, মনু থাকেত পাের । এসব কে সব সময় এইচ এমএল হডার ট াগ এর িভতের থােক । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Header </title> </head> <body> <header> <h1> SoftTech-Blog </h1> <h3> Let's Learn Something </h3> </header> </body> </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন । এইচ এমএল নভ (HTML Nav) তৃ তীয় অধ ায়
এইচ এমএল ৫ বাংলা ই-বুক 29 | P a g e ওেয়বসাইেট মনু দওয়ার জন এইচ এমএল নভ ট াগ ব বহার করা হয় । এছাড়া, একািধক িলংক দওয়া জন ও এইচ এমএল নভ ট াগ ব বহার করা হয় । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Nav </title> </head> <body> <nav> <a href="http://www.softtech-it.com"> SoftTech-IT </a> <a href="http://www.softtech-blog.com"> SoftTech-Blog </a> </nav> </body> </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন । এইচ এমএল সকশন (HTML Section) ওেয়বসাইট এক বা একািধক সকশন থাকেত পাের । েত ক সকশন এ এইচ এমএল সকশন (HTML Section) ট াগ ব বহার করা হয় । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Tutorial </title> </head> <body>
এইচ এমএল ৫ বাংলা ই-বুক 30 | P a g e <section> <h2> HTML </h2> <p> HTML is a markup Language. It is Easy to Learn. </p> </section> <section> <h2> HTML </h2> <p> HTML is a markup Language. It is Easy to Learn. </p> </section> </body> </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন । এইচ এমএল আ েকল (HTML Article) আমরা যিদ কান পা িলখেত চাই তাহেল আমরা এইচ এমএল আ েকল (HTML Article) ট াগ ব বহার করেত পাির । অথাৎ গ পা , ফারাম, গ , ইত ািদ লখার জন এইচ এমএল আ েকল ট াগ ব বহার করা হয় । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Tutorial </title> </head> <body> <article> <h2> HTML </h2> <p> HTML is a markup Language. It is Easy to Learn. </p> </article> </body>
এইচ এমএল ৫ বাংলা ই-বুক 31 | P a g e </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন । এইচ এমএল ফ ু টার (HTML Footer) এক ওেয়বসাইট শেষ ফ ু টার অংশ থােক । ওেয়বসাইট এর ফ ু টার এিরয়া িনধারণ কের দওয়ার জন এইচ এমএল Footer ট াগ ব বহার করা হয় । অথাৎ, এক ওেয়বসাইট এর ফ ু টার এ কিপরাইট তথ থাকেত পাের, সাইটম াপ থাকেত পাের, যাগােযাগ তথ থাকেত পাের । এসব কে সব সময় এইচ এমএল ফ ু টার ট াগ এর িভতের থােক । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Tutorial </title> </head> <body> <footer> <p> Copyright &copy; Jihadur Rahman Noyon - All Rights Reserved. </p> </footer> </body> </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন ।
এইচ এমএল ৫ বাংলা ই-বুক 32 | P a g e এইচ এমএল অিডও (HTML Audio) ওেয়বসাইট এ অিডও যাগ করার জন এইচ এমএল অিডও ট াগ ব বহার করা হয় । এইচ এমএল <audio> </audio> ট াগ িভতের <source /> ট াগ ব বহার করেত হয় । <source /> ট াগ এ src আ িবউট এ অিডও ফাইেলর এ েট ানসহ ফাইেলর নাম িদেত হেব । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Audio </title> </head> <body> <audio> <source src="something.mp3" /> </audio> </body> </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত সফটেটক-আই ু েড স ফারাম েপ ক ন
এইচ এমএল ৫ বাংলা ই-বুক 33 | P a g e এইচ এমএল িভিডও (HTML Video) ওেয়বসাইট এ িভিডও যাগ করার জন এইচ এমএল িভিডও ট াগ ব বহার করা হয় । এইচ এমএল িভিডও ট াগ ব বহার করার িনয়ম অেনকটা এইচ এমএল অিডও ট াগ এর মতই । এইচ এমএল <video> </video> ট াগ িভতের <source /> ট াগ ব বহার করেত হয় । <source /> ট াগ এ src আ িবউট এ িভিডও ফাইেলর এ েট ানসহ ফাইেলর নাম িদেত হেব । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Video </title> </head> <body> <video> <source src="something.mp4" /> </video> </body> </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন ।
এইচ এমএল ৫ বাংলা ই-বুক 34 | P a g e ধন বাদ আপনােক এইচ এমএল৫ বই পড়ার জন । এই বই স েক কান ম ব , িকংবা কান সমস া থাকেল আমােক অবগত ক ন । বই পেড় আপনারা কতট ু িশখেত পেড়েছন, তা আমােক জানােত ভ ু লেবন না এবং বই েত কান ভ ু ল -খুঁেজ পেল অবশ ই আমােক জানােবন । তাহেল, আিম বই র পরবত সং রেণ ভ ু ল সংেশাধন করার চ া করেবা । - িজহা র রহমান নয়ন

More Related Content

PDF
Bangla html
byShopnomoy Prantor
 
PDF
650 bangla bagdhara
bytanbircox UJS App
 
PDF
English grammar (bcs,job,university exam)
byHim Chori
 
PDF
Most common words you should know volume 03
bytanbircox UJS App
 
PDF
Thinking and writing from word to sentence to paragraph to essay
bytanbircox UJS App
 
PDF
500+ important math formulas and equations
bytanbircox UJS App
 
PDF
2023 Bangla Bakoron o Nirmiti 3500MCQ v1.pdf
bytanbircox UJS App
 
PDF
Mobile version latest bangla e book
bytanbircox UJS App
 
Bangla html
byShopnomoy Prantor
 
650 bangla bagdhara
bytanbircox UJS App
 
English grammar (bcs,job,university exam)
byHim Chori
 
Most common words you should know volume 03
bytanbircox UJS App
 
Thinking and writing from word to sentence to paragraph to essay
bytanbircox UJS App
 
500+ important math formulas and equations
bytanbircox UJS App
 
2023 Bangla Bakoron o Nirmiti 3500MCQ v1.pdf
bytanbircox UJS App
 
Mobile version latest bangla e book
bytanbircox UJS App
 

What's hot

PDF
Power point 2010 bengali tutorial
byMD. Monzurul Karim Shanchay
 
PDF
Photoshop bengali tutorial book
byMD. Monzurul Karim Shanchay
 
PPTX
монгол наадам тоглоом 71
bychimgee_s99
 
ODT
даалгавар
byzagdsuren_jargal
 
DOCX
বৃহদারণ্যক উপনিষদ, প্রথম অধ্যায়,প্রথম ব্রাহ্মণ, দ্বিতীয় সংস্করণ। (Brihadarany...
bydebkumar_lahiri
 
PDF
Health tips & advice from doctors
bytanbircox UJS App
 
PDF
2 سەرەتاکانی دیزاین
byBahzad5
 
PDF
Correct spelling by tanbircox
bytanbircox UJS App
 
PDF
Tuux 6 r angi
byShagaishuu Xoo
 
PDF
Ation
byvenkatesha9
 
PDF
цагаан идээ
byShidten
 
PPTX
говь цөлийн амьтад
byOyun_och85
 
PPT
Дүрсийн хүрээний урт 3-р анги
bybdeegii_9100
 
PDF
صحیح مسلم کا مقدمہ
byMuhammad Anwarraza
 
PDF
ຟີຊິກ ມ5
bybounnao pathoumma
 
PDF
тест 12
byvbayalag
 
PDF
বৃহদারণ্যক উপনিষৎ, চতুর্থ অধ্যায়, তৃতীয় ব্রাহ্মণ, মূল অংশ এবং বঙ্গানুবাদ । জা...
bydebkumar_lahiri
 
PPTX
Хэсэгт ноогдох тоог олох
byOyunchuluun Dashdendev
 
PDF
Atlas kurdistan-Kteby Atlas-کتێبی ئەتڵەس
byBahzad5
 
PPTX
мат 5 р анги
bynaraa21
 
Power point 2010 bengali tutorial
byMD. Monzurul Karim Shanchay
 
Photoshop bengali tutorial book
byMD. Monzurul Karim Shanchay
 
монгол наадам тоглоом 71
bychimgee_s99
 
даалгавар
byzagdsuren_jargal
 
বৃহদারণ্যক উপনিষদ, প্রথম অধ্যায়,প্রথম ব্রাহ্মণ, দ্বিতীয় সংস্করণ। (Brihadarany...
bydebkumar_lahiri
 
Health tips & advice from doctors
bytanbircox UJS App
 
2 سەرەتاکانی دیزاین
byBahzad5
 
Correct spelling by tanbircox
bytanbircox UJS App
 
Tuux 6 r angi
byShagaishuu Xoo
 
Ation
byvenkatesha9
 
цагаан идээ
byShidten
 
говь цөлийн амьтад
byOyun_och85
 
Дүрсийн хүрээний урт 3-р анги
bybdeegii_9100
 
صحیح مسلم کا مقدمہ
byMuhammad Anwarraza
 
ຟີຊິກ ມ5
bybounnao pathoumma
 
тест 12
byvbayalag
 
বৃহদারণ্যক উপনিষৎ, চতুর্থ অধ্যায়, তৃতীয় ব্রাহ্মণ, মূল অংশ এবং বঙ্গানুবাদ । জা...
bydebkumar_lahiri
 
Хэсэгт ноогдох тоог олох
byOyunchuluun Dashdendev
 
Atlas kurdistan-Kteby Atlas-کتێبی ئەتڵەس
byBahzad5
 
мат 5 р анги
bynaraa21
 

Similar to HTML5 Bangla Ebook.pdf

PDF
Basic html by jihadur rahman noyon
byenafrank
 
PDF
Tutohost.com html-ebook
byAR TECH
 
PPTX
ict 4th chapter part 2.pptx
bysasrabikulsislam
 
PDF
Html bangla e-book
byRuposhibangla24,Nawabganj,Dinajpur-5280
 
PDF
Css bangla e book by faruk
byFakhrul Islam Talukder
 
PPTX
HTML(01).pptxthis is very important file
byYeasinArfat1
 
PDF
0 ch 4 board question
byS. M. Morshed Parvez
 
PPTX
Web design and HTML
byBits - HSC ICT
 
PDF
Css tutohost e book
byFakhrul Islam Talukder
 
PDF
MS Word 2007 bengali tutorial
byMD. Monzurul Karim Shanchay
 
PDF
Ms word 07 bangla tutorial
byKeri Morgret
 
PPTX
HSC_ICT_Ch04_01_intro
byS. M. Morshed Parvez
 
PDF
CSS Style Master
byashim50
 
PDF
HSC 23 ICT suggestion pdf
byTajul Islam Apurbo
 
PDF
Wordpress
byAl Imran
 
PDF
10 Computer Skills You Have To Achieve
bySyed Tanvir Anjum
 
PDF
Search Engine optimization (seo) tutorial PDF.
byMohammad Juel Rana
 
PDF
এ্যাপ ও ওয়েবসাইট - আইডিয়া থেকে বাস্তবতা | ইমরান হাসান, সিটিও, রাইট ব্রেইন সলিউশন
byYousuf Sultan
 
PPT
Presentation on web design
byqshamim07
 
Basic html by jihadur rahman noyon
byenafrank
 
Tutohost.com html-ebook
byAR TECH
 
ict 4th chapter part 2.pptx
bysasrabikulsislam
 
Html bangla e-book
byRuposhibangla24,Nawabganj,Dinajpur-5280
 
Css bangla e book by faruk
byFakhrul Islam Talukder
 
HTML(01).pptxthis is very important file
byYeasinArfat1
 
0 ch 4 board question
byS. M. Morshed Parvez
 
Web design and HTML
byBits - HSC ICT
 
Css tutohost e book
byFakhrul Islam Talukder
 
MS Word 2007 bengali tutorial
byMD. Monzurul Karim Shanchay
 
Ms word 07 bangla tutorial
byKeri Morgret
 
HSC_ICT_Ch04_01_intro
byS. M. Morshed Parvez
 
CSS Style Master
byashim50
 
HSC 23 ICT suggestion pdf
byTajul Islam Apurbo
 
Wordpress
byAl Imran
 
10 Computer Skills You Have To Achieve
bySyed Tanvir Anjum
 
Search Engine optimization (seo) tutorial PDF.
byMohammad Juel Rana
 
এ্যাপ ও ওয়েবসাইট - আইডিয়া থেকে বাস্তবতা | ইমরান হাসান, সিটিও, রাইট ব্রেইন সলিউশন
byYousuf Sultan
 
Presentation on web design
byqshamim07
 

HTML5 Bangla Ebook.pdf

  • 2.
    এইচ এমএল ৫বাংলা ই-বুক 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.
    এইচ এমএল ৫বাংলা ই-বুক 3 | P a g e িকছু কথা আিম িজহা র রহমান নয়ন । পশা িহেসেব একজন ছা । পাশাপািশ ওেয়ব ডেভলপেম এ কাজ করিছ । ওয়াডে স িনেয় কাজ করেত বশ ভাল লােগ । যুি িনেয় িলখেত ভালবািস তাই িনয়িমত সফটেটক গ (www.softtech-blog.com) এ যুি িনেয় লখােলিখ কির । যারা ওেয়ব িডজাইন এবং ডেভলপেম িশখেত চাে ন তাঁেদর থেমই এইচ এমএল িশখেত হেব । তাঁেদর কথা িচ া কেরই এইচ এমএল৫ বই লখা হেয়েছ । তাই, আিম বই েত িত িবষয় সহজভােব উপ াপন করার চ া কেরিছ । যন, যারা ওেয়ব িডজাইন এবং ডেভলপেম িশখেত চান তাঁরা সহেজই িত িবষয় বুঝেত পােরন । যেহতু আপিন এই বই ডাউনেলাড কেরেছন, তাই আিম ধের িনি আপিন ওেয়ব িডজাইন এবং ডেভলপেম িশখেত আ হী । বই পড়ার সময় অবশ ই িত িবষয় াক স করেবন । কখেনা কিপ- প কের াক স করেবন না । আিম ধন বাদ জানায় সফটেটক-আই এর ধান িনবাহী কমকতা মাহা দ তির ল মাওলা সুজন (Mtm Sujan) ভাইেক িযিন আমােক বই কাশ করেত সাহায কেরেছন । এছাড়া, উনার হাত ধেরই এতট ু আসেত পেরিছ । এই বইেয়র পাঠক িহেসেব আপনার যেকােনা ম ব আমার কােছ পূণ । আপনােদর যেকােনা পরামশ আমােক উৎসািহত কের । এই বই স েক কান ম ব , িকংবা কান সমস া থাকেল আমােক অবগত ক ন । - িজহা র রহমান নয়ন
  • 4.
    এইচ এমএল ৫বাংলা ই-বুক 4 | P a g e সূচীপ থম অধ ায় -এইচ এমএল িক? -এইচ এমএল শখার পূব িত -এইচ এমএল িসনট া -এইচ এমএল ইিলেম -এইচ এমএল আ িবউট -এইচ এমএল কেম - এইচ এমএল ভ ািলেডটর ি তীয় অধ ায় -এইচ এমএল প ারা াফ -এইচ এমএল লাইনে ক - এইচ এমএল হিডং -এইচ এমএল িলংক - এইচ এমএল ইেমজ -এইচ এমএল িল - এইচ এমএল টিবল -এইচ এমএল ফম - এইচ এমএল এনটাই - এইচ এমএল আইে ম তৃ তীয় অধ ায় - এইচ এমএল হডার (Header) - এইচ এমএল নভ (HTML Nav) - এইচ এমএল সকশন (Section) - এইচ এমএল আ েকল (Article) - এইচ এমএল ফু টার (Footer) - এইচ এমএল অিডও (Audio) - এইচ এমএল িভিডও (Video)
  • 5.
    এইচ এমএল ৫বাংলা ই-বুক 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.
    এইচ এমএল ৫বাংলা ই-বুক 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.
    এইচ এমএল ৫বাংলা ই-বুক 7 | P a g e এইচ এমএল িসনট া এখন আিম এইচ এমএল এর গঠন স েক আেলাচনা করেবা । েত কটা লাইন বুঝার চ া ক ন । যিদ কান লাইন বুঝেত অসুিবধা হয় তাহেল আমােক জানােবন । মেন রাখেবন, এই অংশ ট ু না বুঝেল বািক অংশ বুঝেত পারেবন না । তাই মেনােযাগ িদেয় বুঝার চ া ক ন । থেম আমরা এইচ এমএল ৫ এর াকচার দখেবা; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> উপের আমরা এইচ এমএল এর াকচার িলখলাম । এটা এইচ এমএল এর সবেশষ ভাসন এইচ এমএল ৫ এর াকচার । এবার আমরা এক উদাহরণ দখব এবং উদাহরেন িব ািরত আেলাচনা করেবা । এইচ এমএল করার জন থেমই িনেচর কাডট ু নাটপ াড এ িলখুন: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> This is Title </title> </head> <body> Hello World! </body> </html> এবার কাডট ু নাটপ াড এ িলেখ index.html নােম সভ ক ন । তাহেল আপিন Hello World! লখা দখেত পারেবন ।
  • 8.
    এইচ এমএল ৫বাংলা ই-বুক 8 | P a g e কাড িবে ষণ আিম বুঝেত পারিছ আপনারা এখেনা হয়ত িকছুই বুঝেত পােরন িন । কান সমস া নই । আিম এখন িত লাইন আপানেদর বুিঝেয় িদি । ১। থম লাইন িলেখ াউজারেক বুঝােনা হেয়েছ য এটা একটা এইচ এমএল ড েম । আমরা এইচ এমএল৫ ব বহার করিছ তাই আমরা <!DOCTYPE HTML> ব বহার করিছ । যিদ আমরা এইচ এমএল ৪.০১ ব বহার করতাম তাহেল িনেচর মত িলখেত হেতা; <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> যাইেহাক, যেহতু আমরা এইচ এমএল৫ ব বহার করিছ তাই আমরা ধু <!DOCTYPE HTML> িলখেবা । সব এইচ এমএল এর েত এই ডক টাইপ ব বহার করেত হেব । অেনেক এইচ এমএল ডকটাইপ এ দন না । িক , েফশনাল হেত হেল এ িবষয় কখেনা এিড়েয় যােবন না । কননা, ডকটাইপ ব বহার না করেল িকছু াউজাের কমত আউটপুট আেস না । তাই, েত ক এইচ এমএল ফাইেলর েত ডকটাইপ ব বহার করেবন । ২ । ি তীয় লাইন বুঝােনার আেগ আিম আপনােদর কােছ এইচ এমএল ট াগ স েক আেলাচনা কের িনই । উপেরর িলিখত html, head, title, body েত ক েক ট াগ বলা হয় । একট ু ল কের দখুন ট াগ Less Than িচ িদেয় হয় এবং Greater Than িচ িদেয় শষ হয় । তাই, <html>, <head>, <title>, <body> লখা হেয়েছ । ায় েত ক ট াগ এর এবং শষ আেছ । তাই, যখন <html> ট াগ হেয়েছ তখন ট াগ </html> এভােব শষ হেয়েছ । ট াগ শষ করার জন Less Than িচে র পের একটা Forward Slash (/) িচ িদেত হয় । ট াগ সরাসির াউজাের দশন কের না । তাই দখুন index.html ফাইল ওেপন করার পর কান ট াগ াউজাের দিশত হয়িন । ধু ইিলেম সমূহ াউেজর দিশত হয় । এইচ এমএল ট াগ এর মাঝখােন য ট ট থােক তা হে ইিলেম । ৩ । ি তীয় লাইন হে ট াগ । সম এইচ এমএল কাড <html> ট াগ এর মােঝ িলখেত হয় । দশম লাইন এ <html> এর ট াগ শষ করা হেয়েছ । <html> ট াগ এর সকশন রেয়েছ এক হে <head> সকশনএবং অপর হে <body> সকশন । ৪। তৃ তীয় লাইন হে এক ট াগ যা ষ লাইন এ শষ হেয়েছ । একইভােব, <body> এক ট াগ যা পরবত েত ট াগ শষ করা হেয়েছ । ৫ । আমরা চতু থ লাইন এ meta নােম একটা ট াগ ব বহার কেরিছ । মটা ট াগ এর িভতের charset লখা হেয়েছ। এটােক বলা হয় এ িবউট । পরবত েত অ া িবউট স েক আরও ধারণা পােবন । ল কের দখুন meta একটা িসে ল ট াগ । কারন, এই ট াগ হেয়েছ িক এই ট াগ এর শষ করা হয়িন । একটা ওেয়বসাইট এর সম লখা কান ফরম াট এ থাকেব সটা িনেদশ করার জন charset আ িবউট ব বহার করা হয় ।
  • 9.
    এইচ এমএল ৫বাংলা ই-বুক 9 | P a g e ৬ । অ ম লাইন এ Hello World! িলেখিছ এবং এটা াউজাের দিশত হেয়েছ । এটা হে এইচ এমএল ইিলেম । করার ট াগ এবং শষকরার ট াগ এর মাঝখােন ইিলেম থােক এবং ইিলেম াউজাের দিশত হয়। িক , ট াগ াউজাের সরাসির দিশত হয় না । সবেশেষ, আপিন ফাইল index.html নােম সভ কেরেছন । এখােন আপিন index লখার পিরবেত যেকােনা ট ট িলখেত পােরন । এটা আপনার ই া । তেব .html এ েটনশন ক রাখেত হেব । অথাৎ ফাইেলর নােমর পর .html থাকেত হেব । অেনেক .html এর পিরবেত ভ ু ল কের .txt িদেয় সভ কের াউজাের ওেপন করান । িক এেত কাজ করেব না । এইচ এমএল ইিলেম এইচ এমএল করার ট াগ এবং শষ করার ট াগ এর িভতের য কে থােক তা-ই হে ইিলেম । এক এইচ এমএল ড েম ওেপন করেল আমরা াউজাের যা দখেত পাই, তাই হে ইিলেম । এইচ এমএল ইিলেম এর িসনট া হে ; <tagname> HTML Element </tagname> িবষয় আরও পির ার করার জন এখন আিম এক উদাহরন িদি ; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> This is Title </title> </head> <body> Hello World! </body> </html> উপেরর উদাহরেন আমরা Hello World! িলেখিছ এবং এটা াউজাের দিশত হেয়েছ । এটা - ই হে এইচ এমএল ইিলেম । করার ট াগ এবং শষকরার ট াগ এর মাঝখােন ইিলেম থােক এবং ইিলেম াউজাের দিশত হয় িক , ট াগ াউজাের সরাসির দিশত হয় না । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত সফটেটক-আই ু েড স ফারাম েপ ক ন
  • 10.
    এইচ এমএল ৫বাংলা ই-বুক 10 | P a g e এইচ এমএল আ িবউট এইচ এমএল আ িবউট খুবই পূণ একটা টিপক । এইচ এমএল এর িকছু ট াগ আেছ যা সাধারণভােব িলখেল কাজ কের না । এসব ট াগ এ অ া িবউট ব বহার করা হয় । এইচ এমএল আ িবউট এর ই অংশ থােক এক হে name এবং অপর হে Value. এইচ এমএল অ া িবউট লখার িনয়ম হে ; <tagname attributename="value"> This is Element </tagname> অথাৎ এইচ এমএল ট ােগর নােমর পের একটা স িদেয় আ িবউট এর নাম িদেত হেব । এরপর একটা সমান (=) িচ িদেয় ইনভােটড কমা (" ") এর িভতের আ িবউট এর ভ ালু িদেত হেব । এখন আমরা এইচ এমএল আ িবউট এর একটা উদাহরন দখেবা । <meta charset="UTF-8"> এখােন meta নােম একটা ট াগ ব বহার কেরিছ । মটা ট াগ এর িভতের charset="UTF-8" লখা হেয়েছ। এটােক বলা হয় এ িবউট । এখােন charset লখা হে name এবং UTF-8 লখা হে Value. এইচ এমএল কেম কাড কাশ করার জন কেম অত পূণ । আপিন যখন হাজারহাজার লাইন এইচ এমএল িলখেবন তখন আপিন কান কাড িক জন িলেখেছন তা িকভােব সনা করেবন? তাই, আমরা কেম ব বহার কের সহেজই বুঝেত পাির য কান কাড িক কারেন ব বহার করা হেয়েছ । এছাড়া, আপিন কেম ব বহার কের কান কােডর কায ম িগত রাখেত পােরন । অথাৎ, আপিন যিদ চান য এইচ এমএল কান অংশ িগত রাখেত পােরন । এইচ এমএল কেম াউজাের দিশত হয় না । এইচ এমএল কেম লখার িসনট া হে ; <!-- Write Your HTML Comment Here --> আশা কির বুঝেত পেড়েছন । এইচ এমএল ভ ািলেডটর আপিন িকছু এইচ এমএল কাড িলখেলন , এখন এসব কাড স ক িনয়েম লখা হেয়েছ িক না সটা পরী া করার জন আপিন এইচ এমএল ভ ািলেডটর ব বহার করেত পােরন । কাড ভ ািলেডট করার মাধ েম কাথাও ভ ু ল আেছ িকনা িকংবা কাড স ক িনয়েম িলেখেছন িকনা তা দখেত পারেবন । এইচ এমএল ভ ািলেডটর ব বহার করেত (https://validator.w3.org/) িলংক এ যান ।
  • 11.
    এইচ এমএল ৫বাংলা ই-বুক 11 | P a g e গত অধ ােয় আমরা এইচ এমএল শখার পূব িত স েক জানেবা । এইচ এমএল কাড িকভােব িলখেত হয় এবং এইচ এমএল কেম িনেয় আেলাচনা কেরিছ । আশা কির থম অধ ায় বুঝেত অসুিবধা হয়িন । যিদ আপিন থম অধ ায় ভালভােব বুঝেত পােড়ন তাহেল এখন থেক আপিন ি তীয় অধ ায় করেত পােড়ন । এ অধ ােয় আমরা এইচ এমএল এর ট াগ িনেয় আেলাচনা করেবা । এইচ এমএল প ারা াফ এখন আমরা এইচ এমএল প ারা াফ ট াগ িনেয় আেলাচনা করেবা । এইচ এমএল এ কান ট ট লখার জন সাধারণত এইচ এমএল প ারা াফ ট াগ ব বহার করা হয় । প ারা াফ ট াগ ব বহার কের আমরা ট টেক কেয়ক ভােগ িবভ কের ফলেত পাির । এছাড়া, এ এইচ এমএল এর খুবই পূণ এক ট াগ । আপনােদর কােছ িবষয় পির ার করার জন এখন এক উদাহরণ িদি । থেম িনেচর কাডট ু এক ট ট এিডটর যমন নাটপ াড াস াস এ িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Paragraph </title> </head> <body> <p> Bangladesh is our Country. It is a very beautiful Country. </p> <p>It is a small country. But it has a Large Population. </p> </body> </html> এবার কাডট ু এক াউজাের দশন করার দখেত পারেবন য আমরা য ট ট ব বহার কেরিছ তা ই অনুে েদ িবভ হেয় গেছ । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত সফটেটক-আই ু েড স ফারাম েপ ক ন ি তীয় অধ ায়
  • 12.
    এইচ এমএল ৫বাংলা ই-বুক 12 | P a g e এইচ এমএল লাইনে ক এইচ এমএল লাইন ক ট াগ কান লাইন ক করার জন ব বহার করা হয় । আমরা মাইে াসফট কান ওয়াড লাইন শষ কের নতু ন লাইন করার জন িকেবাড এ এ ার (Enter) স কির । একইভােব এইচ এমএল এ কান লাইন ছেড় নতু ন লাইন করার জন এইচ এমএল লাইন ক - আপ ট াগ ব বহার করা হয় । লাইনে ক - আপ ট াগ এইচ এমএল এর ব িত ম ট াগসমূেহর এক । কননা , লাইনে ক ট াগ অন ান ট াগ এর মত নয় । লাইন ক আপ ট াগ লখা হয় <br /> এভােব । িবষয় ভাল কের বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Line Break </title> </head> <body> <p> Bangladesh is our Country. </p><br /> <p>It is a Very Beatiful Country. </p><br /> <p>It has a large population. </p> </body> </html> এবার index.html ফাইল ওেপন কের দখুন লাইনসমূহ লাইন ক-আপ ট াগ অনুযায়ী শষ হেয়েছ । যিদ লাইনে ক আপ ট াগ ব বহার করা ছাড়া উপেরর কাডট ু র আউটপুট াউজাের দশন করােনা হেতা তাহেল কমন দখােতা সটা জানেত লাইন ক –আপ ট াগ কেট িদেয় আবার াউজাের দশন করান । অথাৎ িনেচর কাডট ু index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Line Break </title> </head>
  • 13.
    এইচ এমএল ৫বাংলা ই-বুক 13 | P a g e <body> <p> Bangladesh is our Country. </p> <p>It is a Very Beatiful Country. </p> <p>It has a large population. </p> </body> </html> এবার index.html ফাইল এক াউজাের দশন করান । তাহেল দখেত পারেবন লাইনসমূহ িনেচ ইেচ সি ত হয়িন । এইচ এমএল হিডং এখন আমরা এইচ এমএল হিডং িনেয় আেলাচনা করেবা । আমরা যখন কান কে এরিশেরানাম িলখেত যাই তখন আমরা এইচ এমএল হিডং ট াগ ব বহার কির । এইচ এমএলএর হিডং ট াগ ছয় । এখন আমরা ছয় হিডং ট াগ এর উদাহরণ দখেবা । এজন িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Heading </title> </head> <body> <h1>This is Heading One </h1><br /> <h2>This is Heading Two </h2><br /> <h3>This is Heading Three </h3><br /> <h4>This is Heading Four </h4><br /> <h5>This is Heading Five </h5><br /> <h6>This is Heading Six </h6><br /> </body> </html>
  • 14.
    এইচ এমএল ৫বাংলা ই-বুক 14 | P a g e এবার index.html ফাইল াউজাের দশন করান তাহেল ছয় হিডং এর প দখেত পারেবন । িত হিডং এর পর আিমএইচ এমএল লাইন ক ট াগ ব বহার কেরিছ যন কাডসমূহ িনেচ িনেচ সি ত হয় । এইচ এমএল িলংক ওেয়বসাইট এ এইচ এমএল িলংক খুবই পূণ । আমরা যখন ওেয়বসাইট এ কান িলংক িদেত চাই তখন এইচ এমএল িলংক ব বহার কের থািক । আমরা অেনক সময় পা এ দিখ য, সফটওয় ার ডাউনেলাড করেত এখােন ি ক ক ন’ এ রকম লখা । তখন সাধারণত ‘এখােন’ লখা েত এক িলংক যু থােক । ফেল, ‘এখােন’ লখা েত ি ক করেল নতু ন এক িলংক ওেপন হয় । এ প িত এইচ এমএল িলংক এর মাধ েম করা হয় । ওেয়বসাইেটর মনুসহ ায় সব ধরেনর কে এ এইচ এমএল িলংক ব বহার করা হয় । এইচ এমএল এ িলংক ব বহার করার জন Anchor (অ ানেকার) ট াগ ব বহার করা হয় এবং সােথ href অ া িবউট ব বহার করা হয় । এইচ এমএল িলংক এর গঠন হে ; <a href="link"> Keyword </a> এইচ এমএল িলংক স েক ভােলাভােব বুঝেত িনেচর কাডট ু এক ট ট এিডটর যমন নাটপ াড াস াস এ িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Link </title> </head> <body> <p> <a href="http://www.softtech-blog.com"> Click Here </a> to Visit SoftTech-Blog. </p> </body> </html> এখন index.html ফাইল াউজাের রান কিরেয় Click Here এ ি ক করেল সফটেটক গ এ চেল যােব । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম , ওয়াডে স এবং ি ল াি ং উেটািরয়াল পেত সফটেটক- গ িভিজট ক ন
  • 15.
    এইচ এমএল ৫বাংলা ই-বুক 15 | P a g e এইচ এমএল ইেমজ ওেয়বসাইেটর জন ইেমজ ব বহার করা খুবই পূণ । এক ওেয়বসাইেটরেলােগা থেক কের িবিভ অংেশ ইেমজ ব বহার করা হয় । এইচ এমএল ইেমজ ব বহার করার জন <img src="" alt="" /> ট াগ ব বহার করা হয় । img এক িসে ল ট াগ । এই ট াগ এর িভতের src এবং alt এ িবউট ব বহার করেত হয় । alt অ া িবউট এ ইেমজ এর নাম িদেত পােরন । এখােন আপিন ইেমজ এর সােথ াসি ক যেকােনা নাম ব বহার করেত পােরন । alt আ িবউট ব বহার না করেলও img ট াগ কাজ কের । তেব, alt আ িবউট ব বহার করা উিচত । আপনােদর বুঝার সুিবধােথ আিম আপনােদর কােছ এখন এক উদাহরণ িদেবা । এজন িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Image </title> </head> <body> <img src="images/logo.png" alt="Logo" /> </body> </html> একটা িবষয় খয়াল রাখেবন, আপনার ইেমজ এবং এইচ এমএল ফাইল যিদ একসােথ থােকতাহেল এই প িতেত কাজ করেব । যিদ, আপনার index.html ফাইল ড টপ এ এবং ইেমজ ফাইল এক images ফা ার এর িভতের থােক তাহেল আপনােক <img src="images/images-name.png" alt="Image Name" /> এভােব িলখেত হেব । যিদ ফাইেলর িডের ির স কভােব না দন এবং ফাইেলর এ েট ান না দন তাহেল ইেমজ এর আউটপুট কভােব আসেব না । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত সফটেটক-আই ু েড স ফারাম েপ ক ন
  • 16.
    এইচ এমএল ৫বাংলা ই-বুক 16 | P a g e এইচ এমএল িল এইচ এমএল িল ব বহার কের আপিন কান িকছুর তািলকা কাশ করেত পােরন ।আমরা ওেয়বসাইেটর মনু তির করার সময় সাধারণত এইচ এমএল িল ব বহার কেরথািক । এছাড়া, আমরা কান িকছু পেয় আকাের িলখেত চাইেল এইচ এমএল িল ব বহার কির । এইচ এমএল এ সাধারণত ই ধরেনর িল রেয়েছ । এ ই িল হে ;  Order List (অডার িল )  Unorder List (আন অডার িল ) Order List (অডার িল ): আমরা কান তািলকা যখন িমক সংখ া অনুযায়ী িলেখ থািক তখন আমরা এইচ এমএল অডার িল ব বহারকরেত পাির । এখন একটা উদাহরণ িদেল ব াপার আপনােদর কােছ স ূণ পির ার হেয় যােব । এজন িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML List </title> </head> <body> <ol> <li> HTML </li> <li> CSS </li> <li> JavaScript </li> <li> PHP </li> <li>WordPress</li> </ol> </body> </html> কাড িবে ষণঃ আমরা সাত ন র লাইেন olব বহার কেরিছ । olমােন হে Order List এবং িত িল এর জন olএর িভতের li ব বহার করা হয় ।
  • 17.
    এইচ এমএল ৫বাংলা ই-বুক 17 | P a g e Un order List (আন অডার িল ): আমরা কান তািলকা যখন িমক সংখ া অনুযায়ী না িলেখ িল কাশ কের থািক তখন আমরা এইচ এমএলআন অডার িল ব বহার করেত পাির । এখন একটা উদাহরণ িদেল ব াপার আপনােদর কােছ স ূণ পির ার হেয় যােব । এজন িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML List </title> </head> <body> <ul> <li> HTML </li> <li> CSS </li> <li> JavaScript </li> <li> PHP </li> <li>WordPress</li> </ul> </body> </html> কাড িবে ষণঃ আমরা সাত ন র লাইেন ulব বহার কেরিছ । ul মােন হে Un Order List এবং িত িল এর জন ulএর িভতের li ব বহার করা হয় । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম , ওয়াডে স এবং ি ল াি ং উেটািরয়াল পেত সফটেটক- গ িভিজট ক ন
  • 18.
    এইচ এমএল ৫বাংলা ই-বুক 18 | 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>
  • 19.
    এইচ এমএল ৫বাংলা ই-বুক 19 | P a g e <tr> </tr> <td> 04 </td> <td> Class Nine </td> <td> 87 </td> <tr> </tr> <td> 05 </td> <td> Class Ten </td> <td> 89 </td> <tr> </tr> </table> </body> </html> কাড িবে ষণঃ ১ । আমরা থেম <table>…</table> ট াগ এর মােঝ border ব বহার কেরিছ । কননা, এখােন আমরা টিবল এর বডার িনধারণ কেরিছ । এজন আমরা বডার ১ িদেয়িছ । আপিন বডার ২ ব বহার কের কাডট ু রান করান । তাহেল িবষয় পির ার হেয় যােব । আপিন যিদ border ব বহার না কেরন তাহেল বডারিবহীন টিবল াউজাের দিশত হেব । ২ । টিবেলর হডার িনধারণ করার জন <th>…</th> ব বহার করা হেয়েছ । ৩। টিবেলর Row অথাৎ সাির িনধারণ করার জন <tr>…</tr> ব বহার করা হেয়েছ । ৪ । টিবেলর সল িনধারণ করার জন <td>…</td> ব বহার করা হেয়েছ । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত সফটেটক-আই ু েড স ফারাম েপ ক ন
  • 20.
    এইচ এমএল ৫বাংলা ই-বুক 20 | P a g e এইচ এমএল ফম ওেয়বসাইেটর জন এইচ এমএল ফম খুবই পূণ । কান ওেয়বসাইট এ িনব ন ি য়া যু করার জন এইচ এমএল ফম ব বহার করা হয় । এছাড়া, ওেয়বসাইট এ সাচ ব যু করার করার জন এইচ এমএল ফম ব বহার করা হয় । এইচ এমএল ফম নতু নেদর জন থেম িকছুটা ক ন মেন হেত পাের । এইচ এমএল ফম তির করার জন <form>…</form> ট াগ ব বহার করা হয় এবং <form>…</form> ট াগ এর িভতের বশ িকছু ট াগ ব বহার করা হয় । ট ট িফ ওেয়বসাইট এ ফম পূরণ করার সময় িভিজটরেক বশ িকছু তথ ( যমন; নাম, ই- মইল, কানা ইত ািদ) িদেয় ফম সাবিমট করেত হয় । এসব কাজ আপিন ট ট িফ এর মাধ েম করেত পােরন । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Form </title> </head> <body> <form> Name: <input type="text" /> <br /> E-mail: <input type="text" /> <br /> </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন ।
  • 21.
    এইচ এমএল ৫বাংলা ই-বুক 21 | P a g e পাসওয়াড িফ ওেয়বসাইট এ ফম পূরণ করার সময় িভিজটরেক ইউজার নম এবং পাসওয়াড িদেয় ফম সাবিমট করেত হয় । এসব কাজ আপিন পাসওয়াড িফ এর মাধ েম করেত পােরন । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Form </title> </head> <body> <form> Password: <input type="password" /> </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন । রিডও বাটন আপিন যিদ এমন চান য িভিজটর একািধক িবষয় থেক এক িবষয় বাছাই কের ফম সাবিমট করেব তাহেল রিডও বাটন ব বহার করেত পােরন । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Form </title> </head>
  • 22.
    এইচ এমএল ৫বাংলা ই-বুক 22 | P a g e <body> <form> Priority: <input type="radio" name="priority" Value="High" /> High <br /> <input type="radio" name="priority" Value="Medium" /> Medium <br /> <input type="radio" name="priority" Value="Low" /> Low </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন । চকব আপিন যিদ এমন চান য িভিজটর একািধক িবষয় থেক এক বা একািধক িবষয় বাছাই কের ফম সাবিমট করেব তাহেল রিডও বাটন ব বহার করেত পােরন । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Form </title> </head> <body> <form> Department: <input type="checkbox" name="department" Value="Sales" /> Sales <input type="checkbox" name="department" Value="Support" /> Support </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন ।
  • 23.
    এইচ এমএল ৫বাংলা ই-বুক 23 | P a g e পডাউন পডাউন মনু তির করার জন সাধারণত এইচ এমএল পডাউন ব বহার করা হয় । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Form </title> </head> <body> <form> Marital Status: <select name="Status"> <option> Married </option> <option> Unmarried </option> </select> </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন । ট ট এিরয়া আপিন যিদ চান য ওেয়বসাইেটর ব বহারকারী কান ম ােসজ অথাৎ বাতা িলেখ আপনার কােছ পাঠােব তাহেল আপিন ট ট এিরয়া ব বহার করেবন । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8">
  • 24.
    এইচ এমএল ৫বাংলা ই-বুক 24 | P a g e <title> HTML Form </title> </head> <body> <form> Massage: <textarea rows="5" cols="30"> </textarea> </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন । সাবিমট বাটন ওেয়বসাইেটর ফম সাবিমট করার জন সাবিমট বাটন ব বহার করেত হয় । এ স েক আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <title> HTML Form </title> </head> <body> <form> <input type="submit" value="Submit" /> </form> </body> </html> এবার index.html ফাইল একই াউজাের ওেপন ক ন । এখন আমরা এক এইচ এমএল ফম তির করেবা । এজন িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html>
  • 25.
    এইচ এমএল ৫বাংলা ই-বুক 25 | 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> কাড কিপ না কের, অবশ ই কাডট ু িনেজর হােত িলখেবন । কাড কিপ কের াক স করেল আপনারা তমন িকছু বুঝেত পারেবন না । এইচ এমএল এনটাই
  • 26.
    এইচ এমএল ৫বাংলা ই-বুক 26 | P a g e আমরা ওেয়বসাইট এ কিপরাইট, ডমাক ইত ািদ িচ ব বহার কের থািক । এসব িচ হে এইচ এমএল এনটাই । এনটাই হয় এমপারেস ) & ( িচ ারা এরপর এনটাই নাম লখা হয় এবং শেষ এক সিমেকালন ) ; ( িদেত হয় । এখন আমরা কিপরাইট এর এনটাই তির করেবা । এজন িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Entity </title> </head> <body> <p> Copyright &copy; Website Name - All Rights Reserved. </p> </body> </html> এইচ এমএল এনটাই এর নাম জানেত গল এ সাচ িদেত পােরন । এইচ এমএল আইে ম এইচ এমএল আইে ম বলেত বুঝায় আমােদর এইচ এমএল ফাইেলর একটা িনিদ জায়গার মেধ অন একটা ওেয়বসাইেটর কে দশন করােনা । অথাৎ , যিদ আপিন কখেনা এমন চান য , আপনার ওেয়বসাইট এ অন একটা ওেয়বসাইট এর কে শা করেব তাহেল এইচ এমএল আইে ম ট াগ ব বহার করেত পােড়ন । এইচ এমএল আইে ম ভােলাভােব বুঝােত আপনােদর এখন একটা উদাহরণ িদি । িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML IFrame </title> </head> <body>
  • 27.
    এইচ এমএল ৫বাংলা ই-বুক 27 | 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> তেব, সব ওেয়বসাইট আইে ম এ ব বহার করা যায় না । যমন, ফইসবুক, গল এসব ওেয়বসাইট আপিন চাইেলও আইে ম ট াগ এ ব বহার করেত পাড়েবন না। আশা কির, বুঝেত পেড়েছন । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম , ওয়াডে স এবং ি ল াি ং উেটািরয়াল পেত সফটেটক- গ িভিজট ক ন
  • 28.
    এইচ এমএল ৫বাংলা ই-বুক 28 | P a g e গত অধ ােয় আমরা এইচ এমএল এর বশ িকছু ট াগ িনেয় আেলাচনা কেরিছ । এই অধ ােয় আমরা এইচ এমএল ৫ এর বশ িকছু ট াগ িনেয় আেলাচনা করেবা । এইচ এমএল হডার (HTML Header) এক ওেয়বসাইট েতই হডার অংশ থােক । ওেয়বসাইট এর হডার এিরয়া িনধারণ কের দওয়ার জন এইচ এমএল হডার ট াগ ব বহার করা হয় । অথাৎ, এক ওেয়বসাইট এর হডার এ এক বা একািধক হিডং থাকেত পাের, লােগা থাকেত পাের, মনু থাকেত পাের । এসব কে সব সময় এইচ এমএল হডার ট াগ এর িভতের থােক । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Header </title> </head> <body> <header> <h1> SoftTech-Blog </h1> <h3> Let's Learn Something </h3> </header> </body> </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন । এইচ এমএল নভ (HTML Nav) তৃ তীয় অধ ায়
  • 29.
    এইচ এমএল ৫বাংলা ই-বুক 29 | P a g e ওেয়বসাইেট মনু দওয়ার জন এইচ এমএল নভ ট াগ ব বহার করা হয় । এছাড়া, একািধক িলংক দওয়া জন ও এইচ এমএল নভ ট াগ ব বহার করা হয় । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Nav </title> </head> <body> <nav> <a href="http://www.softtech-it.com"> SoftTech-IT </a> <a href="http://www.softtech-blog.com"> SoftTech-Blog </a> </nav> </body> </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন । এইচ এমএল সকশন (HTML Section) ওেয়বসাইট এক বা একািধক সকশন থাকেত পাের । েত ক সকশন এ এইচ এমএল সকশন (HTML Section) ট াগ ব বহার করা হয় । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Tutorial </title> </head> <body>
  • 30.
    এইচ এমএল ৫বাংলা ই-বুক 30 | P a g e <section> <h2> HTML </h2> <p> HTML is a markup Language. It is Easy to Learn. </p> </section> <section> <h2> HTML </h2> <p> HTML is a markup Language. It is Easy to Learn. </p> </section> </body> </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন । এইচ এমএল আ েকল (HTML Article) আমরা যিদ কান পা িলখেত চাই তাহেল আমরা এইচ এমএল আ েকল (HTML Article) ট াগ ব বহার করেত পাির । অথাৎ গ পা , ফারাম, গ , ইত ািদ লখার জন এইচ এমএল আ েকল ট াগ ব বহার করা হয় । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Tutorial </title> </head> <body> <article> <h2> HTML </h2> <p> HTML is a markup Language. It is Easy to Learn. </p> </article> </body>
  • 31.
    এইচ এমএল ৫বাংলা ই-বুক 31 | P a g e </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন । এইচ এমএল ফ ু টার (HTML Footer) এক ওেয়বসাইট শেষ ফ ু টার অংশ থােক । ওেয়বসাইট এর ফ ু টার এিরয়া িনধারণ কের দওয়ার জন এইচ এমএল Footer ট াগ ব বহার করা হয় । অথাৎ, এক ওেয়বসাইট এর ফ ু টার এ কিপরাইট তথ থাকেত পাের, সাইটম াপ থাকেত পাের, যাগােযাগ তথ থাকেত পাের । এসব কে সব সময় এইচ এমএল ফ ু টার ট াগ এর িভতের থােক । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Tutorial </title> </head> <body> <footer> <p> Copyright &copy; Jihadur Rahman Noyon - All Rights Reserved. </p> </footer> </body> </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন ।
  • 32.
    এইচ এমএল ৫বাংলা ই-বুক 32 | P a g e এইচ এমএল অিডও (HTML Audio) ওেয়বসাইট এ অিডও যাগ করার জন এইচ এমএল অিডও ট াগ ব বহার করা হয় । এইচ এমএল <audio> </audio> ট াগ িভতের <source /> ট াগ ব বহার করেত হয় । <source /> ট াগ এ src আ িবউট এ অিডও ফাইেলর এ েট ানসহ ফাইেলর নাম িদেত হেব । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Audio </title> </head> <body> <audio> <source src="something.mp3" /> </audio> </body> </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন । ওেয়ব িডজাইন, ওেয়ব ডেভলপেম এবং ি ল াি ং সং া যেকােনা ে র উ র পেত সফটেটক-আই ু েড স ফারাম েপ ক ন
  • 33.
    এইচ এমএল ৫বাংলা ই-বুক 33 | P a g e এইচ এমএল িভিডও (HTML Video) ওেয়বসাইট এ িভিডও যাগ করার জন এইচ এমএল িভিডও ট াগ ব বহার করা হয় । এইচ এমএল িভিডও ট াগ ব বহার করার িনয়ম অেনকটা এইচ এমএল অিডও ট াগ এর মতই । এইচ এমএল <video> </video> ট াগ িভতের <source /> ট াগ ব বহার করেত হয় । <source /> ট াগ এ src আ িবউট এ িভিডও ফাইেলর এ েট ানসহ ফাইেলর নাম িদেত হেব । িবষয় আরও ভােলাভােব বুঝেত িনেচর কাডট ু িলেখ index.html নােম সভ ক ন; <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> HTML Video </title> </head> <body> <video> <source src="something.mp4" /> </video> </body> </html> এবার index.html ফাইল এক াউজাের ওেপন ক ন ।
  • 34.
    এইচ এমএল ৫বাংলা ই-বুক 34 | P a g e ধন বাদ আপনােক এইচ এমএল৫ বই পড়ার জন । এই বই স েক কান ম ব , িকংবা কান সমস া থাকেল আমােক অবগত ক ন । বই পেড় আপনারা কতট ু িশখেত পেড়েছন, তা আমােক জানােত ভ ু লেবন না এবং বই েত কান ভ ু ল -খুঁেজ পেল অবশ ই আমােক জানােবন । তাহেল, আিম বই র পরবত সং রেণ ভ ু ল সংেশাধন করার চ া করেবা । - িজহা র রহমান নয়ন