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 করে যেকোন ব্রাউজার যেমন Internetexplorer, 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>
<head>
<title> www.tutohost.com</title>
</head>
<body>
This is my first web page. I am learning now HTML.
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে 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 হিসেবে 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. লেখা হয়েছে যা ব্রাউজারের মূল অংশে প্রদর্শিত হচ্ছে।
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. লেখা হয়েছে, তাই <h1> This is an example of element.</h1> একটি ইলিমেন্ট। কিছু কিছু ট্যাগের কোন ইলিমেন্ট থাকে না যেমন <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.tutohost.com</title>
</head>
<body bgcolor=" green">
<font size="5" face="Tahoma" color="red">
This is a paragraph.
</font>
</body>
</html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" green">
<font size="5" face="Tahoma" color="red">
This is a paragraph.
</font>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করেFile name: index.html , Save as type :All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।
হেডিং
HTML এর মাধ্যমে কোন ডকুমেন্ট বা প্যারাগ্রাফের শিরোনাম লেখার জন্য হেডিং ট্যাগ ব্যবহার করা হয়। HTML এ মোট ছয় ধরণের হেডিং ট্যাগ রয়েছে এগুলো হল <h1> </h1> , <h2> </h2> , <h3> </h3> , <h4> </h4> , <h5> </h5> এবং <h6> </h6> । যদি বড় সাইজের অক্ষরে শিরোনাম লেখার প্রয়োজন হয় তাহলে <h1> </h1> ট্যাগের মাঝে লেখা হয়। এবং অন্যান্য গুলো ব্যবহার করলে লেখার সাইজ আস্তে আস্তে ছোট হবে।
উদাহরণ প্রোগ্রাম
<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>
<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 করলে পাশে প্রদর্শিত ছবির মত দেখাবে।
প্যারাগ্রাফ
যে কোন ডকুমেন্ট এক বা একাধিক প্যারাগ্রাফের মাধ্যমে লেখা হয়। HTML এ প্যারাগ্রাফ তৈরির জন্য <p> বা প্যরাগ্রাফ ট্যাগ ব্যবহার করা হয়। যেমন <p>This is a paragraph.</p>। ব্রাউজারের মাধ্যমে প্রতিটা প্যারাগ্রাফ প্রদর্শন করা হলে প্রতিটা প্যারাগ্রাফের পর একটা করে লাইন ব্রেক তৈরি হয়। যদি কখনো প্যারাগ্রাফের মধ্যেই লাইন ব্রেকের প্রয়োজন হয় তাহলে লাইনের শেষে <br />ট্যাগ ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<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>
<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>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করেFile name: index.html , Save as type :All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।
টেক্সট ফরমেটিং
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.tutohost.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 Ashim<br />
Address: www.tutohost.com<br />
E-mail:ashimkumar50@yahoo.com)</address>This is an example of Address <br />
</p>
</body>
</html>
<head>
<title>www.tutohost.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 Ashim<br />
Address: www.tutohost.com<br />
E-mail:ashimkumar50@yahoo.com)</address>This is an example of Address <br />
</p>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
ফন্ট ট্যাগ
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.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>
<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>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type :All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।
স্টাইলের ব্যবহার
Style, HTML এর একটি নতুন এট্রিবিউটস, এর মাধ্যমে HTML এর মধ্যেই CSS ব্যবহারের সুযোগ সৃষ্টি হয়। Style তথা CSS ব্যবহারের মাধ্যমে ওয়েব পেজের বিভিন্ন উপাদানের ডিজাইন তৈরি করা হয়। অন্যান্য এট্রিবিউটস যেমন align="center", align="left", bgcolor="green", height="100px", width="50px, bgcolor="green" ইত্যাদির মাধ্যমে যদিও ডিজাইন তৈরি করা যায়, তবে এক্ষেত্রে Styleব্যবহারে বিশেষ সুবিধা পাওয়া যায়।
উদাহরণ প্রোগ্রাম: অন্যান্য এট্রিবিউটস্ ব্যবহার করে
<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>
<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>
উদাহরণ প্রোগ্রাম: স্টাইল ব্যবহার করে
<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>
<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 করলে পাশে প্রদর্শিত ছবির মত দেখাবে।
লিংক
একটা ওয়েব সাইটকে ব্যবহার বান্ধব করে তোলার ক্ষেত্রে লিংকের ব্যবহার খুবই গুরুত্বপূর্ণ। 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>
<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>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।
ছবি সংযোজন
একটা ওয়েব পেজের গুরুত্বপূর্ণ উপাদান সমূহের একটি হচ্ছে ইমেজ । ওয়েবপেজে ইমেজের উপযুক্ত ব্যবহারের মাধ্যমে পেজটি ব্যবহারকারীদের কাছে যেমন আকর্ষণীয় হয়ে ওঠে তেমনি ব্যবহার বান্ধবও হয়। আকর্ষনীয় নেভিগেশন বার, বাটন, ব্যানার, ইত্যাদিতে ইমেজের ব্যবহার অপরিহার্য।
ওয়েব পেজে ইমেজ বা ছবি যুক্ত করার জন্য প্রয়োজনীয় ট্যাগটি হচ্ছে <img> । এর কোন শেষ ট্যাগ নেই। শুধুমাত্র <img> দিয়ে কোন কাজ হয় না, এর সাথে সবসময়ই src এট্রিবিউটটি ব্যবহার করতে হয়। যেমন <img src=”pic.png”> , তাহলে pic.png ইমেজটি প্রদর্শিত হবে।
পূর্ব প্রস্তুতি
ডেক্সটপে একটা webpage নামে folder নিতে হবে এর মধ্যে pic.png নামে save করা একটা ছবি রাখতে হবে।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" green" style="text-align:center">
<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>
<img src="pic.png">
</body>
</html>
একটা 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 করলে পাশের ছবির মত দেখাবে।
অনলাইনে সার্ভারে কোন ইমেজ আপলোড করা থাকলে উক্ত ইমেজ যুক্ত করার জন্য তার এড্রেস pic.png এর স্থানে লেখতে হবে। যেমন
<img src="http://www.tutohost.com/bangla/html/images/pic.png">
টেবিল সংযোজন
দিনে দিনে ইন্টারনেট আজ সবচেয়ে বড় তথ্য ভান্ডারে পরিণত হয়েছে। তথ্য উপাত্ত পরিসংখ্যান চিত্র ভিডিও ইত্যাদির সংমিশ্রণে একটা ওয়েবপেজে কোন বিষয়বস্তুকে যতটা আকর্ষণীয় এবং পরিপূর্ণভাবে উপস্থাপন করা যায়, অন্যান্য মিডিয়ায় তা সম্ভব হয় না। ওয়েব পেজে তথ্য উপাত্ত পরিসংখ্যান উপস্থাপন করার একটি অন্যতম পন্থা হচ্ছে টেবিল ব্যবহার করা। টেবিল তৈরির জন্য টেবিল ট্যাগ <table> ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<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>
<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 করলে পাশে প্রদর্শিত ছবির মত দেখাবে।
প্রোগ্রাম আলোচনা
<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>
টেবিলের প্রতিটা সারি তৈরির জন্য <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>
এইচটিএমএল লিষ্ট
একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । HTML এর মাধ্যমে দুই ধরণের লিষ্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিষ্ট এবং অপরটি হচ্ছে আনঅর্ডার লিষ্ট । অর্ডার লিষ্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে।
অন্যদিকে আন অর্ডার লিষ্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে। HTML এর মাধ্যমে আন অর্ডার লিষ্ট তৈরি করার জন্য <ul></ul> এবং অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol>ট্যাগ ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" #00CC99" style="text-align:center">
<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>
<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>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" #00CC99" style="text-align:center">
<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>
<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>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।
এইচটিএমএল ফর্ম
এইচটিএমএল ফর্ম একটি গুরুত্বপূর্ণ আলোচ্য বিষয়। বিশেষ করে ডাইনামিক এবং ডাটাবেজ নির্ভর ওয়েব সাইটের লগ ইন সিস্টেম, ভোটিং সিস্টেম, কন্টাক্ট ফর্ম সহ ইউজার ইনফরমেশন সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়ে থাকে। একটি এইচটিএমএল ফর্ম বেশ কিছু উপাদানের সমন্বয়ে গঠিত হয়। এগুলো হচ্ছে ,
১. টেক্সট বক্স
২. টেক্সট এরিয়া
৩. রেডিও বাটন
৪. সাবমিট বাটন
৫. চেক বক্স
৬. ড্রপডাউন লিস্ট
২. টেক্সট এরিয়া
৩. রেডিও বাটন
৪. সাবমিট বাটন
৫. চেক বক্স
৬. ড্রপডাউন লিস্ট
উদাহরণ প্রোগ্রাম
<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">
নাম:
</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>
<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">
নাম:
</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>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করেFile name: index.html , Save as type :All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
HTML ফ্রেম
HTML এর মাধ্যমে কোন ওয়েব পেজকে একাধিক ভাগে বিভক্ত করার জন্য আগের দিনে ফ্রেম ব্যবহার করা হত। দিনে দিনে ফ্রেমের ব্যবহার কমে এসেছে। বর্তমান সময়ে ফ্রেমের ব্যবহার নেই বললেই চলে, কারণ ফ্রেম ব্যবহার করে তৈরিকৃত সম্পূর্ণ পেজ একসাথে প্রিন্ট করা বেশ কষ্টকর। এছাড়া এটা অনেকের কাছেই অপছন্দের। এর পরিবর্তে কোন পেজকে একাধিক অংশে বিভক্ত করতে এখন CSSব্যবহার করা হয়। তবে html সম্পর্কে জ্ঞান ভান্ডার সমৃদ্ধ করার জন্য ফ্রেম সম্পর্কেও কিছুটা ধারণা থাকা দরকার।
উদাহরণ প্রোগ্রাম
<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>
<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>
যে কোন নামে একটা ফোল্ডার তৈরি করে তার মথ্যে 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 পেজ দুটিকে প্রদর্শনের ব্যবস্থা করা হয়েছে।
<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.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>
<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>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type :All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
প্রোগ্রাম আলোচনা
আই ফ্রেম তৈরির জন্য <iframe></iframe> ট্যাগ ব্যবহার করা হয়।
width="350" height="170" এই দুটি এট্রিবিউটের মাধ্যমে আই ফ্রেম এর আকৃতি কেমন হবে তার নির্দেশ প্রদান করা হয়।
যদি কোন ব্রাউজার আই ফ্রেম সাপোর্ট না করে তাহলে <p>This rowser does not support iframes.</p> এর জন্য This rowser does not support iframes. লেখাটি প্রদর্শিত হবে।
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 এর মধ্যে পরিবর্তন করে ইচ্ছা অনুযায়ী নতুন নতুন রং তৈরি করা যাবে ।
এছাড়া hexadecimal code ব্যবহার করেও ব্যাগ্রাউন্ড কালার নির্বাচন করা যায়। যেমন উপরের কোডটি নিচের মত লেখা যায় <body bgcolor="#00FF00"> ।
color piker থেকে সহজেই বিভিন্ন কালারের জন্য hexadecimal code সংগ্রহ করা যায়। এছাড়া নিচের চার্ট থেকেও কাজটি করা যাবে। hexadecimal code এর শুরুতে একটা # চিহ্ন দিয়ে শুরু করতে হয়।
<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.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>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type :All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
<head>
<title> www.tutohost.com</title>
</head>
<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>
</html>
লে আউট
একটা ওয়েব পেজ কতটা সুন্দর হবে তা সম্পূর্ণরূপে নির্ভর করে পেজের লে আউটের উপর। আগে শুধুমাত্র HTML ব্যবহার করেই সকল ওয়েব সাইটের লে আউট তৈরি করা হত। বর্তমানে HTML এর সাথে CSS ব্যবহার করা হয়। শুধুমাত্র HTML ব্যবহার করে লে আউট তৈরি করার জন্য <table> এর সারি ও কলাম ব্যবহার করা হয়।
উদাহরণ প্রোগ্রাম
<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;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.<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 © 2012tutohost.com</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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
<head>
<title> www.tutohost.com</title>
</head>
<tr>
<td colspan="3" style="background-color: #93C;">
<h1> Web Page header</h1>
</td>
</tr>
<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.<br />
This is a paragraph.This is a paragraph.This is a paragraph.</p></td>
</tr>
<td colspan="2" style="background-color:#999;text-align:center;">
Copyright © 2012tutohost.com</td>
</tr>
</table>
</html>
সি এস এস
বর্তমান সময়ে ওয়েব পেজের কাঠামো তৈরি করা হয় HTML দিয়ে, ডিজাইন তৈরি করা হয় CSS দিয়ে, আর টেক্সট জমা রাখা হয় ডাটাবেজে। তাই কোন পেজকে আকর্ষণীয় করে তোলার পাশাপাশি ব্যবহার বান্ধব করে তোলার জন্য CSS এর ভূমিকা খুবই গুরুত্বপূর্ণ। HTML দ্বারা তৈরি পেজে তিন পদ্ধতিতে CSS যুক্ত করা যায়।
১. এক্সটার্নাল স্টাইল সিট (External Style Sheet)
২. ইনটার্নাল স্টাইল সিট (Internal Style Sheet)
৩. ইনলাইন স্টাইল সিট (Inline Style Sheet)
বর্তমান সময়ে ওয়েব পেজের কাঠামো তৈরি করা হয় HTML দিয়ে, ডিজাইন তৈরি করা হয় CSS দিয়ে, আর টেক্সট জমা রাখা হয় ডাটাবেজে। তাই কোন পেজকে আকর্ষণীয় করে তোলার পাশাপাশি ব্যবহার বান্ধব করে তোলার জন্য CSS এর ভূমিকা খুবই গুরুত্বপূর্ণ। HTML দ্বারা তৈরি পেজে তিন পদ্ধতিতে CSS যুক্ত করা যায়।
১. এক্সটার্নাল স্টাইল সিট (External Style Sheet)
২. ইনটার্নাল স্টাইল সিট (Internal Style Sheet)
৩. ইনলাইন স্টাইল সিট (Inline 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>
এ পদ্ধতিতে HTML ফাইল এবং CSS স্টাইল সিট দুটি আলাদা সিটে রাখা হয়। এবং নিম্নোক্ত পদ্ধতিতে HTML এর <head></head> ট্যাগের মধ্যে লিংক তৈরি করে দেয়া হয়।
<head>
<link rel="stylesheet" type="text/css" href="http://tutohost.com/bangla/style.css">
</head>
<link rel="stylesheet" type="text/css" href="http://tutohost.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 স্টাইল একই সিটে <head></head> ট্যাগের মধ্যে রাখা হয়। এজন্য নিম্নোক্ত পদ্ধতিতে <style></style> ট্যাগ ব্যবহার করা হয়।
<head>
<style type="text/css">
body {background-color: red;}
p { margin-left: 20px;
font-weight: bold;
color: #006; }
</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 এর প্রতিটি ট্যাগের মধ্যেই CSSস্টাইল যুক্ত করা হয় । এজন্য নিম্নোক্ত পদ্ধতিতে style এট্রিবিউটস ব্যবহার করা হয়।
<p style="margin-left:120px; font-weight: bold; color: #060;">
উদাহরণ প্রোগ্রাম
<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; 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 />
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>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type :All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
<html>
<head>
<title> www.tutohost.com</title>
<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; font-size:15px;}
h3{font-size:25px; font-family:Tahoma; color:red;}
</style>
</head>
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 />
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>
<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>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type :All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
হেড ইলিমেন্ট
হেড ট্যাগ বা <head> এবং হেড ইলিমেন্ট যেকোন HTML পেজের একটি গুরুত্বপূর্ণ অংশ। কারণ <head>….</head> এর মধ্যে অর্থাৎ হেড ইলিমেন্ট হিসেবে <title> <link> <meta> <style> <script> এ সকল গুরুত্বপূর্ণ ট্যাগ সমূহ রাখা হয়। এগুলোর মাধ্যমে ব্রাউজারে পেজ সম্পর্কিত বেশ কিছু তথ্য প্রদর্শন করার পাশাপাশি সার্চ ইন্জিন অপটিমাইজেশন এর মত গুরুত্বপূর্ণ কাজও সম্পন্ন হয়।
টাইটেল
ব্রাউজারের টাইটেল বারে পেজের টাইটেল প্রদর্শনের জন্য <title> </title> ট্যাগ ব্যবহার করা হয়।
<title>আমাদের HTML টিউটোরিয়াল সমূহ</title>
উপরের কোড এর মাধ্যমে ব্রাউজারের টাইটেল বারে “আমাদের 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" />
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>
ইনটার্নাল স্টাইল সিট ব্যবহারের জন্য <style></style> ট্যাগ ব্যবহার করা হয়। যেমন
<head>
<style type="text/css">
body {background-color: red;}
p { margin-left: 20px;
font-weight: bold;
color: #006; }
</style>
</head>
<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>
জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি স্ক্রিপ্ট যুক্ত করার জন্য <script> </script> ট্যাগ ব্যবহার করা হয়। যেমন
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
উদাহরণ প্রোগ্রাম
নিচের লিংক থেকে সোর্স ফাইল ডাউনলোড করে Extract করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।এবং ব্রাউজারের টাইটেল বারে “আমাদের HTML টিউটোরিয়াল সমূহ” লেখাটি দেখা যাবে।
নিচের লিংক থেকে সোর্স ফাইল ডাউনলোড করে Extract করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।এবং ব্রাউজারের টাইটেল বারে “আমাদের HTML টিউটোরিয়াল সমূহ” লেখাটি দেখা যাবে।
সোর্স ফাইল ডাউনলোড
মেটা
একটি ওয়েব সাইট তখনই জনপ্রিয় হয় যখন তা মানুষের প্রয়োজনে আসে এবং যে কেউ প্রয়োজনের সময় সহজেই সার্চ ইন্জিনের মাধ্যমে সার্চ করে সাইটটিকে খুজেঁ পায়। একটি ওয়েব পেজ যেন সহজেই সার্চ ইন্জিন খুজে পায় এ জন্য ওয়েব প্রোগ্রামারদের যে কাজটি করতে হয়, তাকে বলা হয় সার্চ ইন্জিন অপটিমাইজেশন। যে কোন ওয়েব সাইটের জন্যই সার্চ ইন্জিন অপটিমাইজেশন একটি গুরুত্বপূর্ণ বিষয়। ওয়েব পেজে মেটা ট্যাগ ব্যবহার করে এ গুরুত্বপূর্ণ কাজটি করা হয়।
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 সার্চ ইন্জিন ব্যবহার করে সার্চ করা হয় তাহলে নিচের ছবির মত আসবে।
প্রথমে পেজের টাইটেল, তারপর লিংক এবং এর পর আছে "এইচটিএমএল এ প্রোগ্রাম লেখার সাধারন পদ্ধতি এবং প্রাথমিক একটি প্রোজেক্ট ও সাধারন ট্যাগগুলো নিয়ে আলোচনা করা হবে।"
যা <meta name="description" content="……………………………………." /> এর মধ্যে লেখা আছে।
<meta name="keywords" content="……………………………………." /> এর মধ্যে লেখা আছে
"এইচটিএমএল প্রোগ্রাম লেখা, html bangla tutorial" একে কি ওয়ার্ড বলা হয়।
আমরা যখন কোন বাক্য লিখে সার্চ ইন্জিনে সার্চ করি তখন সার্চ ইন্জিন বাক্যটিকে ভেঙ্গে একাধিক কি ওয়ার্ড এ বিভক্ত করে সার্চ করে। তাই কি ওয়ার্ড হচ্ছে সার্চ ইন্জিনে কোন ওয়েব পেজ খুজে পাওয়ার অন্যতম পদ্ধতি। এজন্য HTML এর মাধ্যমে কোন পেজ তৈরির সময়
<meta name="keywords" content="……………………………………." /> এর মধ্যে
সম্ভাব্য কি ওয়ার্ড গুলো যুক্ত করে দেয়া হয়।
<meta name="author" content="অসীম কুমার" />
লেখকের নামকে সার্চ ইন্জিনে সাবমিট করার জন্য <meta name="author" content="……………"/> ব্যবহার করা হয়।
ওয়েব পেজ অটো রিফ্রেস করার জন্যও মেটা ট্যাগ ব্যবহার করা হয়।
<META HTTP-EQUIV="REFRESH" CONTENT="15;URL=http://www.tutohost.com">
উপরের কোডটি ব্যবহার করলে প্রতি ১৫ সেকেন্ড অন্তর অন্তর http://www.tutohost.com পেজটি একবার করে রিফ্রেস হবে।
একটি ওয়েব সাইট তখনই জনপ্রিয় হয় যখন তা মানুষের প্রয়োজনে আসে এবং যে কেউ প্রয়োজনের সময় সহজেই সার্চ ইন্জিনের মাধ্যমে সার্চ করে সাইটটিকে খুজেঁ পায়। একটি ওয়েব পেজ যেন সহজেই সার্চ ইন্জিন খুজে পায় এ জন্য ওয়েব প্রোগ্রামারদের যে কাজটি করতে হয়, তাকে বলা হয় সার্চ ইন্জিন অপটিমাইজেশন। যে কোন ওয়েব সাইটের জন্যই সার্চ ইন্জিন অপটিমাইজেশন একটি গুরুত্বপূর্ণ বিষয়। ওয়েব পেজে মেটা ট্যাগ ব্যবহার করে এ গুরুত্বপূর্ণ কাজটি করা হয়।
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 সার্চ ইন্জিন ব্যবহার করে সার্চ করা হয় তাহলে নিচের ছবির মত আসবে।
প্রথমে পেজের টাইটেল, তারপর লিংক এবং এর পর আছে "এইচটিএমএল এ প্রোগ্রাম লেখার সাধারন পদ্ধতি এবং প্রাথমিক একটি প্রোজেক্ট ও সাধারন ট্যাগগুলো নিয়ে আলোচনা করা হবে।"
যা <meta name="description" content="……………………………………." /> এর মধ্যে লেখা আছে।
<meta name="keywords" content="……………………………………." /> এর মধ্যে লেখা আছে
"এইচটিএমএল প্রোগ্রাম লেখা, html bangla tutorial" একে কি ওয়ার্ড বলা হয়।
আমরা যখন কোন বাক্য লিখে সার্চ ইন্জিনে সার্চ করি তখন সার্চ ইন্জিন বাক্যটিকে ভেঙ্গে একাধিক কি ওয়ার্ড এ বিভক্ত করে সার্চ করে। তাই কি ওয়ার্ড হচ্ছে সার্চ ইন্জিনে কোন ওয়েব পেজ খুজে পাওয়ার অন্যতম পদ্ধতি। এজন্য HTML এর মাধ্যমে কোন পেজ তৈরির সময়
<meta name="keywords" content="……………………………………." /> এর মধ্যে
সম্ভাব্য কি ওয়ার্ড গুলো যুক্ত করে দেয়া হয়।
<meta name="author" content="অসীম কুমার" />
লেখকের নামকে সার্চ ইন্জিনে সাবমিট করার জন্য <meta name="author" content="……………"/> ব্যবহার করা হয়।
ওয়েব পেজ অটো রিফ্রেস করার জন্যও মেটা ট্যাগ ব্যবহার করা হয়।
<META HTTP-EQUIV="REFRESH" CONTENT="15;URL=http://www.tutohost.com">
উপরের কোডটি ব্যবহার করলে প্রতি ১৫ সেকেন্ড অন্তর অন্তর http://www.tutohost.com পেজটি একবার করে রিফ্রেস হবে।
স্ক্রিপ্ট
HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। তাই ওয়েব পেজেও প্রোগ্রামিং এর সুবিধা যুক্ত করার জন্য বিভিন্ন ধরনের স্ক্রিপ্টিং ল্যাঙ্গুয়েজ ব্যবহার করা হয়, যেমন জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি। এর মাধ্যমে ওয়েব পেজে লোকাল টাইম প্রদর্শন, সময় দিন তারিখ প্রদর্শন, ব্রাউজার চিহ্নিত করা, সময় এবং ইভেন্ট এর উপর ভিত্তি করে ব্যবহারকারীকে কোন বিশেষ বার্তা প্রদর্শন করা সহ বিভিন্ন ধরণের আকর্ষণীয় এবং গুরুত্বপূর্ণ কাজ করা সম্ভব হয়।
জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি স্ক্রিপ্ট যুক্ত করার জন্য HTML এ <script> </script> ট্যাগ ব্যবহার করা হয়। যেমন
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। তাই ওয়েব পেজেও প্রোগ্রামিং এর সুবিধা যুক্ত করার জন্য বিভিন্ন ধরনের স্ক্রিপ্টিং ল্যাঙ্গুয়েজ ব্যবহার করা হয়, যেমন জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি। এর মাধ্যমে ওয়েব পেজে লোকাল টাইম প্রদর্শন, সময় দিন তারিখ প্রদর্শন, ব্রাউজার চিহ্নিত করা, সময় এবং ইভেন্ট এর উপর ভিত্তি করে ব্যবহারকারীকে কোন বিশেষ বার্তা প্রদর্শন করা সহ বিভিন্ন ধরণের আকর্ষণীয় এবং গুরুত্বপূর্ণ কাজ করা সম্ভব হয়।
জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি স্ক্রিপ্ট যুক্ত করার জন্য HTML এ <script> </script> ট্যাগ ব্যবহার করা হয়। যেমন
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>
উদাহরণ প্রোগ্রাম
<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>
একটা নোটপ্যাড 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>
<head>
<title> www.tutohost.com</title>
<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>
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>
একটা নোটপ্যাড 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 দ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে সহজেই অডিও ফাইল যুক্ত করা যায় এবং নিয়ন্ত্রণ করা যায়।
পূর্ব প্রস্তুতি
ডেক্সটপে একটা audio নামে folder নিতে হবে এর মধ্যে audio.mp3 নামে save করা একটা অডিও ফাইল রাখতে হবে।
কোন বিষয়কে উপস্থাপনার ক্ষেত্রে, টেক্সট এবং ছবির পাশাপাশি অডিও-ভিডিও ব্যবহার করলে বিষয়টি আরো প্রাণবন্ত হয়ে উঠে। ওয়েব মিডিয়ার মাধ্যমে এ কাজটি যতটা ভালোভাবে করা যায় আর অন্য কোনো মিডিয়ায় মাধ্যমে তা সম্ভব নয়। HTML দ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে সহজেই অডিও ফাইল যুক্ত করা যায় এবং নিয়ন্ত্রণ করা যায়।
পূর্ব প্রস্তুতি
ডেক্সটপে একটা audio নামে folder নিতে হবে এর মধ্যে audio.mp3 নামে save করা একটা অডিও ফাইল রাখতে হবে।
অনুশীলন প্রজেক্ট
<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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
<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>
<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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
প্রজেক্ট বিশ্লেষণ
অডিও যুক্ত করার জন্য <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 লেখা আছে; সুতরাং অটোপ্লে হবে না, অডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে।
অডিও যুক্ত করার জন্য <embed> ট্যাগ ব্যবহার করা হয়।
<embed src="audio.mp3" height="35" width="300"
controller="true" loop="false" autostart="false">
</embed>
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 লেখা আছে; সুতরাং অটোপ্লে হবে না, অডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে।
ভিডিও সংযোজন
সংঘটিত বাস্তব ঘটনাকে পরিপূর্ণভাবে উপস্থাপনার ক্ষেত্রে ভিডিও সবচেয়ে উপযোগী মাধ্যম। দৈনন্দিন সংবাদ প্রকাশক ওয়েব সাইটগুলো তাদের দৈনন্দিন ঘটনাগুলোকে টেক্সট এবং ইমেজ ব্যবহারের মাধ্যমে প্রকাশের পাশাপাশি ভিডিও প্রকাশের মাধ্যমে আরো বেশি জনপ্রিয়তা অর্জনের সুযোগ পাচ্ছে, এবং ব্যবহারকারীরা এ সকল ঘটনার বাস্তব চিত্র দেখা, এবং জানার পাশাপাশি প্রয়োজনে সংগ্রহ করে রাখতে পারছেন। বর্তমানে ভিডিও শুধু মানুষের বিনোদন এবং বাস্তব ঘটনা প্রকাশের মাধ্যমই নয়, এটি শিক্ষার অন্যতম বাহনে পরিণত হয়েছে।
অসংখ্য শিক্ষামূলক ওয়েব সাইট বিভিন্ন বিষয়ের উপর প্রতিদিন নতুন নতুন টেক্সট ভিত্তিক টিউটোরিয়ালের পাশাপাশি ভিডিও টিউটোরিয়াল প্রকাশ করছে। যা মানুষকে পৃথিবীর যে কোন প্রান্ত থেকে শুধুমাত্র শেখা এবং জানার সুযোগই সৃষ্টি করছে না, প্রশ্ন বিনিময় এবং আলোচনার মুক্ত প্লাটফর্ম তৈরির মাধ্যমে পরিপূর্ণ শিক্ষা বিস্তারেও ভুমিকা রাখছে। HTMLদ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে সহজেই ভিডিও যুক্ত করা যায় এবং নিয়ন্ত্রণ করা যায়।
পূর্ব প্রস্তুতি
ডেক্সটপে একটা video নামে folder নিতে হবে এর মধ্যে video.wmv নামে save করা একটা ভিডিও ফাইল রাখতে হবে।
সংঘটিত বাস্তব ঘটনাকে পরিপূর্ণভাবে উপস্থাপনার ক্ষেত্রে ভিডিও সবচেয়ে উপযোগী মাধ্যম। দৈনন্দিন সংবাদ প্রকাশক ওয়েব সাইটগুলো তাদের দৈনন্দিন ঘটনাগুলোকে টেক্সট এবং ইমেজ ব্যবহারের মাধ্যমে প্রকাশের পাশাপাশি ভিডিও প্রকাশের মাধ্যমে আরো বেশি জনপ্রিয়তা অর্জনের সুযোগ পাচ্ছে, এবং ব্যবহারকারীরা এ সকল ঘটনার বাস্তব চিত্র দেখা, এবং জানার পাশাপাশি প্রয়োজনে সংগ্রহ করে রাখতে পারছেন। বর্তমানে ভিডিও শুধু মানুষের বিনোদন এবং বাস্তব ঘটনা প্রকাশের মাধ্যমই নয়, এটি শিক্ষার অন্যতম বাহনে পরিণত হয়েছে।
অসংখ্য শিক্ষামূলক ওয়েব সাইট বিভিন্ন বিষয়ের উপর প্রতিদিন নতুন নতুন টেক্সট ভিত্তিক টিউটোরিয়ালের পাশাপাশি ভিডিও টিউটোরিয়াল প্রকাশ করছে। যা মানুষকে পৃথিবীর যে কোন প্রান্ত থেকে শুধুমাত্র শেখা এবং জানার সুযোগই সৃষ্টি করছে না, প্রশ্ন বিনিময় এবং আলোচনার মুক্ত প্লাটফর্ম তৈরির মাধ্যমে পরিপূর্ণ শিক্ষা বিস্তারেও ভুমিকা রাখছে। HTMLদ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে সহজেই ভিডিও যুক্ত করা যায় এবং নিয়ন্ত্রণ করা যায়।
পূর্ব প্রস্তুতি
ডেক্সটপে একটা video নামে folder নিতে হবে এর মধ্যে video.wmv নামে save করা একটা ভিডিও ফাইল রাখতে হবে।
অনুশীলন প্রজেক্ট
<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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
প্রজেক্ট বিশ্লেষণ
ভিডিও যুক্ত করার জন্য <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 লেখা আছে; সুতরাং অটোপ্লে হবে না, ভিডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে।
<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>
<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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
প্রজেক্ট বিশ্লেষণ
ভিডিও যুক্ত করার জন্য <embed> ট্যাগ ব্যবহার করা হয়।
<embed src="video.wmv" width="344" height="300"
autostart="false" controller="true">
</embed>
autostart="false" controller="true">
</embed>
src="video.wmv" এখানে src="…………." এর মধ্যে ভিডিও ফাইলের লিংক যুক্ত করা হয়।
height="344" width="300" এর মাধ্যমে ব্রাউজারে প্রদর্শিত ভিডিও প্লেয়ারের আকৃতি নির্ধারণ করা হয়।
controller="true" এর মাধ্যমে ওয়েব পেজে ভিডিও প্লেয়ার প্রদর্শন করা হবে কিনা তার নির্দেশ প্রদান করা হয়। যদি controller="……….." এর মধ্যে true লেখা হয় তাহলে ভিডিও প্লেয়ার প্রদর্শিত হবে আর false লেখা হলে ভিডিও প্লেয়ার প্রদর্শিত হবে না।
loop="false" এর মাধ্যমে ভিডিও ফাইলটি কি একবার প্লে হবে না লুপ আকারে বারবার প্লে হবে তার নির্দেশ প্রদান করা হয়। যেহেতু false লেখা আছে; সুতরাং একবার প্লে হবে।
autostart="false" এর মাধ্যমে ভিডিও ফাইলটি অটোপ্লে অর্থাৎ ওয়েব পেজ লোড হওয়ার সাথে সাথেই প্লে হবে, না ভিডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে তার নির্দেশ প্রদান করা হয়। যেহেতু false লেখা আছে; সুতরাং অটোপ্লে হবে না, ভিডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে।
ফ্লাস সংযোজন
ফ্লাস এনিমেশন ওয়েব সাইটের একটি অন্যতম আকর্ষণীয় উপাদান। আকর্ষণীয় নেভিগেশন বার, ব্যানার, বাটন ইত্যাদিতে ফ্লাসের এনিমেশন যুক্ত করে যেমন ওয়েব সাইটের ইন্টারফেসকে আকর্ষণীয় করে তোলা যায়, পাশাপাশি সাইটটিও ব্যবহার বান্ধব হয়ে উঠে। HTML দ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে অডিও এবং ভিডিও এর মত সহজেই ফ্লাসে তৈরি এনিমেশন অর্থাৎ SWF ফাইল যুক্ত করা যায় ।
পূর্ব প্রস্তুতি
ডেক্সটপে একটা flash নামে folder নিতে হবে এর মধ্যে flash.swf নামে save করা একটা ভিডিও ফাইল রাখতে হবে।
ফ্লাস এনিমেশন ওয়েব সাইটের একটি অন্যতম আকর্ষণীয় উপাদান। আকর্ষণীয় নেভিগেশন বার, ব্যানার, বাটন ইত্যাদিতে ফ্লাসের এনিমেশন যুক্ত করে যেমন ওয়েব সাইটের ইন্টারফেসকে আকর্ষণীয় করে তোলা যায়, পাশাপাশি সাইটটিও ব্যবহার বান্ধব হয়ে উঠে। HTML দ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে অডিও এবং ভিডিও এর মত সহজেই ফ্লাসে তৈরি এনিমেশন অর্থাৎ SWF ফাইল যুক্ত করা যায় ।
পূর্ব প্রস্তুতি
ডেক্সটপে একটা flash নামে folder নিতে হবে এর মধ্যে flash.swf নামে save করা একটা ভিডিও ফাইল রাখতে হবে।
অনুশীলন প্রজেক্ট
<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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
প্রজেক্ট বিশ্লেষণ
ফ্লাস যুক্ত করার জন্য <embed> ট্যাগ ব্যবহার করা হয়।
<embed src="flash.swf" width="250" height="240">
</embed>
src="flash.swf" এখানে src="…………." এর মধ্যে ফ্লাস ফাইলের লিংক যুক্ত করা হয়।
width="250" height="240" এর মাধ্যমে ব্রাউজারে প্রদর্শিত ফ্লাস এনিমেশনের আকৃতি নির্ধারণ করা হয়।
<html>
<head>
<title> www.tutohost.com</title>
</head>
<body >
<center>
<embed src="flash.swf" width="250" height="240">
</embed>
</center>
</body>
</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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
প্রজেক্ট বিশ্লেষণ
ফ্লাস যুক্ত করার জন্য <embed> ট্যাগ ব্যবহার করা হয়।
<embed src="flash.swf" width="250" height="240">
</embed>
</embed>
src="flash.swf" এখানে src="…………." এর মধ্যে ফ্লাস ফাইলের লিংক যুক্ত করা হয়।
width="250" height="240" এর মাধ্যমে ব্রাউজারে প্রদর্শিত ফ্লাস এনিমেশনের আকৃতি নির্ধারণ করা হয়।
Awesome
ReplyDeletethanks for this post
ReplyDeleteAre you brilliant bro
ReplyDeleteThanks For Share This Information
ReplyDeleteHTML কি
This is very helpful post. May Allah bless you. I'm from Saudi Arabia .
ReplyDeleteits a murkap language
Delete