ধাপ
৩

HTML head tag এর কিছু element tag এর সাথে পরিচিতি

আগের ধাপে জেনেছি যে HTML ডকুমেন্টে HEAD ট্যাগের ভিতর ওয়েবপেজ সম্পর্কিত বিভিন্ন তথ্য দেয়া হয়। তথ্য গুলোর ভিতর থাকতে পারে ওয়েবসাইট/ওয়েবপেজ সম্পর্কিত তথ্য (যেমনঃ ওয়েব সাইটের title, সাইটের author এর নাম ইত্যাদি)। এখানে আরো থাকে ওয়েবপেজের ডিজাইন সম্পর্কিত তথ্য এবং আরো অনেক কিছু; যে গুলো ওয়েব-ব্রাউজার এ সরাসরি দেখাবেনা। তবে পাতার উপর প্রভাব রাখবে।

নিচে <body> tag এর ভিতর ব্যবহৃত হয় এরকম কিছু HTML element tag এর পরিচয় দেয়া হল।

<title> tag

প্রয়োগঃ

<title>This is the title</title>

প্রিভিউঃ

This is the title

বর্ণনাঃ

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

<base /> tag

প্রয়োগঃ

<head>
	<base href="http://code.imaginativeworld.org" target="_blank">
</head>

বর্ণনাঃ

পেজের সব লিঙ্কের জন্য একটি ডিফল্ট লিঙ্ক নির্দিষ্ট করে দেয়া যায় এ tag দিয়ে।

<link /> tag

প্রয়োগঃ

<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

বর্ণনাঃ

বাইরের কোনো সোর্স থেকে কিছু (স্টাইল শিট, ফ্যাভিকন ইত্যাদি) লোড করার জন্য এ tag টি ব্যবহার করা হয়। উপরে style.css নামের একটি স্টাইল শিট যুক্ত করার উদারহন দেয়া হয়েছে।

স্টাইল শিট হচ্ছে এমন একটি ফাইল যেখানে ওয়েব সাইটটির ডিজাইন কেমন হবে তা সম্পর্কিত তথ্য থাকে, যা লিখা হয় সিএসএস ভাষায় দিয়ে।

ফ্যাভিকন হচ্ছে টাইটেলবারে প্রত্যেক পাতার যে ছোট ছবি/আইকন দেখা যায় সেটি।

প্রয়োগঃ

<head>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
</head>

বর্ণনাঃ

উপরের উদাহরণে ফ্যাভিকন (favicon - ব্রাউজারের টাইটেল বারে ওয়েবপেজের টাইটেলের সাথে যে আইকনটি থাকে) যুক্ত করার নিয়ম দেয়া হয়েছে।

<meta /> tag

বিভিন্ন metadata তথ্য দিতে এ tag টি ব্যবহার করা হয়।

প্রয়োগঃ

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

বর্ণনাঃ

অনুসন্ধান ইঞ্জিনের জন্য কি-ওয়ার্ড এভাবে নির্দিষ্ট করে দেয়া যায়। ফলে অনুসন্ধান ইঞ্জিন বুঝতে পারে সাইটটি আসলে কিসের।

প্রয়োগঃ

<meta name="description" content="Free Web tutorials on HTML">

বর্ণনাঃ

ওয়েব পেজের বর্ণনা এভাবে নির্দিষ্ট করে দেয়া যায়।

প্রয়োগঃ

<meta name="author" content="Md. Mahmudul Hasan Shohag">

বর্ণনাঃ

পেজের লেখক/ স্রষ্টাকে এভাবে নির্দিষ্ট করে দেয়া যায়।

প্রয়োগঃ

<meta http-equiv="refresh" content="30">

বর্ণনাঃ

এ কোডটির মাধ্যমে ওয়েবপেজ ডকুমেন্টকে ৩০ সেকেন্ড পরপর সয়ংক্রিয় রিফ্রেশ (refresh) করানো যায়।

<script> tag

প্রয়োগঃ

<script> JavaScript things </script>

বর্ণনাঃ

HTML ডকুমেন্টের ভিতর JavaScript কোড লিখতে এ tag টি ব্যবহার করা হয়।

<style> tag

প্রয়োগঃ

<style> style things </style>

বর্ণনাঃ

HTML ডকুমেন্টের ভিতর CSS অর্থাৎ Style নির্দিষ্ট করার জন্য এ tag ব্যবহৃত হয়।

HTML body tag এর কিছু element tag এর সাথে পরিচিতি

আগের ধাপে জেনেছিলাম BODY ট্যাগের ভিতর যা লিখা হবে সব ব্রাউজারে দেখা যাবে। আর লিখাগুলো বা জিনিস গুলো কিভাবে থাকবে বা কোনটা কি তা বুঝিয়ে দেয়ার জন্য এইচটিএমএল ট্যাগ ব্যবহার করা হবে।

নিচে <body> tag এর ভিতর ব্যবহৃত হয় এরকম কিছু HTML element tag এর পরিচয় দেয়া হল।

<p> tag

প্রয়োগঃ

<p>This is a paragraph text.</p>
<p>How to separate a line?<br>
The line is now separated ;)</p>

প্রিভিউঃ

Browser

This is a paragraph text.

How to separate a line?
The line is now separated ;)

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> tag

প্রয়োগঃ

<h1>This is a paragraph text.</h1>
<h2>This is a paragraph text.</h2>
<h3>This is a paragraph text.</h3>
<h4>This is a paragraph text.</h4>
<h5>This is a paragraph text.</h5>
<h6>This is a paragraph text.</h6>

প্রিভিউঃ

Browser

This is a paragraph text.

একই রকম কাজ করে এরকম কিছু ট্যাগ, যদিও একই নয়!

<b> এবং <strong> tag

প্রয়োগঃ

<b>bold</b> and <strong>strong</strong> tags are same.

প্রিভিউঃ

Browser

bold and strong tags are same.

<i> এবং <em> tag

প্রয়োগঃ

<i>italic</i> and <em>emphasize</em> tags are same.

প্রিভিউঃ

Browser

italic and emphasized tags are same.

<u> এবং <ins> tag

প্রয়োগঃ

<u>underline</u> and <ins>insert</ins> tags are same.

প্রিভিউঃ

Browser

underline and insert tags are same.

<strike> এবং <del> tag

প্রয়োগঃ

<strike>strike</strike> and <del>delete</del> tags are same.

প্রিভিউঃ

Browser

~~strike~~ and ~~delete~~ tags are same.

উপরের ট্যাগ জোড়া গুলো একই কাজ করে। তো একই কাজের দুই ট্যাগ কেন দেয়া হল? আসলে ট্যাগ গুলো কিন্তু আলাদা আলাদা অর্থ প্রকাশ করে। তবে ব্রাউজারে ডিফল্ট ভাবে একই স্টাইল দেয়া থাকায় একই মনে হয়। চলুন কোনটা কোথায় ব্যবহার করবেন তা জানা যাক।

<b>	লেখা bold করতে ব্যবহার করুন।
<strong>	গুরুত্বপূর্ণ লিখা হাইলাইট করতে ব্যবহার করুন।

<i>	লেখা italic/বাঁকা করতে ব্যবহার করুন।
<em>	গুরুত্বপূর্ণ লিখা হাইলাইট করতে ব্যবহার করুন।

<strike>	লেখা কাটার জন্য এ ট্যাগ ব্যবহার করুন।
<del>	লেখাটি মুছা হয়েছে/ বাদ দেয়া হয়েছে এ জাতীয় অর্থ বুঝালে এ ট্যাগটি ব্যবহার করুন।

<u>

লেখা underline করতে ব্যবহার করুন।

<ins>

কোনো লিখা insert অর্থাৎ যুক্ত করা হয়েছে বুঝাতে এ ট্যাগ ব্যবহার করুন। মূলত কোনো পোষ্টের কোনো কিছু হালনাগাদ করা হলে ঐ নতুন হালাগাদটি চিহ্নিত করতে এ ট্যাগ ব্যবহার করা হয়। এ ট্যাগটি <del> ট্যাগের সাথে ব্যবহার করা হয়। যেমনঃ

প্রয়োগঃ

I live in <del>Dhaka</del> <ins>Chittagong</ins>.

প্রিভিউঃ

Browser

I live in ~~Dhaka~~ Chittagong.

<sub> tag

প্রয়োগঃ

O<sub>2</sub>

প্রিভিউঃ

Browser

O₂

<sup> tag

প্রয়োগঃ

E=mc<sup>2</sup>

প্রিভিউঃ

Browser

E=mc²

<big> tag

প্রয়োগঃ

<big>big</big> text.

প্রিভিউঃ

Browser

big text.

<small> tag

প্রয়োগঃ

<small>small</small> text.

প্রিভিউঃ

Browser

small text.

কিছু empty HTML ট্যাগ এলিমেন্ট

<br> tag

কিছু ট্যাগ আছে যেগুলোর শেষ ট্যাগ লাগে না বা থাকে না এবং এগুলোতে কোনো কন্টেন্টও থাকে না। এ গুলোকে empty HTML element বলে।

এরকম একটি এলিমেন্ট ট্যাগ হল <br> ট্যাগ। br এসেছে break থেকে। লাইন ভাগ করতে এ ট্যাগ ব্যবহৃত হয়।

প্রয়োগঃ

First line<br>Second line

প্রিভিউঃ

Browser

First line
Second line

<hr> tag

এটিও একটি empty HTML element ট্যাগ। শেষ লাগেনা। hr এসেছে horizontal rule থেকে। অনুভূমিক রেখা টানতে এ ট্যাগ ব্যবহার করা হয়।

প্রয়োগঃ

Some element or content.
<hr>
Some element or content.
<hr width="50%">
Some element or content.

প্রিভিউঃ

Browser

Some element or content.

লিস্ট তৈরির কিছু ট্যাগ এলিমেন্ট

<ul><li> tag

প্রয়োগঃ

<ul>
<li>List one</li>
<li>List two</li>
<li>List three</li>
</ul>

প্রিভিউঃ

Browser

List one
List two
List three

<li> tag

প্রয়োগঃ

<li>List one</li>
<li>List two</li>
<li>List three</li>

প্রিভিউঃ

Browser

List one

List two

List three

<ol><li> tag

প্রয়োগঃ

<ol>
<li>List one</li>
<li>List two</li>
<li>List three</li>
</ol>

প্রিভিউঃ

Browser

List one
List two
List three

প্রয়োগঃ

<ol start="7">
<li>List one</li>
<li>List two</li>
<li>List three</li>
</ol>

প্রিভিউঃ

Browser

List one
List two
List three

প্রয়োগঃ

<ol type="i">
<li>List one</li>
<li>List two</li>
<li>List three</li>
</ol>

প্রিভিউঃ

Browser

List one
List two
List three

টেবিল তৈরির ট্যাগ এলিমেন্ট

<table> tag

প্রয়োগঃ

<table>
<tr>
<td>February</td>
<td>21</td>
</tr>
<tr>
<td>March</td>
<td>26</td>
</tr>
<tr>
<td>December</td>
<td>16</td>
</tr>
</table>

প্রিভিউঃ

Browser

February	21
March	26
December	16

লিঙ্ক (link) তৈরির ট্যাগ এলিমেন্ট

<a> tag

প্রয়োগঃ

<a href="http://google.com.bd">Google</a>

প্রিভিউঃ

Browser

Google

উদাহরণ

উপরে যা শিখলাম তা দিয়ে একটি ওয়েব পেজ কোডিং করা যাক। নিচের কোড গুলো নিজের মত পরিবর্তন/পরিবর্ধন করে এইচটিএমএল ফাইল হিসেবে ব্রাউজারে চালু করে দেখুন এবং শিখুন।

<!doctype html>
<html>
	<head>

		<title>Imaginative World Code</title>

	</head>
	<body>
		<h1>Bangladesh</h1>

		<p><strong>Bangladesh</strong> is a beautiful country in <em>South-east</em> Asia.
Dhaka is the capital of Bangladesh. It <u>achieved its independence in 1971</u>.
Bangladesh   is a land of rivers. ...</p>

		<a href="http://code.imaginativeworld.org>Imaginative World Code</a>

		<p>This is <a href="http://example.com">just</a> a line</p>

		<ul>
			<li>line one</li>
			<li>line two</li>
		</ul>

		<ol>
			<li>line one</li>
			<li>line two</li>
		</ol>


	</body>
</html>

যা যা জানলাম

এইচটিএমএল হেড ট্যাগ (HTML head tag)
এইচটিএমএল বডি ট্যাগ (HTML body tag)