how to html tutorial in bangla

how to html tutorial in bangla

এই আর্টিকেলটি পড়ার জন্য আপনাকে অনেক ধন্যবাদ। অনুগ্রহ করে আপনার মতামত দিন এবং এটি আপনার বন্ধুদের এবং পরিবারের সাথে শেয়ার করুন।

এই ওয়েবসাইটটি কোনও অবৈধ সামগ্রী প্রচার করে না, কোনও ধরণের অবৈধ কার্যকলাপকে উৎসাহ দেয় না। এই ওয়েবসাইটটি দরাবরাহিত সমস্ত আর্টিকেল কেবল মাত্র শিক্ষামূলক উদ্দেশ্যে করা হয়েছে।

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 এ লেখা প্রোগ্রামের মৌলিক অংশ সমূহ

<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 ডকুমেন্ট নির্দেশ করে।

প্রোগ্রামের head অংশ নির্দেশ করে ।

ডকুমেন্ট টাইটেল নির্দেশ করে।

প্রোগ্রামের মূল content অংশ নির্দেশ করে।

<a></a>

Anchor ট্যাগ।

Abbreviation ট্যাগ।

<b></b>

Bold টেক্সট নির্দেশ করে।

<i></i>

Italic টেক্সট নির্দেশ করে।

স্বাভাবিকের চেয়ে বড় টেক্সট নির্দেশ করে।

স্বাভাবিকের চেয়ে ছোট টেক্সট নির্দেশ করে।

বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়।

<br / >

একটা লাইন ব্রেক তৈরি করে ।

কম্পিউটার কোড টেক্সট প্রকাশ করে।

টেবিল তৈরিতে ব্যবহৃত হয়।

টেবিলের কলাম তৈরিতে ব্যবহৃত হয়।

টেবিলের সেল তৈরিতে ব্যবহৃত হয়।

টেবিলের সারি তৈরিতে ব্যবহৃত হয়।

ফরম তৈরিতে ব্যবহৃত হয়।

হেডার ট্যাগ 1-6 পর্যন্ত হয়।

<hr/>

সমান্তরাল রেখা তৈরি করে।

<img/>

ছবি যুক্ত করতে ব্যবহৃত হয়।

ফরমের ইনপুট ফিল্ড তৈরিতে ব্যবহৃত হয়।

লিষ্ট তৈরিতে ব্যবহৃত হয়।

Meta ট্যাগ

অর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।

আনঅর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।

<p></p>

প্যারাগ্রাফ নির্দেশ করে

pre-formatted টেক্সট তৈরিতে ব্যবহৃত হয়।

টেলিটাইপ টেক্সট নির্দেশ করে।

Strong টেক্সট নির্দেশ করে।

subscripted text নির্দেশ করে।

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"

align="center" align="left" align="right" title="Bangladesh"

<body>

bgcolor="green" background="../images/ele.png"

<div>

id="book" class="pen" align="center"

height="100px" width="50px" border="5px"

type="text" name="TextField"

উদাহরণ প্রোগ্রাম

<html>

<head>

<title> www.tutohost.com</title>

</head>

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>

<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>

<p>This is a paragraph.</p>

<p>

This is a paragraph.

</p>

<p>

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>

<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>

ফন্ট ট্যাগ

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>

This is a paragraph.

</font>

<br />

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>

This is a paragraph.

</font>

<br />

Bangladesh is a beautiful country.

</font>

</body>

</html>

উদাহরণ প্রোগ্রাম: স্টাইল ব্যবহার করে

<html>

<head>

<title> www.tutohost.com</title>

</head>

This is a paragraph.

</font>

<br />

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>

<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>

<h3> This is an example of image.</h3>

</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 এর স্থানে লেখতে হবে। যেমন

টেবিল সংযোজন

দিনে দিনে ইন্টারনেট আজ সবচেয়ে বড় তথ্য ভান্ডারে পরিণত হয়েছে। তথ্য উপাত্ত পরিসংখ্যান চিত্র ভিডিও ইত্যাদির সংমিশ্রণে একটা ওয়েবপেজে কোন বিষয়বস্তুকে যতটা আকর্ষণীয় এবং পরিপূর্ণভাবে উপস্থাপন করা যায়, অন্যান্য মিডিয়ায় তা সম্ভব হয় না। ওয়েব পেজে তথ্য উপাত্ত পরিসংখ্যান উপস্থাপন করার একটি অন্যতম পন্থা হচ্ছে টেবিল ব্যবহার করা। টেবিল তৈরির জন্য টেবিল ট্যাগ <table> ব্যবহার করা হয়।

উদাহরণ প্রোগ্রাম

<html>

<head>

<title> www.tutohost.com</title>

</head>

<tr>

</tr>

<tr>

</tr> <tr>

</tr> <tr>

</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>

এইচটিএমএল লিষ্ট

একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । HTML এর মাধ্যমে দুই ধরণের লিষ্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিষ্ট এবং অপরটি হচ্ছে আনঅর্ডার লিষ্ট । অর্ডার লিষ্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে। অন্যদিকে আন অর্ডার লিষ্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে। HTML এর মাধ্যমে আন অর্ডার লিষ্ট তৈরি করার জন্য <ul></ul> এবং অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়।

উদাহরণ প্রোগ্রাম

<html>

<head>

<title> www.tutohost.com</title>

</head>

<li>About Us</li>

<li>Contact Us</li>

</ul>

<h4>Circle Type list</h4>

</ul><h4>Square Type list</h4>

<li>Pragaph</li>

<li>Table</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>

<h3>Alphabet Type list</h3>

<li>About Us</li>

<li>Contact Us</li>

</ol>

<h3>Number Type list</h3>

</ol>

<h3>Roman Number Type list</h3>

<li>Pragaph</li>

<li>Table</li>

</ol>

</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>

আপনার তথ্য দিয়ে সাহায্য করুন।

</font>

< /br>

নাম:           

</font>

পিতার নাম:

</font>    

ঠিকানা:

</font>            

<br />

আপনি কি পুরুষ:

</font>

<br />

আপনি কি মহিলা:

</font>

<br />

আপনি যে শহরে থাকেন:

</font>

<option>খুলনা</option>

<option>সিলেট</option>

<option>ভেড়ামারা</option>

</select>

<br />

শিক্ষাগত যোগ্যতা:

</font>

<br />

এস.এস.সি

</font>

<br />

এইস.এস.সি

</font>

<br />

<br />

</form>

</center>

</body>

</html>

HTML ফ্রেম

HTML এর মাধ্যমে কোন ওয়েব পেজকে একাধিক ভাগে বিভক্ত করার জন্য আগের দিনে ফ্রেম ব্যবহার করা হত। দিনে দিনে ফ্রেমের ব্যবহার কমে এসেছে। বর্তমান সময়ে ফ্রেমের ব্যবহার নেই বললেই চলে, কারণ ফ্রেম ব্যবহার করে তৈরিকৃত সম্পূর্ণ পেজ একসাথে প্রিন্ট করা বেশ কষ্টকর। এছাড়া এটা অনেকের কাছেই অপছন্দের। এর পরিবর্তে কোন পেজকে একাধিক অংশে বিভক্ত করতে এখন CSS ব্যবহার করা হয়। তবে html সম্পর্কে জ্ঞান ভান্ডার সমৃদ্ধ করার জন্য ফ্রেম সম্পর্কেও কিছুটা ধারণা থাকা দরকার।

উদাহরণ প্রোগ্রাম

<html>

<head>

<title> www.tutohost.com</title>

</head>

</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.tutohost.com</title>

</head>

<h2 style="color:#f00">This is an example of iframe.</h2><br />

<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.tutohost.com</title>

</head>

This is the body of your web site.

</h2>

This is a paragraph.<br />

This is a paragraph. <br />

This is a paragraph.<br />

</p>

</body>

</html>

লে আউট

একটা ওয়েব পেজ কতটা সুন্দর হবে তা সম্পূর্ণরূপে নির্ভর করে পেজের লে আউটের উপর। আগে শুধুমাত্র HTML ব্যবহার করেই সকল ওয়েব সাইটের লে আউট তৈরি করা হত। বর্তমানে HTML এর সাথে CSS ব্যবহার করা হয়। শুধুমাত্র HTML ব্যবহার করে লে আউট তৈরি করার জন্য <table> এর সারি ও কলাম ব্যবহার করা হয়।

উদাহরণ প্রোগ্রাম

<html>

<head>

<title> www.tutohost.com</title>

</head>

<tr>

<h1> Web Page header</h1>

</td>

</tr>

<br />

<br />

<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>

</tr>

</table>

</body>

</html>

সি এস এস

বর্তমান সময়ে ওয়েব পেজের কাঠামো তৈরি করা হয় HTML দিয়ে, ডিজাইন তৈরি করা হয় CSS দিয়ে, আর টেক্সট জমা রাখা হয় ডাটাবেজে। তাই কোন পেজকে আকর্ষণীয় করে তোলার পাশাপাশি ব্যবহার বান্ধব করে তোলার জন্য CSS এর ভূমিকা খুবই গুরুত্বপূর্ণ। HTML দ্বারা তৈরি পেজে তিন পদ্ধতিতে CSS যুক্ত করা যায়।

১. এক্সটার্নাল স্টাইল সিট (External Style Sheet )

২. ইনটার্নাল স্টাইল সিট (Internal Style Sheet)

৩. ইনলাইন স্টাইল সিট (Inline Style Sheet)

এক্সটার্নাল স্টাইল সিট

এ পদ্ধতিতে HTML ফাইল এবং CSS স্টাইল সিট দুটি আলাদা সিটে রাখা হয়। এবং নিম্নোক্ত পদ্ধতিতে HTML এর <head></head>ট্যাগের মধ্যে লিংক তৈরি করে দেয়া হয়।

<head>

</head>

ইনটার্নাল স্টাইল সিট

এ পদ্ধতিতে HTML এবং CSS স্টাইল একই সিটে <head></head> ট্যাগের মধ্যে রাখা হয়। এজন্য নিম্নোক্ত পদ্ধতিতে <style></style> ট্যাগ ব্যবহার করা হয়।

<head>

body {background-color: red;}

p { margin-left: 20px;

font-weight: bold;

color: #006; }

</style>

</head>

ইনলাইন স্টাইল সিট

এ পদ্ধতিতে HTML এর প্রতিটি ট্যাগের মধ্যেই CSS স্টাইল যুক্ত করা হয় । এজন্য নিম্নোক্ত পদ্ধতিতে style এট্রিবিউটস ব্যবহার করা হয়।

উদাহরণ প্রোগ্রাম

<html>

<head>

<title> www.tutohost.com</title>

<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>

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> ব্যবহার করা হয়।

মেটা ইলিমেন্ট

মেটা সার্চ ইন্জিন অপটিমাইজেশনের জন্য গুরুত্বপূর্ণ কাজ করে থাকে। বিষয়টি পববর্তী লেখায় বিস্তারিত আলোচনা করা হবে।

স্টাইল

ইনটার্নাল স্টাইল সিট ব্যবহারের জন্য <style></style> ট্যাগ ব্যবহার করা হয়। যেমন

<head>

body {background-color: red;}

p { margin-left: 20px;

font-weight: bold;

color: #006; }

</style>

</head>

স্ক্রিপ্ট

জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি স্ক্রিপ্ট যুক্ত করার জন্য <script> </script> ট্যাগ ব্যবহার করা হয়। যেমন

উদাহরণ প্রোগ্রাম

নিচের লিংক থেকে সোর্স ফাইল ডাউনলোড করে Extract করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।এবং ব্রাউজারের টাইটেল বারে “আমাদের HTML টিউটোরিয়াল সমূহ” লেখাটি দেখা যাবে।

মেটা

একটি ওয়েব সাইট তখনই জনপ্রিয় হয় যখন তা মানুষের প্রয়োজনে আসে এবং যে কেউ প্রয়োজনের সময় সহজেই সার্চ ইন্জিনের মাধ্যমে সার্চ করে সাইটটিকে খুজেঁ পায়। একটি ওয়েব পেজ যেন সহজেই সার্চ ইন্জিন খুজে পায় এ জন্য ওয়েব প্রোগ্রামারদের যে কাজটি করতে হয়, তাকে বলা হয় সার্চ ইন্জিন অপটিমাইজেশন। যে কোন ওয়েব সাইটের জন্যই সার্চ ইন্জিন অপটিমাইজেশন একটি গুরুত্বপূর্ণ বিষয়। ওয়েব পেজে মেটা ট্যাগ ব্যবহার করে এ গুরুত্বপূর্ণ কাজটি করা হয়।

http://www.tutohost.com/bangla/html/2.php পেজটির মেটা ট্যাগে লেখা আছে….

Google আমাদের সকলের পরিচিত জনপ্রিয় একটি সার্চ ইন্জিন। যদি http://www.tutohost.com/bangla/html/2.php টি Google সার্চ ইন্জিন ব্যবহার করে সার্চ করা হয় তাহলে নিচের ছবির মত আসবে।

প্রথমে পেজের টাইটেল, তারপর লিংক এবং এর পর আছে "এইচটিএমএল এ প্রোগ্রাম লেখার সাধারন পদ্ধতি এবং প্রাথমিক একটি প্রোজেক্ট ও সাধারন ট্যাগগুলো নিয়ে আলোচনা করা হবে।"

যা <meta name="description" content="……………………………………." /> এর মধ্যে লেখা আছে।

আমরা যখন কোন বাক্য লিখে সার্চ ইন্জিনে সার্চ করি তখন সার্চ ইন্জিন বাক্যটিকে ভেঙ্গে একাধিক কি ওয়ার্ড এ বিভক্ত করে সার্চ করে। তাই কি ওয়ার্ড হচ্ছে সার্চ ইন্জিনে কোন ওয়েব পেজ খুজে পাওয়ার অন্যতম পদ্ধতি। এজন্য HTML এর মাধ্যমে কোন পেজ তৈরির সময়

সম্ভাব্য কি ওয়ার্ড গুলো যুক্ত করে দেয়া হয়।

লেখকের নামকে সার্চ ইন্জিনে সাবমিট করার জন্য <meta name="author" content="……………"/> ব্যবহার করা হয়।

ওয়েব পেজ অটো রিফ্রেস করার জন্যও মেটা ট্যাগ ব্যবহার করা হয়।

উপরের কোডটি ব্যবহার করলে প্রতি ১৫ সেকেন্ড অন্তর অন্তর http://www.tutohost.com পেজটি একবার করে রিফ্রেস হবে।

স্ক্রিপ্ট

HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। তাই ওয়েব পেজেও প্রোগ্রামিং এর সুবিধা যুক্ত করার জন্য বিভিন্ন ধরনের স্ক্রিপ্টিং ল্যাঙ্গুয়েজ ব্যবহার করা হয়, যেমন জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি। এর মাধ্যমে ওয়েব পেজে লোকাল টাইম প্রদর্শন, সময় দিন তারিখ প্রদর্শন, ব্রাউজার চিহ্নিত করা, সময় এবং ইভেন্ট এর উপর ভিত্তি করে ব্যবহারকারীকে কোন বিশেষ বার্তা প্রদর্শন করা সহ বিভিন্ন ধরণের আকর্ষণীয় এবং গুরুত্বপূর্ণ কাজ করা সম্ভব হয়।

জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি স্ক্রিপ্ট যুক্ত করার জন্য HTML এ <script> </script> ট্যাগ ব্যবহার করা হয়। যেমন

উদাহরণ প্রোগ্রাম

<html>

<head>

<title> www.tutohost.com</title>

function show_alert()

{

alert("Welcome to www.tutohost.com");

}

</script>

</head>

</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>

<head>

<title> www.tutohost.com</title>

</head>

<body >

<p>

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> ট্যাগ ব্যবহার করা হয়।

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.tutohost.com</title>

</head>

<body >

<p>

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> ট্যাগ ব্যবহার করা হয়।

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>

<head>

<title> www.tutohost.com</title>

</head>

<body >

</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" এখানে src="…………." এর মধ্যে ফ্লাস ফাইলের লিংক যুক্ত করা হয়।

width="250" height="240" এর মাধ্যমে ব্রাউজারে প্রদর্শিত ফ্লাস এনিমেশনের আকৃতি নির্ধারণ করা হয়।

নির্দেশনা: যদি ওয়েব পেজে ফ্লাস এনিমেশন প্রদর্শিত না হয় তাহলে flash player অথবা ব্রাউজারের নির্দেশনা অনুযায়ী প্রয়োজনীয় প্লাগ ইনস্ ইন্সটল করে নিন।

how to html tutorial in bangla

HTML কি?

HTML এর ইতিহাস

প্রোগ্রাম লেখার পদ্ধতি

HTML ট্যাগ কি?

HTML ইলিমেন্ট

HTML এট্রিবিউটস্

হেডিং

প্যারাগ্রাফ

টেক্সট ফরমেটিং

ফন্ট ট্যাগ

স্টাইলের ব্যবহার

লিংক

ছবি সংযোজন

টেবিল সংযোজন

এইচটিএমএল লিষ্ট

এইচটিএমএল ফর্ম

HTML ফ্রেম

আই ফ্রেম

রং ও কোড

লে আউট

সি এস এস

হেড ইলিমেন্ট

মেটা

স্ক্রিপ্ট

অডিও সংযোজন

ভিডিও সংযোজন

ফ্লাস সংযোজন

ARMAN ISLAM

Popular Posts

Categories