HTML Tutorial in Bangla Part-2:HTML head tag Elements

Last Updated on December 17, 2018 by

HTML head tag Elements কি?

html head tag

html head tag

HTML head tag Element হলো Meta Data (ডেটা সম্পর্কিত ডেটা) রাখার কন্টেইনার এবং এটি <html> ট্যাগ এবং <body> ট্যাগের মাঝে থাকে।

HTML Meta Data হলো HTML Document সম্পর্কিত তথ্য যা ব্রাউজারে দেখানো হয় না।

Meta Data সাধারণত ডকুমেন্টের টাইটেল, ক্যারেক্টার সেট, স্টাইল, লিঙ্ক, স্ক্রিপ্ট এবং অন্যান্য তথ্যকে বুঝায়।

এই tag গুলোর মাধ্যমে মেটাডেটা বর্ননা করা হয়ঃ <title>, <style>, <meta>, <link>, <script> এবং <base>

<base> Element

একটি ওয়েব পেজের সকল URL এবং target এট্রিবিউটের একটি মূল URL এবং target সেট করার জন্য <base> এলিমেন্ট ব্যবহার করা হয়ঃ

<!DOCTYPE html>
<html>
	<head>
  <base href="https://www.w3programmers.com/images/" target="_blank">
</head>

<body>
<img src="test.jpg" width="24" height="39" alt="Test">
<a href="https://www.w3programmers.com">w3programmers</a>
</body>
</html>

ব্যাখ্যা: উপরের কোড দিয়ে যেই ইমেজটি প্রদর্শন করবে সেটি w3programmers.com এর image folder থেকে দেখাবে আর এর জন্য আমাদেরকে image folder এর path টি দিতে হয়নি। আবার হাইপার লিংক এর জন্য আমাদেরকে কোনো টার্গেট সেট করতে হয়নি , কারণ আমরা আগেই <base> tag এ target সেট করে আসছি , এখন লিংকে ক্লিক করলে লিংকটি সরাসরি নতুন একটা ট্যাব এ ওপেন হবে। আর এখানে href এবং target হচ্ছে base tag এর attribube

<title> Element

ব্রাউজারের টাইটেল বারে যেকোনো ওয়েব পেজের টাইটেল প্রদর্শনের জন্য ট্যাগ ব্যবহার করা হয়।

<!DOCTYPE html>
<html>
	<head>
  		<title>Our HTML Tutorials</title>
	</head>
	<body>
	This is Body
	</body>
</html>

উপরের কোড এর মাধ্যমে ব্রাউজারের টাইটেল বারে “Our HTML Tutorials” লেখাটি দেখা যাবে।

<style> Element

Internal Style sheet ব্যবহারের জন্য <style> </style> ট্যাগ ব্যবহার করা হয়। যেমন

<!DOCTYPE html>
<html>
	<head>
  		<title>Our HTML Tutorials</title>
  		<style type="text/css">
  			body {background-color: red;}
  			p { 
  				margin-left: 20px;
  				font-weight: bold;
  				color: #006; 
  			}
		</style>
	</head>
	<body>
	This is Body
	</body>
</html>

<link> Element

এক্সটার্নাল স্টাইলশীটকে লিঙ্ক করার জন্য <link> এলিমেন্ট ব্যবহার করা হয়ঃ

<!DOCTYPE html>
<html>
<head>
  <title>HTML Link Example</title>
  <link rel="stylesheet" href="../style.css">
</head>
<body>

	<h2>HTML Link Example</h2>
	<p>This is a Paragraph</p>

</body>
</html>

<script> Element

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

     <!DOCTYPE html>
<html>
<head>
  <title>HTML script Example</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="sliding_effect.js"></script>  
</head>
<body>

	<h2>HTML script Example</h2>
	<p>This is a Paragraph</p>

</body>
</html>                 

<meta> Element

ক্যারেক্টার সেট, পেজের বর্ননা, কী-ওয়ার্ড, পেজের রচয়িতা এবং অন্যান্য মেটাডেটা নির্দেশ করার জন্য এলিমেন্ট ব্যবহার করা হয়।

ব্রাউজার, সার্চ ইঞ্জিন এবং অন্য ওয়েব সার্ভিসের জন্য মেটাডেটা ব্যবহার করা হয়।

Character Set নির্দেশ করতেঃ

<meta charset="UTF-8">

Web Page এর Description দিতে:

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

Search Engine এর জন্য Key words নির্দেশ করতেঃ

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

পেজের রচয়িতার নাম নির্দেশ করতেঃ

<meta name="author" content="Masud Alam">

ডকুমেন্ট কে প্রত্যেক ৩০ সেকেন্ডে রিফ্রেশ করতেঃ

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

সব উদাহরণ এক সাথে:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Meta Data Example</title>
	<meta charset="UTF-8">
	<meta name="description" content="Free Web tutorials">
	<meta name="keywords" content="HTML,CSS,XML,JavaScript">
	<meta name="author" content="Masud Alam">
</head>
<body>

	<p>Meta Data Example</p>

</body>
</html>

Leave a Reply