HTML কি?
HTML একটা কম্পিউটার ল্যাঙ্গুয়েজ, যা পৃথিবীর বিশাল তথ্য-ভান্ডারকে ইন্টারনেটের মাধ্যমে প্রদর্শনের সুযোগ তৈরি করে দিয়েছে। একটা ওয়েব পেজের মূল গঠন তৈরি হয় HTML দিয়ে। HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, একে Hyper Text Mark Up Language বলা হয়। Mark Up Language এক সেট Mark Up ট্যাগের সমন্বয়ে গঠিত হয়। একটা ওয়েব পেজের বিভিন্ন অংশ ব্রাউজারের মাধ্যমে কিভাবে প্রদর্শিত হবে, তা HTML এ Mark Up ট্যাগ সমূহ ব্যবহার করে প্রকাশ করা হয় ।
প্রোগ্রাম লেখার পদ্ধতি
যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা এডিটর ব্যবহার করে কোডিং করতে হয়। HTML এ প্রোগ্রাম লেখার জন্য প্রাথমিকভাবে এডিটর হিসেবে উইন্ডোজ অপারেটিং সিস্টেমের ডিফল্ট এডিটর notepad ব্যবহার করা যেতে পারে এবং বাড়তি সুবিধা পাবার জন্য এডভান্স এডিটর হিসেবে Dreamweaver এবং Notepad++ ব্যবহার করা ভাল। HTML এ লেখা প্রোগ্রাম .html এক্সটেনশন যেমন index.html দ্বারা Save করে যেকোন ব্রাউজার যেমন Internet explorer, Mozilla Firefox , Google chrome এবং Opera দ্বারা দেখা যাবে।
HTML এ লেখা প্রোগ্রামের মৌলিক অংশ সমূহ
<html>
<head>
<title> CODEX SOFTWARE SOLUTION LTD.</title>
</head>
<body>
This is my first web page. I am learning now HTML.
</body>
</html>
Notepad++ open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : html, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করুন।
HTML এ লেখা প্রোগ্রামের বিভিন্ন অংশ বিশ্লেষণ
প্রোগ্রামের মধ্যে <> এবং < /> দুইটা চিহ্ন এবং এর মধ্যে কিছু 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 হিসেবে CODEX SOFTWARE SOLUTION LTD. লেখা হয়েছে যা ব্রাউজারের 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. লেখা হয়েছে যা ব্রাউজারের মূল অংশে প্রদর্শিত হচ্ছে।
HTML ট্যাগ কি?
HTML এ প্রোগ্রাম লেখার জন্য <> এবং </> দুইটা চিহ্ন এবং এর মধ্যে কিছু Word যেমন html, head, title, body ইত্যাদি Keyword ব্যবহার করা হয়। <> বা </> চিহ্ন এবং এর মাঝে লেখা একটি Keyword কে একত্রে ট্যাগ বলা হয়। যেমন <html> এবং </html> । <body> হল body শুরু ট্যাগ এবং </ body> হল body শেষ ট্যাগ।
HTML এর সাধারন ট্যাগ সমূহ
| ট্যাগ সমূহ | বর্ণনা |
| <html> </html> | HTML ডকুমেন্ট নির্দেশ করে। |
| <head></head> | প্রোগ্রামের head অংশ নির্দেশ করে । |
| <title></title> | ডকুমেন্ট টাইটেল নির্দেশ করে। |
| <body></body> | প্রোগ্রামের মূল content অংশ নির্দেশ করে। |
| <a></a> | Anchor ট্যাগ। |
| <abbr></abbr> | Abbreviation ট্যাগ। |
| <b></b> | Bold টেক্সট নির্দেশ করে। |
| <i></i> | Italic টেক্সট নির্দেশ করে। |
| <big></big> | স্বাভাবিকের চেয়ে বড় টেক্সট নির্দেশ করে। |
| <small></small> | স্বাভাবিকের চেয়ে ছোট টেক্সট নির্দেশ করে। |
| <blockquote> </blockquote> | বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়। |
| <br / > | একটা লাইন ব্রেক তৈরি করে । |
| <code></code> | কম্পিউটার কোড টেক্সট প্রকাশ করে। |
| <table></table> | টেবিল তৈরিতে ব্যবহৃত হয়। |
| <col></col> | টেবিলের কলাম তৈরিতে ব্যবহৃত হয়। |
| <td></td> | টেবিলের সেল তৈরিতে ব্যবহৃত হয়। |
| <tr></tr> | টেবিলের সারি তৈরিতে ব্যবহৃত হয়। |
| <form></form> | ফরম তৈরিতে ব্যবহৃত হয়। |
| <h1></h1> | হেডার ট্যাগ 1-6 পর্যন্ত হয়। |
| <hr/> | সমান্তরাল রেখা তৈরি করে। |
| <img/> | ছবি যুক্ত করতে ব্যবহৃত হয়। |
| <input></input> | ফরমের ইনপুট ফিল্ড তৈরিতে ব্যবহৃত হয়। |
| <li></li> | লিষ্ট তৈরিতে ব্যবহৃত হয়। |
| <meta></meta> | Meta ট্যাগ |
| <ol></ol> | অর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়। |
| <ul></ul> | আনঅর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়। |
| <p></p> | প্যারাগ্রাফ নির্দেশ করে |
| <pre></pre> | pre-formatted টেক্সট তৈরিতে ব্যবহৃত হয়। |
| <tt></tt> | টেলিটাইপ টেক্সট নির্দেশ করে। |
| <strong></strong> | Strong টেক্সট নির্দেশ করে। |
| <sub></sub> | subscripted text নির্দেশ করে। |
| <sup></sup> | superscripted text নির্দেশ করে। |
HTML ইলিমেন্ট
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> | This is an element. | </h1> |
| <p> | This is paragraph. | </p> |
| <br /> | ||
| <img /> |
সাধারণতঃ যে সকল ট্যাগের শেষ ট্যাগ থাকে না তাদের ইলিমেন্টও থাকে না। এ ধরণের শুরু ট্যাগের মধ্যেই / চিহ্নটি অন্তর্ভূক্ত থাকে, এবং এর আগে একটা স্পেস দিতে হয়।
HTML এট্রিবিউটস্
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 এট্রিবিউটস্
| ট্যাগ | এট্রিবিউটস্ |
| <font> | size=”5″ face=”Tahoma” color=”red” |
| <h1>….<h6> <p> | align=”center” align=”left” align=”right” title=”Bangladesh” |
| <body> | bgcolor=”green” background=”../images/ele.png” |
| <div> | id=”book” class=”pen” align=”center” |
| <img> <table> | height=”100px” width=”50px” border=”5px” |
| <input /> | type=”text” name=”TextField” |
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.css-bd.com</title>
</head>
<body bgcolor=” green”>
<font size=”5″ face=”Tahoma” color=”red”>
This is a paragraph.
</font>
</body>
</html>
হেডিং
HTML এর মাধ্যমে কোন ডকুমেন্ট বা প্যারাগ্রাফের শিরোনাম লেখার জন্য হেডিং ট্যাগ ব্যবহার করা হয়। HTML এ মোট ছয় ধরণের হেডিং ট্যাগ রয়েছে এগুলো হল <h1> </h1> , <h2> </h2> , <h3> </h3> , <h4> </h4> , <h5> </h5> এবং <h6> </h6> । যদি বড় সাইজের অক্ষরে শিরোনাম লেখার প্রয়োজন হয় তাহলে <h1> </h1> ট্যাগের মাঝে লেখা হয়। এবং অন্যান্য গুলো ব্যবহার করলে লেখার সাইজ আস্তে আস্তে ছোট হবে।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.css-bd.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>
প্যারাগ্রাফ
যে কোন ডকুমেন্ট এক বা একাধিক প্যারাগ্রাফের মাধ্যমে লেখা হয়। HTML এ প্যারাগ্রাফ তৈরির জন্য <p> বা প্যরাগ্রাফ ট্যাগ ব্যবহার করা হয়। যেমন <p>This is a paragraph.</p>। ব্রাউজারের মাধ্যমে প্রতিটা প্যারাগ্রাফ প্রদর্শন করা হলে প্রতিটা প্যারাগ্রাফের পর একটা করে লাইন ব্রেক তৈরি হয়। যদি কখনো প্যারাগ্রাফের মধ্যেই লাইন ব্রেকের প্রয়োজন হয় তাহলে লাইনের শেষে <br /> ট্যাগ ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.css-bd.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>
টেক্সট ফরমেটিং
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> ইত্যাদি ট্যাগ সমূহ ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title>www.css-bd.com</title>
</head>
<body bgcolor=”green”>
<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 /> <address>
(Written by Pavel Sarwar<br />
Address: www.pavelsarwar.com<br />
E-mail:[email protected])</address>This is an example of Address <br />
</p>
</body>
</html>
ফন্ট ট্যাগ
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” দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.pavelsarwar.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>
স্টাইলের ব্যবহার
উদাহরণ প্রোগ্রাম: অন্যান্য এট্রিবিউটস্ ব্যবহার করে
<html>
<head>
<title> www.css-bd.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>
উদাহরণ প্রোগ্রাম: স্টাইল ব্যবহার করে
<html>
<head>
<title> www.css-bd.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>
লিংক
একটা ওয়েব সাইটকে ব্যবহার বান্ধব করে তোলার ক্ষেত্রে লিংকের ব্যবহার খুবই গুরুত্বপূর্ণ। Link এর আভিধানিক অর্থ সংযুক্ত করা। অর্থাৎ একটা ওয়েব পেজের সাথে অন্য একটা পেজকে যুক্ত করাই হল লিংকিং। HTML এ লিংকিং করার জন্য <a> ট্যাগ বা anchor ট্যাগ ব্যবহার করা হয়। যেমন <a href=”http://www.pavelsarwar.com”> www.pavelsarwar.com </a> । অর্থাৎ যে পেজের সাথে লিংক তৈরি করতে হবে তার এড্রেস href=”…………….. ” এর মধ্যে লেখতে হবে, এবং লিংকে যে লেখাটি প্রদর্শন করবে তা <a href=” “>…………………..</a> এর মধ্যে লেখতে হবে।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.css-bd.com</title>
</head>
<body bgcolor=” green”>
<a href=”http://www. css-bd.com/”> www. css-bd.com </a> <br />
<a href=”mailto:[email protected]”> [email protected] </a>
</body>
</html>
ছবি সংযোজন
একটা ওয়েব পেজের গুরুত্বপূর্ণ উপাদান সমূহের একটি হচ্ছে ইমেজ । ওয়েবপেজে ইমেজের উপযুক্ত ব্যবহারের মাধ্যমে পেজটি ব্যবহারকারীদের কাছে যেমন আকর্ষণীয় হয়ে ওঠে তেমনি ব্যবহার বান্ধবও হয়। আকর্ষনীয় নেভিগেশন বার, বাটন, ব্যানার, ইত্যাদিতে ইমেজের ব্যবহার অপরিহার্য। ওয়েব পেজে ইমেজ বা ছবি যুক্ত করার জন্য প্রয়োজনীয় ট্যাগটি হচ্ছে <img> । এর কোন শেষ ট্যাগ নেই। শুধুমাত্র <img> দিয়ে কোন কাজ হয় না, এর সাথে সবসময়ই src এট্রিবিউটটি ব্যবহার করতে হয়। যেমন <img src=”pic.png”> , তাহলে pic.png ইমেজটি প্রদর্শিত হবে।
পূর্ব প্রস্তুতি
ডেক্সটপে একটা webpage নামে folder নিতে হবে এর মধ্যে pic.png নামে save করা একটা ছবি রাখতে হবে।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www. css-bd.com</title>
</head>
<body bgcolor=” green” style=”text-align:center”>
<h3> This is an example of image.</h3>
<img src=”pic.png”>
</body>
</html>
একটা Notepad++ Open করে উপরের Code টুকু লিখে File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html বা home.html অথবা যেকোন নাম.html দিয়ে, Save as type হিসেবে html সিলেক্ট করে এরপর Save বাটনে ক্লিক করতে হবে। এরপর save করা index.html ফাইলটিকে webpage folder এর মধ্যে রাখতে হবে। এখন Mozilla Firefox দিয়ে index.html open করতে হবে।
অনলাইনে সার্ভারে কোন ইমেজ আপলোড করা থাকলে উক্ত ইমেজ যুক্ত করার জন্য তার এড্রেস pic.png এর স্থানে লেখতে হবে। যেমন
<img src=” http://css-bd.com/dhakadiv/images/logo1.jpg “>
টেবিল সংযোজন
দিনে দিনে ইন্টারনেট আজ সবচেয়ে বড় তথ্য ভান্ডারে পরিণত হয়েছে। তথ্য উপাত্ত পরিসংখ্যান চিত্র ভিডিও ইত্যাদির সংমিশ্রণে একটা ওয়েবপেজে কোন বিষয়বস্তুকে যতটা আকর্ষণীয় এবং পরিপূর্ণভাবে উপস্থাপন করা যায়, অন্যান্য মিডিয়ায় তা সম্ভব হয় না। ওয়েব পেজে তথ্য উপাত্ত পরিসংখ্যান উপস্থাপন করার একটি অন্যতম পন্থা হচ্ছে টেবিল ব্যবহার করা। টেবিল তৈরির জন্য টেবিল ট্যাগ <table> ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.pavelsarwar.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>
প্রোগ্রাম আলোচনা
<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.css-bd.com”> CODEX</a></td> অথবা <th><a href=”www.css-bd.com”> CODEX</a></th>
এইচটিএমএল লিষ্ট
একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । HTML এর মাধ্যমে দুই ধরণের লিষ্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিষ্ট এবং অপরটি হচ্ছে আনঅর্ডার লিষ্ট । অর্ডার লিষ্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে। অন্যদিকে আন অর্ডার লিষ্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে। HTML এর মাধ্যমে আন অর্ডার লিষ্ট তৈরি করার জন্য <ul></ul> এবং অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.css-bd.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>
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.pavelsarwar.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>Paragraph</li>
<li>Table</li>
<li>List</li>
</ol>
</body>
</html>
এইচটিএমএল ফর্ম
এইচটিএমএল ফর্ম একটি গুরুত্বপূর্ণ আলোচ্য বিষয়। বিশেষ করে ডাইনামিক এবং ডাটাবেজ নির্ভর ওয়েব সাইটের লগ ইন সিস্টেম, ভোটিং সিস্টেম, কন্টাক্ট ফর্ম সহ ইউজার ইনফরমেশন সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়ে থাকে। একটি এইচটিএমএল ফর্ম বেশ কিছু উপাদানের সমন্বয়ে গঠিত হয়। এগুলো হচ্ছে ,
১. টেক্সট বক্স
২. টেক্সট এরিয়া
৩. রেডিও বাটন
৪. সাবমিট বাটন
৫. চেক বক্স
৬. ড্রপডাউন লিস্ট
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.pavelsarwar.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″>
নাম:
</font>
<input type=”text” value=”আপনার নাম লিখুন” name=”name”><br /><br />
<font face=”SolaimanLipi” color=”#fe0321″ size=”4″>
পিতার নাম:
</font>
<input type=”text” value=”আপনার পিতার নাম লিখুন” name=”name”>
<br /><br />
<font face =”SolaimanLipi” color=”#fe0321″ size=”4″>
ঠিকানা:
</font>
<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” name=”checkbox”>
<font face=”SolaimanLipi” color=”#fe0321″ size=”4″>
এইস.এস.সি
</font>
<br />
<br />
<input type=”submit” name=”submit” value=”জমা করুন”>
<br />
<br />
<input type=”reset” value=”মুছে ফেলুন” name=”clear”>
</form>
</center>
</body>
</html>
HTML ফ্রেম
HTML এর মাধ্যমে কোন ওয়েব পেজকে একাধিক ভাগে বিভক্ত করার জন্য আগের দিনে ফ্রেম ব্যবহার করা হত। দিনে দিনে ফ্রেমের ব্যবহার কমে এসেছে। বর্তমান সময়ে ফ্রেমের ব্যবহার নেই বললেই চলে, কারণ ফ্রেম ব্যবহার করে তৈরিকৃত সম্পূর্ণ পেজ একসাথে প্রিন্ট করা বেশ কষ্টকর। এছাড়া এটা অনেকের কাছেই অপছন্দের। এর পরিবর্তে কোন পেজকে একাধিক অংশে বিভক্ত করতে এখন CSS ব্যবহার করা হয়। তবে html সম্পর্কে জ্ঞান ভান্ডার সমৃদ্ধ করার জন্য ফ্রেম সম্পর্কেও কিছুটা ধারণা থাকা দরকার।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.css-bd.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>
যে কোন নামে একটা ফোল্ডার তৈরি করে তার মথ্যে 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 করুন।
প্রোগ্রাম আলোচনা
<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 পেজ দুটিকে প্রদর্শনের ব্যবস্থা করা হয়েছে।
আই ফ্রেম
একটা ওয়েব পেজের মধ্যেই অপর এক বা একাধিক ওয়েব পেজ প্রদর্শন করার অন্যতম উপায় হচ্ছে আই ফ্রেম। কোন বিষয় বিস্তারিতভাবে উপস্থাপনার ক্ষেত্রে প্রাসঙ্গিক বিষয়ের উপর বিভিন্ন ওয়েব পেজের লিংক প্রকাশ করা গুরুত্বপূর্ণ, পাশাপাশি উক্ত পেজটিকে সংক্ষিপ্ত স্থানের মধ্যে স্ক্রলিং করে প্রদর্শন করতে পারলে মন্দ হয় না।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.pavelsarwar.com</title>
</head>
<body bgcolor=” #f00″>
<center>
<h2 style=”color:#f00″>This is an example of iframe.</h2><br />
<iframe src=”http://www.pavelsarwar.com” width=”350″ height=”170″>
<p>This rowser does not support iframes.</p>
</iframe>
</center>
</body>
</html>
প্রোগ্রাম আলোচনা
আই ফ্রেম তৈরির জন্য <iframe></iframe> ট্যাগ ব্যবহার করা হয়।
width=”350″ height=”170″ এই দুটি এট্রিবিউটের মাধ্যমে আই ফ্রেম এর আকৃতি কেমন হবে তার নির্দেশ প্রদান করা হয়।
যদি কোন ব্রাউজার আই ফ্রেম সাপোর্ট না করে তাহলে <p>This rowser does not support iframes.</p> এর জন্য This rowser does not support iframes. লেখাটি প্রদর্শিত হবে।
রং ও কোড
ওয়েব পেজে রং এর ব্যবহার খুবই গুরুত্বপূর্ণ। একটা ওয়েব পেজ গঠিত হয় এক বা একাধিক প্যারাগ্রাফ, শিরোনাম, টেবিল, ব্যাগ্রাউন্ড, বর্ডার ইত্যাদির সমন্বয়ে। এ সকল উপাদানের প্রত্যেকটিতেই কোন না কোন রং ব্যবহার করতে হয়। কোন একটি পেজের ব্যাগ্রাউন্ড কালার নির্দিষ্ট করার জন্য <body> ট্যাগের মধ্যে body লেখার পর একটা স্পেস দিয়ে bgcolor=” ” লেখতে হবে এর পর ” ” এর মধ্যে BLACK, 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 এর শুরুতে একটা # চিহ্ন দিয়ে শুরু করতে হয়।
ব্যাগ্রাউন্ড কালার দেওয়ার আরও একটা মজার পদ্ধতি আছে। লাল, সবুজ আর নীল এই তিনটি রং হচ্ছে মৌলিক রং, আর অন্য সব রং এই তিনটি রং এর সংমিশ্রনে তৈরি। যদি coding করে এই তিনটি রংকে মিশিয়ে নতুন রং তৈরি করা হয়, তাহলে মন্দ হয় না। এ কাজটি সুসম্পন্ন করতে সবুজ ব্যাগ্রাউন্ডের জন্য নিচের মত করে লেখা যেতে পারে
<body bgcolor=”rgb(0,255,0)”> ।
এখানে rgb অর্থ হল red green blue আর (0,255,0) এর অর্থ হল রংটিতে যথাক্রমে লাল, সবুজ, নীল রং এর পরিমান যথাক্রমে 0%, 100%, 0% কারন এখানে বিশুদ্ধ সবুজ রং নেয়া হয়েছে। আর যে কোন রং এর মান 0-255 পর্যন্ত হতে পারে। যেহেতু g বা green এর মান 255 তাই তা 100%। তিনটি রং এর মান 0-255 এর মধ্যে পরিবর্তন করে ইচ্ছা অনুযায়ী নতুন নতুন রং তৈরি করা যাবে ।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.pavelsarwar.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>
অডিও সংযোজন
কোন বিষয়কে উপস্থাপনার ক্ষেত্রে, টেক্সট এবং ছবির পাশাপাশি অডিও-ভিডিও ব্যবহার করলে বিষয়টি আরো প্রাণবন্ত হয়ে উঠে। ওয়েব মিডিয়ার মাধ্যমে এ কাজটি যতটা ভালোভাবে করা যায় আর অন্য কোনো মিডিয়ায় মাধ্যমে তা সম্ভব নয়। HTML দ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে সহজেই অডিও ফাইল যুক্ত করা যায় এবং নিয়ন্ত্রণ করা যায়।
পূর্ব প্রস্তুতি
ডেক্সটপে একটা audio নামে folder নিতে হবে এর মধ্যে audio.mp3 নামে save করা একটা অডিও ফাইল রাখতে হবে।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.css-bd.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>
প্রজেক্ট বিশ্লেষণ
অডিও যুক্ত করার জন্য <embed> ট্যাগ ব্যবহার করা হয়।
<embed src=”audio.mp3″ height=”35″ width=”300″
controller=”true” loop=”false” autostart=”false”>
</embed>
src=”audio.mp3″ এখানে src=”………….” এর মধ্যে অডিও ফাইলের লিংক যুক্ত করা হয়।
height=”35″ width=”300″ এর মাধ্যমে ব্রাউজারে প্রদর্শিত অডিও প্লেয়ারের আকৃতি নির্ধারণ করা হয়।
controller=”true” এর মাধ্যমে ওয়েব পেজে অডিও প্লেয়ার প্রদর্শন করা হবে কিনা তার নির্দেশ প্রদান করা হয়। যদি controller=”………..” এর মধ্যে true লেখা হয় তাহলে অডিও প্লেয়ার প্রদর্শিত হবে আর false লেখা হলে অডিও প্লেয়ার প্রদর্শিত হবে না।
loop=”false” এর মাধ্যমে audio ফাইলটি কি একবার প্লে হবে না লুপ আকারে বারবার প্লে হবে তার নির্দেশ প্রদান করা হয়। যেহেতু false লেখা আছে; সুতরাং একবার প্লে হবে।
autostart=”false” এর মাধ্যমে audio ফাইলটি অটোপ্লে অর্থাৎ ওয়েব পেজ লোড হওয়ার সাথে সাথেই প্লে হবে, না অডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে তার নির্দেশ প্রদান করা হয়। যেহেতু false লেখা আছে; সুতরাং অটোপ্লে হবে না, অডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে।
নির্দেশনা:
যদি ওয়েব পেজে অডিও প্লেয়ার প্রদর্শিত না হয় তাহলে QuickTime Player ইন্সটল করে নিন অথবা ব্রাউজারের নির্দেশনা অনুযায়ী প্রয়োজনীয় প্লাগ ইনস্ ইন্সটল করে নিন।
ভিডিও সংযোজন
সংঘটিত বাস্তব ঘটনাকে পরিপূর্ণভাবে উপস্থাপনার ক্ষেত্রে ভিডিও সবচেয়ে উপযোগী মাধ্যম। দৈনন্দিন সংবাদ প্রকাশক ওয়েব সাইটগুলো তাদের দৈনন্দিন ঘটনাগুলোকে টেক্সট এবং ইমেজ ব্যবহারের মাধ্যমে প্রকাশের পাশাপাশি ভিডিও প্রকাশের মাধ্যমে আরো বেশি জনপ্রিয়তা অর্জনের সুযোগ পাচ্ছে, এবং ব্যবহারকারীরা এ সকল ঘটনার বাস্তব চিত্র দেখা, এবং জানার পাশাপাশি প্রয়োজনে সংগ্রহ করে রাখতে পারছেন। বর্তমানে ভিডিও শুধু মানুষের বিনোদন এবং বাস্তব ঘটনা প্রকাশের মাধ্যমই নয়, এটি শিক্ষার অন্যতম বাহনে পরিণত হয়েছে।
অসংখ্য শিক্ষামূলক ওয়েব সাইট বিভিন্ন বিষয়ের উপর প্রতিদিন নতুন নতুন টেক্সট ভিত্তিক টিউটোরিয়ালের পাশাপাশি ভিডিও টিউটোরিয়াল প্রকাশ করছে। যা মানুষকে পৃথিবীর যে কোন প্রান্ত থেকে শুধুমাত্র শেখা এবং জানার সুযোগই সৃষ্টি করছে না, প্রশ্ন বিনিময় এবং আলোচনার মুক্ত প্লাটফর্ম তৈরির মাধ্যমে পরিপূর্ণ শিক্ষা বিস্তারেও ভুমিকা রাখছে। HTMLদ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে সহজেই ভিডিও যুক্ত করা যায় এবং নিয়ন্ত্রণ করা যায়।
পূর্ব প্রস্তুতি
ডেক্সটপে একটা video নামে folder নিতে হবে এর মধ্যে video.wmv নামে save করা একটা ভিডিও ফাইল রাখতে হবে।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.pavelsarwar.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>
প্রজেক্ট বিশ্লেষণ
ভিডিও যুক্ত করার জন্য <embed> ট্যাগ ব্যবহার করা হয়।
<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 লেখা আছে; সুতরাং একবার প্লে হবে।
autostart=”false” এর মাধ্যমে ভিডিও ফাইলটি অটোপ্লে অর্থাৎ ওয়েব পেজ লোড হওয়ার সাথে সাথেই প্লে হবে, না ভিডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে তার নির্দেশ প্রদান করা হয়। যেহেতু false লেখা আছে; সুতরাং অটোপ্লে হবে না, ভিডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে।
নির্দেশনা:
যদি ওয়েব পেজে অডিও প্লেয়ার প্রদর্শিত না হয় তাহলে ব্রাউজারের নির্দেশনা অনুযায়ী প্রয়োজনীয় প্লাগ ইনস্ ইন্সটল করে নিন।