Head এলিমেন্টের ভিতরে এইচটিএমএল এর গুরুত্বপূর্ণ ট্যাগ সমূহ থাকে।যেমন <title>,
<style>, <meta>, <link>, <script>, and <base>
<Isindex> ইত্যাদি।এসব ট্যাগ দিয়ে পেজ সম্পর্কিত তথ্য প্রদর্শন করা হয়। এমনকি SEO এর কাজও করা হয়ে থাকে। Head Section এর ভিতরের লেখা কোন কিছু ব্রাউজারে প্রদর্শিত হয়
না।
Title(শিরোনাম) :
একটা ডকুমেন্টের শিরোনাম লিখতে ব্যাবহার করা হয়। <title> </title> ট্যাগ ব্যাবহার করে একটা
পেজের শিরোনাম যোগ করা হয়।এই শিরোনাম সার্চ ইঞ্জিন এর জন্য অনেক জরুরী।
<title> </title> ট্যাগ ব্যাবহার করে কিছু যুক্ত করলে সেটা ব্রাউজার এর title bar এ পেজের title (শিরোনাম) হিসেবে
প্রদর্শিত হবে।
<title> Web design tutorial</title> এভাবে লিখতে হয়।
তাহলে Web design tutorial লেখাটা ব্রাউজার এর title এ দেখাবে।
পেজ title বা শিরোনাম দেয়া খুব জরুরি।একটা valid html document এর জন্যও এটা দরকার।
আপনি যে বিষয়ের উপর ওয়েব পেজ বানাবেন সে বিষয়ের সাথে মিল রেখে শিরোনাম দিবেন।
যাতে ব্যাবহারকারি (visitor) title দেখেই পেজ সম্পর্কে ধারনা পেতে পারে।যেমন আপনি একটা বাংলা
ব্লগ টিউটোরিয়াল পেজ খুললেন তাহলে আপনি শিরোনাম দিতে পারেন এভাবে –
<title> Bangla Blog Tutorial</title> এভাবে পেজের সাথে মিল রেখে
শিরোনাম দিলে সার্চ ইঞ্জিন সহজে আপনার পেজকে indexing করবে এবং ব্যাবহারকারিও
উপকৃত হবে।
তাই বলা যায় ওয়েব পেজের জন্য title ট্যাগ ব্যাবহার করে পেজের
শিরোনাম দেয়া অতি জরুরি।
<html>
<title>Title in here</title>
<body>
<p>web design tutorial page</p>
</body>
</html>
Link (লিংক) :
Head Section এর ভিতরের যে link ট্যাগটি ব্যাবহার করা হয়
সেটা দিয়ে css style sheet এর সাথে লিংক করা হয়।
<link
rel="stylesheet" type="text/css"
href="styles.css" />
<!DOCTYPE html>
<html>
<title>Title in here</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<body>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<title>Title in here</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<body>
<p>This is a paragraph.</p>
</body>
</html>
Style (স্টাইল) :
এটা দিয়ে এইচটিএমএল
ডকুমেন্টের ভিতরে মানে inline style ব্যাবহার করার জন্য লেখা হয়।
<html>
<head>
<title>Title
in here</title>
<style>
body
{background-color:green;}
p
{color:red;font-size:30px;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
এখানে style ব্যাবহার করে Head Section এর ভিতরের body {background-color:green;} দিয়ে ব্যাকগ্রাউন্ড কালার
গ্রীন করে দেয়া হয়েছে। p {color:red;font-size:30px;}
দিয়ে p এর সাইজ ও কালার পরিবর্তন
করা হয়েছে।
Script (স্ক্রিপ্ট) :
বিভিন্ন script যেমন javascript ,jquary
ইত্যাদি যুক্ত করতে <script> ট্যাগ ব্যাবহার করা
হয়।
<!DOCTYPE
html>
<html>
<title>Page
title in here</title>
<script>
function
myFunction() {
document.getElementById("demo").innerHTML =
"Javascript";
}
</script>
<body>
<h1> Web
design tutorial </h1>
<p
id="demo">Paragraph</p>
<button
type="button" onclick="myFunction()">Click
me</button>
</body>
</html>
আবার আপনি আলাদা script ফাইল লিখেও এইচটিএমএল এ
লিংক বা যুক্ত করে দিতে পারেন।
<script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript"
src="sliding_effect.js"></script>
এভাবে Head Section এর ভিতরের লিখতে হয়।
Meta (মেটা) :
আপনি একটা ওয়েব পেজ বানালেন
কিন্তু সেটা কারো কাছে পৌছাতে পারলেন না।সার্চ ইঞ্জিনে সার্চ করে কেউ পেলোনা।আপনার
কাঙ্খিত ভিজিটর আসল না ।তাহলে আপনার সব কষ্টই বৃথা গেল।
মেটা ট্যাগ ব্যাবহার করে
একটা ওয়েব সাইটকে সার্চ ইঞ্জিনের টপে(Top) আনা যায়। আর এতে ব্যাবহারকারি
সার্চ করে সহজে আপনার ওয়েব সাইটটা পেয়ে যাবে , আপনার সাইটের ইউজার বাড়বে।
Seo (সার্চ ইঞ্জিন
অপটিমাইজেশন) ওয়েব সাইটের জন্য একটা অতি গুরুত্বপূর্ণ বিষয়।
মেটা ট্যাগ দিয়ে পেজের
বর্ণনা , লেখকের নাম এবং আরও অনেক মেটাডেটা লেখা হয়ে থাকে।যা সার্চ ইঞ্জিন
অপটিমাইজেশন এর জন্য দরকার।
মেটা ট্যাগের কোন শেষ ট্যাগ
নেই।
মেটা ট্যাগের সাধারণ গঠন :-
<meta name=”metaname” content=”metacontent”>
<meta name=”metaname” content=”metacontent”>
১. <meta name=”Developer” content=”akram”>
দেখুন এখানে name ও content attribute
ব্যাবহার করে ওয়েব Developer এর নাম দেয়া হয়েছে।ভিজিটর Developer এর নামে সার্চ দিতে পারে।তাই হেড এর ভিতরে মেটা ট্যাগে Developer এর নাম লেখা হয়েছে।
২. <meta name=”keywords” content=”HTML , CSS , Javascript , PHP , jQuary ,
MySql , Tips & Tricks”>
এখানে পেজের keywords গুলো দেয়া হয়েছে
সার্চ ইঞ্জিন এর জন্য।
৩.<meta name=”description” content=”Free
Bangla Web Design Tutorial ”>
নাম্বার ৩ এ ওয়েব পেজের সংক্ষিপ্ত একটা বিবরণ দেয়া হয়েছে।
৪. <meta name=”author”
content=”ovi ahmed”>
এখানে author দিয়ে লেখকের নাম
জুড়ে দেয়া হয়েছে।
৫.আপনি যদি চান
আপনার ওয়েব পেজটা নির্দিষ্ট সময় পর পর Refresh (পুনঃলোড) হবে তাহলে সেটাও
আপনি মেটা ট্যাগ ব্যাবহার করে দিতে পারবেন।
<meta http-equiv=”refresh”
content=”60”>
(৬০ সেকেন্ড পর পর
আপনার পেজটা refresh হবে। )
৬. আপনি যদি চান
আপনার নির্দিষ্ট সময় পরে আপনার পেজ আপডেট করতে তখনও আপনি মেটা ট্যাগ ব্যাবহার করে
এই কাজটা করতে পারেন।
<meta http-equiv=”expires”
content=”sun.01 jan,2016,12.00AM,GMT”>
এর কারনে 1 jan এর পরে ব্রাউজার
সার্ভার থেকে নতুন ডকুমেন্ট কপি করে আনবে।
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন