এইচটিএমএল হেড Element
এইচটিএমএল <head> উপাদানটি নীচের উপাদানগুলির জন্য একটি ধারক বা কন্টেইনার
<title>, <style>, <meta>, <link>, <script>, এবং <base>
HTML <head> Element
<head> উপাদানটি মেটাডেটার জন্য ডেটা (ডেটা সম্পর্কিত ডেটা) এবং <html> ট্যাগ এবং <body> ট্যাগের মধ্যে স্থাপন করা হয়।
HTML metadata এইচটিএমএল ডকুমেন্ট সম্পর্কিত ডেটা। মেটাডেটা প্রদর্শিত হয় না।
Metadata সাধারণত নথির শিরোনাম, অক্ষর সেট, শৈলী, স্ক্রিপ্ট এবং অন্যান্য মেটা তথ্য সংজ্ঞায়িত করে।
HTML <title> Element
<title> এলিমেন্ট এইচটিএমএল ডকুমেন্টের শিরোনাম নির্ধারণ করে। শিরোনামটি কেবলমাত্র পাঠ্য হওয়া উচিত এবং এটি ব্রাউজারের শিরোনাম বারে বা পৃষ্ঠার ট্যাবে প্রদর্শিত হয়।
এইচটিএমএল ডকুমেন্টে <title> উপাদানটি প্রয়োজনীয়!
ওয়েব পেজের শিরোনামের বিষয়বস্তুগুলি অনুসন্ধান ইঞ্জিন অপ্টিমাইজেশনের ( search engine optimization ) জন্য খুব গুরুত্বপূর্ণ (এসইও)! ওয়েব পৃষ্ঠার শিরোনাম অনুসন্ধান ফলাফলগুলিতে পৃষ্ঠাগুলি তালিকাভুক্ত করার সময় ক্রমটি ঠিক করতে সার্চ ইঞ্জিন অ্যালগরিদম ব্যবহার করে।
<title> এলিমেন্ট টি:
- ব্রাউজার টুলবারে একটি শিরোনাম বা টাইটেল নির্ধারণ করে
- ওয়েব পেজ সেভ/বুকমার্ক যুক্ত করা হলে একটি টাইটেল সরবরাহ করে
- অনুসন্ধান ইঞ্জিন-ফলাফলগুলিতে পৃষ্ঠার জন্য একটি শিরোনাম প্রদর্শন করে
সুতরাং, শিরোনামটি যথাসম্ভব নির্ভুল এবং অর্থবহ করার চেষ্টা করুন!
একটি সাধারণ এইচটিএমএল ডকুমেন্ট:
উদাহরণ
<!DOCTYPE html> <html> <head> <title>A Meaningful Page Title</title> </head> <body> The content of the document...... </body> </html>
HTML <style> Element
<style> এট্রিবিউট টি একটি একক এইচটিএমএল পৃষ্ঠার জন্য স্টাইলের তথ্য সংজ্ঞায়িত করতে ব্যবহৃত হয়। এইচটিএমএল সিএসএস এ কিছুটা ধারনা পেয়েছি আমরা।
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>HTML <link> Element
<link> এলিমেন্ট টি বর্তমান ডকুমেন্ট এবং একটি বাহ্যিক রিসোর্স এর মধ্যে সম্পর্ককে সংজ্ঞায়িত করে।
<link> ট্যাগটি প্রায়শই বহিরাগত স্টাইল শীটের সাথে লিঙ্ক করতে ব্যবহৃত হয়:
<head> <link rel="stylesheet" href="styles.css"> </head>
HTML <meta> Element
<meta> এলিমেন্ট টি সাধারণত অক্ষর সেট(character set), পৃষ্ঠা বিবরণ( page description), কীওয়ার্ডস(keywords), দস্তাবেজের লেখক(author of the document) এবং ভিউপোর্ট সেটিংস(viewport settings) নির্দিষ্ট করতে ব্যবহৃত হয়।
মেটাডেটা ওযেব পৃষ্ঠায় প্রদর্শিত হবে না, তবে ব্রাউজারগুলি (কীভাবে সামগ্রী প্রদর্শিত হবে বা পৃষ্ঠাটি পুনরায় লোড করবেন), অনুসন্ধান ইঞ্জিন (কীওয়ার্ড) এবং অন্যান্য ওয়েব সার্ভিস দ্বারা ব্যবহৃত হয়।
উদাহরণ
ক্যারেক্টার সেট ডিফাইন করতে ব্যবহৃত হয়:
<meta charset="UTF-8">
সার্চইঞ্জিন গুলোর জন্য কিওয়ার্ড বর্ণনা করে:
<meta name="keywords" content="HTML, CSS, JavaScript">
ওয়েব পেজের ড্রেসক্রিপশন বর্ণনা করে:
<meta name="description" content="কিভাবে,কম এর ওয়েব টিউটোরিয়াল">
ওয়েব পেজের লেখক বর্ণনা করে
<meta name="author" content="শাহরিয়ার সরকার">
প্রতি 30 সেকেন্ডে পেজ রিফ্রেশ করে
<meta http-equiv="refresh" content="30">
আপনার ওয়েবসাইটটি সমস্ত ডিভাইসে সুন্দর দেখানোর জন্য ভিউপোর্টটি সেট করা:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> tag এর উদহরণ
<meta charset="UTF-8"> <meta name="description" content="কিভাবে,কম এর ওয়েব টিউটোরিয়াল"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="শাহরিয়ার সরকার">
Viewport Setting – ভিউপোর্টটি সেট করা
ভিউপোর্টটি কোনও ওয়েব পৃষ্ঠার ব্যবহারকারীর দৃশ্যমান অঞ্চল। এটি ডিভাইসের সাথে পরিবর্তিত হয় – এটি কম্পিউটারের স্ক্রিনের চেয়ে মোবাইল ফোনে ছোট হবে।
আপনার সমস্ত ওয়েব পৃষ্ঠাগুলিতে <meta> এলিমেন্ট টি অন্তর্ভুক্ত করা উচিত
<meta name="viewport" content="width=device-width, initial-scale=1.0">
এটি ওয়েবপৃষ্ঠার ডাইমেনশন এবং স্কেলিং কীভাবে নিয়ন্ত্রণ করবেন সে সম্পর্কে ব্রাউজারকে নির্দেশ দেয়।
width=device-width অংশটি ডিভাইসের স্ক্রিন-প্রস্থ (যা ডিভাইসের উপর নির্ভর করে পরিবর্তিত হবে) অনুসরণ করার জন্য পৃষ্ঠার প্রস্থ নির্ধারণ করে
initial-scale=1.0 পৃষ্ঠাটি প্রথম ব্রাউজারে লোড হবার সময় প্রাথমিক জুম সেট করে
নিচে ভিউপোর্ট মেটা ট্যাগ ছাড়াই ওয়েব পৃষ্ঠা এবং ভিউপোর্ট মেটা ট্যাগ সহ একই ওয়েব পৃষ্ঠার উদাহরণ দেয়া হলো
আপনি যদি এই পৃষ্ঠাটি ফোন বা একটি ট্যাবলেট দিয়ে ব্রাউজ করছেন তবে পার্থক্যটি দেখতে নীচের দুটি লিঙ্কে ক্লিক করতে পারেন।
HTML <script> Element
<script> উপাদানটি ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্টগুলি সংজ্ঞায়িত করতে ব্যবহৃত হয়।
নিম্নলিখিত জাভাস্ক্রিপ্ট কোড টি “হ্যালো জাভাস্ক্রিপ্ট!” লিখবে id=”demo” এইচটিএমএল এলিমেন্টে।
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "হ্যালো জাভাস্ক্রিপ্ট!";
}
</script>HTML <base> Element
<base> element ওয়েব প্রিষ্ঠার সবগুলো লিংক এর Base URL কি হবে তা ঠিক করে দেয় ।
<base> ট্যাগ এ অবশ্যই একটি href বা trager এট্রিবিউট থাকবে অথবা দুটোই ।
একটি ওয়েব পেজে মাত্র একটি <base> element থাকরে পারবে ।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Base URL Example </title>
<base href="https://kivabe.com/en/" target="_blank">
</head>
<body>
<h1>A new Image</h1>
<img src="wp-content/uploads/2021/02/ramadan-2021-Bangladesh.png" alt="Ramdan" width="350">
<p>
<a href="ramadan-2021-bangladesh-ramadan-calendar-2021/">২০২১ সালের রমজান ক্যালেন্ডার</a>
</p>
</body>
</html>