তথ্য ও যোগাযোগ প্রযুক্তি
চতুর্থ অধ্যায় : HTML
HTML কি?
HTML একটা কম্পিউটার ল্যাঙ্গুয়েজ, যা পৃথিবীর বিশাল তথ্য-ভান্ডারকে ইন্টারনেটের মাধ্যমে প্রদর্শনের সুযোগ তৈরি করে দিয়েছে। একটা ওয়েব পেজের মূল গঠন তৈরি হয় HTML দিয়ে। HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, একে Hyper Text Mark Up Language বলা হয়। Mark Up Language এক সেট Mark Up ট্যাগের সমন্বয়ে গঠিত হয়। একটা ওয়েব পেজের বিভিন্ন অংশ ব্রাউজারের মাধ্যমে কিভাবে প্রদর্শিত হবে, তা HTML এ Mark Up ট্যাগ সমূহ ব্যবহার করে প্রকাশ করা হয় ।
HTML এর ইতিহাস
HTML বা Hyper Text Mark Up Language তৈরি করেছেন টিম বার্নাস-লী। HTML তৈরির উদ্দেশ্য ছিল বৈজ্ঞানিক গবেষণার তথ্য উপাত্ত দ্রুত পৃথিবীর বিভ্ন্নি স্থানে আদান প্রদানের ব্যবস্থা করা। ১৯৯০ সালের দিকে NCSA কর্তৃক ডেভলপকৃত মোজাইক ব্রাউজারের মাধ্যমে HTML পরিচিতি লাভ করে। ১৯৯৭ এর জানুয়ারীতে WC3 কর্তৃক প্রথম ডেভলপকৃত HTML3.2 প্রকাশিত হয়। একই বছরে শেষে ডিসেম্বরে WC3 HTML এর নতুন সংস্করণ HTML4.2 প্রকাশ করে। ২০১০ সালে বর্তমানে প্রচলিত HTML এর সর্বশেষ ভার্সন HTML5 জনসম্মূখে পরিচিতি লাভ করে।
প্রোগ্রাম লেখার পদ্ধতি
যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা এডিটর ব্যবহার করে কোডিং করতে হয়। HTML এ প্রোগ্রাম লেখার জন্য প্রাথমিকভাবে এডিটর হিসেবে উইন্ডোজ অপারেটিং সিস্টেমের ডিফল্ট এডিটর notepad ব্যবহার করা যেতে পারে এবং বাড়তি সুবিধা পাবার জন্য এডভান্স এডিটর হিসেবে Dreamweaver এবং Notepad++ ব্যবহার করা ভাল। HTML এ লেখা প্রোগ্রাম .html এক্সটেনশন যেমন index.html দ্বারা Save করে যেকোন ব্রাউজার যেমন Internet explorer, Mozilla Firefox , Google chrome এবং Opera দ্বারা দেখা যাবে।
ট্যাগ সমুহ ও ব্যবহার
HTML এ প্রোগ্রাম লেখার জন্য <> এবং দুইটা চিহ্ন এবং এর মধ্যে কিছু Word যেমন html, head, title, body ইত্যাদি Keyword ব্যবহার করা হয়। <> বা চিহ্ন এবং এর মাঝে লেখা একটি Keyword কে একত্রে ট্যাগ বলা হয়। যেমন এবং । হল body শুরু ট্যাগ এবং হল body শেষ ট্যাগ।
HTML এর সাধারন ট্যাগ সমূহ:-
<html> </html>
HTML ডকুমেন্ট নির্দেশ করে।
<big></big>
স্বাভাবিকের চেয়ে বড় টেক্সট নির্দেশ করে।
<head></head>
প্রোগ্রামের head অংশ নির্দেশ করে
<small></small>
স্বাভাবিকের চেয়ে ছোট টেক্সট নির্দেশ করে।
<title></title>
ডকুমেন্ট টাইটেল নির্দেশ করে।
<blockquote> </blockquote>
বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়।
<body></body>
প্রোগ্রামের মূল content অংশ নির্দেশ করে।
<table></table>
টেবিল তৈরিতে ব্যবহৃত হয়।
<a></a>
Anchor ট্যাগ।
<col></col>
টেবিলের কলাম তৈরিতে ব্যবহৃত হয়।
<abbr></abbr>
Abbreviation ট্যাগ।
<br / >
একটা লাইন ব্রেক তৈরি করে ।
<b></b>
Bold টেক্সট নির্দেশ করে।
<code></code>
কম্পিউটার কোড টেক্সট প্রকাশ করে।
<i></i>
Italic টেক্সট নির্দেশ করে।
<td></td>
টেবিলের সেল তৈরিতে ব্যবহৃত হয়।
<form></form>
ফরম তৈরিতে ব্যবহৃত হয়।
<tr></tr>
টেবিলের সারি তৈরিতে ব্যবহৃত হয়।
<h1></h1>
হেডার ট্যাগ 1-6 পর্যন্ত হয়।
<img/>
ছবি যুক্ত করতে ব্যবহৃত হয়।
<hr/>
সমান্তরাল রেখা তৈরি করে।
<input></input>
ফরমের ইনপুট ফিল্ড তৈরিতে ব্যবহৃত হয়।
<li></li>
লিষ্ট তৈরিতে ব্যবহৃত হয়।
<p></p>
প্যারাগ্রাফ নির্দেশ করে
<ol></ol>
অর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।
<ul></ul>
আনঅর্ডার লিষ্ট তৈরিতে:
HTML ইলিমেন্ট
HTML এ যেকোন শুরু ও শেষ ট্যাগ এবং মাঝের অংশকে ইলিমেন্ট বলা হয়। যেমন <h1> This is an example of element.</h1> । এখানে <h1> হেডার1 শুরু এবং </h1> হেডার1 শেষ ট্যাগের মাঝে This is an example of element একটি ইলিমেন্ট। কিছু কিছু ট্যাগের কোন ইলিমেন্ট থাকে না যেমন <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" দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।
ট্যাগ এট্রিবিউটস্
<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.google.com</title>
</head>
<body bgcolor=" green">
<font size="5" face="Tahoma" color="red">
This is a paragraph.
</font>
</body>
</html>
[ Output দেখুন
একটি নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করুন, আপনি preview দেখতে পারবেন।]
হেডিং ট্যাগ ও ব্যবহার
HTML এর মাধ্যমে কোন ডকুমেন্ট বা প্যারাগ্রাফের শিরোনাম লেখার জন্য হেডিং ট্যাগ ব্যবহার করা হয়। HTML এ মোট ছয় ধরণের হেডিং ট্যাগ রয়েছে এগুলো হল <h1> </h1> , <h2> </h2> , <h3> </h3> , <h4> </h4> , <h5> </h5> এবং <h6> </h6> । যদি বড় সাইজের অক্ষরে শিরোনাম লেখার প্রয়োজন হয় তাহলে <h1> </h1> ট্যাগের মাঝে লেখা হয়। এবং অন্যান্য গুলো ব্যবহার করলে লেখার সাইজ আস্তে আস্তে ছোট হবে।
উদাহরণ প্রোগ্রাম
<html> <head>
<title> www.google.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 প্যারাগ্রাফ
যে কোন ডকুমেন্ট এক বা একাধিক প্যারাগ্রাফের মাধ্যমে লেখা হয়। HTML এ প্যারাগ্রাফ তৈরির জন্য <p> বা প্যরাগ্রাফ ট্যাগ ব্যবহার করা হয়। যেমন <p>This is a paragraph.</p>। ব্রাউজারের মাধ্যমে প্রতিটা প্যারাগ্রাফ প্রদর্শন করা হলে প্রতিটা প্যারাগ্রাফের পর একটা করে লাইন ব্রেক তৈরি হয়। যদি কখনো প্যারাগ্রাফের মধ্যেই লাইন ব্রেকের প্রয়োজন হয় তাহলে লাইনের শেষে <br /> ট্যাগ ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<html>
<head> <title> www.google.com</title> </head>
<body bgcolor=" green">
<p>This is a paragraph.</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.google.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 Anonymous<br />
Address: www.examplesite.com<br />
E-mail: anonymous@mail.com)</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.google.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>
স্টাইলের ব্যবহার
Style, HTML এর একটি নতুন এট্রিবিউটস, এর মাধ্যমে HTML এর মধ্যেই CSS ব্যবহারের সুযোগ সৃষ্টি হয়। Style তথা CSS ব্যবহারের মাধ্যমে ওয়েব পেজের বিভিন্ন উপাদানের ডিজাইন তৈরি করা হয়। অন্যান্য এট্রিবিউটস যেমন align="center", align="left", bgcolor="green", height="100px", width="50px, bgcolor="green" ইত্যাদির মাধ্যমে যদিও ডিজাইন তৈরি করা যায়, তবে এক্ষেত্রে Style ব্যবহারে বিশেষ সুবিধা পাওয়া যায়।
উদাহরণ প্রোগ্রাম: অন্যান্য এট্রিবিউটস্ ব্যবহার করে
<html>
<head>
<title> www.google.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>
লিংক প্রকাশের পদ্ধতি
একটা ওয়েব সাইটকে ব্যবহার বান্ধব করে তোলার ক্ষেত্রে লিংকের ব্যবহার খুবই গুরুত্বপূর্ণ। Link এর আভিধানিক অর্থ সংযুক্ত করা। অর্থাৎ একটা ওয়েব পেজের সাথে অন্য একটা পেজকে যুক্ত করাই হল লিংকিং। HTML এ লিংকিং করার জন্য <a> ট্যাগ বা anchor ট্যাগ ব্যবহার করা হয়। যেমন <a href="http://www. google.com/"> www. google.com </a> । অর্থাৎ যে পেজের সাথে লিংক তৈরি করতে হবে তার এড্রেস href="…………….. " এর মধ্যে লেখতে হবে, এবং লিংকে যে লেখাটি প্রদর্শন করবে তা <a href=" ">…………………..</a> এর মধ্যে লেখতে হবে।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.google.com</title>
</head>
<body bgcolor=" green">
<a href="http://www.google.com/"> www.google.com </a> <br />
<a href="mailto:admin@google.com"> admin@google.com</a>
</body>
</html>
ইমেজ সংযোজন
একটা ওয়েব পেজের গুরুত্বপূর্ণ উপাদান সমূহের একটি হচ্ছে ইমেজ । ওয়েবপেজে ইমেজের উপযুক্ত ব্যবহারের মাধ্যমে পেজটি ব্যবহারকারীদের কাছে যেমন আকর্ষণীয় হয়ে ওঠে তেমনি ব্যবহার বান্ধবও হয়। আকর্ষনীয় নেভিগেশন বার, বাটন, ব্যানার, ইত্যাদিতে ইমেজের ব্যবহার অপরিহার্য। ওয়েব পেজে ইমেজ বা ছবি যুক্ত করার জন্য প্রয়োজনীয় ট্যাগটি হচ্ছে <img> । এর কোন শেষ ট্যাগ নেই। শুধুমাত্র <img> দিয়ে কোন কাজ হয় না, এর সাথে সবসময়ই src এট্রিবিউটটি ব্যবহার করতে হয়। যেমন <img src=”pic.png”> , তাহলে pic.png ইমেজটি প্রদর্শিত হবে।
পূর্ব প্রস্তুতি
ডেক্সটপে একটা webpage নামে folder নিতে হবে এর মধ্যে pic.png নামে save করা একটা ছবি রাখতে হবে।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.google.com</title>
</head>
<body bgcolor=" green" style="text-align:center">
<h3> This is an example of image.</h3>
<img src="pic.png">
</body>
</html>
টেবিল প্রকাশ
দিনে দিনে ইন্টারনেট আজ সবচেয়ে বড় তথ্য ভান্ডারে পরিণত হয়েছে। তথ্য উপাত্ত পরিসংখ্যান চিত্র ভিডিও ইত্যাদির সংমিশ্রণে একটা ওয়েবপেজে কোন বিষয়বস্তুকে যতটা আকর্ষণীয় এবং পরিপূর্ণভাবে উপস্থাপন করা যায়, অন্যান্য মিডিয়ায় তা সম্ভব হয় না। ওয়েব পেজে তথ্য উপাত্ত পরিসংখ্যান উপস্থাপন করার একটি অন্যতম পন্থা হচ্ছে টেবিল ব্যবহার করা। টেবিল তৈরির জন্য টেবিল ট্যাগ <table> ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<html>
<head> <title> www.google.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.google.com"> Google</a></td> অথবা <th><a href="www.google.com"> Google</a></th>
লিস্টের ব্যবহার
একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । HTML এর মাধ্যমে দুই ধরণের লিষ্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিষ্ট এবং অপরটি হচ্ছে আনঅর্ডার লিষ্ট । অর্ডার লিষ্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে। অন্যদিকে আন অর্ডার লিষ্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে। HTML এর মাধ্যমে আন অর্ডার লিষ্ট তৈরি করার জন্য <ul></ul> এবং অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.google.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.google.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>
</body>
</html>
HTML ফর্ম
এইচটিএমএল ফর্ম একটি গুরুত্বপূর্ণ আলোচ্য বিষয়। বিশেষ করে ডাইনামিক এবং ডাটাবেজ নির্ভর ওয়েব সাইটের লগ ইন সিস্টেম, ভোটিং সিস্টেম, কন্টাক্ট ফর্ম সহ ইউজার ইনফরমেশন সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়ে থাকে। একটি এইচটিএমএল ফর্ম বেশ কিছু উপাদানের সমন্বয়ে গঠিত হয়। এগুলো হচ্ছে ,
১. টেক্সট বক্স ২. টেক্সট এরিয়া ৩. রেডিও বাটন ৪. সাবমিট বাটন ৫. চেক বক্স ৬. ড্রপডাউন লিস্ট
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.google.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 এর মাধ্যমে কোন ওয়েব পেজকে একাধিক ভাগে বিভক্ত করার জন্য আগের দিনে ফ্রেম ব্যবহার করা হত। দিনে দিনে ফ্রেমের ব্যবহার কমে এসেছে। বর্তমান সময়ে ফ্রেমের ব্যবহার নেই বললেই চলে, কারণ ফ্রেম ব্যবহার করে তৈরিকৃত সম্পূর্ণ পেজ একসাথে প্রিন্ট করা বেশ কষ্টকর। এছাড়া এটা অনেকের কাছেই অপছন্দের। এর পরিবর্তে কোন পেজকে একাধিক অংশে বিভক্ত করতে এখন CSS ব্যবহার করা হয়। তবে html সম্পর্কে জ্ঞান ভান্ডার সমৃদ্ধ করার জন্য ফ্রেম সম্পর্কেও কিছুটা ধারণা থাকা দরকার।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.google.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>
প্রোগ্রাম আলোচনা
<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.google.com</title>
</head>
<body bgcolor=" #f00">
<center>
<h2 style="color:#f00">This is an example of iframe.</h2><br />
<iframe src="http://www.google.com/" width="350" height="170">
<p>This rowser does not support iframes.</p>
</iframe>
</center>
</body>
</html>
লে আউট পদ্ধতি
একটা ওয়েব পেজ কতটা সুন্দর হবে তা সম্পূর্ণরূপে নির্ভর করে পেজের লে আউটের উপর। আগে শুধুমাত্র HTML ব্যবহার করেই সকল ওয়েব সাইটের লে আউট তৈরি করা হত। বর্তমানে HTML এর সাথে CSS ব্যবহার করা হয়। শুধুমাত্র HTML ব্যবহার করে লে আউট তৈরি করার জন্য <table> এর সারি ও কলাম ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.google.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;text-align: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="background-color:#EEEEEE;height:200px;width:400px;text-align: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 />
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;text-align:center;">
Copyright © 2012google.com</td>
</tr>
</table>
</body>
</html>
সি এস এস
বর্তমান সময়ে ওয়েব পেজের কাঠামো তৈরি করা হয় 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://google.com/bangla/style.css">
</head>
ইনটার্নাল স্টাইল সিট
এ পদ্ধতিতে 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>
ইনলাইন স্টাইল সিট
এ পদ্ধতিতে HTML এর প্রতিটি ট্যাগের মধ্যেই CSS স্টাইল যুক্ত করা হয় । এজন্য নিম্নোক্ত পদ্ধতিতে style এট্রিবিউটস ব্যবহার করা হয়।
<p style="margin-left:120px; font-weight: bold; color: #060;">
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.google.com</title>
<link rel="stylesheet" type="text/css" href="//bangla/style.css">
<style>
body{background:green; font-family:Verdana; font-size: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 />
</p>
</body>
</html>
হেড ইলিমেন্ট
হেড ট্যাগ বা <head> এবং হেড ইলিমেন্ট যেকোন HTML পেজের একটি গুরুত্বপূর্ণ অংশ। কারণ <head>….</head> এর মধ্যে অর্থাৎ হেড ইলিমেন্ট হিসেবে <title> <link> <meta> <style> <script> এ সকল গুরুত্বপূর্ণ ট্যাগ সমূহ রাখা হয়। এগুলোর মাধ্যমে ব্রাউজারে পেজ সম্পর্কিত বেশ কিছু তথ্য প্রদর্শন করার পাশাপাশি সার্চ ইন্জিন অপটিমাইজেশন এর মত গুরুত্বপূর্ণ কাজও সম্পন্ন হয়।
টাইটেল
ব্রাউজারের টাইটেল বারে পেজের টাইটেল প্রদর্শনের জন্য <title> </title> ট্যাগ ব্যবহার করা হয়।
<title>আমাদের HTML টিউটোরিয়াল সমূহ</title>
উপরের কোড এর মাধ্যমে ব্রাউজারের টাইটেল বারে “আমাদের HTML টিউটোরিয়াল সমূহ” লেখাটি দেখা যাবে।
লিংক
CSS স্টাইল সিট এর সাথে লিংক করার জন্য <link> </link> ব্যবহার করা হয়।
<link rel="stylesheet" type="text/css" href="styles.css" />
মেটা ইলিমেন্ট
মেটা সার্চ ইন্জিন অপটিমাইজেশনের জন্য গুরুত্বপূর্ণ কাজ করে থাকে। বিষয়টি পববর্তী লেখায় বিস্তারিত আলোচনা করা হবে।
স্টাইল
ইনটার্নাল স্টাইল সিট ব্যবহারের জন্য <style></style> ট্যাগ ব্যবহার করা হয়। যেমন
<head>
<style type="text/css">
body {background-color: red;}
p { margin-left: 20px;
font-weight: bold;
color: #006; }
</style>
</head>
স্ক্রিপ্ট
জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি স্ক্রিপ্ট যুক্ত করার জন্য <script> </script> ট্যাগ ব্যবহার করা হয়। যেমন
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
ওয়েবে অডিও ফাইল চালানোর পদ্ধতি
কোন বিষয়কে উপস্থাপনার ক্ষেত্রে, টেক্সট এবং ছবির পাশাপাশি অডিও-ভিডিও ব্যবহার করলে বিষয়টি আরো প্রাণবন্ত হয়ে উঠে। ওয়েব মিডিয়ার মাধ্যমে এ কাজটি যতটা ভালোভাবে করা যায় আর অন্য কোনো মিডিয়ায় মাধ্যমে তা সম্ভব নয়। HTML দ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে সহজেই অডিও ফাইল যুক্ত করা যায় এবং নিয়ন্ত্রণ করা যায়।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.google.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>
ওয়েবে ফ্লাস ফাইল চালানোর পদ্ধতি
ফ্লাস এনিমেশন ওয়েব সাইটের একটি অন্যতম আকর্ষণীয় উপাদান। আকর্ষণীয় নেভিগেশন বার, ব্যানার, বাটন ইত্যাদিতে ফ্লাসের এনিমেশন যুক্ত করে যেমন ওয়েব সাইটের ইন্টারফেসকে আকর্ষণীয় করে তোলা যায়, পাশাপাশি সাইটটিও ব্যবহার বান্ধব হয়ে উঠে। HTMLদ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে অডিও এবং ভিডিও এর মত সহজেই ফ্লাসে তৈরি এনিমেশন অর্থাৎ SWF ফাইল যুক্ত করা যায়।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.google.com</title>
</head>
<body >
<center>
<embed src="flash.swf" width="250" height="240">
</embed>
</center>
</body>
</html>
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন