SlideShare una empresa de Scribd logo

Tutohost.com html-ebook

•
•
AR TECH
AR TECH

HTML Note

Diseño
1 de 52
Descargar para leer sin conexión
TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k এইচিটএমএল ইবুক ১.০ এইচিটএমএল ই-বুক ১.০ Tu েলখকঃ অসীম কুমা পাল Page: 1 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html েলখকঃ অসীম কমমা পমল ১৯৮৭ সমেল k কমমা to H H o TM st EL 1. Bo 0 o অসীম কি�য়ময় জ��হণ কোন। ২০১০ সমেল িতিন কি�য়ম পিলেটকিনক ইনি�িটউট স�মদনমঃ মমহবুব িটউেটম েথেক িডে�মমম পমস কোন। িতিন ঢমকম �েকৗশল �যুি� িব�িবদযমলেয় িব. এস. িস ইন ইেলকি�কযমল ইেলকি�ক ইি�িনয়মিাং পড়েছন। িতিন ওেয়ব এনড এবং এ েডভলপেমনট মমইেয়মকেন�লমোা উপো ধমামবমিহক িটউেটমিায়মল িলেখ সবমা নজো আেসন। এছমড়মও িতিন েটকিটউনস, িটউেটমিায়মলিবিডসহ েবশ িকছু বমংলম �ো িলেখ থমেকন। বমংলমেদেশ অনলমইন িশ�মমূলক �কমশনমগেলম এেকবমো হমেতগেন োলম যময়। এ েদেশা তুন সমমজ তথয�যুি�েত নতুন নতুন েমধম একি�ত হেয় �মন অজরেনা জ� কমজ কো যমে�। িবষয়িট একিট িনাব িব�েবা র মেতম। আ এই সৃজনশীল বযি�েদা িশ�ম কমযরয়ম ও উ�মবনী শি�া �কমশনম ধারাবািহক এইচিটএমএল িটউেটমিায়মল যা এখন ই-বুক আকাের �কাশ করা হেলা। Tu বতরমমেন িতিন িটউেটমেহমে� কমরাত �যুি� েলখক অসীম কমমোা হমত ধো আেছন। “এইচিটএমএল বমংলম ই-বুক ১.০” আিথরক সহেযমিাতময় সবমইেক ওেয়ব েডভলপেমেনটা িশখমা �থম পদে�প িহেসেব এিােয় িনেয় যমেব বেল আশম কিা। িটউেটমেহম� TutoHost.com �ুা িািডং িনলুামা ইয়মসিমন AmusingOcean.com Page: 2 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html • ে�া�াম েলখার প�িত টয্া সমুহ ও বয্বহা ইিলেমন্ িক এবং িকভােব বয্বহ হয় এি�িবউট িক এবং িকভােব বয্বহ হয় েহিডং টয্া ও বয্বহা HTML পয্ারা�া েট�ট ফরেমিটং ফন্ টয্া এর বয্বহা �াইেলর বয্বহা িলংক �কােশর প�িত ছিব �কাশ েটিবল ও েটিবল �কাশ প�িত িলে�র বয্বহা HTML ফমর ে�ম এর বয্বহা আই ে�ম এর বয্বহা রং ও েকাড েল আউট প�িত HTML এ িসএসএস এর বযবহার েহড েমটা টয্া HTML এ ি�� এর বয্বহা ওেয়েব অিডও ফাইল চালােনার প�িত ওেয়েব িভিডও ফাইল চালােনার প�িত ওেয়েব �াস ফাইল চালােনার প�িত to H H o TM st EL 1. Bo 0 o • HTML িক? HTML এর ইিতহাস k সূিচ প�ঃ • • • • • • • • • • • • • • • • • • • • Tu • • • • • Page: 3 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১. HTML িক? to H H o TM st EL 1. Bo 0 o েথেক HTML স�িকর্ িব�ািরত �ান অজর্ করা যােব। k এখােন ধারাবািহক ভােব বাংলা ভাষায় HTML এর উপর িটউেটািরয়াল েলখা হেয়েছ । ডান পােশর ধারাবািহক িলংক HTML একটা কি�উটার লয্া�ুেয়, যা পৃিথবীর িবশাল তথয- ভান্ডারে ইন্টারেনেট মাধয্ে �দশর্েন সুেযা ৈতির কের িদেয়েছ। একটা ওেয়ব েপেজর মূল গঠন ৈতির হয় HTML িদেয়। HTML েকান ে�া�ািমং লয্া�ুেয় নয়, এেক Hyper Text Mark Up Language বলা হয়। Mark Up Language এক েসট Mark Up টয্ােগ সম�েয় গিঠত হয়। একটা ওেয়ব েপেজর িবিভ� অংশ �াউজােরর মাধয্ে িকভােব �দিশর্ হেব, তা HTML এ Mark Up টয্া সমূহ বয্বহা কের �কাশ করা হয় । HTML এর ইিতহাস HTML বা Hyper Text Mark Up Language ৈতির কেরেছন িটম বানর্া-লী। এখােন এইচিটএমএল এর সংি�� ইিতহাস তুেল ধরা হেলা। Tu HTML বা Hyper Text Mark Up Language ৈতির কেরেছন িটম বানর্া-লী। HTML ৈতিরর উে�� িছল ৈব�ািনক গেবষণার তথয উপা� �ত পৃিথবীর িবিভ্ �ােন আদান �দােনর বয্ব� করা। ১৯৯০ সােলর িদেক NCSA কতৃ্ েডভলপকৃত েমাজাইক �াউজােরর মাধয্ে র HTML পিরিচিত লাভ কের। ১৯৯৭ এর জানুয়ারীে WC3 কতৃরক �থম েডভলপকৃত HTML3.2 �কািশত হয়। একই বছের েশেষ িডেস�ের WC3 HTML এর নতুন সং�রণ HTML4.2 �কাশ কের। ২০১০ সােল বতর্মাে �চিলত HTML এর সবর্েশ ভাসর্ HTML5 জনস�ূেখ পিরিচিত লাভ কের। Page: 4 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ২. ে�া�াম েলখার প�িত k েয েকান ে�া�াম েলখার জ�ই েকান একটা এিডটর বয্বহা কের েকািডং করেত হয়।এখােন এইচিটএমএল এ ে�া�াম েলখার সাধারন প�িত, একিট �াথিমক ে�ােজ� এবং সাধারন টয্াগসমূ িনেয় আেলাচনা করা হেব। to H H o TM st EL 1. Bo 0 o েয েকান ে�া�াম েলখার জ�ই েকান একটা এিডটর বয্বহা কের েকািডং করেত হয়। HTML এ ে�া�াম েলখার জ� �াথিমকভােব এিডটর িহেসেব উইেন্ডা অপােরিটং িসে�েমর িডফ� এিডটর notepad বয্বহা করা েযেত পাের এবং বাড়িত সুিবধ পাবার জ� এডভা� এিডটর িহেসেব Dreamweaver এবং Notepad++ বয্বহা করা ভাল। HTML এ েলখা ে�া�াম .html এ�েটনশন েযমন index.html �ারা Save কের েযেকান �াউজার েযমন Internet explorer, Mozilla Firefox , Google chrome এবং Opera �ারা েদখা যােব। HTML এ েলখা ে�া�ােমর েমৗিলক অংশ সমূহ <html> <head> <title> www.tutohost.com</title> </head> <body> This is my first web page. I am learning now HTML. </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 5 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html HTML এ েলখা ে�া�ােমর িবিভ� অংশ িবে�ষণ to H H o TM st EL 1. Bo 0 o k ে�া�ােমর মেধয <> এবং < /> দুইট িচ� এবং এর মেধয িকছু Word েযমন html, head, title, body এগুেলাে Keyword বেল এবং <> বা < /> িচ� এবং এর মােঝ েলখা একিট Keyword েক টয্া বলা হয়। েযমন <head> অথর head টয্াগ HTML এ দু ধরেনর টয্া রেয়েছ , <> িচ� ও keyword িনেয গিঠত টয্াগে শু টয্া এবং < /> িচ� ও keyword িনেয গিঠত টয্াগে েশষ টয্া বেল েযমন < title> অথর title শু টয্া এবং <title /> অথর title েশষ টয্াগ <html> বা html টয্া: HTML এ ে�া�াম েলখার জ� সম� code েক <html> </html> এর মােঝ েলখা হয়। <head> বা head টয্া: <head></head> এর েভতের <title> </title> টয্া েলখা হয় যার মাধয্ে ওেয়বসাইেটর title বা িশেরানাম �দশর্ের বয্ব� করা হয়। এই code এ title িহেসেব www.tutohost.com েলখা হেয়েছ যা �াউজােরর title bar এ েদখা যাে�। এছাড়া css এর stylesheet েক head টয্ােগ মেধয্ call করা হয়। <body> বা body টয্া: <body> বা body টয্া খুবই গুরু�পূণ একিট ওেয়ব সাইেটর মূল Content সমূহ Body টয্ােগ মেধয অব�ান কের । <body></body> টয্েগ মেধয্ িবিভ� Text , Image, Table ইতয্াি ফরেমিটং এর জ� িবিভ� টয্া সমূহ েলখা হয় । এই code এ <body></body> টয্েগ মেধয This is my first web page. I am learning now HTML. েলখা হেয়েছ যা �াউজােরর মূল অংেশ Tu �দিশর্ হে�। Page: 6 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৩. HTML টয্া িক? Tu to H H o TM st EL 1. Bo 0 o k এইচিটএমএল এর সাধারন টয্া সমূহ এবং এগুেলা কােজর সাধারন িববরণ স�েকর জানা খুবই গুরু�পূণ আমরা সহেজই এখান েথেক এইচিটএমএল এর সাধারন টয্া সমূহ এবং এগুেলা কােজর সাধারন িববরণ েজেন িনেত পারব। HTML এ ে�া�াম েলখার জ� <> এবং </> দুইট িচ� এবং এর মেধয িকছু Word েযমন html, head, title, body ইতয্াি Keyword বয্বহা করা হয়। <> বা </> িচ� এবং এর মােঝ েলখা একিট Keyword েক একে� টয্া বলা হয়। েযমন <html> এবং </html> । <body> হল body শু টয্া এবং </ body> হল body েশষ টয্াগ HTML এর সাধারন টয্া সমূহ টয্া সমূহ <html> </html> <head></head> <title></title> <body></body> <a></a> <abbr></abbr> <b></b> বণর্ন HTML ডকুেমন িনেদর্ কের। ে�া�ােমর head অংশ িনেদর্ কের । ডকুেমন টাইেটল িনেদর্ কের। ে�া�ােমর মূল content অংশ িনেদর্ কের। Anchor টয্াগ Abbreviation টয্াগ Bold েট�ট িনেদর্ কের। Page: 7 of 54
Italic েট�ট িনেদর্ কের। �াভািবেকর েচেয় বড় েট�ট িনেদর্ কের। �াভািবেকর েচেয় েছাট েট�ট িনেদর্ কের। িবেশষ উ�ৃিত �কাশ করেত বয্বহ হয়। একটা লাইন ে�ক ৈতির কের । কি�উটার েকাড েট�ট �কাশ কের। েটিবল ৈতিরেত বয্বহ হয়। েটিবেলর কলাম ৈতিরেত বয্বহ হয়। েটিবেলর েসল ৈতিরেত বয্বহ হয়। েটিবেলর সাির ৈতিরেত বয্বহ হয়। ফরম ৈতিরেত বয্বহ হয়। to H H o TM st EL 1. Bo 0 o <i></i> <big></big> <small></small> <blockquote> </blockquote> <br / > <code></code> <table></table> <col></col> <td></td> <tr></tr> <form></form> <h1></h1> <hr/> <img/> <input></input> <li></li> <meta></meta> <ol></ol> <ul></ul> <p></p> <pre></pre> <tt></tt> <strong></strong> <sub></sub> <sup></sup> TutoHost.com/bangla/html k এইচিটএমএল ইবুক ১.০ েহডার টয্া 1-6 পযর্ হয়। সমা�রাল েরখা ৈতির কের। ছিব যু� করেত বয্বহ হয়। ফরেমর ইনপুট িফ� ৈতিরেত বয্বহ হয়। িল� ৈতিরেত বয্বহ হয়। Meta টয্া অডর্া িল� ৈতিরেত বয্বহ হয়। আনঅডর্া িল� ৈতিরেত বয্বহ হয়। পয্ারা�া িনেদর্ কের pre-formatted েট�ট ৈতিরেত বয্বহ হয়। েটিলটাইপ েট�ট িনেদর্ কের। Tu Strong েট�ট িনেদর্ কের। subscripted text িনেদর্ কের। superscripted text িনেদর্ কের। Page: 8 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৪. HTML ইিলেমন্ to H H o TM st EL 1. Bo 0 o k HTML এ েযেকান শু এবং েশষ টয্ােগ মােঝর অংশেক ইিলেমন্ বলা হয়। েযমন <h1> This is an example of element.</h1> । এখােন <h1> েহডার1 শু এবং </h1> েহডার1 েশষ টয্ােগ মােঝ This is an example of element. েলখা হেয়েছ, তাই “This is an example of element.” একিট ইিলেমন্ট িকছু িকছু টয্ােগ েকান ইিলেমন্ থােক না েযমন <br /> ,<img /> ইতয্ািদ ইিলেমন্ েশষ টয্া <h1> <p> <br /> <img /> This is an element. This is paragraph. </h1> </p> Tu শর টয্া সাধারণতঃ েয সকল টয্ােগ েশষ টয্া থােক না তােদর ইিলেমন্ট থােক না। এ ধরেণর শু টয্ােগ মেধয্ / িচ�িট অ�ভূর্ থােক, এবং এর আেগ একটা ে�স িদেত হয়। Page: 9 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৫. HTML এি�িবউটস HTML এি�িবউটস সবর্ািধ গুরু�পূ এবং অতয্ �েয়াজনীয় একিট িবষয়। HTML টয্ােগ কাযর্�মতাে বিধর্ করার জ� এি�িবউটস বয্বহা করা হয়। এখােন উদাহরণ সহ HTML এি�িবউটস স�েকর িব�ািরত আেলাচনা করা k হেব। to H H o TM st EL 1. Bo 0 o HTML এ এি�িবউটস ইিলেমন্ এর আনুসাি� তথয �কাশ কের । মূলত HTML এ টয্ােগ কাযর্�মতাে বিধর্ করার জ� এি�িবউটস বয্বহা করা হয়। েযমন <font size="5" face="Tahoma" color="red"> This is a paragraph.</font> এখােন size="5" অংশিট হল font টয্ােগ একিট এি�িবউট, যা �কাশ করেছ ইিলেমন্ অথর্া This is a paragraph. েলখািটর সাইজ েকমন হেব। এছাড়া face="Tahoma" �কাশ করেছ েলখািটর font হেব Tahoma এবং color="red" �ারা �কাশ করেছ েলখািটর রং হেব লাল। িকছু HTML এি�িবউটস Tu টয্া <font> <h1>….<h6> <p> <body> <div> <img> <table> <input /> এি�িবউটস size="5" face="Tahoma" color="red" align="center" align="left" align="right" title="Bangladesh" bgcolor="green" background="../images/ele.png" id="book" class="pen" align="center" height="100px" width="50px" border="5px" type="text" name="TextField" Page: 10 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <font size="5" face="Tahoma" color="red"> This is a paragraph. </font> k উদাহরণ ে�া�াম </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 11 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৬. েহিডং k এইচিটএমএল এ েহিডং টয্া একিট গুরু�পূ টয্া । সাধারনত এর মাধয্ে েকান পয্ারা�ােফ িশেরানাম েলখা হয়। এ অধয্াে আমরা েহিডং এর েকািডং প�িত স�েকর জানেবা। to H H o TM st EL 1. Bo 0 o HTML এর মাধয্ে েকান ডকুেমন বা পয্ারা�ােফ িশেরানাম েলখার জ� েহিডং টয্া বয্বহা করা হয়। HTML এ েমাট ছয় ধরেণর েহিডং টয্া রেয়েছ এগুেল হল <h1> </h1> , <h2> </h2> , <h3> </h3> , <h4> </h4> , <h5> </h5> এবং <h6> </h6> । যিদ বড় সাইেজর অ�ের িশেরানাম েলখার �েয়াজন হয় তাহেল <h1> </h1> টয্ােগ মােঝ েলখা হয়। এবং অ�া� গুেল বয্বহা করেল েলখার সাইজ আে� আে� েছাট হেব। উদাহরণ ে�া�াম Tu <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <h1>This is an example of heading 1</h1> <h2>This is an example of heading 2</h2> <h3>This is an example of heading 3</h3> <h4>This is an example of heading 4</h4> <h5>This is an example of heading 5</h5> <h6>This is an example of heading 6</h6> </body> </html> একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 12 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৭. পয্ারা�া k পয্ারা�া টয্াগি সবর্ািধ গুরপূণর এবং অতয্ �েয়াজনীয় একিট টয্াগ পয্ারা�া টয্ােগ েভতেরই েট�টগুেল িবিভ�ভােব �কািশত হয়। এখােন পয্ারা�া টয্া স�েকর উদাহরণসহ িব�ািরত িববরণ েদওয়া হেব। to H H o TM st EL 1. Bo 0 o েয েকান ডকুেমন এক বা একািধক পয্ারা�ােফ মাধয্ে েলখা হয়। HTML এ পয্ারা�ফ ৈতিরর জ� <p> বা পয্রা�া টয্া বয্বহা করা হয়। েযমন <p>This is a paragraph.</p>। �াউজােরর মাধয্ে �িতটা পয্ারা�া �দশর্ করা হেল �িতটা পয্ারা�ােফ পর একটা কের লাইন ে�ক ৈতির হয়। যিদ কখেনা পয্ারা�ােফ মেধয্ লাইন ে�েকর �েয়াজন হয় তাহেল লাইেনর েশেষ <br /> টয্া বয্বহা করা হয়। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <p>This is a paragraph.</p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph.<br /> This is a paragraph.<br /> This is a paragraph.<br /> This is a paragraph.<br /> </p> </body> </html> Page: 13 of 54
এইচিটএমএল ইবুক ১.০ to H H o TM st EL 1. Bo 0 o একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। k TutoHost.com/bangla/html ৮. েট�ট ফরেমিটং Tu ওেয়বসাইেট আমরা েয েট�টগুেল েদিখ তা েছাট, বড়, েবা�, ইটািলকসহ িবিভ� ফরেমেট হেয় থােক। এখােন েট�ট ফরেমিটং করার িবিভ� প�িত স�েকর িব�ািরত আেলাচনা করা হেব । Microsoft Word এ Bold, Italic, Underline, strikethrough, Subscript, Superscript ইতয্াি েট�ট ফরেমিটং এর জ� বয্বহ হয়। HTML এর ে�ে�ও Microsoft Word এর মত েট�ট ফরেমিটং এর িবেশষ গুর রেয়েছ। একিট ডকুেমন্ট সু�রভাে উপ�াপন করেত েট�ট ফরেমিটং িবষেয় উপযু� �ান থাকা দরকার। HTML এ েট�ট ফরেমিটং এর জ� <b>, <i>, <u>, <strike>, <sub>, <sup>, <big>, <small>, <strong>, <samp>, <tt>, <abbr>, <var>, <code>, <address> ইতয্িদ টয্া সমূহ বয্বহা করা হয়। Page: 14 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o <html> <head> <title>www.tutohost.com</title> </head> <body bgcolor="green"> k উদাহরণ ে�া�াম <p> <b> (Bold)</b> This is an example of bold. <br /> <i>(Italic)</i> This is an example of Italic. <br /> <u> (Underline) </u> This is an example of Underline. <br /> <strike>(Strike) </strike> This is an example of Strike. <br /> (CO<sub>2</sub>) This is an example of Subscript. <br /> (E=MC<sup>2</sup>) This is an example of Superscript. <br /> <big>(Big text)</big>This is an example of Big. <br /> <small>(Small text)</small>This is an example of Small. <br /> <strong>(Strong text)</strong>This is an example of Strong. <br /> <samp>(Sample text) </samp>This is an example of Sample. <br /> <tt>(Teletype)</tt>This is an example of Teletype. <br /> (<abbr> U.N.O</abbr> United Nations Organization.) This is an example of Abbreviation. <br /> (<var>x</var> is a variable.)This is an example of Variable <br /> (<code>Computer code text.</code>) This is an example of Code. <br /> Tu <address> (Written by Ashim<br /> Address: www.tutohost.com<br /> E-mail:ashimkumar50@yahoo.com) </address>This is an example of Address <br /> </p> </body> </html> Page: 15 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html Tu to H H o TM st EL 1. Bo 0 o k একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 16 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৯. ফন্ টয্া HTML এর মাধয্ে েকান ডকুেমন্ট সু�রভাে উপ�াপন করার জ� <font> বা ফন্ টয্া খুবই গুরু�পূ to H H o TM st EL 1. Bo 0 o k ভূিমকা পালন কের। এখােন ফন্ টয্া বয্বহাের িব�ািরত প�িত আেলাচনা করা হেব। HTML এর মাধয্ে েকান ডকুেমন্ট সু�রভাে উপ�াপন করার জ� <font> বা ফন্ টয্া খুবই গুরু�পূ ভূিমকা পালন কের।<font size="5" face="Tahoma" color="red"> Bangladesh is a beautiful country.</font> এখােন size="5" অংশিট হল font টয্ােগ একিট এি�িবউট, যা �কাশ করেছ ইিলেমন্ অথর্া Bangladesh is a beautiful country. েলখািটর সাইজ েকমন হেব। এছাড়া face="Tahoma" �কাশ করেছ েলখািটর font হেব Tahoma এবং color="red" �ারা �কাশ করেছ েলখািটর রং হেব লাল। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <font size="2" face="Verdana"> This is a paragraph. </font> <br /> <font size="5" face="Tahoma" color="red" > Bangladesh is a beautiful country. </font> </body> </html> Page: 17 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। ১০. �াইেলর বয্বহা Tu িসএসএস (Cascading Style Sheet files) মাধয্ে ওেয়বসাইটেক অেনক সু� কের েতালা যায়। এখােন HTML ইিলেমেন্ট সােথ �াইেলর বয্বহা �ণালী িনেয় িব�ািরত আেলাচনা করা হেব। Style, HTML এর একিট নতুন এি�িবউটস, এর মাধয্ে HTML এর মেধয্ CSS বয্বহাের সুেযা সৃি� হয়। Style তথা CSS বয্বহাের মাধয্ে ওেয়ব েপেজর িবিভ� উপাদােনর িডজাইন ৈতির করা হয়। অ�া� এি�িবউটস েযমন align="center", align="left", bgcolor="green", height="100px", width="50px, bgcolor="green" ইতয্ািদ মাধয্ে যিদও িডজাইন ৈতির করা যায়, তেব এে�ে� Style বয্হাের িবেশষ সুিবধ পাওয়া যায়। Page: 18 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <font size="2" face="Verdana"> This is a paragraph. </font> <br /> <font size="5" face="Tahoma" color="red" > Bangladesh is a beautiful country. </font> </body> </html> k উদাহরণ ে�া�াম: অ�া� এি�িবউটস বয্বহা কের Tu উদাহরণ ে�া�াম: �াইল বয্বহা কের <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <font style="font-family:Verdana; font-size:15px" > This is a paragraph. </font> <br /> <font style=" font-size:25px; font-family:Tahoma; color:red;" > Bangladesh is a beautiful country. </font> </body> </html> একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 19 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১১. িলংক k একটা পাতার সােথ আেরকিট পাতার েযাগােযাগ �াপন করা হয় িলংেকর মাধয্ে । এখােন এইচিটএমএল এ িলংক �কাশ করার প�িত স�েকর িব�ািরত আেলাচনা করা হেব। to H H o TM st EL 1. Bo 0 o একটা ওেয়ব সাইটেক বয্বহা বা�ব কের েতালার ে�ে� িলংেকর বয্বহা খুবই গুরু�পূণ Link এর আিভধািনক অথর সংযু� করা। অথর্া একটা ওেয়ব েপেজর সােথ অ� একটা েপজেক যু� করাই হল িলংিকং। HTML এ িলংিকং করার জ� <a> টয্গ বা anchor টয্া বয্বহা করা হয়। েযমন <a href="http://www. tutohost.com/"> www. tutohost.com </a> । অথর্া েয েপেজর সােথ িলংক ৈতির করেত হেব তার এে�স href="…………….. " এর মেধয েলখেত হেব, এবং িলংেক েয েলখািট �দশর্ করেব তা <a href=" ">…………………..</a> এর মেধয েলখেত হেব। উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <a href="http://www. tutohost.com/"> www. tutohost.com </a> <br /> <a href="mailto:admin@tutohost.com"> admin@tutohost.com</a> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 20 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১২. ছিব সংেযাজন k ওেয়ব সাইেট ছিব সংেযাজন, ছিবর মাধয্ে িলংক করা এবং িবিভ� সাইেজর ছিব �দশর্েণ প�িত আেলাচনা করা হেয়েছ। to H H o TM st EL 1. Bo 0 o একটা ওেয়ব েপেজর গুরু�পূ উপাদান সমূেহর একিট হে� ইেমজ । ওেয়বেপেজ ইেমেজর উপযু� বয্বহাের মাধয্ে েপজিট বয্বহারকারীেদ কােছ েযমন আকষর্ণী হেয় ওেঠ েতমিন বয্বহা বা�বও হয়। আকষর্নী েনিভেগশন বার, বাটন, বয্ানা, ইতয্ািদে ইেমেজর বয্বহা অপিরহাযর্ ওেয়ব েপেজ ইেমজ বা ছিব যু� করার জ� �েয়াজনীয় টয্াগি হে� <img> । এর েকান েশষ টয্া েনই। শুধুমা <img> িদেয় েকান কাজ হয় না, এর সােথ সবসময়ই src এি�িবউটিট বয্বহা করেত হয়। েযমন <img src=”pic.png”> , তাহেল pic.png ইেমজিট �দিশর্ হেব। পূবর ��িত েড�টেপ একটা webpage নােম folder িনেত হেব এর মেধয pic.png নােম save করা একটা ছিব রাখেত হেব। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green" style="text-align:center"> <h3> This is an example of image.</h3> <img src="pic.png"> </body> </html> Page: 21 of 54
এইচিটএমএল ইবুক ১.০ to H H o TM st EL 1. Bo 0 o একটা Notepad Open কের উপেরর Code টুক িলেখ File েমন েথেক Save as এ ি�ক কের File name িহেসেব index.html বা home.html অথবা েযেকান নাম.html িদেয়, Save as type িহেসেব All files িসেল� কের এরপর Save বাটেন ি�ক করেত হেব। এরপর save করা index.html ফাইলিটেক webpage folder এর মেধয রাখেত হেব। এখন Mozilla Firefox িদেয় index.html open করেল পােশর ছিবর মত েদখােব। k TutoHost.com/bangla/html অনলাইেন সাভর্াে েকান ইেমজ আপেলাড করা থাকেল উ� ইেমজ যু� করার জ� তার এে�স pic.png এর �ােন েলখেত হেব। েযমন <img src="http://www.tutohost.com/bangla/html/images/pic.png"> Tu ১৩. েটিবল সংেযাজন ওেয়ব েপেজ তথয উপা� পিরসংখয্া উপ�াপন করার একিট অ�তম প�া হে� েটিবল বয্বহা করা। HTML এ table ৈতিরর িবিভ� িবষয় এখােন আেলাচনা করা হেয়েছ । িদেন িদেন ইন্টারেন আজ সবেচেয় বড় তথয ভান্ডাে পিরণত হেয়েছ। তথয উপা� পিরসংখয্া িচ� িভিডও ইতয্ািদ সংিম�েণ একটা ওেয়বেপেজ েকান িবষয়ব�েক যতটা আকষর্ণী এবং পিরপূণর্ভাে উপ�াপন করা যায়, অ�া� িমিডয়ায় তা স�ব হয় না। ওেয়ব েপেজ তথয উপা� পিরসংখয্া উপ�াপন করার একিট অ�তম প�া হে� েটিবল বয্বহা করা। েটিবল ৈতিরর জ� েটিবল টয্া <table> বয্বহা করা হয়। Page: 22 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html উদাহরণ ে�া�াম Tu to H H o TM st EL 1. Bo 0 o k <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #00CC99" style="text-align:center"> <table border="1"> <tr> <th>SL</th> <th>Book</th> <th>Pen</th> <th>Box</th> </tr> <tr> <td>01</td> <td>100</td> <td>200</td> <td>400</td> </tr> <tr> <td>02</td> <td>300</td> <td>600</td> <td>300</td> </tr> <tr> <td>03</td> <td>500</td> <td>800</td> <td>200</td> </tr> </table> </body> </html> একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 23 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ে�া�াম আেলাচনা to H H o TM st EL 1. Bo 0 o k <table border="1"> এখােন border="1" এর মাধয্ে েটিবেলর জ� িসে�ল বডর্া বয্বহা করা হেয়েছ , �েয়াজন অনুসাে 1 এর �ােন 2,3,4 ইতয্াি বয্বহা করা যােব। েটিবেলর �িতটা সাির ৈতিরর জ� <tr></tr> বয্বহা করা হয়, এবং �িতটা েসল ৈতিরর জ� <td></td>বয্বহা করা হয়। <th></th> এর মাধয্ে েটিবল েহডার ৈতির করা হেয়েছ।<th>Book</th> এর মেধয্ Book েলখািট একটু েমাটা েদখােব। েটিবেলর মেধয েকান েসল খািল রাখার জ� <td></td> এর মােঝ িকছু না েলখেলই হেব। শুধুমা <td></td> বয্বহা করেত হেব। সাইেটর েনিভেগশন বার ৈতিরর জ� েটিবল বয্বহা করা েযেত পাের, এে�ে� �িতটা েসেলর েলখার সােথ <td><a href="www.tutohost.com"> িলংক ৈতির কের িদেলই হেব েযমন Tutohost</a></td> অথবা <th><a href="www.tutohost.com"> Tutohost</a></th> Tu ১৪. এইচিটএমএল িল� একিট ওেয়বেপেজ িল� বা তািলকােক সু�রভেব �কাশ করার জ� েয এইচিটএমএল েকাড বয্বহা করা হয়, তার সৃজনশীল প�িত িনেয় এখােন আেলাচনা করা হেয়েছ। একটা ওেয়ব েপজেক সু� কের সাজােনা এবং তথয উপ�াপনার অ�তম প�িত িল� । HTML এর মাধয্ে দু ধরেণর িল� ৈতির করা যায়, একিট হে� অডর্া িল� এবং অপরিট হে� আনঅডর্া িল� । অডর্া িলে� িবিভ� তথয্ে পযর্ায়�িমকভাে সািজেয় উপ�াপন করা হয় এবং �িতটা লাইেনর শুরু �িমক সংখয্ থােক। অ�িদেক আন অডর্া িলে� �িতটা লাইেনর সামেন েছাট বৃ�াকার বা বগর্াকা িচ� থােক। HTML এর মাধয্ে আন অডর্র িল� ৈতির করার জ� <ul></ul> এবং অডর্া িল� ৈতির করার জ� <ol></ol> টয্া বয্বহা করা হয়। Page: 24 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html উদাহরণ ে�া�াম to H H o TM st EL 1. Bo 0 o k <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #00CC99" style="text-align:center"> <h4>Disc Type list</h4> <ul type="disc"> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ul> <h4>Circle Type list</h4> <ul type="circle"> <li>HTML</li> <li>CSS</li> <li>PHP</li> </ul><h4>Square Type list</h4> <ul type="square"> <li>Pragaph</li> <li>Table</li> <li>List</li> </ul> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 25 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html উদাহরণ ে�া�াম to H H o TM st EL 1. Bo 0 o k <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #00CC99" style="text-align:center"> <h3>Alphabet Type list</h3> <ol type="A"> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ol> <h3>Number Type list</h3> <ol type="1"> <li>HTML</li> <li>CSS</li> <li>PHP</li> </ol> <h3>Roman Number Type list</h3> <ol type="I"> <li>Pragaph</li> <li>Table</li> <li>List</li> </ol> Tu </body> </html> একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 26 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১৫. এইচিটএমএল ফমর to H H o TM st EL 1. Bo 0 o k এইচিটএমএল ফমর তথয ইনপুট েনওয়াসহ নানা রকম কােজ বয্বহ হয়। িবেশষ কের ি�ি�ং ে�া�ািমং ভাষার সােথ এই ফেমর্ তথয্গুে সংযু� হেয় কাজ কের থােক।এখােন এইচিটএমএল এর মাধয্ে ফমর ৈতির , বয্বহা এবং বা�ব �েজ� স�েকর আেলাচনা করা হেব। এইচিটএমএল ফমর একিট গুরু�পূ আেলাচয িবষয়। িবেশষ কের ডাইনািমক এবং ডাটােবজ িনভর্ ওেয়ব সাইেটর লগ ইন িসে�ম, েভািটং িসে�ম, কন্টা ফমর সহ ইউজার ইনফরেমশন সং�হ করার জ� এইচিটএমএল ফমর বয্বহ হেয় থােক। একিট এইচিটএমএল ফমর েবশ িকছু উপাদােনর সম�েয় গিঠত হয়। এগুেল হে� , ১. েট�ট ব� ২. েট�ট এিরয়া ৩. েরিডও বাটন ৪. সাবিমট বাটন ৫. েচক ব� ৬. �পডাউন িল� Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #000"> <center> <font face="SolaimanLipi" color="#fe0321" size="6"> আপনার তথয িদেয় সাহাযয করুন </font> < /br>< /br> <form name="information" method="post" action="information.php"> <font face="SolaimanLipi" color="#fe0321" size="4"> নাম:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </font> <input type="text" value="আপনার নাম িলখুন" Page: 27 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html name="name"><br /><br /> <font face="SolaimanLipi" color="#fe0321" size="4"> িপতার নাম: Tu to H H o TM st EL 1. Bo 0 o k </font> &nbsp; &nbsp; <input type="text" value="আপনার িপতার নাম িলখুন" name="name"> <br /><br /> <font face ="SolaimanLipi" color="#fe0321" size="4"> িঠকানা: </font> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea rows="3" cols="20"></textarea><br /> <font face="SolaimanLipi" color="#fe0321" size="4"> আপিন িক পুরু: </font> <input type="radio" value="male" name="gender"> <br /> <font face="SolaimanLipi" color="#fe0321" size="4"> আপিন িক মিহলা: </font> <input type="radio" value="female" name="gender"> <br /> <font face="SolaimanLipi" color="#fe0321" size="4"> আপিন েয শহের থােকন: </font> <select name="district"> <option> কুি�য় </option> <option> ঢাকা</option> <option>খুলনা</option> <option>িসেলট</option> <option>েভড়ামারা</option> <option>যেশার</option> </select><br /><br /> <font face="SolaimanLipi" color="#fe0321" size="4"> িশ�াগত েযাগয্ত: </font> <br /> <input type="checkbox" value="checkbox1" name="checkbox"> <font face="SolaimanLipi" color="#fe0321" size="4"> এস.এস.িস </font> <br /> <input type="checkbox" value="checkbox" Page: 28 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html name="checkbox"> <font face="SolaimanLipi" color="#fe0321" size="4"> এইস.এস.িস to H H o TM st EL 1. Bo 0 o k </font><br /><br /> <input type="submit" name="submit" value="জমা করু"> <br /><br /> <input type="reset" value="মুেছ েফলুন" name="clear"> </form> </center> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 29 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১৬. HTML ে�ম HTML এর মাধয্ে েকান ওেয়ব েপজেক একািধক ভােগ িবভ� করার জ� আেগর িদেন ে�ম বয্বহা করা হত। িদেন িদেন ে�েমর বযবহার কেম এেসেছ। তেব html স�েকর �ান ভান্ডা সমৃ� করার জ� ে�ম স�েকর্ িকছুটা to H H o TM st EL 1. Bo 0 o k ধারণা থাকা দরকার। HTML এর মাধয্ে েকান ওেয়ব েপজেক একািধক ভােগ িবভ� করার জ� আেগর িদেন ে�ম বয্বহা করা হত। িদেন িদেন ে�েমর বয্বহা কেম এেসেছ। বতর্মা সমেয় ে�েমর বয্বহা েনই বলেলই চেল, কারণ ে�ম বয্বহা কের ৈতিরকৃত স�ূণর েপজ একসােথ ি�ন্ করা েবশ ক�কর। এছাড়া এটা অেনেকর কােছই অপছে�র। এর পিরবেতর েকান েপজেক একািধক অংেশ িবভ� করেত এখন CSS বয্বহা করা হয়। তেব html স�েকর �ান ভান্ডা সমৃ� করার জ� ে�ম স�েকর্ িকছুটা ধারণা থাকা দরকার। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #000"> <frameset rows="12%,88%"> <frame src="style.html" scrolling="no"> <frameset cols="27%,74%"> <frame src="link.html"> <frame src="textfor.html" > </frameset> </frameset> </body> </html> Page: 30 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k েয েকান নােম একটা েফা�ার ৈতির কের তার মেথয style.html, link.html এবং textfor.html িতনিট html ফাইল রাখেত হেব এরপর একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Tu ে�া�াম আেলাচনা <frameset rows="12%,88%"> এর মাধয্ে �থেম স�ূণর েপজটাের সাির বরাবর দুি অংেশ িবভ� করা হেয়েছ। <frameset cols="27%,74%"> এর মাধয্ে িনেচর সািরেক কলাম বরাবর দুি অংেশ িবভ� করা হেয়েছ। <frame src="style.html" scrolling="no"> এর মাধয্ে �থম ে�েমর মেধয style.html েপজিটেক �দশর্েন বয্ব� করা হেয়েছ। <frame src="link.html"> এবং <frame src="textfor.html" > এর মাধয্ে যথা�েম ২য় সািরর ১ম ও ২য় ে�েমর মেধয link.html এবং textfor.html েপজ দুিটে �দশর্েন বয্ব� করা হেয়েছ। Page: 31 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o একটা ওেয়ব েপেজর মেধয্ অপর এক বা একািধক ওেয়ব েপজ �দশর্ করার অ�তম উপায় হে� আই ে�ম। েকান িবষয় িব�ািরতভােব উপ�াপনার ে�ে� �াসি�ক িবষেয়র উপর িবিভ� ওেয়ব েপেজর িলংক �কাশ করা গুরু�পূ, পাশাপািশ উ� েপজিটেক সংি�� �ােনর মেধয �িলং কের �দশর্ করেত পারেল ম� হয় না। k ১৭. আই ে�ম উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #f00"> <center> <h2 style="color:#f00">This is an example of iframe.</h2><br /> <iframe src="http://www.tutohost.com/bangla/html/" width="350" height="170"> <p>This rowser does not support iframes.</p> </iframe> </center> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 32 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ে�া�াম আেলাচনা to H H o TM st EL 1. Bo 0 o k আই ে�ম ৈতিরর জ� <iframe></iframe> টয্া বয্বহা করা হয়। width="350" height="170" এই দুি এি�িবউেটর মাধয্ে আই ে�ম এর আকৃিত েকমন হেব তার িনেদর্ �দান করা হয়। যিদ েকান �াউজার আই ে�ম সােপাটর না কের তাহেল <p>This rowser does not support iframes.</p> এর জ� This rowser does not support iframes. েলখািট �দিশর্ হেব। ১৮. রং ও েকাড ওেয়ব েপেজ রং এর বয্বহা খুবই গুরু�পূণ একটা ওেয়ব েপজ গিঠত হয় এক বা একািধক পয্ারা�া, িশেরানাম, েটিবল, বয্া�উন্, বডর্া ইতয্ািদ সম�েয়। এ সকল উপাদােনর �েতয্কিটেত েকান না েকান রং বয্বহা করেত হয়। রং ও েকাড বয্বহাের িব�ািরত প�িত স�েকর জানেত পারব। ওেয়ব েপেজ রং এর বয্বহা খুবই গুরু�পূণ একটা ওেয়ব েপজ গিঠত হয় এক বা একািধক পয্ারা�া, িশেরানাম, েটিবল, বয্া�াউন, বডর্া ইতয্ািদ সম�েয়। এ সকল উপাদােনর �েতয্কিটেত েকান না েকান রং বয্বহা করেত হয়। েকান একিট েপেজর বয্া�াউন কালার িনিদর্ করার জ� <body> টয্ােগ মেধয body েলখার পর একটা ে�স িদেয় bgcolor=" " েলখেত হেব এর পর " " এর মেধয BLACK, Tu SILVER, GRAY, WHITE, MAROON, RED, PURPLE, FUSCHSIA, GREEN, LIME, OLIVE, YELLOW, NAVY, BLUE, TEAL এবং AQUA এই েষালিট রং এর েয েকান একিট েলখা হেল েপেজর বয্া�াউেন েসই েদখা যােব। েযেহতু case sensitive নয় তাই েছাট হােতর অ�ের েলখেলও েকান সম�া েনই, েযমন েলখা হেয়েছ, <body bgcolor="green"> । এছাড়া hexadecimal code বয্বহা কেরও বয্া�াউন কালার িনবর্াচ করা যায়। েযমন উপেরর েকাডিট িনেচর মত েলখা যায় <body bgcolor="#00FF00"> । color piker েথেক সহেজই িবিভ� কালােরর জ� hexadecimal code সং�হ করা যায়। এছাড়া িনেচর চাটর েথেকও কাজিট করা যােব। hexadecimal code এর শুরু একটা # িচ� িদেয় শু করেত হয়। Page: 33 of 54
TutoHost.com/bangla/html Tu to H H o TM st EL 1. Bo 0 o k এইচিটএমএল ইবুক ১.০ বয্া�াউন কালার েদওয়ার আরও একটা মজার প�িত আেছ। লাল, সবুজ আর নীল এই িতনিট রং হে� েমৗিলক রং, আর অ� সব রং এই িতনিট রং এর সংিম�েন ৈতির। যিদ coding কের এই িতনিট রংেক িমিশেয় নতুন রং ৈতির করা হয়, তাহেল ম� হয় না। এ কাজিট সুস� করেত সবুজ বয্া�াউেন্ জ� িনেচর মত কের েলখা েযেত পাের <body bgcolor="rgb(0,255,0)"> । Page: 34 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o উদাহরণ ে�া�াম k এখােন rgb অথর হল red green blue আর (0,255,0) এর অথর হল রংিটেত যথা�েম লাল, সবুজ, নীল রং এর পিরমান যথা�েম 0%, 100%, 0% কারন এখােন িবশু সবুজ রং েনয়া হেয়েছ। আর েয েকান রং এর মান 0-255 পযর্ হেত পাের। েযেহতু g বা green এর মান 255 তাই তা 100%। িতনিট রং এর মান 0-255 এর মেধয পিরবতর্ কের ই�া অনুযায় নতুন নতুন রং ৈতির করা যােব । <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor="green"> <h2 style=" color:#ff0000" > This is the body of your web site. </h2> <p style="color:#093"> This is a paragraph.<br /> This is a paragraph. <br /> This is a paragraph.<br /> This is a paragraph.<br /> </p> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 35 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১৯. েল আউট to H H o TM st EL 1. Bo 0 o k একটা ওেয়ব েপজ কতটা সু� হেব তা স�ূণর্রূ িনভর্ কের েপেজর েল আউেটর উপর। আেগ শধুমা� HTML বয্বহা কেরই সকল ওেয়ব সাইেটর েল আউট ৈতির করা হত। বতর্মাে HTML এর সােথ CSS বয্বহা করা হয়। শুধুমা HTML বয্বহা কের েল আউট ৈতির করার জ� <table> এর সাির ও কলাম বয্বহা করা হয়। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor="green"> <table width="400" border="0"> <tr> <td colspan="3" style="background-color: #93C;"> <h1> Web Page header</h1> </td> </tr> <tr valign="top"> <td style="background-color: #C99;width:100px;textalign:top;"> <p><b>Side bar</b><br /> <a href="#">PHP</a> <br /> <a href="#">HTML</a> <br /> <a href="#">CSS</a> <a href="#">Wordpress</a> </p></td> <td style="backgroundcolor:#EEEEEE;height:200px;width:400px;textalign:top;"><h2 style="color:#900">This is heading.</h2> <p style="color: #006">This is a paragraph.This is a paragraph. This is a paragraph.<br /> Page: 36 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k This is a paragraph.This is a paragraph. This is a paragraph.<br /> This is a paragraph.This is a paragraph.This is a paragraph.<br /> This is a paragraph.This is a paragraph.This is a paragraph.</p></td> </tr> <tr> <td colspan="2" style="background-color:#999;textalign:center;"> Copyright © 2012tutohost.com</td> </tr> </table> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 37 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ২০. িস এস এস to H H o TM st EL 1. Bo 0 o k বতর্মা সমেয় ওেয়ব েপেজর কাঠােমা ৈতির করা হয় HTML িদেয়, িডজাইন ৈতির করা হয় CSS িদেয়, আর েট�ট জমা রাখা হয় ডাটােবেজ। তাই েকান েপজেক আকষর্ণী কের েতালার পাশাপািশ বয্বহা বা�ব কের েতালার জ� CSS এর ভূিমকা খুবই গুরু�পূণ এখান েথেক আমরা HTML এর সােথ CSS যু� করার প�িত স�েকর িব�ািরত জানেত পারব। বতর্মা সমেয় ওেয়ব েপেজর কাঠােমা ৈতির করা হয় HTML িদেয়, িডজাইন ৈতির করা হয় CSS িদেয়, আর েট�ট জমা রাখা হয় ডাটােবেজ। তাই েকান েপজেক আকষর্ণী কের েতালার পাশাপািশ বয্বহা বা�ব কের েতালার জ� CSS এর ভূিমকা খুবই গুরু�পূণ HTML �ারা ৈতির েপেজ িতন প�িতেত CSS যু� করা যায়। ১. এ�টানর্া �াইল িসট (External Style Sheet ) ২. ইনটানর্া �াইল িসট (Internal Style Sheet) ৩. ইনলাইন �াইল িসট (Inline Style Sheet) এ�টানর্া �াইল িসট এ প�িতেত HTML ফাইল এবং CSS �াইল িসট দুি আলাদা িসেট রাখা হয়। এবং িনে�া� প�িতেত HTML এর <head></head>টয্ােগ মেধয িলংক ৈতির কের েদয়া হয়। <head> <link rel="stylesheet" type="text/css" href="http://tutohost.com/bangla/style.css"> </head> ইনটানর্া �াইল িসট Tu এ প�িতেত HTML এবং CSS �াইল একই িসেট <head></head> টয্ােগ মেধয রাখা হয়। এজ� িনে�া� প�িতেত <style></style> টয্া বয্বহা করা হয়। <head> <style type="text/css"> body {background-color: red;} p { margin-left: 20px; font-weight: bold; color: #006; } </style> </head> Page: 38 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ইনলাইন �াইল িসট k এ প�িতেত HTML এর �িতিট টয্ােগ মেধযই CSS �াইল যু� করা হয় । এজ� িনে�া� প�িতেত style এি�িবউটস বয্বহা করা হয়। to H H o TM st EL 1. Bo 0 o <p style="margin-left:120px; font-weight: bold; color: #060;"> Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> <link rel="stylesheet" type="text/css" href="http://tutohost.com/bangla/style.css"> <style> body{background:green; font-family:Verdana; fontsize:15px;} h3{font-size:25px; font-family:Tahoma; color:red;} </style> </head> <body > This is a paragraph. <br /> <h3> Bangladesh is a beautiful country. </h3> <p style="color: #600"> This is a paragraph. This is a paragraph.<br /> This is a paragraph. This is a paragraph.<br /> This is a paragraph. This is a paragraph.<br /> This is a paragraph. This is a paragraph.<br /> This is a paragraph. This is a paragraph.<br /> </p> </body> </html> Page: 39 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। ২১. েহড ইিলেমন্ Tu েহড টয্া বা <head> এবং েহড ইিলেমন্ েযেকান HTML েপেজর একিট গুরু�পূ অংশ। এর মাধয্ে �াউজাের েপজ স�িকর্ েবশ িকছু তথয �দশর্ করার পাশাপািশ সাচর ইিন্জ অপিটমাইেজশন এর মত গুরু�পূ কাজও স�� হয়।এখান েথেক আমরা েহড টয্া বা <head> এবং েহড ইিলেমন্ স�েকর িব�ািরত জানেত পারব। েহড টয্া বা <head> এবং েহড ইিলেমন্ েযেকান HTML েপেজর একিট গুরু�পূ অংশ। কারণ <head>….</head> এর মেধয অথর্া েহড ইিলেমন্ িহেসেব <title> <link> <meta> <style> <script> এ সকল গুরু�পূ টয্া সমূহ রাখা হয়। এগুেলা মাধয্ে �াউজাের েপজ স�িকর্ েবশ িকছু তথয �দশর্ করার পাশাপািশ সাচর ইিন্জ অপিটমাইেজশন এর মত গুরু�পূ কাজও স�� হয়। Page: 40 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html টাইেটল to H H o TM st EL 1. Bo 0 o <title>আমােদর HTML িটউেটািরয়াল সমূহ</title> k �াউজােরর টাইেটল বাের েপেজর টাইেটল �দশর্েন জ� <title> </title> টয্া বয্বহা করা হয়। উপেরর েকাড এর মাধয্ে �াউজােরর টাইেটল বাের “আমােদর HTML িটউেটািরয়াল সমূহ” েলখািট েদখা যােব। িলংক CSS �াইল িসট এর সােথ িলংক করার জ� <link> </link> বয্বহা করা হয়। <link rel="stylesheet" type="text/css" href="styles.css" /> েমটা ইিলেমন্ েমটা সাচর ইিন্জ অপিটমাইেজশেনর জ� গুরু�পূ কাজ কের থােক। িবষয়িট পববতর্ েলখায় িব�ািরত আেলাচনা করা হেব। �াইল ইনটানর্া �াইল িসট বয্বহাের জ� <style></style> টয্া বয্বহা করা হয়। েযমন Tu <head> <style type="text/css"> body {background-color: red;} p { margin-left: 20px; font-weight: bold; color: #006; } </style> </head> Page: 41 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ি�� k জাভাি��, েজ েকােয়রী ইতয্াি ি�� যু� করার জ� <script> </script> টয্া বয্বহা করা হয়। েযমন to H H o TM st EL 1. Bo 0 o <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sliding_effect.js"></script> উদাহরণ ে�া�াম িনেচর িলংক েথেক েসাসর ফাইল ডাউনেলাড কের Extract কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব।এবং �াউজােরর টাইেটল বাের “আমােদর HTML িটউেটািরয়াল সমূহ” েলখািট েদখা যােব। Tu েসাসর ফাইল ডাউনেলাড Page: 42 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ২১. েমটা k েয েকান ওেয়ব সাইেটর জ�ই সাচর্ ইিন্জন অপিটমাইেজশন একিট গুরু� িবষয়। ওেয়ব েপেজ েমটা টয্াগ বয্বহার কের এ গুরু�পূণর্ কাজিট কর এখান েথেক আমরা েমটা টয্াগ স�েকর্ িব�ািরত জানে পারব। to H H o TM st EL 1. Bo 0 o একিট ওেয়ব সাইট তখনই জনি�য় হয় যখন তা মানুেষ �েয়াজেন আেস এবং েয েকউ �েয়াজেনর সময় সহেজই সাচর ইিন্জেন মাধয্ে সাচর কের সাইটিটেক খুেজঁ পায়। একিট ওেয়ব েপজ েযন সহেজই সাচর ইিন্জ খুেজ পায় এ জ� ওেয়ব ে�া�ামারেদর েয কাজিট করেত হয়, তােক বলা হয় সাচর ইিন্জ অপিটমাইেজশন। েয েকান ওেয়ব সাইেটর জ�ই সাচর ইিন্জ অপিটমাইেজশন একিট গুরু�পূ িবষয়। ওেয়ব েপেজ েমটা টয্া বয্বহা কের এ গুরু�পূ কাজিট করা হয়। http://www.tutohost.com/bangla/html/2.php েপজিটর েমটা টয্াে েলখা আেছ…. <meta name="description" content="এইচিটএমএল এ ে�া�াম েলখার সাধারন প�িত এবং �াথিমক একিট ে�ােজ� ও সাধারন টয্াগগুে িনেয় আেলাচনা করা হেব।" /> <meta name="keywords" content="এইচিটএমএল ে�া�াম েলখা, html bangla tutorial" /> Google আমােদর সকেলর পিরিচত জনি�য় একিট সাচর ইিন্জন যিদ http://www.tutohost.com/bangla/html/2.php িট Google সাচর ইিন্জ বয্বহা কের সাচর করা Tu হয় তাহেল িনেচর ছিবর মত আসেব। Page: 43 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html k �থেম েপেজর টাইেটল, তারপর িলংক এবং এর পর আেছ "এইচিটএমএল এ ে�া�াম েলখার সাধারন প�িত এবং �াথিমক একিট ে�ােজ� ও সাধারন টয্াগগুে িনেয় আেলাচনা করা হেব।" to H H o TM st EL 1. Bo 0 o যা <meta name="description" content="……………………………………." /> এর মেধয েলখা আেছ। <meta name="keywords" content="……………………………………." /> এর মেধয েলখা আেছ "এইচিটএমএল ে�া�াম েলখা, html bangla tutorial" এেক িক ওয়াডর বলা হয়। আমরা যখন েকান বাকয িলেখ সাচর ইিন্জে সাচর কির তখন সাচর ইিন্জ বাকয্িটে েভে� একািধক িক ওয়াডর এ িবভ� কের সাচর কের। তাই িক ওয়াডর হে� সাচর ইিন্জে েকান ওেয়ব েপজ খুেজ পাওয়ার অ�তম প�িত। এজ� HTML এর মাধয্ে েকান েপজ ৈতিরর সময় <meta name="keywords" content="……………………………………." /> এর মেধয স�াবয িক ওয়াডর গুেল যু� কের েদয়া হয়। <meta name="author" content="অসীম কুমা" /> Tu েলখেকর নামেক সাচর ইিন্জে সাবিমট করার জ� <meta name="author" content="……………"/> বয্বহা করা হয়। ওেয়ব েপজ অেটা িরে�স করার জ�ও েমটা টয্া বয্বহা করা হয়। <META HTTP-EQUIV="REFRESH" CONTENT="15;URL=http://www.tutohost.com"> উপেরর েকাডিট বয্বহা করেল �িত ১৫ েসেকন্ অ�র অ�র http://www.tutohost.com েপজিট একবার কের িরে�স হেব। Page: 44 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ২৩. ি�� to H H o TM st EL 1. Bo 0 o এ ি�� যু� করার প�িত স�েকর জানেত পারব। k HTML েকান ে�া�ািমং লয্া�ুেয় নয়। তাই ওেয়ব েপেজও ে�া�ািমং এর সুিবধ যু� করার জ� িবিভ� ধরেনর ি�ি�ং লয্া�ুেয় বয্বহা করা হয়, েযমন জাভাি��, েজ েকােয়রী ইতয্ািদ।জাভাি�, েজ েকােয়রী ইতয্াি ি�� যু� করার জ� HTML এ <script> </script> টয্া বয্বহা করা হয়।এখান েথেক আমরা HTML HTML েকান ে�া�ািমং লয্া�ুেয় নয়। তাই ওেয়ব েপেজও ে�া�ািমং এর সুিবধ যু� করার জ� িবিভ� ধরেনর ি�ি�ং লয্া�ুেয় বয্হার করা হয়, েযমন জাভাি��, েজ েকােয়রী ইতয্ািদ এর মাধয্ে ওেয়ব েপেজ েলাকাল টাইম �দশর্, সময় িদন তািরখ �দশর্, �াউজার িচি�ত করা, সময় এবং ইেভন্ এর উপর িভি� কের বয্বহারকারীে েকান িবেশষ বাতর্ �দশর্ করা সহ িবিভ� ধরেণর আকষর্ণী এবং গু�পূণর কাজ করা স�ব হয়। জাভাি��, েজ েকােয়রী ইতয্াি ি�� যু� করার জ� HTML এ <script> </script> টয্া বয্বহা করা হয়। েযমন <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sliding_effect.js"></script> Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> <script type="text/javascript"> function show_alert() {alert("Welcome to www.tutohost.com");} </script> </head> <body bgcolor="#009933" > <input type="button" style="margin-left:150px; width:100px; height:50px; font-size:18px; color:#F00" onclick="show_alert()" value="Click Me" /> </body> </html> Page: 45 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozila Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। যিদ Click Me বাটনিটেত ি�ক করা হয় তাহেল একিট এলাটর বে� Welcome to www.tutohost.com েলখািট েদখা যােব। ২৪. অিডও সংেযাজন েকান িবষয়েক উপ�াপনার ে�ে�, েট�ট এবং ছিবর পাশাপািশ অিডও-িভিডও বয্বহা করেল িবষয়িট আেরা �াণব� হেয় উেঠ। এখান েথেক আমরা HTML অিডও ফাইল যু� এবং িনয়�ণ করার প�িত স�েকর িব�ািরত জানেত পারব। Tu েকান িবষয়েক উপ�াপনার ে�ে�, েট�ট এবং ছিবর পাশাপািশ অিডও-িভিডও বয্বহা করেল িবষয়িট আেরা �াণব� হেয় উেঠ। ওেয়ব িমিডয়ার মাধয্ে এ কাজিট যতটা ভােলাভােব করা যায় আর অ� েকােনা িমিডয়ায় মাধয্ে তা স�ব নয়। HTML �ারা ৈতির েপেজ <embed> টয্া বয্বহা কের সহেজই অিডও ফাইল যু� করা যায় এবং িনয়�ণ করা যায়। পূবর ��িত Page: 46 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html েড�টেপ একটা audio নােম folder িনেত হেব এর মেধয audio.mp3 নােম save করা একটা অিডও ফাইল রাখেত হেব। k অনুশীল �েজ� to H H o TM st EL 1. Bo 0 o <html> <head> <title> www.tutohost.com</title> </head> <body > <p> <center> <embed src="audio.mp3" height="35" width="300" controller="true" loop="false" autostart="false"> </embed> <h3 style="color:#F00">Click play button and enjoy music.</h3> </center> </p> </body> </html> েড�টেপ ৈতির করা audio folder এর মেধয একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। �েজ� িবে�ষণ Tu অিডও যু� করার জ� <embed> টয্া বয্বহা করা হয়। <embed src="audio.mp3" height="35" width="300" controller="true" loop="false" autostart="false"> </embed> src="audio.mp3" এখােন src="…………." এর মেধয অিডও ফাইেলর িলংক যু� করা হয়। Page: 47 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html height="35" width="300" এর মাধয্ে �াউজাের �দিশর্ অিডও ে�য়ােরর আকৃিত িনধর্ার করা হয়। to H H o TM st EL 1. Bo 0 o k controller="true" এর মাধয্ে ওেয়ব েপেজ অিডও ে�য়ার �দশর্ করা হেব িকনা তার িনেদর্ �দান করা হয়। যিদ controller="……….." এর মেধয true েলখা হয় তাহেল অিডও ে�য়ার �দিশর্ হেব আর false েলখা হেল অিডও ে�য়ার �দিশর্ হেব না। loop="false" এর মাধয্ে audio ফাইলিট িক একবার ে� হেব না লুপ আকাের বারবার ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা একবার ে� হেব। autostart="false" এর মাধয্ে audio ফাইলিট অেটাে� অথর্া ওেয়ব েপজ েলাড হওয়ার সােথ সােথই ে� হেব, না অিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা অেটাে� হেব না, অিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব। িনেদর্শন: যিদ ওেয়ব েপেজ অিডও ে�য়ার �দিশর্ না হয় তাহেল QuickTime Player ই�টল কের িনন অথবা �াউজােরর িনেদর্শন অনুযায় �েয়াজনীয় �াগ ইনস ই�টল কের িনন। ২৫. িভিডও সংেযাজন সংঘিটত বা�ব ঘটনােক পিরপূণ্ভাে উপ�াপনার ে�ে� িভিডও সবেচেয় উপেযাগী মাধয্ম।এখা েথেক আমরা র HTML এ িভিডও ফাইল যু� এবং িনয়�ণ করার প�িত স�েকর িব�ািরত জানেত পারব। Tu সংঘিটত বা�ব ঘটনােক পিরপূণর্ভাে উপ�াপনার ে�ে� িভিডও সবেচেয় উপেযাগী মাধয্ম ৈদনি�ন সংবাদ �কাশক ওেয়ব সাইটগুেল তােদর ৈদনি�ন ঘটনাগুেলাে েট�ট এবং ইেমজ বয্বহাের মাধয্ে �কােশর পাশাপািশ িভিডও �কােশর মাধয্ে আেরা েবিশ জনি�য়তা অজর্েন সুেযা পাে�, এবং বয্বহারকারীর এ সকল ঘটনার বা�ব িচ� েদখা, এবং জানার পাশাপািশ �েয়াজেন সং�হ কের রাখেত পারেছন। বতর্মাে িভিডও শুধ মানুেষ িবেনাদন এবং বা�ব ঘটনা �কােশর মাধয্ম নয়, এিট িশ�ার অ�তম বাহেন পিরণত হেয়েছ। অসংখয িশ�ামূলক ওেয়ব সাইট িবিভ� িবষেয়র উপর �িতিদন নতুন নতুন েট�ট িভি�ক িটউেটািরয়ােলর পাশাপািশ িভিডও িটউেটািরয়াল �কাশ করেছ। যা মানুষে পৃিথবীর েয েকান �া� েথেক শুধুমা েশখা এবং জানার সেযাগই সৃি� করেছ না, �� িবিনময় এবং আেলাচনার মু� Page: 48 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html �াটফমর ৈতিরর মাধয্ে পিরপূণর িশ�া িব�ােরও ভুিমকা রাখেছ। HTML�ারা ৈতির েপেজ <embed> টয্া বয্বহা কের সহেজই িভিডও যু� করা যায় এবং িনয়�ণ করা যায়। to H H o TM st EL 1. Bo 0 o k পূবর ��িত েড�টেপ একটা video নােম folder িনেত হেব এর মেধয video.wmv নােম save করা একটা িভিডও ফাইল রাখেত হেব। অনুশীল �েজ� Tu <html> <head> <title> www.tutohost.com</title> </head> <body > <p> <center> <embed src="video.wmv" width="344" height="300" autostart="false" controller="true" loop="false" > </embed> <h3 style="color:#F00">Click the play button and enjoy video.</h3> </center> </p> </body> </html> েড�টেপ ৈতির করা video folder এর মেধয একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। �েজ� িবে�ষণ Page: 49 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html িভিডও যু� করার জ� <embed> টয্া বয্বহা করা হয়। to H H o TM st EL 1. Bo 0 o k <embed src="video.wmv" width="344" height="300" autostart="false" controller="true"> </embed> src="video.wmv" এখােন src="…………." এর মেধয িভিডও ফাইেলর িলংক যু� করা হয়। height="344" width="300" এর মাধয্ে �াউজাের �দিশর্ িভিডও ে�য়ােরর আকৃিত িনধর্ার করা হয়। controller="true" এর মাধয্ে ওেয়ব েপেজ িভিডও ে�য়ার �দশর্ করা হেব িকনা তার িনেদর্ �দান করা হয়। যিদ controller="……….." এর মেধয true েলখা হয় তাহেল িভিডও ে�য়ার �দিশর্ হেব আর false েলখা হেল িভিডও ে�য়ার �দিশর্ হেব না। loop="false" এর মাধয্ে িভিডও ফাইলিট িক একবার ে� হেব না লুপ আকাের বারবার ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা একবার ে� হেব। Tu autostart="false" এর মাধয্ে িভিডও ফাইলিট অেটাে� অথর্া ওেয়ব েপজ েলাড হওয়ার সােথ সােথই ে� হেব, না িভিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা অেটাে� হেব না, িভিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব। িনেদর্শন: যিদ ওেয়ব েপেজ অিডও ে�য়ার �দিশর্ না হয় তাহেল �াউজােরর িনেদর্শন অনুযায় �েয়াজনীয় �াগ ইনস ই�টল কের িনন। ২৬. �াস সংেযাজন Page: 50 of 54
এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html �াস এিনেমশন ওেয়ব সাইেটর একিট অ�তম আকষর্ণী উপাদান। আকষর্ণী েনিভেগশন বার, বয্ানা, বাটন ইতয্ািদে �ােসর এিনেমশন যু� কের েযমন ওেয়ব সাইেটর ইন্টারেফসে আকষর্ণী কের েতালা যায়, পাশাপািশ সাইটিটও বয্বহা বা�ব হেয় উেঠ। এখান েথেক আমরা HTML এ �ােস ৈতির এিনেমশন অথর্া SWF ফাইল যু� করার প�িত স�েকর িব�ািরত জানেত পারব। to H H o TM st EL 1. Bo 0 o k �াস এিনেমশন ওেয়ব সাইেটর একিট অ�তম আকষর্ণী উপাদান। আকষর্ণী েনিভেগশন বার, বয্ানা, বাটন ইতয্ািদে �ােসর এিনেমশন যু� কের েযমন ওেয়ব সাইেটর ইন্টারেফসে আকষর্ণী কের েতালা যায়, পাশাপািশ সাইটিটও বয্বহা বা�ব হেয় উেঠ। HTML�ারা ৈতির েপেজ <embed> টয্া বয্বহা কের অিডও এবং িভিডও এর মত সহেজই �ােস ৈতির এিনেমশন অথর্া SWF ফাইল যু� করা যায় । পূবর ��িত েড�টেপ একটা flash নােম folder িনেত হেব এর মেধয flash.swf নােম save করা একটা িভিডও ফাইল রাখেত হেব। Tu অনুশীল �েজ� <html> <head> <title> www.tutohost.com</title> </head> <body > <center> <embed src="flash.swf" width="250" height="240"> </embed> </center> </body> </html> েড�টেপ ৈতির করা flash folder এর মেধয একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 51 of 54
TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k এইচিটএমএল ইবুক ১.০ �েজ� িবে�ষণ �াস যু� করার জ� <embed> টয্া বয্বহা করা হয়। <embed src="flash.swf" width="250" height="240"> </embed> src="flash.swf" এখােন src="…………." এর মেধয �াস ফাইেলর িলংক যু� করা হয়। width="250" height="240" এর মাধয্ে �াউজাের �দিশর্ �াস এিনেমশেনর আকৃিত িনধর্ার করা হয়। িনেদর্শন: Tu িনেদর্শন: যিদ ওেয়ব েপেজ �াস এিনেমশন �দিশর্ না হয় তাহেল flash player অথবা �াউজােরর িনেদর্শন অনুযায় �েয়াজনীয় �াগ ইনস ই�টল কের িনন। Like Us on FaceBook FaceBook.com/TutoHost All Right Reserved By TutoHost.com Page: 52 of 54

Recomendados

Html bangla e-book
Html bangla e-bookHtml bangla e-book
Html bangla e-bookRuposhibangla24,Nawabganj,Dinajpur-5280
 
Basic html by jihadur rahman noyon
Basic html by jihadur rahman noyonBasic html by jihadur rahman noyon
Basic html by jihadur rahman noyonenafrank
 
Natural resources orientation 2013 2014
Natural resources orientation 2013 2014Natural resources orientation 2013 2014
Natural resources orientation 2013 2014casmithCTC
 
Prelim photos
Prelim photosPrelim photos
Prelim photosjam3scoles
 
5 Things to Remember when Planning a Kids Birthday Theme Party!
5 Things to Remember when Planning a Kids Birthday Theme Party!5 Things to Remember when Planning a Kids Birthday Theme Party!
5 Things to Remember when Planning a Kids Birthday Theme Party!Party Fun Box
 
Tics
TicsTics
Ticsfcastrat
 
Carolina bedoya bedoya
Carolina bedoya bedoyaCarolina bedoya bedoya
Carolina bedoya bedoyacarolinabedoyabedoya
 
Ch. 3 FIT5, CIS 110 13F
Ch. 3 FIT5, CIS 110 13FCh. 3 FIT5, CIS 110 13F
Ch. 3 FIT5, CIS 110 13Fmh-108
 

Recomendados

Html bangla e-book
Html bangla e-bookHtml bangla e-book
Html bangla e-bookRuposhibangla24,Nawabganj,Dinajpur-5280
 
Basic html by jihadur rahman noyon
Basic html by jihadur rahman noyonBasic html by jihadur rahman noyon
Basic html by jihadur rahman noyonenafrank
 
Natural resources orientation 2013 2014
Natural resources orientation 2013 2014Natural resources orientation 2013 2014
Natural resources orientation 2013 2014casmithCTC
 
Prelim photos
Prelim photosPrelim photos
Prelim photosjam3scoles
 
5 Things to Remember when Planning a Kids Birthday Theme Party!
5 Things to Remember when Planning a Kids Birthday Theme Party!5 Things to Remember when Planning a Kids Birthday Theme Party!
5 Things to Remember when Planning a Kids Birthday Theme Party!Party Fun Box
 
Tics
TicsTics
Ticsfcastrat
 
Carolina bedoya bedoya
Carolina bedoya bedoyaCarolina bedoya bedoya
Carolina bedoya bedoyacarolinabedoyabedoya
 
Ch. 3 FIT5, CIS 110 13F
Ch. 3 FIT5, CIS 110 13FCh. 3 FIT5, CIS 110 13F
Ch. 3 FIT5, CIS 110 13Fmh-108
 
Sportco rehabilitation
Sportco rehabilitationSportco rehabilitation
Sportco rehabilitationSportcorehab
 
Pd sir
Pd sirPd sir
Pd sirRashedul alam Prodip
 
Ch. 15 FIT5, CIS 110 13F
Ch. 15 FIT5, CIS 110 13FCh. 15 FIT5, CIS 110 13F
Ch. 15 FIT5, CIS 110 13Fmh-108
 
Shot Types Diagram
Shot Types DiagramShot Types Diagram
Shot Types Diagramjam3scoles
 
Koulumentorit
KoulumentoritKoulumentorit
KoulumentoritPaulaharjuOulu
 
Ncc art100 ch.5
Ncc art100 ch.5Ncc art100 ch.5
Ncc art100 ch.565swiss
 
Beatles redes sociais
Beatles redes sociaisBeatles redes sociais
Beatles redes sociaisllucky14
 
Ms word
Ms wordMs word
Ms wordAR TECH
 
sinar x
sinar xsinar x
sinar xPak Zaenal
 
Digipack explanation
Digipack explanationDigipack explanation
Digipack explanationjam3scoles
 
Presentación
PresentaciónPresentación
Presentación880808
 
Ruski
RuskiRuski
RuskiArsenijeM
 
Theories
TheoriesTheories
Theoriesjam3scoles
 
20130904 aws cliツール 導入ガイド
20130904 aws cliツール 導入ガイド20130904 aws cliツール 導入ガイド
20130904 aws cliツール 導入ガイドYasuyuki SAITO
 
Revago20141004 goswin - gods genade zwart op wit
Revago20141004 goswin - gods genade zwart op witRevago20141004 goswin - gods genade zwart op wit
Revago20141004 goswin - gods genade zwart op witmissim77
 
NCC ART104 1
NCC ART104 1NCC ART104 1
NCC ART104 165swiss
 
Ne-smity
Ne-smityNe-smity
Ne-smityTaras Yemchura
 
Warner Robins MSA: Potential Market for Industry and Technology Corridor
Warner Robins MSA: Potential Market for Industry and Technology CorridorWarner Robins MSA: Potential Market for Industry and Technology Corridor
Warner Robins MSA: Potential Market for Industry and Technology CorridorShermaine M. Perry, MPA
 
Scrapbook
ScrapbookScrapbook
Scrapbookllucky14
 
Sport co rehabilitation massage
Sport co rehabilitation massageSport co rehabilitation massage
Sport co rehabilitation massageSportcorehab
 

Más contenido relacionado

Destacado

Sportco rehabilitation
Sportco rehabilitationSportco rehabilitation
Sportco rehabilitationSportcorehab
 
Ch. 15 FIT5, CIS 110 13F
Ch. 15 FIT5, CIS 110 13FCh. 15 FIT5, CIS 110 13F
Ch. 15 FIT5, CIS 110 13Fmh-108
 
Shot Types Diagram
Shot Types DiagramShot Types Diagram
Shot Types Diagramjam3scoles
 
Ncc art100 ch.5
Ncc art100 ch.5Ncc art100 ch.5
Ncc art100 ch.565swiss
 
Beatles redes sociais
Beatles redes sociaisBeatles redes sociais
Beatles redes sociaisllucky14
 
Digipack explanation
Digipack explanationDigipack explanation
Digipack explanationjam3scoles
 
Presentación
PresentaciónPresentación
Presentación880808
 
20130904 aws cliツール 導入ガイド
20130904 aws cliツール 導入ガイド20130904 aws cliツール 導入ガイド
20130904 aws cliツール 導入ガイドYasuyuki SAITO
 
Revago20141004 goswin - gods genade zwart op wit
Revago20141004 goswin - gods genade zwart op witRevago20141004 goswin - gods genade zwart op wit
Revago20141004 goswin - gods genade zwart op witmissim77
 
NCC ART104 1
NCC ART104 1NCC ART104 1
NCC ART104 165swiss
 
Warner Robins MSA: Potential Market for Industry and Technology Corridor
Warner Robins MSA: Potential Market for Industry and Technology CorridorWarner Robins MSA: Potential Market for Industry and Technology Corridor
Warner Robins MSA: Potential Market for Industry and Technology CorridorShermaine M. Perry, MPA
 
Sport co rehabilitation massage
Sport co rehabilitation massageSport co rehabilitation massage
Sport co rehabilitation massageSportcorehab
 

Destacado (20)

Sportco rehabilitation
Sportco rehabilitationSportco rehabilitation
Sportco rehabilitation
 
Pd sir
Pd sirPd sir
Pd sir
 
Ch. 15 FIT5, CIS 110 13F
Ch. 15 FIT5, CIS 110 13FCh. 15 FIT5, CIS 110 13F
Ch. 15 FIT5, CIS 110 13F
 
Shot Types Diagram
Shot Types DiagramShot Types Diagram
Shot Types Diagram
 
Koulumentorit
KoulumentoritKoulumentorit
Koulumentorit
 
Ncc art100 ch.5
Ncc art100 ch.5Ncc art100 ch.5
Ncc art100 ch.5
 
Beatles redes sociais
Beatles redes sociaisBeatles redes sociais
Beatles redes sociais
 
Ms word
Ms wordMs word
Ms word
 
sinar x
sinar xsinar x
sinar x
 
Digipack explanation
Digipack explanationDigipack explanation
Digipack explanation
 
Presentación
PresentaciónPresentación
Presentación
 
Ruski
RuskiRuski
Ruski
 
Theories
TheoriesTheories
Theories
 
20130904 aws cliツール 導入ガイド
20130904 aws cliツール 導入ガイド20130904 aws cliツール 導入ガイド
20130904 aws cliツール 導入ガイド
 
Revago20141004 goswin - gods genade zwart op wit
Revago20141004 goswin - gods genade zwart op witRevago20141004 goswin - gods genade zwart op wit
Revago20141004 goswin - gods genade zwart op wit
 
NCC ART104 1
NCC ART104 1NCC ART104 1
NCC ART104 1
 
Ne-smity
Ne-smityNe-smity
Ne-smity
 
Warner Robins MSA: Potential Market for Industry and Technology Corridor
Warner Robins MSA: Potential Market for Industry and Technology CorridorWarner Robins MSA: Potential Market for Industry and Technology Corridor
Warner Robins MSA: Potential Market for Industry and Technology Corridor
 
Scrapbook
ScrapbookScrapbook
Scrapbook
 
Sport co rehabilitation massage
Sport co rehabilitation massageSport co rehabilitation massage
Sport co rehabilitation massage
 

Tutohost.com html-ebook

  • 1. TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k এইচিটএমএল ইবুক ১.০ এইচিটএমএল ই-বুক ১.০ Tu েলখকঃ অসীম কুমা পাল Page: 1 of 54
  • 2. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html েলখকঃ অসীম কমমা পমল ১৯৮৭ সমেল k কমমা to H H o TM st EL 1. Bo 0 o অসীম কি�য়ময় জ��হণ কোন। ২০১০ সমেল িতিন কি�য়ম পিলেটকিনক ইনি�িটউট স�মদনমঃ মমহবুব িটউেটম েথেক িডে�মমম পমস কোন। িতিন ঢমকম �েকৗশল �যুি� িব�িবদযমলেয় িব. এস. িস ইন ইেলকি�কযমল ইেলকি�ক ইি�িনয়মিাং পড়েছন। িতিন ওেয়ব এনড এবং এ েডভলপেমনট মমইেয়মকেন�লমোা উপো ধমামবমিহক িটউেটমিায়মল িলেখ সবমা নজো আেসন। এছমড়মও িতিন েটকিটউনস, িটউেটমিায়মলিবিডসহ েবশ িকছু বমংলম �ো িলেখ থমেকন। বমংলমেদেশ অনলমইন িশ�মমূলক �কমশনমগেলম এেকবমো হমেতগেন োলম যময়। এ েদেশা তুন সমমজ তথয�যুি�েত নতুন নতুন েমধম একি�ত হেয় �মন অজরেনা জ� কমজ কো যমে�। িবষয়িট একিট িনাব িব�েবা র মেতম। আ এই সৃজনশীল বযি�েদা িশ�ম কমযরয়ম ও উ�মবনী শি�া �কমশনম ধারাবািহক এইচিটএমএল িটউেটমিায়মল যা এখন ই-বুক আকাের �কাশ করা হেলা। Tu বতরমমেন িতিন িটউেটমেহমে� কমরাত �যুি� েলখক অসীম কমমোা হমত ধো আেছন। “এইচিটএমএল বমংলম ই-বুক ১.০” আিথরক সহেযমিাতময় সবমইেক ওেয়ব েডভলপেমেনটা িশখমা �থম পদে�প িহেসেব এিােয় িনেয় যমেব বেল আশম কিা। িটউেটমেহম� TutoHost.com �ুা িািডং িনলুামা ইয়মসিমন AmusingOcean.com Page: 2 of 54
  • 3. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html • ে�া�াম েলখার প�িত টয্া সমুহ ও বয্বহা ইিলেমন্ িক এবং িকভােব বয্বহ হয় এি�িবউট িক এবং িকভােব বয্বহ হয় েহিডং টয্া ও বয্বহা HTML পয্ারা�া েট�ট ফরেমিটং ফন্ টয্া এর বয্বহা �াইেলর বয্বহা িলংক �কােশর প�িত ছিব �কাশ েটিবল ও েটিবল �কাশ প�িত িলে�র বয্বহা HTML ফমর ে�ম এর বয্বহা আই ে�ম এর বয্বহা রং ও েকাড েল আউট প�িত HTML এ িসএসএস এর বযবহার েহড েমটা টয্া HTML এ ি�� এর বয্বহা ওেয়েব অিডও ফাইল চালােনার প�িত ওেয়েব িভিডও ফাইল চালােনার প�িত ওেয়েব �াস ফাইল চালােনার প�িত to H H o TM st EL 1. Bo 0 o • HTML িক? HTML এর ইিতহাস k সূিচ প�ঃ • • • • • • • • • • • • • • • • • • • • Tu • • • • • Page: 3 of 54
  • 4. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১. HTML িক? to H H o TM st EL 1. Bo 0 o েথেক HTML স�িকর্ িব�ািরত �ান অজর্ করা যােব। k এখােন ধারাবািহক ভােব বাংলা ভাষায় HTML এর উপর িটউেটািরয়াল েলখা হেয়েছ । ডান পােশর ধারাবািহক িলংক HTML একটা কি�উটার লয্া�ুেয়, যা পৃিথবীর িবশাল তথয- ভান্ডারে ইন্টারেনেট মাধয্ে �দশর্েন সুেযা ৈতির কের িদেয়েছ। একটা ওেয়ব েপেজর মূল গঠন ৈতির হয় HTML িদেয়। HTML েকান ে�া�ািমং লয্া�ুেয় নয়, এেক Hyper Text Mark Up Language বলা হয়। Mark Up Language এক েসট Mark Up টয্ােগ সম�েয় গিঠত হয়। একটা ওেয়ব েপেজর িবিভ� অংশ �াউজােরর মাধয্ে িকভােব �দিশর্ হেব, তা HTML এ Mark Up টয্া সমূহ বয্বহা কের �কাশ করা হয় । HTML এর ইিতহাস HTML বা Hyper Text Mark Up Language ৈতির কেরেছন িটম বানর্া-লী। এখােন এইচিটএমএল এর সংি�� ইিতহাস তুেল ধরা হেলা। Tu HTML বা Hyper Text Mark Up Language ৈতির কেরেছন িটম বানর্া-লী। HTML ৈতিরর উে�� িছল ৈব�ািনক গেবষণার তথয উপা� �ত পৃিথবীর িবিভ্ �ােন আদান �দােনর বয্ব� করা। ১৯৯০ সােলর িদেক NCSA কতৃ্ েডভলপকৃত েমাজাইক �াউজােরর মাধয্ে র HTML পিরিচিত লাভ কের। ১৯৯৭ এর জানুয়ারীে WC3 কতৃরক �থম েডভলপকৃত HTML3.2 �কািশত হয়। একই বছের েশেষ িডেস�ের WC3 HTML এর নতুন সং�রণ HTML4.2 �কাশ কের। ২০১০ সােল বতর্মাে �চিলত HTML এর সবর্েশ ভাসর্ HTML5 জনস�ূেখ পিরিচিত লাভ কের। Page: 4 of 54
  • 5. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ২. ে�া�াম েলখার প�িত k েয েকান ে�া�াম েলখার জ�ই েকান একটা এিডটর বয্বহা কের েকািডং করেত হয়।এখােন এইচিটএমএল এ ে�া�াম েলখার সাধারন প�িত, একিট �াথিমক ে�ােজ� এবং সাধারন টয্াগসমূ িনেয় আেলাচনা করা হেব। to H H o TM st EL 1. Bo 0 o েয েকান ে�া�াম েলখার জ�ই েকান একটা এিডটর বয্বহা কের েকািডং করেত হয়। HTML এ ে�া�াম েলখার জ� �াথিমকভােব এিডটর িহেসেব উইেন্ডা অপােরিটং িসে�েমর িডফ� এিডটর notepad বয্বহা করা েযেত পাের এবং বাড়িত সুিবধ পাবার জ� এডভা� এিডটর িহেসেব Dreamweaver এবং Notepad++ বয্বহা করা ভাল। HTML এ েলখা ে�া�াম .html এ�েটনশন েযমন index.html �ারা Save কের েযেকান �াউজার েযমন Internet explorer, Mozilla Firefox , Google chrome এবং Opera �ারা েদখা যােব। HTML এ েলখা ে�া�ােমর েমৗিলক অংশ সমূহ <html> <head> <title> www.tutohost.com</title> </head> <body> This is my first web page. I am learning now HTML. </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 5 of 54
  • 6. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html HTML এ েলখা ে�া�ােমর িবিভ� অংশ িবে�ষণ to H H o TM st EL 1. Bo 0 o k ে�া�ােমর মেধয <> এবং < /> দুইট িচ� এবং এর মেধয িকছু Word েযমন html, head, title, body এগুেলাে Keyword বেল এবং <> বা < /> িচ� এবং এর মােঝ েলখা একিট Keyword েক টয্া বলা হয়। েযমন <head> অথর head টয্াগ HTML এ দু ধরেনর টয্া রেয়েছ , <> িচ� ও keyword িনেয গিঠত টয্াগে শু টয্া এবং < /> িচ� ও keyword িনেয গিঠত টয্াগে েশষ টয্া বেল েযমন < title> অথর title শু টয্া এবং <title /> অথর title েশষ টয্াগ <html> বা html টয্া: HTML এ ে�া�াম েলখার জ� সম� code েক <html> </html> এর মােঝ েলখা হয়। <head> বা head টয্া: <head></head> এর েভতের <title> </title> টয্া েলখা হয় যার মাধয্ে ওেয়বসাইেটর title বা িশেরানাম �দশর্ের বয্ব� করা হয়। এই code এ title িহেসেব www.tutohost.com েলখা হেয়েছ যা �াউজােরর title bar এ েদখা যাে�। এছাড়া css এর stylesheet েক head টয্ােগ মেধয্ call করা হয়। <body> বা body টয্া: <body> বা body টয্া খুবই গুরু�পূণ একিট ওেয়ব সাইেটর মূল Content সমূহ Body টয্ােগ মেধয অব�ান কের । <body></body> টয্েগ মেধয্ িবিভ� Text , Image, Table ইতয্াি ফরেমিটং এর জ� িবিভ� টয্া সমূহ েলখা হয় । এই code এ <body></body> টয্েগ মেধয This is my first web page. I am learning now HTML. েলখা হেয়েছ যা �াউজােরর মূল অংেশ Tu �দিশর্ হে�। Page: 6 of 54
  • 7. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৩. HTML টয্া িক? Tu to H H o TM st EL 1. Bo 0 o k এইচিটএমএল এর সাধারন টয্া সমূহ এবং এগুেলা কােজর সাধারন িববরণ স�েকর জানা খুবই গুরু�পূণ আমরা সহেজই এখান েথেক এইচিটএমএল এর সাধারন টয্া সমূহ এবং এগুেলা কােজর সাধারন িববরণ েজেন িনেত পারব। HTML এ ে�া�াম েলখার জ� <> এবং </> দুইট িচ� এবং এর মেধয িকছু Word েযমন html, head, title, body ইতয্াি Keyword বয্বহা করা হয়। <> বা </> িচ� এবং এর মােঝ েলখা একিট Keyword েক একে� টয্া বলা হয়। েযমন <html> এবং </html> । <body> হল body শু টয্া এবং </ body> হল body েশষ টয্াগ HTML এর সাধারন টয্া সমূহ টয্া সমূহ <html> </html> <head></head> <title></title> <body></body> <a></a> <abbr></abbr> <b></b> বণর্ন HTML ডকুেমন িনেদর্ কের। ে�া�ােমর head অংশ িনেদর্ কের । ডকুেমন টাইেটল িনেদর্ কের। ে�া�ােমর মূল content অংশ িনেদর্ কের। Anchor টয্াগ Abbreviation টয্াগ Bold েট�ট িনেদর্ কের। Page: 7 of 54
  • 8. Italic েট�ট িনেদর্ কের। �াভািবেকর েচেয় বড় েট�ট িনেদর্ কের। �াভািবেকর েচেয় েছাট েট�ট িনেদর্ কের। িবেশষ উ�ৃিত �কাশ করেত বয্বহ হয়। একটা লাইন ে�ক ৈতির কের । কি�উটার েকাড েট�ট �কাশ কের। েটিবল ৈতিরেত বয্বহ হয়। েটিবেলর কলাম ৈতিরেত বয্বহ হয়। েটিবেলর েসল ৈতিরেত বয্বহ হয়। েটিবেলর সাির ৈতিরেত বয্বহ হয়। ফরম ৈতিরেত বয্বহ হয়। to H H o TM st EL 1. Bo 0 o <i></i> <big></big> <small></small> <blockquote> </blockquote> <br / > <code></code> <table></table> <col></col> <td></td> <tr></tr> <form></form> <h1></h1> <hr/> <img/> <input></input> <li></li> <meta></meta> <ol></ol> <ul></ul> <p></p> <pre></pre> <tt></tt> <strong></strong> <sub></sub> <sup></sup> TutoHost.com/bangla/html k এইচিটএমএল ইবুক ১.০ েহডার টয্া 1-6 পযর্ হয়। সমা�রাল েরখা ৈতির কের। ছিব যু� করেত বয্বহ হয়। ফরেমর ইনপুট িফ� ৈতিরেত বয্বহ হয়। িল� ৈতিরেত বয্বহ হয়। Meta টয্া অডর্া িল� ৈতিরেত বয্বহ হয়। আনঅডর্া িল� ৈতিরেত বয্বহ হয়। পয্ারা�া িনেদর্ কের pre-formatted েট�ট ৈতিরেত বয্বহ হয়। েটিলটাইপ েট�ট িনেদর্ কের। Tu Strong েট�ট িনেদর্ কের। subscripted text িনেদর্ কের। superscripted text িনেদর্ কের। Page: 8 of 54
  • 9. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৪. HTML ইিলেমন্ to H H o TM st EL 1. Bo 0 o k HTML এ েযেকান শু এবং েশষ টয্ােগ মােঝর অংশেক ইিলেমন্ বলা হয়। েযমন <h1> This is an example of element.</h1> । এখােন <h1> েহডার1 শু এবং </h1> েহডার1 েশষ টয্ােগ মােঝ This is an example of element. েলখা হেয়েছ, তাই “This is an example of element.” একিট ইিলেমন্ট িকছু িকছু টয্ােগ েকান ইিলেমন্ থােক না েযমন <br /> ,<img /> ইতয্ািদ ইিলেমন্ েশষ টয্া <h1> <p> <br /> <img /> This is an element. This is paragraph. </h1> </p> Tu শর টয্া সাধারণতঃ েয সকল টয্ােগ েশষ টয্া থােক না তােদর ইিলেমন্ট থােক না। এ ধরেণর শু টয্ােগ মেধয্ / িচ�িট অ�ভূর্ থােক, এবং এর আেগ একটা ে�স িদেত হয়। Page: 9 of 54
  • 10. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৫. HTML এি�িবউটস HTML এি�িবউটস সবর্ািধ গুরু�পূ এবং অতয্ �েয়াজনীয় একিট িবষয়। HTML টয্ােগ কাযর্�মতাে বিধর্ করার জ� এি�িবউটস বয্বহা করা হয়। এখােন উদাহরণ সহ HTML এি�িবউটস স�েকর িব�ািরত আেলাচনা করা k হেব। to H H o TM st EL 1. Bo 0 o HTML এ এি�িবউটস ইিলেমন্ এর আনুসাি� তথয �কাশ কের । মূলত HTML এ টয্ােগ কাযর্�মতাে বিধর্ করার জ� এি�িবউটস বয্বহা করা হয়। েযমন <font size="5" face="Tahoma" color="red"> This is a paragraph.</font> এখােন size="5" অংশিট হল font টয্ােগ একিট এি�িবউট, যা �কাশ করেছ ইিলেমন্ অথর্া This is a paragraph. েলখািটর সাইজ েকমন হেব। এছাড়া face="Tahoma" �কাশ করেছ েলখািটর font হেব Tahoma এবং color="red" �ারা �কাশ করেছ েলখািটর রং হেব লাল। িকছু HTML এি�িবউটস Tu টয্া <font> <h1>….<h6> <p> <body> <div> <img> <table> <input /> এি�িবউটস size="5" face="Tahoma" color="red" align="center" align="left" align="right" title="Bangladesh" bgcolor="green" background="../images/ele.png" id="book" class="pen" align="center" height="100px" width="50px" border="5px" type="text" name="TextField" Page: 10 of 54
  • 11. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <font size="5" face="Tahoma" color="red"> This is a paragraph. </font> k উদাহরণ ে�া�াম </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 11 of 54
  • 12. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৬. েহিডং k এইচিটএমএল এ েহিডং টয্া একিট গুরু�পূ টয্া । সাধারনত এর মাধয্ে েকান পয্ারা�ােফ িশেরানাম েলখা হয়। এ অধয্াে আমরা েহিডং এর েকািডং প�িত স�েকর জানেবা। to H H o TM st EL 1. Bo 0 o HTML এর মাধয্ে েকান ডকুেমন বা পয্ারা�ােফ িশেরানাম েলখার জ� েহিডং টয্া বয্বহা করা হয়। HTML এ েমাট ছয় ধরেণর েহিডং টয্া রেয়েছ এগুেল হল <h1> </h1> , <h2> </h2> , <h3> </h3> , <h4> </h4> , <h5> </h5> এবং <h6> </h6> । যিদ বড় সাইেজর অ�ের িশেরানাম েলখার �েয়াজন হয় তাহেল <h1> </h1> টয্ােগ মােঝ েলখা হয়। এবং অ�া� গুেল বয্বহা করেল েলখার সাইজ আে� আে� েছাট হেব। উদাহরণ ে�া�াম Tu <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <h1>This is an example of heading 1</h1> <h2>This is an example of heading 2</h2> <h3>This is an example of heading 3</h3> <h4>This is an example of heading 4</h4> <h5>This is an example of heading 5</h5> <h6>This is an example of heading 6</h6> </body> </html> একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 12 of 54
  • 13. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৭. পয্ারা�া k পয্ারা�া টয্াগি সবর্ািধ গুরপূণর এবং অতয্ �েয়াজনীয় একিট টয্াগ পয্ারা�া টয্ােগ েভতেরই েট�টগুেল িবিভ�ভােব �কািশত হয়। এখােন পয্ারা�া টয্া স�েকর উদাহরণসহ িব�ািরত িববরণ েদওয়া হেব। to H H o TM st EL 1. Bo 0 o েয েকান ডকুেমন এক বা একািধক পয্ারা�ােফ মাধয্ে েলখা হয়। HTML এ পয্ারা�ফ ৈতিরর জ� <p> বা পয্রা�া টয্া বয্বহা করা হয়। েযমন <p>This is a paragraph.</p>। �াউজােরর মাধয্ে �িতটা পয্ারা�া �দশর্ করা হেল �িতটা পয্ারা�ােফ পর একটা কের লাইন ে�ক ৈতির হয়। যিদ কখেনা পয্ারা�ােফ মেধয্ লাইন ে�েকর �েয়াজন হয় তাহেল লাইেনর েশেষ <br /> টয্া বয্বহা করা হয়। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <p>This is a paragraph.</p> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is a paragraph.<br /> This is a paragraph.<br /> This is a paragraph.<br /> This is a paragraph.<br /> </p> </body> </html> Page: 13 of 54
  • 14. এইচিটএমএল ইবুক ১.০ to H H o TM st EL 1. Bo 0 o একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। k TutoHost.com/bangla/html ৮. েট�ট ফরেমিটং Tu ওেয়বসাইেট আমরা েয েট�টগুেল েদিখ তা েছাট, বড়, েবা�, ইটািলকসহ িবিভ� ফরেমেট হেয় থােক। এখােন েট�ট ফরেমিটং করার িবিভ� প�িত স�েকর িব�ািরত আেলাচনা করা হেব । Microsoft Word এ Bold, Italic, Underline, strikethrough, Subscript, Superscript ইতয্াি েট�ট ফরেমিটং এর জ� বয্বহ হয়। HTML এর ে�ে�ও Microsoft Word এর মত েট�ট ফরেমিটং এর িবেশষ গুর রেয়েছ। একিট ডকুেমন্ট সু�রভাে উপ�াপন করেত েট�ট ফরেমিটং িবষেয় উপযু� �ান থাকা দরকার। HTML এ েট�ট ফরেমিটং এর জ� <b>, <i>, <u>, <strike>, <sub>, <sup>, <big>, <small>, <strong>, <samp>, <tt>, <abbr>, <var>, <code>, <address> ইতয্িদ টয্া সমূহ বয্বহা করা হয়। Page: 14 of 54
  • 15. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o <html> <head> <title>www.tutohost.com</title> </head> <body bgcolor="green"> k উদাহরণ ে�া�াম <p> <b> (Bold)</b> This is an example of bold. <br /> <i>(Italic)</i> This is an example of Italic. <br /> <u> (Underline) </u> This is an example of Underline. <br /> <strike>(Strike) </strike> This is an example of Strike. <br /> (CO<sub>2</sub>) This is an example of Subscript. <br /> (E=MC<sup>2</sup>) This is an example of Superscript. <br /> <big>(Big text)</big>This is an example of Big. <br /> <small>(Small text)</small>This is an example of Small. <br /> <strong>(Strong text)</strong>This is an example of Strong. <br /> <samp>(Sample text) </samp>This is an example of Sample. <br /> <tt>(Teletype)</tt>This is an example of Teletype. <br /> (<abbr> U.N.O</abbr> United Nations Organization.) This is an example of Abbreviation. <br /> (<var>x</var> is a variable.)This is an example of Variable <br /> (<code>Computer code text.</code>) This is an example of Code. <br /> Tu <address> (Written by Ashim<br /> Address: www.tutohost.com<br /> E-mail:ashimkumar50@yahoo.com) </address>This is an example of Address <br /> </p> </body> </html> Page: 15 of 54
  • 16. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html Tu to H H o TM st EL 1. Bo 0 o k একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 16 of 54
  • 17. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ৯. ফন্ টয্া HTML এর মাধয্ে েকান ডকুেমন্ট সু�রভাে উপ�াপন করার জ� <font> বা ফন্ টয্া খুবই গুরু�পূ to H H o TM st EL 1. Bo 0 o k ভূিমকা পালন কের। এখােন ফন্ টয্া বয্বহাের িব�ািরত প�িত আেলাচনা করা হেব। HTML এর মাধয্ে েকান ডকুেমন্ট সু�রভাে উপ�াপন করার জ� <font> বা ফন্ টয্া খুবই গুরু�পূ ভূিমকা পালন কের।<font size="5" face="Tahoma" color="red"> Bangladesh is a beautiful country.</font> এখােন size="5" অংশিট হল font টয্ােগ একিট এি�িবউট, যা �কাশ করেছ ইিলেমন্ অথর্া Bangladesh is a beautiful country. েলখািটর সাইজ েকমন হেব। এছাড়া face="Tahoma" �কাশ করেছ েলখািটর font হেব Tahoma এবং color="red" �ারা �কাশ করেছ েলখািটর রং হেব লাল। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <font size="2" face="Verdana"> This is a paragraph. </font> <br /> <font size="5" face="Tahoma" color="red" > Bangladesh is a beautiful country. </font> </body> </html> Page: 17 of 54
  • 18. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। ১০. �াইেলর বয্বহা Tu িসএসএস (Cascading Style Sheet files) মাধয্ে ওেয়বসাইটেক অেনক সু� কের েতালা যায়। এখােন HTML ইিলেমেন্ট সােথ �াইেলর বয্বহা �ণালী িনেয় িব�ািরত আেলাচনা করা হেব। Style, HTML এর একিট নতুন এি�িবউটস, এর মাধয্ে HTML এর মেধয্ CSS বয্বহাের সুেযা সৃি� হয়। Style তথা CSS বয্বহাের মাধয্ে ওেয়ব েপেজর িবিভ� উপাদােনর িডজাইন ৈতির করা হয়। অ�া� এি�িবউটস েযমন align="center", align="left", bgcolor="green", height="100px", width="50px, bgcolor="green" ইতয্ািদ মাধয্ে যিদও িডজাইন ৈতির করা যায়, তেব এে�ে� Style বয্হাের িবেশষ সুিবধ পাওয়া যায়। Page: 18 of 54
  • 19. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <font size="2" face="Verdana"> This is a paragraph. </font> <br /> <font size="5" face="Tahoma" color="red" > Bangladesh is a beautiful country. </font> </body> </html> k উদাহরণ ে�া�াম: অ�া� এি�িবউটস বয্বহা কের Tu উদাহরণ ে�া�াম: �াইল বয্বহা কের <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <font style="font-family:Verdana; font-size:15px" > This is a paragraph. </font> <br /> <font style=" font-size:25px; font-family:Tahoma; color:red;" > Bangladesh is a beautiful country. </font> </body> </html> একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 19 of 54
  • 20. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১১. িলংক k একটা পাতার সােথ আেরকিট পাতার েযাগােযাগ �াপন করা হয় িলংেকর মাধয্ে । এখােন এইচিটএমএল এ িলংক �কাশ করার প�িত স�েকর িব�ািরত আেলাচনা করা হেব। to H H o TM st EL 1. Bo 0 o একটা ওেয়ব সাইটেক বয্বহা বা�ব কের েতালার ে�ে� িলংেকর বয্বহা খুবই গুরু�পূণ Link এর আিভধািনক অথর সংযু� করা। অথর্া একটা ওেয়ব েপেজর সােথ অ� একটা েপজেক যু� করাই হল িলংিকং। HTML এ িলংিকং করার জ� <a> টয্গ বা anchor টয্া বয্বহা করা হয়। েযমন <a href="http://www. tutohost.com/"> www. tutohost.com </a> । অথর্া েয েপেজর সােথ িলংক ৈতির করেত হেব তার এে�স href="…………….. " এর মেধয েলখেত হেব, এবং িলংেক েয েলখািট �দশর্ করেব তা <a href=" ">…………………..</a> এর মেধয েলখেত হেব। উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green"> <a href="http://www. tutohost.com/"> www. tutohost.com </a> <br /> <a href="mailto:admin@tutohost.com"> admin@tutohost.com</a> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 20 of 54
  • 21. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১২. ছিব সংেযাজন k ওেয়ব সাইেট ছিব সংেযাজন, ছিবর মাধয্ে িলংক করা এবং িবিভ� সাইেজর ছিব �দশর্েণ প�িত আেলাচনা করা হেয়েছ। to H H o TM st EL 1. Bo 0 o একটা ওেয়ব েপেজর গুরু�পূ উপাদান সমূেহর একিট হে� ইেমজ । ওেয়বেপেজ ইেমেজর উপযু� বয্বহাের মাধয্ে েপজিট বয্বহারকারীেদ কােছ েযমন আকষর্ণী হেয় ওেঠ েতমিন বয্বহা বা�বও হয়। আকষর্নী েনিভেগশন বার, বাটন, বয্ানা, ইতয্ািদে ইেমেজর বয্বহা অপিরহাযর্ ওেয়ব েপেজ ইেমজ বা ছিব যু� করার জ� �েয়াজনীয় টয্াগি হে� <img> । এর েকান েশষ টয্া েনই। শুধুমা <img> িদেয় েকান কাজ হয় না, এর সােথ সবসময়ই src এি�িবউটিট বয্বহা করেত হয়। েযমন <img src=”pic.png”> , তাহেল pic.png ইেমজিট �দিশর্ হেব। পূবর ��িত েড�টেপ একটা webpage নােম folder িনেত হেব এর মেধয pic.png নােম save করা একটা ছিব রাখেত হেব। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" green" style="text-align:center"> <h3> This is an example of image.</h3> <img src="pic.png"> </body> </html> Page: 21 of 54
  • 22. এইচিটএমএল ইবুক ১.০ to H H o TM st EL 1. Bo 0 o একটা Notepad Open কের উপেরর Code টুক িলেখ File েমন েথেক Save as এ ি�ক কের File name িহেসেব index.html বা home.html অথবা েযেকান নাম.html িদেয়, Save as type িহেসেব All files িসেল� কের এরপর Save বাটেন ি�ক করেত হেব। এরপর save করা index.html ফাইলিটেক webpage folder এর মেধয রাখেত হেব। এখন Mozilla Firefox িদেয় index.html open করেল পােশর ছিবর মত েদখােব। k TutoHost.com/bangla/html অনলাইেন সাভর্াে েকান ইেমজ আপেলাড করা থাকেল উ� ইেমজ যু� করার জ� তার এে�স pic.png এর �ােন েলখেত হেব। েযমন <img src="http://www.tutohost.com/bangla/html/images/pic.png"> Tu ১৩. েটিবল সংেযাজন ওেয়ব েপেজ তথয উপা� পিরসংখয্া উপ�াপন করার একিট অ�তম প�া হে� েটিবল বয্বহা করা। HTML এ table ৈতিরর িবিভ� িবষয় এখােন আেলাচনা করা হেয়েছ । িদেন িদেন ইন্টারেন আজ সবেচেয় বড় তথয ভান্ডাে পিরণত হেয়েছ। তথয উপা� পিরসংখয্া িচ� িভিডও ইতয্ািদ সংিম�েণ একটা ওেয়বেপেজ েকান িবষয়ব�েক যতটা আকষর্ণী এবং পিরপূণর্ভাে উপ�াপন করা যায়, অ�া� িমিডয়ায় তা স�ব হয় না। ওেয়ব েপেজ তথয উপা� পিরসংখয্া উপ�াপন করার একিট অ�তম প�া হে� েটিবল বয্বহা করা। েটিবল ৈতিরর জ� েটিবল টয্া <table> বয্বহা করা হয়। Page: 22 of 54
  • 23. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html উদাহরণ ে�া�াম Tu to H H o TM st EL 1. Bo 0 o k <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #00CC99" style="text-align:center"> <table border="1"> <tr> <th>SL</th> <th>Book</th> <th>Pen</th> <th>Box</th> </tr> <tr> <td>01</td> <td>100</td> <td>200</td> <td>400</td> </tr> <tr> <td>02</td> <td>300</td> <td>600</td> <td>300</td> </tr> <tr> <td>03</td> <td>500</td> <td>800</td> <td>200</td> </tr> </table> </body> </html> একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 23 of 54
  • 24. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ে�া�াম আেলাচনা to H H o TM st EL 1. Bo 0 o k <table border="1"> এখােন border="1" এর মাধয্ে েটিবেলর জ� িসে�ল বডর্া বয্বহা করা হেয়েছ , �েয়াজন অনুসাে 1 এর �ােন 2,3,4 ইতয্াি বয্বহা করা যােব। েটিবেলর �িতটা সাির ৈতিরর জ� <tr></tr> বয্বহা করা হয়, এবং �িতটা েসল ৈতিরর জ� <td></td>বয্বহা করা হয়। <th></th> এর মাধয্ে েটিবল েহডার ৈতির করা হেয়েছ।<th>Book</th> এর মেধয্ Book েলখািট একটু েমাটা েদখােব। েটিবেলর মেধয েকান েসল খািল রাখার জ� <td></td> এর মােঝ িকছু না েলখেলই হেব। শুধুমা <td></td> বয্বহা করেত হেব। সাইেটর েনিভেগশন বার ৈতিরর জ� েটিবল বয্বহা করা েযেত পাের, এে�ে� �িতটা েসেলর েলখার সােথ <td><a href="www.tutohost.com"> িলংক ৈতির কের িদেলই হেব েযমন Tutohost</a></td> অথবা <th><a href="www.tutohost.com"> Tutohost</a></th> Tu ১৪. এইচিটএমএল িল� একিট ওেয়বেপেজ িল� বা তািলকােক সু�রভেব �কাশ করার জ� েয এইচিটএমএল েকাড বয্বহা করা হয়, তার সৃজনশীল প�িত িনেয় এখােন আেলাচনা করা হেয়েছ। একটা ওেয়ব েপজেক সু� কের সাজােনা এবং তথয উপ�াপনার অ�তম প�িত িল� । HTML এর মাধয্ে দু ধরেণর িল� ৈতির করা যায়, একিট হে� অডর্া িল� এবং অপরিট হে� আনঅডর্া িল� । অডর্া িলে� িবিভ� তথয্ে পযর্ায়�িমকভাে সািজেয় উপ�াপন করা হয় এবং �িতটা লাইেনর শুরু �িমক সংখয্ থােক। অ�িদেক আন অডর্া িলে� �িতটা লাইেনর সামেন েছাট বৃ�াকার বা বগর্াকা িচ� থােক। HTML এর মাধয্ে আন অডর্র িল� ৈতির করার জ� <ul></ul> এবং অডর্া িল� ৈতির করার জ� <ol></ol> টয্া বয্বহা করা হয়। Page: 24 of 54
  • 25. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html উদাহরণ ে�া�াম to H H o TM st EL 1. Bo 0 o k <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #00CC99" style="text-align:center"> <h4>Disc Type list</h4> <ul type="disc"> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ul> <h4>Circle Type list</h4> <ul type="circle"> <li>HTML</li> <li>CSS</li> <li>PHP</li> </ul><h4>Square Type list</h4> <ul type="square"> <li>Pragaph</li> <li>Table</li> <li>List</li> </ul> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 25 of 54
  • 26. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html উদাহরণ ে�া�াম to H H o TM st EL 1. Bo 0 o k <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #00CC99" style="text-align:center"> <h3>Alphabet Type list</h3> <ol type="A"> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ol> <h3>Number Type list</h3> <ol type="1"> <li>HTML</li> <li>CSS</li> <li>PHP</li> </ol> <h3>Roman Number Type list</h3> <ol type="I"> <li>Pragaph</li> <li>Table</li> <li>List</li> </ol> Tu </body> </html> একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল পােশ �দিশর্ ছিবর মত েদখােব। Page: 26 of 54
  • 27. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১৫. এইচিটএমএল ফমর to H H o TM st EL 1. Bo 0 o k এইচিটএমএল ফমর তথয ইনপুট েনওয়াসহ নানা রকম কােজ বয্বহ হয়। িবেশষ কের ি�ি�ং ে�া�ািমং ভাষার সােথ এই ফেমর্ তথয্গুে সংযু� হেয় কাজ কের থােক।এখােন এইচিটএমএল এর মাধয্ে ফমর ৈতির , বয্বহা এবং বা�ব �েজ� স�েকর আেলাচনা করা হেব। এইচিটএমএল ফমর একিট গুরু�পূ আেলাচয িবষয়। িবেশষ কের ডাইনািমক এবং ডাটােবজ িনভর্ ওেয়ব সাইেটর লগ ইন িসে�ম, েভািটং িসে�ম, কন্টা ফমর সহ ইউজার ইনফরেমশন সং�হ করার জ� এইচিটএমএল ফমর বয্বহ হেয় থােক। একিট এইচিটএমএল ফমর েবশ িকছু উপাদােনর সম�েয় গিঠত হয়। এগুেল হে� , ১. েট�ট ব� ২. েট�ট এিরয়া ৩. েরিডও বাটন ৪. সাবিমট বাটন ৫. েচক ব� ৬. �পডাউন িল� Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #000"> <center> <font face="SolaimanLipi" color="#fe0321" size="6"> আপনার তথয িদেয় সাহাযয করুন </font> < /br>< /br> <form name="information" method="post" action="information.php"> <font face="SolaimanLipi" color="#fe0321" size="4"> নাম:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </font> <input type="text" value="আপনার নাম িলখুন" Page: 27 of 54
  • 28. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html name="name"><br /><br /> <font face="SolaimanLipi" color="#fe0321" size="4"> িপতার নাম: Tu to H H o TM st EL 1. Bo 0 o k </font> &nbsp; &nbsp; <input type="text" value="আপনার িপতার নাম িলখুন" name="name"> <br /><br /> <font face ="SolaimanLipi" color="#fe0321" size="4"> িঠকানা: </font> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea rows="3" cols="20"></textarea><br /> <font face="SolaimanLipi" color="#fe0321" size="4"> আপিন িক পুরু: </font> <input type="radio" value="male" name="gender"> <br /> <font face="SolaimanLipi" color="#fe0321" size="4"> আপিন িক মিহলা: </font> <input type="radio" value="female" name="gender"> <br /> <font face="SolaimanLipi" color="#fe0321" size="4"> আপিন েয শহের থােকন: </font> <select name="district"> <option> কুি�য় </option> <option> ঢাকা</option> <option>খুলনা</option> <option>িসেলট</option> <option>েভড়ামারা</option> <option>যেশার</option> </select><br /><br /> <font face="SolaimanLipi" color="#fe0321" size="4"> িশ�াগত েযাগয্ত: </font> <br /> <input type="checkbox" value="checkbox1" name="checkbox"> <font face="SolaimanLipi" color="#fe0321" size="4"> এস.এস.িস </font> <br /> <input type="checkbox" value="checkbox" Page: 28 of 54
  • 29. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html name="checkbox"> <font face="SolaimanLipi" color="#fe0321" size="4"> এইস.এস.িস to H H o TM st EL 1. Bo 0 o k </font><br /><br /> <input type="submit" name="submit" value="জমা করু"> <br /><br /> <input type="reset" value="মুেছ েফলুন" name="clear"> </form> </center> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 29 of 54
  • 30. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১৬. HTML ে�ম HTML এর মাধয্ে েকান ওেয়ব েপজেক একািধক ভােগ িবভ� করার জ� আেগর িদেন ে�ম বয্বহা করা হত। িদেন িদেন ে�েমর বযবহার কেম এেসেছ। তেব html স�েকর �ান ভান্ডা সমৃ� করার জ� ে�ম স�েকর্ িকছুটা to H H o TM st EL 1. Bo 0 o k ধারণা থাকা দরকার। HTML এর মাধয্ে েকান ওেয়ব েপজেক একািধক ভােগ িবভ� করার জ� আেগর িদেন ে�ম বয্বহা করা হত। িদেন িদেন ে�েমর বয্বহা কেম এেসেছ। বতর্মা সমেয় ে�েমর বয্বহা েনই বলেলই চেল, কারণ ে�ম বয্বহা কের ৈতিরকৃত স�ূণর েপজ একসােথ ি�ন্ করা েবশ ক�কর। এছাড়া এটা অেনেকর কােছই অপছে�র। এর পিরবেতর েকান েপজেক একািধক অংেশ িবভ� করেত এখন CSS বয্বহা করা হয়। তেব html স�েকর �ান ভান্ডা সমৃ� করার জ� ে�ম স�েকর্ িকছুটা ধারণা থাকা দরকার। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #000"> <frameset rows="12%,88%"> <frame src="style.html" scrolling="no"> <frameset cols="27%,74%"> <frame src="link.html"> <frame src="textfor.html" > </frameset> </frameset> </body> </html> Page: 30 of 54
  • 31. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k েয েকান নােম একটা েফা�ার ৈতির কের তার মেথয style.html, link.html এবং textfor.html িতনিট html ফাইল রাখেত হেব এরপর একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Tu ে�া�াম আেলাচনা <frameset rows="12%,88%"> এর মাধয্ে �থেম স�ূণর েপজটাের সাির বরাবর দুি অংেশ িবভ� করা হেয়েছ। <frameset cols="27%,74%"> এর মাধয্ে িনেচর সািরেক কলাম বরাবর দুি অংেশ িবভ� করা হেয়েছ। <frame src="style.html" scrolling="no"> এর মাধয্ে �থম ে�েমর মেধয style.html েপজিটেক �দশর্েন বয্ব� করা হেয়েছ। <frame src="link.html"> এবং <frame src="textfor.html" > এর মাধয্ে যথা�েম ২য় সািরর ১ম ও ২য় ে�েমর মেধয link.html এবং textfor.html েপজ দুিটে �দশর্েন বয্ব� করা হেয়েছ। Page: 31 of 54
  • 32. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o একটা ওেয়ব েপেজর মেধয্ অপর এক বা একািধক ওেয়ব েপজ �দশর্ করার অ�তম উপায় হে� আই ে�ম। েকান িবষয় িব�ািরতভােব উপ�াপনার ে�ে� �াসি�ক িবষেয়র উপর িবিভ� ওেয়ব েপেজর িলংক �কাশ করা গুরু�পূ, পাশাপািশ উ� েপজিটেক সংি�� �ােনর মেধয �িলং কের �দশর্ করেত পারেল ম� হয় না। k ১৭. আই ে�ম উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor=" #f00"> <center> <h2 style="color:#f00">This is an example of iframe.</h2><br /> <iframe src="http://www.tutohost.com/bangla/html/" width="350" height="170"> <p>This rowser does not support iframes.</p> </iframe> </center> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 32 of 54
  • 33. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ে�া�াম আেলাচনা to H H o TM st EL 1. Bo 0 o k আই ে�ম ৈতিরর জ� <iframe></iframe> টয্া বয্বহা করা হয়। width="350" height="170" এই দুি এি�িবউেটর মাধয্ে আই ে�ম এর আকৃিত েকমন হেব তার িনেদর্ �দান করা হয়। যিদ েকান �াউজার আই ে�ম সােপাটর না কের তাহেল <p>This rowser does not support iframes.</p> এর জ� This rowser does not support iframes. েলখািট �দিশর্ হেব। ১৮. রং ও েকাড ওেয়ব েপেজ রং এর বয্বহা খুবই গুরু�পূণ একটা ওেয়ব েপজ গিঠত হয় এক বা একািধক পয্ারা�া, িশেরানাম, েটিবল, বয্া�উন্, বডর্া ইতয্ািদ সম�েয়। এ সকল উপাদােনর �েতয্কিটেত েকান না েকান রং বয্বহা করেত হয়। রং ও েকাড বয্বহাের িব�ািরত প�িত স�েকর জানেত পারব। ওেয়ব েপেজ রং এর বয্বহা খুবই গুরু�পূণ একটা ওেয়ব েপজ গিঠত হয় এক বা একািধক পয্ারা�া, িশেরানাম, েটিবল, বয্া�াউন, বডর্া ইতয্ািদ সম�েয়। এ সকল উপাদােনর �েতয্কিটেত েকান না েকান রং বয্বহা করেত হয়। েকান একিট েপেজর বয্া�াউন কালার িনিদর্ করার জ� <body> টয্ােগ মেধয body েলখার পর একটা ে�স িদেয় bgcolor=" " েলখেত হেব এর পর " " এর মেধয BLACK, Tu SILVER, GRAY, WHITE, MAROON, RED, PURPLE, FUSCHSIA, GREEN, LIME, OLIVE, YELLOW, NAVY, BLUE, TEAL এবং AQUA এই েষালিট রং এর েয েকান একিট েলখা হেল েপেজর বয্া�াউেন েসই েদখা যােব। েযেহতু case sensitive নয় তাই েছাট হােতর অ�ের েলখেলও েকান সম�া েনই, েযমন েলখা হেয়েছ, <body bgcolor="green"> । এছাড়া hexadecimal code বয্বহা কেরও বয্া�াউন কালার িনবর্াচ করা যায়। েযমন উপেরর েকাডিট িনেচর মত েলখা যায় <body bgcolor="#00FF00"> । color piker েথেক সহেজই িবিভ� কালােরর জ� hexadecimal code সং�হ করা যায়। এছাড়া িনেচর চাটর েথেকও কাজিট করা যােব। hexadecimal code এর শুরু একটা # িচ� িদেয় শু করেত হয়। Page: 33 of 54
  • 34. TutoHost.com/bangla/html Tu to H H o TM st EL 1. Bo 0 o k এইচিটএমএল ইবুক ১.০ বয্া�াউন কালার েদওয়ার আরও একটা মজার প�িত আেছ। লাল, সবুজ আর নীল এই িতনিট রং হে� েমৗিলক রং, আর অ� সব রং এই িতনিট রং এর সংিম�েন ৈতির। যিদ coding কের এই িতনিট রংেক িমিশেয় নতুন রং ৈতির করা হয়, তাহেল ম� হয় না। এ কাজিট সুস� করেত সবুজ বয্া�াউেন্ জ� িনেচর মত কের েলখা েযেত পাের <body bgcolor="rgb(0,255,0)"> । Page: 34 of 54
  • 35. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o উদাহরণ ে�া�াম k এখােন rgb অথর হল red green blue আর (0,255,0) এর অথর হল রংিটেত যথা�েম লাল, সবুজ, নীল রং এর পিরমান যথা�েম 0%, 100%, 0% কারন এখােন িবশু সবুজ রং েনয়া হেয়েছ। আর েয েকান রং এর মান 0-255 পযর্ হেত পাের। েযেহতু g বা green এর মান 255 তাই তা 100%। িতনিট রং এর মান 0-255 এর মেধয পিরবতর্ কের ই�া অনুযায় নতুন নতুন রং ৈতির করা যােব । <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor="green"> <h2 style=" color:#ff0000" > This is the body of your web site. </h2> <p style="color:#093"> This is a paragraph.<br /> This is a paragraph. <br /> This is a paragraph.<br /> This is a paragraph.<br /> </p> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 35 of 54
  • 36. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ১৯. েল আউট to H H o TM st EL 1. Bo 0 o k একটা ওেয়ব েপজ কতটা সু� হেব তা স�ূণর্রূ িনভর্ কের েপেজর েল আউেটর উপর। আেগ শধুমা� HTML বয্বহা কেরই সকল ওেয়ব সাইেটর েল আউট ৈতির করা হত। বতর্মাে HTML এর সােথ CSS বয্বহা করা হয়। শুধুমা HTML বয্বহা কের েল আউট ৈতির করার জ� <table> এর সাির ও কলাম বয্বহা করা হয়। Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> </head> <body bgcolor="green"> <table width="400" border="0"> <tr> <td colspan="3" style="background-color: #93C;"> <h1> Web Page header</h1> </td> </tr> <tr valign="top"> <td style="background-color: #C99;width:100px;textalign:top;"> <p><b>Side bar</b><br /> <a href="#">PHP</a> <br /> <a href="#">HTML</a> <br /> <a href="#">CSS</a> <a href="#">Wordpress</a> </p></td> <td style="backgroundcolor:#EEEEEE;height:200px;width:400px;textalign:top;"><h2 style="color:#900">This is heading.</h2> <p style="color: #006">This is a paragraph.This is a paragraph. This is a paragraph.<br /> Page: 36 of 54
  • 37. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k This is a paragraph.This is a paragraph. This is a paragraph.<br /> This is a paragraph.This is a paragraph.This is a paragraph.<br /> This is a paragraph.This is a paragraph.This is a paragraph.</p></td> </tr> <tr> <td colspan="2" style="background-color:#999;textalign:center;"> Copyright © 2012tutohost.com</td> </tr> </table> </body> </html> Tu একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 37 of 54
  • 38. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ২০. িস এস এস to H H o TM st EL 1. Bo 0 o k বতর্মা সমেয় ওেয়ব েপেজর কাঠােমা ৈতির করা হয় HTML িদেয়, িডজাইন ৈতির করা হয় CSS িদেয়, আর েট�ট জমা রাখা হয় ডাটােবেজ। তাই েকান েপজেক আকষর্ণী কের েতালার পাশাপািশ বয্বহা বা�ব কের েতালার জ� CSS এর ভূিমকা খুবই গুরু�পূণ এখান েথেক আমরা HTML এর সােথ CSS যু� করার প�িত স�েকর িব�ািরত জানেত পারব। বতর্মা সমেয় ওেয়ব েপেজর কাঠােমা ৈতির করা হয় HTML িদেয়, িডজাইন ৈতির করা হয় CSS িদেয়, আর েট�ট জমা রাখা হয় ডাটােবেজ। তাই েকান েপজেক আকষর্ণী কের েতালার পাশাপািশ বয্বহা বা�ব কের েতালার জ� CSS এর ভূিমকা খুবই গুরু�পূণ HTML �ারা ৈতির েপেজ িতন প�িতেত CSS যু� করা যায়। ১. এ�টানর্া �াইল িসট (External Style Sheet ) ২. ইনটানর্া �াইল িসট (Internal Style Sheet) ৩. ইনলাইন �াইল িসট (Inline Style Sheet) এ�টানর্া �াইল িসট এ প�িতেত HTML ফাইল এবং CSS �াইল িসট দুি আলাদা িসেট রাখা হয়। এবং িনে�া� প�িতেত HTML এর <head></head>টয্ােগ মেধয িলংক ৈতির কের েদয়া হয়। <head> <link rel="stylesheet" type="text/css" href="http://tutohost.com/bangla/style.css"> </head> ইনটানর্া �াইল িসট Tu এ প�িতেত HTML এবং CSS �াইল একই িসেট <head></head> টয্ােগ মেধয রাখা হয়। এজ� িনে�া� প�িতেত <style></style> টয্া বয্বহা করা হয়। <head> <style type="text/css"> body {background-color: red;} p { margin-left: 20px; font-weight: bold; color: #006; } </style> </head> Page: 38 of 54
  • 39. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ইনলাইন �াইল িসট k এ প�িতেত HTML এর �িতিট টয্ােগ মেধযই CSS �াইল যু� করা হয় । এজ� িনে�া� প�িতেত style এি�িবউটস বয্বহা করা হয়। to H H o TM st EL 1. Bo 0 o <p style="margin-left:120px; font-weight: bold; color: #060;"> Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> <link rel="stylesheet" type="text/css" href="http://tutohost.com/bangla/style.css"> <style> body{background:green; font-family:Verdana; fontsize:15px;} h3{font-size:25px; font-family:Tahoma; color:red;} </style> </head> <body > This is a paragraph. <br /> <h3> Bangladesh is a beautiful country. </h3> <p style="color: #600"> This is a paragraph. This is a paragraph.<br /> This is a paragraph. This is a paragraph.<br /> This is a paragraph. This is a paragraph.<br /> This is a paragraph. This is a paragraph.<br /> This is a paragraph. This is a paragraph.<br /> </p> </body> </html> Page: 39 of 54
  • 40. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। ২১. েহড ইিলেমন্ Tu েহড টয্া বা <head> এবং েহড ইিলেমন্ েযেকান HTML েপেজর একিট গুরু�পূ অংশ। এর মাধয্ে �াউজাের েপজ স�িকর্ েবশ িকছু তথয �দশর্ করার পাশাপািশ সাচর ইিন্জ অপিটমাইেজশন এর মত গুরু�পূ কাজও স�� হয়।এখান েথেক আমরা েহড টয্া বা <head> এবং েহড ইিলেমন্ স�েকর িব�ািরত জানেত পারব। েহড টয্া বা <head> এবং েহড ইিলেমন্ েযেকান HTML েপেজর একিট গুরু�পূ অংশ। কারণ <head>….</head> এর মেধয অথর্া েহড ইিলেমন্ িহেসেব <title> <link> <meta> <style> <script> এ সকল গুরু�পূ টয্া সমূহ রাখা হয়। এগুেলা মাধয্ে �াউজাের েপজ স�িকর্ েবশ িকছু তথয �দশর্ করার পাশাপািশ সাচর ইিন্জ অপিটমাইেজশন এর মত গুরু�পূ কাজও স�� হয়। Page: 40 of 54
  • 41. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html টাইেটল to H H o TM st EL 1. Bo 0 o <title>আমােদর HTML িটউেটািরয়াল সমূহ</title> k �াউজােরর টাইেটল বাের েপেজর টাইেটল �দশর্েন জ� <title> </title> টয্া বয্বহা করা হয়। উপেরর েকাড এর মাধয্ে �াউজােরর টাইেটল বাের “আমােদর HTML িটউেটািরয়াল সমূহ” েলখািট েদখা যােব। িলংক CSS �াইল িসট এর সােথ িলংক করার জ� <link> </link> বয্বহা করা হয়। <link rel="stylesheet" type="text/css" href="styles.css" /> েমটা ইিলেমন্ েমটা সাচর ইিন্জ অপিটমাইেজশেনর জ� গুরু�পূ কাজ কের থােক। িবষয়িট পববতর্ েলখায় িব�ািরত আেলাচনা করা হেব। �াইল ইনটানর্া �াইল িসট বয্বহাের জ� <style></style> টয্া বয্বহা করা হয়। েযমন Tu <head> <style type="text/css"> body {background-color: red;} p { margin-left: 20px; font-weight: bold; color: #006; } </style> </head> Page: 41 of 54
  • 42. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ি�� k জাভাি��, েজ েকােয়রী ইতয্াি ি�� যু� করার জ� <script> </script> টয্া বয্বহা করা হয়। েযমন to H H o TM st EL 1. Bo 0 o <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sliding_effect.js"></script> উদাহরণ ে�া�াম িনেচর িলংক েথেক েসাসর ফাইল ডাউনেলাড কের Extract কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব।এবং �াউজােরর টাইেটল বাের “আমােদর HTML িটউেটািরয়াল সমূহ” েলখািট েদখা যােব। Tu েসাসর ফাইল ডাউনেলাড Page: 42 of 54
  • 43. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ২১. েমটা k েয েকান ওেয়ব সাইেটর জ�ই সাচর্ ইিন্জন অপিটমাইেজশন একিট গুরু� িবষয়। ওেয়ব েপেজ েমটা টয্াগ বয্বহার কের এ গুরু�পূণর্ কাজিট কর এখান েথেক আমরা েমটা টয্াগ স�েকর্ িব�ািরত জানে পারব। to H H o TM st EL 1. Bo 0 o একিট ওেয়ব সাইট তখনই জনি�য় হয় যখন তা মানুেষ �েয়াজেন আেস এবং েয েকউ �েয়াজেনর সময় সহেজই সাচর ইিন্জেন মাধয্ে সাচর কের সাইটিটেক খুেজঁ পায়। একিট ওেয়ব েপজ েযন সহেজই সাচর ইিন্জ খুেজ পায় এ জ� ওেয়ব ে�া�ামারেদর েয কাজিট করেত হয়, তােক বলা হয় সাচর ইিন্জ অপিটমাইেজশন। েয েকান ওেয়ব সাইেটর জ�ই সাচর ইিন্জ অপিটমাইেজশন একিট গুরু�পূ িবষয়। ওেয়ব েপেজ েমটা টয্া বয্বহা কের এ গুরু�পূ কাজিট করা হয়। http://www.tutohost.com/bangla/html/2.php েপজিটর েমটা টয্াে েলখা আেছ…. <meta name="description" content="এইচিটএমএল এ ে�া�াম েলখার সাধারন প�িত এবং �াথিমক একিট ে�ােজ� ও সাধারন টয্াগগুে িনেয় আেলাচনা করা হেব।" /> <meta name="keywords" content="এইচিটএমএল ে�া�াম েলখা, html bangla tutorial" /> Google আমােদর সকেলর পিরিচত জনি�য় একিট সাচর ইিন্জন যিদ http://www.tutohost.com/bangla/html/2.php িট Google সাচর ইিন্জ বয্বহা কের সাচর করা Tu হয় তাহেল িনেচর ছিবর মত আসেব। Page: 43 of 54
  • 44. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html k �থেম েপেজর টাইেটল, তারপর িলংক এবং এর পর আেছ "এইচিটএমএল এ ে�া�াম েলখার সাধারন প�িত এবং �াথিমক একিট ে�ােজ� ও সাধারন টয্াগগুে িনেয় আেলাচনা করা হেব।" to H H o TM st EL 1. Bo 0 o যা <meta name="description" content="……………………………………." /> এর মেধয েলখা আেছ। <meta name="keywords" content="……………………………………." /> এর মেধয েলখা আেছ "এইচিটএমএল ে�া�াম েলখা, html bangla tutorial" এেক িক ওয়াডর বলা হয়। আমরা যখন েকান বাকয িলেখ সাচর ইিন্জে সাচর কির তখন সাচর ইিন্জ বাকয্িটে েভে� একািধক িক ওয়াডর এ িবভ� কের সাচর কের। তাই িক ওয়াডর হে� সাচর ইিন্জে েকান ওেয়ব েপজ খুেজ পাওয়ার অ�তম প�িত। এজ� HTML এর মাধয্ে েকান েপজ ৈতিরর সময় <meta name="keywords" content="……………………………………." /> এর মেধয স�াবয িক ওয়াডর গুেল যু� কের েদয়া হয়। <meta name="author" content="অসীম কুমা" /> Tu েলখেকর নামেক সাচর ইিন্জে সাবিমট করার জ� <meta name="author" content="……………"/> বয্বহা করা হয়। ওেয়ব েপজ অেটা িরে�স করার জ�ও েমটা টয্া বয্বহা করা হয়। <META HTTP-EQUIV="REFRESH" CONTENT="15;URL=http://www.tutohost.com"> উপেরর েকাডিট বয্বহা করেল �িত ১৫ েসেকন্ অ�র অ�র http://www.tutohost.com েপজিট একবার কের িরে�স হেব। Page: 44 of 54
  • 45. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html ২৩. ি�� to H H o TM st EL 1. Bo 0 o এ ি�� যু� করার প�িত স�েকর জানেত পারব। k HTML েকান ে�া�ািমং লয্া�ুেয় নয়। তাই ওেয়ব েপেজও ে�া�ািমং এর সুিবধ যু� করার জ� িবিভ� ধরেনর ি�ি�ং লয্া�ুেয় বয্বহা করা হয়, েযমন জাভাি��, েজ েকােয়রী ইতয্ািদ।জাভাি�, েজ েকােয়রী ইতয্াি ি�� যু� করার জ� HTML এ <script> </script> টয্া বয্বহা করা হয়।এখান েথেক আমরা HTML HTML েকান ে�া�ািমং লয্া�ুেয় নয়। তাই ওেয়ব েপেজও ে�া�ািমং এর সুিবধ যু� করার জ� িবিভ� ধরেনর ি�ি�ং লয্া�ুেয় বয্হার করা হয়, েযমন জাভাি��, েজ েকােয়রী ইতয্ািদ এর মাধয্ে ওেয়ব েপেজ েলাকাল টাইম �দশর্, সময় িদন তািরখ �দশর্, �াউজার িচি�ত করা, সময় এবং ইেভন্ এর উপর িভি� কের বয্বহারকারীে েকান িবেশষ বাতর্ �দশর্ করা সহ িবিভ� ধরেণর আকষর্ণী এবং গু�পূণর কাজ করা স�ব হয়। জাভাি��, েজ েকােয়রী ইতয্াি ি�� যু� করার জ� HTML এ <script> </script> টয্া বয্বহা করা হয়। েযমন <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sliding_effect.js"></script> Tu উদাহরণ ে�া�াম <html> <head> <title> www.tutohost.com</title> <script type="text/javascript"> function show_alert() {alert("Welcome to www.tutohost.com");} </script> </head> <body bgcolor="#009933" > <input type="button" style="margin-left:150px; width:100px; height:50px; font-size:18px; color:#F00" onclick="show_alert()" value="Click Me" /> </body> </html> Page: 45 of 54
  • 46. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozila Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। যিদ Click Me বাটনিটেত ি�ক করা হয় তাহেল একিট এলাটর বে� Welcome to www.tutohost.com েলখািট েদখা যােব। ২৪. অিডও সংেযাজন েকান িবষয়েক উপ�াপনার ে�ে�, েট�ট এবং ছিবর পাশাপািশ অিডও-িভিডও বয্বহা করেল িবষয়িট আেরা �াণব� হেয় উেঠ। এখান েথেক আমরা HTML অিডও ফাইল যু� এবং িনয়�ণ করার প�িত স�েকর িব�ািরত জানেত পারব। Tu েকান িবষয়েক উপ�াপনার ে�ে�, েট�ট এবং ছিবর পাশাপািশ অিডও-িভিডও বয্বহা করেল িবষয়িট আেরা �াণব� হেয় উেঠ। ওেয়ব িমিডয়ার মাধয্ে এ কাজিট যতটা ভােলাভােব করা যায় আর অ� েকােনা িমিডয়ায় মাধয্ে তা স�ব নয়। HTML �ারা ৈতির েপেজ <embed> টয্া বয্বহা কের সহেজই অিডও ফাইল যু� করা যায় এবং িনয়�ণ করা যায়। পূবর ��িত Page: 46 of 54
  • 47. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html েড�টেপ একটা audio নােম folder িনেত হেব এর মেধয audio.mp3 নােম save করা একটা অিডও ফাইল রাখেত হেব। k অনুশীল �েজ� to H H o TM st EL 1. Bo 0 o <html> <head> <title> www.tutohost.com</title> </head> <body > <p> <center> <embed src="audio.mp3" height="35" width="300" controller="true" loop="false" autostart="false"> </embed> <h3 style="color:#F00">Click play button and enjoy music.</h3> </center> </p> </body> </html> েড�টেপ ৈতির করা audio folder এর মেধয একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। �েজ� িবে�ষণ Tu অিডও যু� করার জ� <embed> টয্া বয্বহা করা হয়। <embed src="audio.mp3" height="35" width="300" controller="true" loop="false" autostart="false"> </embed> src="audio.mp3" এখােন src="…………." এর মেধয অিডও ফাইেলর িলংক যু� করা হয়। Page: 47 of 54
  • 48. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html height="35" width="300" এর মাধয্ে �াউজাের �দিশর্ অিডও ে�য়ােরর আকৃিত িনধর্ার করা হয়। to H H o TM st EL 1. Bo 0 o k controller="true" এর মাধয্ে ওেয়ব েপেজ অিডও ে�য়ার �দশর্ করা হেব িকনা তার িনেদর্ �দান করা হয়। যিদ controller="……….." এর মেধয true েলখা হয় তাহেল অিডও ে�য়ার �দিশর্ হেব আর false েলখা হেল অিডও ে�য়ার �দিশর্ হেব না। loop="false" এর মাধয্ে audio ফাইলিট িক একবার ে� হেব না লুপ আকাের বারবার ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা একবার ে� হেব। autostart="false" এর মাধয্ে audio ফাইলিট অেটাে� অথর্া ওেয়ব েপজ েলাড হওয়ার সােথ সােথই ে� হেব, না অিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা অেটাে� হেব না, অিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব। িনেদর্শন: যিদ ওেয়ব েপেজ অিডও ে�য়ার �দিশর্ না হয় তাহেল QuickTime Player ই�টল কের িনন অথবা �াউজােরর িনেদর্শন অনুযায় �েয়াজনীয় �াগ ইনস ই�টল কের িনন। ২৫. িভিডও সংেযাজন সংঘিটত বা�ব ঘটনােক পিরপূণ্ভাে উপ�াপনার ে�ে� িভিডও সবেচেয় উপেযাগী মাধয্ম।এখা েথেক আমরা র HTML এ িভিডও ফাইল যু� এবং িনয়�ণ করার প�িত স�েকর িব�ািরত জানেত পারব। Tu সংঘিটত বা�ব ঘটনােক পিরপূণর্ভাে উপ�াপনার ে�ে� িভিডও সবেচেয় উপেযাগী মাধয্ম ৈদনি�ন সংবাদ �কাশক ওেয়ব সাইটগুেল তােদর ৈদনি�ন ঘটনাগুেলাে েট�ট এবং ইেমজ বয্বহাের মাধয্ে �কােশর পাশাপািশ িভিডও �কােশর মাধয্ে আেরা েবিশ জনি�য়তা অজর্েন সুেযা পাে�, এবং বয্বহারকারীর এ সকল ঘটনার বা�ব িচ� েদখা, এবং জানার পাশাপািশ �েয়াজেন সং�হ কের রাখেত পারেছন। বতর্মাে িভিডও শুধ মানুেষ িবেনাদন এবং বা�ব ঘটনা �কােশর মাধয্ম নয়, এিট িশ�ার অ�তম বাহেন পিরণত হেয়েছ। অসংখয িশ�ামূলক ওেয়ব সাইট িবিভ� িবষেয়র উপর �িতিদন নতুন নতুন েট�ট িভি�ক িটউেটািরয়ােলর পাশাপািশ িভিডও িটউেটািরয়াল �কাশ করেছ। যা মানুষে পৃিথবীর েয েকান �া� েথেক শুধুমা েশখা এবং জানার সেযাগই সৃি� করেছ না, �� িবিনময় এবং আেলাচনার মু� Page: 48 of 54
  • 49. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html �াটফমর ৈতিরর মাধয্ে পিরপূণর িশ�া িব�ােরও ভুিমকা রাখেছ। HTML�ারা ৈতির েপেজ <embed> টয্া বয্বহা কের সহেজই িভিডও যু� করা যায় এবং িনয়�ণ করা যায়। to H H o TM st EL 1. Bo 0 o k পূবর ��িত েড�টেপ একটা video নােম folder িনেত হেব এর মেধয video.wmv নােম save করা একটা িভিডও ফাইল রাখেত হেব। অনুশীল �েজ� Tu <html> <head> <title> www.tutohost.com</title> </head> <body > <p> <center> <embed src="video.wmv" width="344" height="300" autostart="false" controller="true" loop="false" > </embed> <h3 style="color:#F00">Click the play button and enjoy video.</h3> </center> </p> </body> </html> েড�টেপ ৈতির করা video folder এর মেধয একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। �েজ� িবে�ষণ Page: 49 of 54
  • 50. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html িভিডও যু� করার জ� <embed> টয্া বয্বহা করা হয়। to H H o TM st EL 1. Bo 0 o k <embed src="video.wmv" width="344" height="300" autostart="false" controller="true"> </embed> src="video.wmv" এখােন src="…………." এর মেধয িভিডও ফাইেলর িলংক যু� করা হয়। height="344" width="300" এর মাধয্ে �াউজাের �দিশর্ িভিডও ে�য়ােরর আকৃিত িনধর্ার করা হয়। controller="true" এর মাধয্ে ওেয়ব েপেজ িভিডও ে�য়ার �দশর্ করা হেব িকনা তার িনেদর্ �দান করা হয়। যিদ controller="……….." এর মেধয true েলখা হয় তাহেল িভিডও ে�য়ার �দিশর্ হেব আর false েলখা হেল িভিডও ে�য়ার �দিশর্ হেব না। loop="false" এর মাধয্ে িভিডও ফাইলিট িক একবার ে� হেব না লুপ আকাের বারবার ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা একবার ে� হেব। Tu autostart="false" এর মাধয্ে িভিডও ফাইলিট অেটাে� অথর্া ওেয়ব েপজ েলাড হওয়ার সােথ সােথই ে� হেব, না িভিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব তার িনেদর্ �দান করা হয়। েযেহতু false েলখা আেছ; সুতরা অেটাে� হেব না, িভিডও ে�য়ােরর ে� বাটেন ি�ক করার পর ে� হেব। িনেদর্শন: যিদ ওেয়ব েপেজ অিডও ে�য়ার �দিশর্ না হয় তাহেল �াউজােরর িনেদর্শন অনুযায় �েয়াজনীয় �াগ ইনস ই�টল কের িনন। ২৬. �াস সংেযাজন Page: 50 of 54
  • 51. এইচিটএমএল ইবুক ১.০ TutoHost.com/bangla/html �াস এিনেমশন ওেয়ব সাইেটর একিট অ�তম আকষর্ণী উপাদান। আকষর্ণী েনিভেগশন বার, বয্ানা, বাটন ইতয্ািদে �ােসর এিনেমশন যু� কের েযমন ওেয়ব সাইেটর ইন্টারেফসে আকষর্ণী কের েতালা যায়, পাশাপািশ সাইটিটও বয্বহা বা�ব হেয় উেঠ। এখান েথেক আমরা HTML এ �ােস ৈতির এিনেমশন অথর্া SWF ফাইল যু� করার প�িত স�েকর িব�ািরত জানেত পারব। to H H o TM st EL 1. Bo 0 o k �াস এিনেমশন ওেয়ব সাইেটর একিট অ�তম আকষর্ণী উপাদান। আকষর্ণী েনিভেগশন বার, বয্ানা, বাটন ইতয্ািদে �ােসর এিনেমশন যু� কের েযমন ওেয়ব সাইেটর ইন্টারেফসে আকষর্ণী কের েতালা যায়, পাশাপািশ সাইটিটও বয্বহা বা�ব হেয় উেঠ। HTML�ারা ৈতির েপেজ <embed> টয্া বয্বহা কের অিডও এবং িভিডও এর মত সহেজই �ােস ৈতির এিনেমশন অথর্া SWF ফাইল যু� করা যায় । পূবর ��িত েড�টেপ একটা flash নােম folder িনেত হেব এর মেধয flash.swf নােম save করা একটা িভিডও ফাইল রাখেত হেব। Tu অনুশীল �েজ� <html> <head> <title> www.tutohost.com</title> </head> <body > <center> <embed src="flash.swf" width="250" height="240"> </embed> </center> </body> </html> েড�টেপ ৈতির করা flash folder এর মেধয একটা েনাটপয্া open কের উপেরর code টুক িলেখ file েমন েথেক Save as এ ি�ক কের File name: index.html , Save as type : All files, িদেয় save কের index.html ফাইলিট Mozilla Firefox িদেয় open করেল িনেচ �দিশর্ ছিবর মত েদখােব। Page: 51 of 54
  • 52. TutoHost.com/bangla/html to H H o TM st EL 1. Bo 0 o k এইচিটএমএল ইবুক ১.০ �েজ� িবে�ষণ �াস যু� করার জ� <embed> টয্া বয্বহা করা হয়। <embed src="flash.swf" width="250" height="240"> </embed> src="flash.swf" এখােন src="…………." এর মেধয �াস ফাইেলর িলংক যু� করা হয়। width="250" height="240" এর মাধয্ে �াউজাের �দিশর্ �াস এিনেমশেনর আকৃিত িনধর্ার করা হয়। িনেদর্শন: Tu িনেদর্শন: যিদ ওেয়ব েপেজ �াস এিনেমশন �দিশর্ না হয় তাহেল flash player অথবা �াউজােরর িনেদর্শন অনুযায় �েয়াজনীয় �াগ ইনস ই�টল কের িনন। Like Us on FaceBook FaceBook.com/TutoHost All Right Reserved By TutoHost.com Page: 52 of 54