এইচটিএমএল head এলিমেন্ট
এইচটিএমএল হেড এলিমেন্ট
| ট্যাগ | বর্ননা |
|---|---|
| <head> | ডকুমেন্টের তথ্য ধারণ করে |
| <base> | একটি পেজের সকল লিঙ্কের জন্য ডিফল্ট URL বা টার্গেট ধারণ করে |
| <link> | একটি ডকুমেন্টের সাথে এক্সটার্নাল ফাইলের সম্পর্ক তৈরি করে |
| <meta> | এইচটিএমএল ডকুমেন্টের মেটাডেটা ধারণ করে |
| <script> | ক্লায়েন্ট সাইড স্ক্রিপ্ট ধারণ করে |
| <style> | ডকুমেন্টের স্টাইল ধারণ করে |
| <title> | ডকুমেন্টের টাইটেল ধারণ করে |
<head> এলিমেন্ট
<head> এলিমেন্ট হলো মেটাডেটা(ডেটা সম্পর্কিত ডেটা) রাখার কন্টেইনার এবং এটি <html> ট্যাগ এবং <body> ট্যাগের মাঝে থাকে।
এইচটিএমএল মেটাডেটা হলো এইচটিএমএল ডকুমেন্ট সম্পর্কিত তথ্য যা ব্রাউজারে দেখানো হয় না।
মেটাডেটা সাধারণত ডকুমেন্টের টাইটেল, ক্যারেক্টার সেট, স্টাইল, লিঙ্ক, স্ক্রিপ্ট এবং অন্যান্য তথ্যকে বুঝায়।
এই ট্যাগগুলোর মাধ্যমে মেটাডেটা বর্ননা করা হয়ঃ <title>, <style>,
<meta>, <link>, <script> এবং <base>
<base> এলিমেন্ট
একটি ওয়েব পেজের সকল URL এবং target এট্রিবিউটের একটি মূল URL এবং target সেট করার জন্য <base> এলিমেন্ট ব্যবহার করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<base href="http://www.sattacademy.com/images/" target="_blank">
</head>
<body>
<img src="sattacademy.jpg">
<p>যেহেতু আমরা URL এর একটি ভিত্তি নির্দিষ্ট করে দিয়েছি, ব্রাউজার "sattacademy.jpg" এই ছবিটি "http://www.sattacademy.com/images/sattacademy.jpg" এই url এ অনুসন্ধান করবে।</p>
<p><a href="http://www.sattacademy.com">sattacademy</a></p>
<p>উপরের লিংকটি একটি নতুন উইন্ডোতে ওপেন হবে কারণ আমরা লিংকের target এট্রিবিউটের ভিত্তি "_blank" সেট করে দিয়েছি।</p>
</body>
</html>ফলাফল
<title> এলিমেন্ট
<title> এলিমেন্ট একটি ডকুমেন্টের টাইটেল নির্দেশ করে এবং সকল এইচটিএমএল/এক্সএইচটিএমএল ডকুমেন্টে অবশ্যই দিতে হয়।
একটি সাধারণ এইচটিএমএল ডকুমেন্টঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<p>body এলিমেন্টের কন্টেন্ট ব্রাউজারের উইন্ডোতে দেখানো হয়।</p>
<p>title এলিমেন্টের কন্টেন্ট ব্রাউজারের ট্যাবে দেখানো হয়।</p>
</body>
</html>
ফলাফল
<style> এলিমেন্ট
শুধুমাত্র একটি এইচটিএমএল পেজের স্টাইল সম্পর্কিত তথ্য রাখার জন্য <style> এলিমেন্ট ব্যবহার করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
body{background-color: teal;}
h2{color: white;}
p{color: powderblue;}
</style>
</head>
<body>
<h2>একটি হেডিং</h2>
<p>একটি প্যারাগ্রাফ</p>
</body>
</html>ফলাফল
<link> এলিমেন্ট
এক্সটার্নাল স্টাইলশীটকে লিঙ্ক করার জন্য <link> এলিমেন্ট ব্যবহার করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<h2>একটি হেডিং</h2>
<p>একটি প্যারাগ্রাফ</p>
</body>
</html>ফলাফল
<meta> এলিমেন্ট
ক্যারেক্টার সেট, পেজের বর্ননা, কী-ওয়ার্ড, পেজের রচয়িতা এবং অন্যান্য মেটাডেটা নির্দেশ করার জন্য <meta> এলিমেন্ট ব্যবহার করা হয়।
ব্রাউজার, সার্চ ইঞ্জিন এবং অন্য ওয়েব সার্ভিসের জন্য মেটাডেটা ব্যবহার করা হয়।
ক্যারেক্টার সেট নির্দেশ করতেঃ
<meta charset="UTF-8">
ওয়েব পেজের বর্ননা নির্দেশ করতেঃ
<meta name="description" content="Free Web tutorials">
সার্চ ইঞ্জিনের জন্য কীওয়ার্ড নির্দেশ করতেঃ
<meta name="keywords" content="HTML, CSS, XML, JavaScript">পেজের রচয়িতার নাম নির্দেশ করতেঃ
<meta name="author" content="Azizur Rahman">ডকুমেন্ট প্রত্যেক ৩০ সেকেন্ডে রিফ্রেশ করতেঃ
<meta http-equiv="refresh" content="30">উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Azizur Rahman">
</head>
<body>
<p>মেটাডেটা ব্রাউজারে প্রদর্শন হয় না।</p>
</body>
</html>ফলাফল
অধ্যায়ের সারাংশ
- এইচটিএমএল
<head>এলিমেন্টে ডকুমেন্ট সম্পর্কিত মেটাডেটা বর্ণনা করে এমন এলিমেন্টগুলো উল্লেখ করা হয় - এইচটিএমএল
<base>এলিমেন্টের মাধ্যমে ডকুমেন্টের একটি মূল URL সেট করা হয় - এইচটিএমএল
<title>এলিমেন্টের মাধ্যমে ডকুমেন্টের টাইটেল সেট করা হয় - এইচটিএমএল
<style>এলিমেন্টের মাধ্যমে ডকুমেন্টের ইনটার্নাল স্টাইল সেট করা হয় - এইচটিএমএল
<link>এলিমেন্টের মাধ্যমে ডকুমেন্টের জন্য স্টাইলশীট লিংক করা হয় - এইচটিএমএল
<meta>এলিমেন্টের মাধ্যমে ডকুমেন্ট সম্পর্কিত মেটাডেটা সেট করা হয়