HTML

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

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>

আমি মাসুদ আলম, বাংলাদেশের ৩৬ তম Zend Certified Engineer । ২০০৯ সালে কম্পিউটার সাইন্স থেকে বেচেলর ডিগ্রী অর্জন করি। দীর্ঘ ১৫ বছর আমি Winux Soft, SSL Wireless, IBCS-PRIMAX, Max Group, Canadian International Development Agency (CIDA), Care Bangladesh, World Vision, Hellen Keller, Amarbebsha Ltd সহ বিভিন্ন দেশি বিদেশী কোম্পানিতে ডেটা সাইন্স, মেশিন লার্নিং, বিগ ডেটা, ওয়েব ডেভেলপমেন্ট এবং সফটওয়্যার ডেভেলপমেন্ট এর উপর বিভিন্ন লিডিং পজিশন এ চাকরি এবং প্রজেক্ট লিড করি। এছাড়াও বাংলাদেশের ১৮৫ জন জেন্ড সার্টিফাইড ইঞ্জিনিয়ার এর মধ্যে ১২০ এরও অধিক ছাত্র আমার হাতে জেন্ড সার্টিফাইড ইঞ্জিনিয়ার হয়েছেন। বর্তমানে w3programmers ট্রেনিং ইনস্টিটিউট এ PHP এর উপর Professional এবং Advance Zend Certified PHP -8.2 Engineering, Laravel Mastering Course with ReactJS, Python Beginning To Advance with Blockchain, Machine Learning and Data Science, Professional WordPress Plugin Development Beginning to Advance কোর্স করাই। আর অবসর সময়ে w3programmers.com এ ওয়েব টেকনোলজি নিয়ে লেখালেখি করি।

Leave a Reply