HTML বাংলা টিউটোরিয়াল শুরু থেকে শেষ

HTML কি? ( HTML বাংলা টিউটোরিয়ালঃ পর্ব-১ )

HTML (Hyper Text Mark Up Language) একটা কম্পিউটার ল্যাঙ্গুয়েজ, যা পৃথিবীর বিশাল তথ্য-ভান্ডারকে ইন্টারনেটের মাধ্যমে প্রদর্শনের সুযোগ তৈরি করে দিয়েছে। একটা ওয়েব পেজের মূল গঠন তৈরি হয় HTML দিয়ে। HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, একে Hyper Text Mark Up Language বলা হয়। Mark Up Language এক সেট Mark Up ট্যাগের সমন্বয়ে গঠিত হয়। একটা ওয়েব পেজের বিভিন্ন অংশ ব্রাউজারের মাধ্যমে কিভাবে প্রদর্শিত হবে, তা HTML এ Mark Up ট্যাগ সমূহ ব্যবহার করে প্রকাশ করা হয় ।

এটিও পড়ুন - Microsoft Power Point কি? জেনে নিন পাওয়ার পয়েন্টের অজানা কিছু তথ্য

HTML এর ইতিহাস

HTML বা Hyper Text Mark Up Language তৈরি করেছেন টিম বার্নাস-লী। এখানে এইচটিএমএল এর সংক্ষিপ্ত ইতিহাস তুলে ধরা হবে।
HTML বা Hyper Text Mark Up Language তৈরি করেছেন টিম বার্নাস-লী। HTML তৈরির উদ্দেশ্য ছিল বৈজ্ঞানিক গবেষণার তথ্য উপাত্ত দ্রুত পৃথিবীর বিভ্ন্নি স্থানে আদান প্রদানের ব্যবস্থা করা। ১৯৯০ সালের দিকে NCSA কর্তৃক ডেভলপকৃত মোজাইক ব্রাউজারের মাধ্যমে HTML পরিচিতি লাভ করে। ১৯৯৭ এর জানুয়ারীতে WC3 কর্তৃক প্রথম ডেভলপকৃত HTML3.2 প্রকাশিত হয়। একই বছরে শেষে ডিসেম্বরে WC3 HTML এর নতুন সংস্করণ HTML4.2 প্রকাশ করে। ২০১০ সালে বর্তমানে প্রচলিত HTML এর সর্বশেষ ভার্সন HTML5 জনসম্মূখে পরিচিতি লাভ করে।

এটিও পড়ুন - PHP ও MySQL বাংলা টিউটোরিয়াল - স্টেপ বাই স্টেপ

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

যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা এডিটর ব্যবহার করে কোডিং করতে হয়।এখানে এইচটিএমএল এ প্রোগ্রাম লেখার সাধারন পদ্ধতি, একটি প্রাথমিক প্রোজেক্ট এবং সাধারন ট্যাগসমূহ নিয়ে আলোচনা করা হবে।
যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা এডিটর ব্যবহার করে কোডিং করতে হয়। 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 শেষ ট্যাগ। [যেকোন সফটওয়্যারের সিরিয়াল কী বের করুন Universal Keygen Generator দিয়ে !! লেটেস্ট 2015]

<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প্রোগ্রামের উদাহরণ

<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 করলে পাশে প্রদর্শিত ছবির মত দেখাবে।

হেডিং (Heading)

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>

নোট-
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।