এক্সএইচটিএমএল (XHTML) ডকুমেন্টে মেটা ডেটা এবং হেড সেকশন গুরুত্বপূর্ণ ভূমিকা পালন করে। এই সেকশনটি ডকুমেন্টের মেটা ইনফরমেশন যেমন শিরোনাম, চরিত্র এনকোডিং, স্টাইলশিট, স্ক্রিপ্ট এবং অন্যান্য গুরুত্বপূর্ণ তথ্য ধারণ করে।
১. হেড সেকশন (Head Section)
XHTML ডকুমেন্টের <head> সেকশনটি ডকুমেন্টের মেটা তথ্য, শিরোনাম, লিঙ্ক, স্ক্রিপ্ট এবং স্টাইলশিট সহ সমস্ত প্রয়োজনীয় কনফিগারেশন ধারণ করে। এটি পেজের কনটেন্ট না হলেও ব্রাউজারকে নির্দেশ করে কিভাবে পেজটি প্রদর্শিত হবে এবং এর কী বৈশিষ্ট্য রয়েছে।
১.1 হেড সেকশন গঠন
<head>
<meta charset="UTF-8" />
<title>My XHTML Page</title>
<meta name="description" content="This is a simple XHTML page example" />
<meta name="author" content="Your Name" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="script.js"></script>
</head>
২. মেটা ডেটা (Meta Data)
মেটা ডেটা হল তথ্য যা ডকুমেন্টের কনটেন্টের বাইরের বিভিন্ন দিক নির্দেশ করে। এই তথ্যগুলো ওয়েব পেজের ইনডেক্সিং, চরিত্র এনকোডিং, ডিভাইস সাপোর্ট, SEO (Search Engine Optimization), এবং অন্যান্য নির্দিষ্ট কনফিগারেশনে সহায়ক।
২.1 মেটা ট্যাগের উদাহরণ
২.1.1 চারিত্রিক এনকোডিং (Character Encoding)
এটি ডকুমেন্টে ব্যবহৃত অক্ষরগুলির এনকোডিং সংজ্ঞায়িত করে। অধিকাংশ ক্ষেত্রে UTF-8 ব্যবহার করা হয়, কারণ এটি বহু ভাষার অক্ষর সমর্থন করে।
<meta charset="UTF-8" />
২.1.2 ডেস্ক্রিপশন (Description)
এই মেটা ট্যাগটি পেজের সংক্ষিপ্ত বর্ণনা প্রদান করে, যা SEO এবং সার্চ ইঞ্জিনে প্রদর্শিত হতে পারে।
<meta name="description" content="This is a simple XHTML page example" />
২.1.3 কীওয়ার্ডস (Keywords)
এই ট্যাগটি ওয়েব পেজের সাথে সম্পর্কিত কীওয়ার্ডের তালিকা প্রদান করে, যা সার্চ ইঞ্জিনের র্যাঙ্কিংয়ের জন্য গুরুত্বপূর্ণ।
<meta name="keywords" content="XHTML, HTML, Web Development, Example" />
২.1.4 অথর (Author)
এই ট্যাগটি পেজের লেখক বা নির্মাতার নাম নির্দেশ করে।
<meta name="author" content="Your Name" />
২.1.5 ডেট পরিবর্তন (Date Modified)
এটি পেজের সর্বশেষ পরিবর্তনের তারিখ নির্দেশ করে।
<meta name="date" content="2024-12-16" />
৩. লিঙ্ক এবং স্টাইলশিট
৩.1 লিঙ্ক ট্যাগ (Link Tag)
এই ট্যাগটি পেজের সাথে বাইরের রিসোর্স যেমন CSS (Cascading Style Sheets) ফাইল সংযুক্ত করতে ব্যবহার করা হয়। এতে rel (রিলেশন) অ্যাট্রিবিউটের মাধ্যমে সংযোগের ধরন নির্দিষ্ট করা হয়।
<link rel="stylesheet" type="text/css" href="styles.css" />
৩.2 স্টাইলশিট (CSS) ব্যবহার
স্টাইলশিট লিঙ্ক করার মাধ্যমে আপনি পেজের ডিজাইন এবং লেআউট কাস্টমাইজ করতে পারবেন।
<link rel="stylesheet" type="text/css" href="style.css" />
৪. স্ক্রিপ্ট ট্যাগ (Script Tag)
XHTML ডকুমেন্টে JavaScript বা অন্যান্য স্ক্রিপ্ট যুক্ত করতে <script> ট্যাগ ব্যবহার করা হয়। এটি ব্রাউজারকে নির্দেশ করে যে, পেজে একটি স্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করা হয়েছে।
<script type="text/javascript" src="script.js"></script>
৪.1 এম্বেডেড স্ক্রিপ্ট
আপনি সরাসরি <script> ট্যাগের মধ্যে JavaScript কোডও লিখতে পারেন।
<script type="text/javascript">
alert("Welcome to my XHTML page!");
</script>
এক্সএইচটিএমএল ডকুমেন্টের হেড সেকশন এবং মেটা ডেটা গুরুত্বপূর্ণ ভূমিকা পালন করে। এটি ডকুমেন্টের তথ্য সম্পর্কে ব্রাউজার এবং সার্চ ইঞ্জিনকে অবহিত করে এবং পেজের প্রদর্শন, স্টাইল এবং স্ক্রিপ্টের সাথে সংযুক্ত হতে সহায়ক। XHTML ডকুমেন্টে মেটা ডেটা এবং হেড সেকশনের সঠিক ব্যবহারে ওয়েব পেজের কার্যক্ষমতা, SEO, এবং ইউজার এক্সপিরিয়েন্স উন্নত করা যায়।
XHTML ডকুমেন্টে <head> ট্যাগ একটি অত্যন্ত গুরুত্বপূর্ণ উপাদান, যা ডকুমেন্টের মেটাডেটা ধারণ করে। এটি ব্রাউজারকে ডকুমেন্টের নির্দিষ্ট তথ্য যেমন শিরোনাম, মেটা তথ্য, স্টাইলশীট, স্ক্রিপ্ট ইত্যাদি জানায়। <head> ট্যাগটি ডকুমেন্টের <html> ট্যাগের ভেতরে থাকে এবং এটি পেজের ভিজ্যুয়াল কনটেন্ট (যেমন, <body>) থেকে আলাদা থাকে।
১. <head> ট্যাগের মৌলিক গঠন
একটি সাধারণ XHTML ডকুমেন্টে <head> ট্যাগের মধ্যে নিম্নলিখিত উপাদানগুলি থাকতে পারে:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>My XHTML Page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Welcome to My XHTML Page</h1>
<p>This is a simple XHTML document.</p>
</body>
</html>
২. <head> ট্যাগের প্রধান উপাদানসমূহ
২.1 <title> ট্যাগ
<title> ট্যাগটি ডকুমেন্টের শিরোনাম সংরক্ষণ করে, যা ব্রাউজারের ট্যাবে প্রদর্শিত হয়। এটি ডকুমেন্টের জন্য একটি সংক্ষিপ্ত পরিচয় প্রদান করে।
<title>My XHTML Page</title>
২.2 <meta> ট্যাগ
<meta> ট্যাগটি মেটাডেটা, যেমন চরিত্র এনকোডিং, ডকুমেন্টের ভাষা, কিভাবে সার্চ ইঞ্জিনে ডকুমেন্টকে শনাক্ত করা হবে ইত্যাদি তথ্য সংরক্ষণ করে।
২.2.1 চরিত্র এনকোডিং (Character Encoding)
<meta charset="UTF-8" />
এটি ডকুমেন্টের চরিত্র এনকোডিং সংজ্ঞায়িত করে। সাধারণত UTF-8 ব্যবহার করা হয় যা ইউনিকোডের একটি জনপ্রিয় এনকোডিং স্কিমা।
২.2.2 ডকুমেন্টের ভাষা (Language)
<meta> ট্যাগে আপনি ডকুমেন্টের ভাষা উল্লেখ করতে পারেন। এটি সার্চ ইঞ্জিন এবং ব্রাউজারকে ডকুমেন্টের ভাষা সম্পর্কে জানায়।
<meta http-equiv="Content-Language" content="en-US" />
এটি ইংরেজি (যুক্তরাষ্ট্র) ভাষার জন্য ব্যবহৃত হয়।
২.2.3 ডকুমেন্টের বর্ণনা (Description)
<meta name="description" content="This is an XHTML document example." />
এটি ডকুমেন্টের সংক্ষিপ্ত বর্ণনা প্রদান করে, যা সার্চ ইঞ্জিনের ফলাফলগুলিতে প্রদর্শিত হতে পারে।
২.3 <link> ট্যাগ
<link> ট্যাগটি বাইরের রিসোর্স, যেমন স্টাইলশীট সংযোগ করার জন্য ব্যবহৃত হয়। এটি সাধারণত ডকুমেন্টের <head> ট্যাগে রাখা হয়।
<link rel="stylesheet" type="text/css" href="styles.css" />
এটি একটি এক্সটার্নাল CSS ফাইলের সাথে ডকুমেন্ট সংযোগ করে।
২.4 <script> ট্যাগ
<script> ট্যাগটি স্ক্রিপ্ট ফাইল বা স্ক্রিপ্ট কোড সংযুক্ত করতে ব্যবহৃত হয়। সাধারণত এটি JavaScript কোড সংযোগের জন্য ব্যবহৃত হয়।
<script type="text/javascript" src="script.js"></script>
এটি বাইরের JavaScript ফাইলের সাথে ডকুমেন্ট সংযোগ করে।
৩. <head> ট্যাগের অন্যান্য ব্যবহৃত উপাদানসমূহ
৩.1 <base> ট্যাগ
<base> ট্যাগটি একটি বেস ইউআরএল (Base URL) নির্ধারণ করে, যা ডকুমেন্টে ব্যবহৃত অন্যান্য রিলেটিভ লিংকগুলির জন্য ব্যবহার হয়। এটি <head> ট্যাগের মধ্যে একবার ব্যবহার করা হয়।
<base href="https://www.example.com/" />
এটি সমস্ত রিলেটিভ লিংকগুলির জন্য বেস ইউআরএল হিসেবে কাজ করবে।
৩.2 <style> ট্যাগ
<style> ট্যাগটি ডকুমেন্টের মধ্যে ইনলাইন CSS যোগ করার জন্য ব্যবহৃত হয়। তবে, সাধারণত বাইরের CSS ফাইল ব্যবহার করা হয়, কারণ এটি পেজ লোডিং স্পিড এবং রক্ষণাবেক্ষণ উন্নত করে।
<style type="text/css">
body {
background-color: lightblue;
}
</style>
এটি পেজে ইনলাইন CSS শৈলী সংজ্ঞায়িত করে।
৪. <head> ট্যাগের গুরুত্বপূর্ণ বিষয়াবলী
৪.1 XML সঙ্গততা
XHTML একটি XML-ভিত্তিক ভাষা হওয়ায়, <head> ট্যাগের প্রতিটি উপাদান সঠিকভাবে বন্ধ হতে হবে এবং সঠিকভাবে কেস সেনসিটিভ হতে হবে।
<meta charset="UTF-8" />- অবশ্যই সঠিকভাবে বন্ধন সহ ব্যবহার করতে হবে।<link />,<script />- এই ধরনের একক ট্যাগগুলোও বন্ধনসহ ব্যবহার করতে হবে।
৪.2 স্টাইলশীট এবং স্ক্রিপ্ট ফাইলের লোডিং
XHTML ডকুমেন্টে link এবং script ট্যাগের মধ্যে type অ্যাট্রিবিউট উল্লেখ করা আবশ্যক, যদিও এটি বেশিরভাগ আধুনিক ব্রাউজারে ঐচ্ছিক হয়ে গেছে। তবে এটি XHTML ডকুমেন্টে সঠিকভাবে উল্লেখ করা উচিত।
XHTML ডকুমেন্টে <head> ট্যাগ একটি অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে। এটি ডকুমেন্টের মেটাডেটা, শিরোনাম, স্টাইলশীট, স্ক্রিপ্ট এবং অন্যান্য প্রয়োজনীয় তথ্য ধারণ করে। meta, link, script, এবং title ট্যাগগুলোর মাধ্যমে আপনি ডকুমেন্টের পরিবেশ এবং কার্যকারিতা নির্ধারণ করতে পারেন। XHTML এর ক্ষেত্রে, <head> ট্যাগের সব উপাদান সঠিকভাবে বন্ধনসহ ব্যবহার করা আবশ্যক।
XHTML ডকুমেন্টে মেটা ট্যাগস গুরুত্বপূর্ণ ভূমিকা পালন করে। এগুলো ওয়েব পেজের মেটাডেটা (ডকুমেন্ট সম্পর্কিত তথ্য) প্রদান করে যা ব্রাউজার এবং সার্চ ইঞ্জিন দ্বারা ব্যবহৃত হয়। XHTML-এ <meta>, <title>, <link>, এবং <style> ট্যাগগুলি নির্দিষ্ট কাজ সম্পাদন করে। এই ট্যাগগুলো সঠিকভাবে ব্যবহৃত হলে ওয়েব ডকুমেন্টের কার্যকারিতা এবং SEO (Search Engine Optimization) উন্নত হতে পারে।
১. <meta> ট্যাগ
১.1 পরিচিতি
<meta> ট্যাগটি HTML বা XHTML ডকুমেন্টের মেটাডেটা (যেমন, কনটেন্টের ভাষা, ক্যারেকটার সেট, কুকি সেটিংস, সার্চ ইঞ্জিন নির্দেশনা) প্রদান করতে ব্যবহৃত হয়। এই ট্যাগটি <head> সেকশনে রাখা হয় এবং সাধারণত ব্রাউজারের জন্য তথ্য সরবরাহ করে।
১.2 বৈশিষ্ট্য এবং ব্যবহার
<meta> ট্যাগের বিভিন্ন অ্যাট্রিবিউট থাকতে পারে:
charset: ডকুমেন্টের ক্যারেকটার এনকোডিং নির্দেশ করে।
<meta charset="UTF-8" />name এবং content: মেটাডেটা তথ্য যেমন ডকুমেন্টের ভাষা, ডিসক্রিপশন, কিপওয়ার্ড ইত্যাদি সংজ্ঞায়িত করে।
<meta name="description" content="This is an example of an XHTML document." /> <meta name="keywords" content="XHTML, HTML, web development" />http-equiv: এটি HTTP হেডার সেটিংসের জন্য ব্যবহৃত হয়, যেমন ক্যাচিং নিয়ন্ত্রণ বা রিফ্রেশ করার জন্য।
<meta http-equiv="refresh" content="30" />
১.3 উদাহরণ
<meta charset="UTF-8" />
<meta name="description" content="A simple XHTML document with meta tags" />
<meta name="keywords" content="XHTML, meta tags, tutorial" />
<meta http-equiv="refresh" content="10;url=https://example.com/" />
২. <title> ট্যাগ
২.1 পরিচিতি
<title> ট্যাগটি ডকুমেন্টের শিরোনাম সংজ্ঞায়িত করে। এটি ওয়েব ব্রাউজারের ট্যাবে বা উইন্ডোতে প্রদর্শিত হয় এবং সার্চ ইঞ্জিনের জন্য অত্যন্ত গুরুত্বপূর্ণ। SEO-এর দিক থেকেও এটি গুরুত্বপূর্ণ, কারণ এটি সার্চ রেজাল্টে প্রদর্শিত হয়।
২.2 বৈশিষ্ট্য
<title>ট্যাগটি<head>সেকশনে থাকতে হবে।- এটি সঠিকভাবে সংজ্ঞায়িত করা উচিত যাতে ব্যবহারকারীরা এবং সার্চ ইঞ্জিন সহজে পেজের বিষয়বস্তু বুঝতে পারে।
২.3 উদাহরণ
<title>My First XHTML Page</title>
৩. <link> ট্যাগ
৩.1 পরিচিতি
<link> ট্যাগটি সাধারণত এক্সটার্নাল রিসোর্স যেমন CSS ফাইল, ফেভিকন, আথবা অন্যান্য রিসোর্স লিঙ্ক করার জন্য ব্যবহৃত হয়। এটি <head> সেকশনে যুক্ত করা হয়।
৩.2 বৈশিষ্ট্য
- rel: এই অ্যাট্রিবিউটটি লিঙ্কের সম্পর্ক নির্দেশ করে, যেমন
stylesheet(CSS ফাইল) বাicon(ফেভিকন)। - href: এই অ্যাট্রিবিউটটি এক্সটার্নাল রিসোর্সের অবস্থান নির্দেশ করে (যেমন, CSS ফাইলের ইউআরএল)।
৩.3 উদাহরণ
<link rel="stylesheet" href="styles.css" />
<link rel="icon" href="favicon.ico" />
৪. <style> ট্যাগ
৪.1 পরিচিতি
<style> ট্যাগটি পেজের স্টাইল বা CSS কোড সন্নিবেশ করার জন্য ব্যবহৃত হয়। এটি সাধারণত <head> সেকশনে রাখা হয়, এবং এতে ব্যবহৃত CSS কোড ডকুমেন্টের ভিতরেই থাকে। যদিও CSS ফাইল এক্সটার্নাল লিঙ্কের মাধ্যমে দেওয়া যেতে পারে, তবুও কিছু ক্ষেত্রে ইনলাইন স্টাইল সংযুক্ত করা প্রয়োজন হয়।
৪.2 বৈশিষ্ট্য
- এটি শুধুমাত্র স্টাইল সংজ্ঞায়িত করতে ব্যবহৃত হয়।
- CSS কোডটি
<style>ট্যাগের মধ্যে লেখা হয়।
৪.3 উদাহরণ
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
</style>
৫. XHTML-এ মেটা ট্যাগসের ব্যবহার
৫.1 XHTML এ <meta> ট্যাগের সঠিক ব্যবহার
XHTML ডকুমেন্টে <meta> ট্যাগগুলি সঠিকভাবে বন্ধ করা এবং কেস-সেন্সিটিভ ভাবে ব্যবহার করা উচিত। উদাহরণস্বরূপ, meta ট্যাগটি অবশ্যই বন্ধনসহ লেখা উচিত:
<meta charset="UTF-8" />
৫.2 XHTML এবং SEO
XHTML ডকুমেন্টে <meta>, <title>, <link>, এবং <style> ট্যাগগুলির সঠিক ব্যবহার সার্চ ইঞ্জিন অপটিমাইজেশনে সহায়ক হতে পারে। বিশেষ করে <meta> ট্যাগগুলি সঠিকভাবে ব্যবহৃত হলে পেজের বিষয়বস্তু বুঝতে সাহায্য করে এবং এটি ওয়েব পেজের র্যাঙ্কিং উন্নত করতে পারে।
XHTML ডকুমেন্টে <meta>, <title>, <link>, এবং <style> ট্যাগগুলির সঠিক ব্যবহার ওয়েব পেজের কার্যকারিতা ও SEO উন্নত করতে সহায়ক। এগুলো ডকুমেন্টের মেটাডেটা প্রদান করে, শিরোনাম নির্ধারণ করে, এক্সটার্নাল রিসোর্স লিঙ্ক করে এবং পেজের স্টাইল নিয়ন্ত্রণ করে। XHTML এ এই ট্যাগগুলি ব্যবহারের সময় সঠিক সিনট্যাক্স এবং বন্ধন ব্যবহারের প্রতি গুরুত্ব দেওয়া উচিত।
এক্সএইচটিএমএল (XHTML) ডকুমেন্টে ফেভিকন (favicon) এবং অন্যান্য রিসোর্স (যেমন CSS, JavaScript, ইমেজ) লিঙ্ক করা ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ। এক্সএইচটিএমএল ডকুমেন্টে ফেভিকন এবং রিসোর্স লিঙ্কিং সঠিকভাবে করা হলে তা ওয়েব পেজের লোডিং স্পিড এবং ইউজার এক্সপিরিয়েন্স উন্নত করতে সহায়তা করে।
১. ফেভিকন (Favicon) সেটআপ
১.1 ফেভিকন কি?
ফেভিকন (favicon) হল একটি ছোট আকারের আইকন যা ওয়েবসাইটের ব্রাউজার ট্যাবে প্রদর্শিত হয়। এটি ওয়েবসাইটের পরিচিতি বাড়াতে সহায়তা করে এবং ব্যবহারকারীদের জন্য দ্রুত সনাক্তযোগ্য করে তোলে। সাধারণত, ফেভিকনটি .ico ফরম্যাটে থাকে, তবে এটি .png, .jpg, বা .svg ফরম্যাটেও ব্যবহার করা যেতে পারে।
১.2 XHTML ডকুমেন্টে ফেভিকন লিঙ্ক করা
একটি ফেভিকন লিঙ্ক করতে, এটি <head> ট্যাগের মধ্যে <link> ট্যাগের মাধ্যমে যুক্ত করা হয়। নিচে একটি উদাহরণ দেওয়া হলো:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<!-- Favicon Link -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample webpage with a favicon.</p>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<link rel="icon" type="image/x-icon" href="favicon.ico" />এই ট্যাগটি ব্রাউজারকে জানায় যে ওয়েবসাইটের ফেভিকন হলোfavicon.icoফাইলটি।type="image/x-icon"এটিতে ফেভিকনের ফাইল টাইপ দেওয়া হয়েছে (যেমন.ico,.pngইত্যাদি)।href="favicon.ico"এটি ফেভিকনের ফাইলের লোকেশন নির্দেশ করে। সাধারণত, ফেভিকনটি ওয়েবসাইটের রুট ডিরেক্টরিতে থাকে।
১.3 ফেভিকনের অন্য ফরম্যাট (যেমন PNG)
ফেভিকন PNG ফরম্যাটে ব্যবহার করার জন্যও একইভাবে <link> ট্যাগ ব্যবহার করা হয়। উদাহরণস্বরূপ:
<link rel="icon" type="image/png" href="favicon.png" />
২. রিসোর্স লিঙ্কিং
XHTML ডকুমেন্টে বিভিন্ন রিসোর্স যেমন CSS, JavaScript, এবং ইমেজ ফাইল লিঙ্ক করা হয়। এগুলো ব্রাউজারের মাধ্যমে ওয়েব পেজের উপস্থাপন এবং কার্যকারিতা উন্নত করে। নিচে CSS এবং JavaScript ফাইলের উদাহরণ দেওয়া হলো।
২.1 CSS ফাইল লিঙ্ক করা
XHTML ডকুমেন্টে এক্সটার্নাল CSS ফাইল লিঙ্ক করার জন্য <link> ট্যাগ ব্যবহার করা হয়। CSS ফাইলের লিঙ্কে অবশ্যই rel="stylesheet" এবং type="text/css" অ্যাট্রিবিউট থাকতে হবে।
<head>
<meta charset="UTF-8" />
<title>My Styled Page</title>
<!-- External CSS File -->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
ব্যাখ্যা:
rel="stylesheet": এটি ব্রাউজারকে জানায় যে লিঙ্কটি একটি স্টাইলশীট (CSS) ফাইল।type="text/css": CSS ফাইলের টাইপ নির্দেশ করে।href="styles.css": এটি সেই ফাইলের লোকেশন, যেটি ওয়েব পেজটির স্টাইল নির্ধারণ করবে।
২.2 JavaScript ফাইল লিঙ্ক করা
JavaScript ফাইল লিঙ্ক করার জন্য <script> ট্যাগ ব্যবহার করা হয়। এক্সটার্নাল JavaScript ফাইলের জন্য src অ্যাট্রিবিউট ব্যবহার করা হয়।
<head>
<meta charset="UTF-8" />
<title>My Web Page with JavaScript</title>
<!-- External JavaScript File -->
<script type="text/javascript" src="script.js"></script>
</head>
ব্যাখ্যা:
type="text/javascript": এটি JavaScript ফাইলের টাইপ নির্দেশ করে।src="script.js": এখানে ফাইলের লোকেশন নির্দেশ করা হয়েছে, যেখানে JavaScript কোড লেখা আছে।
২.3 ইমেজ ফাইল লিঙ্ক করা
ইমেজ ফাইলগুলি HTML <img> ট্যাগের মাধ্যমে ওয়েব পেজে যোগ করা হয়। XHTML-এ, src এবং alt অ্যাট্রিবিউট ব্যবহার করা আবশ্যক।
<body>
<h1>Welcome to My Website</h1>
<!-- Image Linking -->
<img src="image.jpg" alt="Sample Image" />
</body>
ব্যাখ্যা:
src="image.jpg": এটি ইমেজ ফাইলের লোকেশন নির্দেশ করে।alt="Sample Image": এটি ইমেজটির বিকল্প টেক্সট প্রদান করে, যা ইমেজটি লোড না হলে প্রদর্শিত হবে।
XHTML ডকুমেন্টে ফেভিকন এবং রিসোর্স লিঙ্কিং ওয়েবসাইটের ইউজার এক্সপিরিয়েন্স এবং ফাংশনালিটি উন্নত করতে সহায়তা করে। ফেভিকন ওয়েবসাইটের চেহারা বাড়ায় এবং রিসোর্স লিঙ্কিং (CSS, JavaScript, ইমেজ) পেজের স্টাইল এবং কার্যকারিতা বজায় রাখতে সহায়ক। সঠিকভাবে ফেভিকন এবং অন্যান্য রিসোর্স লিঙ্ক করা হলে, আপনার ওয়েবসাইট আরও প্রফেশনাল এবং দ্রুত লোডযোগ্য হবে।
XHTML ডকুমেন্টের সাথে CSS (Cascading Style Sheets) ইন্টিগ্রেশন করার মাধ্যমে আপনি ওয়েব পেজের ডিজাইন এবং লেআউট উন্নত করতে পারেন। XHTML স্ট্রাকচার এবং CSS ডিজাইন আলাদা হলেও একে অপরের সাথে সুসংগতভাবে কাজ করে, যাতে HTML কনটেন্টকে সুন্দরভাবে প্রদর্শন করা যায়। এই টিউটোরিয়ালে আমরা XHTML ডকুমেন্টে বেসিক CSS এর সাথে ইন্টিগ্রেশন কিভাবে করবেন তা দেখাবো।
১. CSS এবং XHTML ইন্টিগ্রেশন
XHTML ডকুমেন্টে CSS ইন্টিগ্রেট করার জন্য দুটি প্রধান উপায় আছে:
১.1 ইনলাইন CSS
ইনলাইন CSS হচ্ছে যখন আপনি সরাসরি HTML (বা XHTML) ট্যাগে style অ্যাট্রিবিউট ব্যবহার করে স্টাইল প্রযোজ্য করেন। এটি ছোট এবং দ্রুত পরিবর্তনের জন্য উপযোগী।
<p style="color: blue; font-size: 18px;">এই টেক্সটটি নীল এবং বড় আকারে প্রদর্শিত হবে।</p>
১.2 অভ্যন্তরীণ CSS (Internal CSS)
অভ্যন্তরীণ CSS হল যখন আপনি <style> ট্যাগ ব্যবহার করে ডকুমেন্টের <head> সেকশনে CSS কোড লেখেন। এটি একাধিক ট্যাগের জন্য একই স্টাইল প্রযোজ্য করতে সুবিধাজনক।
<head>
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: darkblue;
}
</style>
</head>
১.3 বাহ্যিক CSS (External CSS)
বাহ্যিক CSS হল যখন আপনি আলাদা একটি .css ফাইল তৈরি করে সেটি আপনার XHTML ডকুমেন্টে লিঙ্ক করেন। এটি বড় এবং স্কেলেবল প্রজেক্টে বেশি ব্যবহৃত হয় কারণ এতে কোডের পুনরাবৃত্তি কমে এবং পেজ লোডিং টাইমও উন্নত হয়।
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
এখানে styles.css ফাইলটি আলাদা ফোল্ডারে সংরক্ষিত থাকবে এবং এতে সমস্ত স্টাইল সংজ্ঞায়িত থাকবে।
২. বেসিক CSS স্টাইলিং উদাহরণ
এখন আমরা কিছু সাধারণ CSS স্টাইলিং ব্যবহার করে XHTML ডকুমেন্টে বিভিন্ন উপাদান সাজানোর একটি উদাহরণ দেখব।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>এক্সএইচটিএমএল এবং CSS উদাহরণ</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
h1 {
color: #4CAF50;
text-align: center;
padding: 20px;
}
p {
color: #333;
font-size: 16px;
line-height: 1.6;
padding: 0 20px;
}
.highlight {
background-color: yellow;
}
a {
color: #4CAF50;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>এক্সএইচটিএমএল এবং CSS উদাহরণ</h1>
<p>এটি একটি উদাহরণ প্যারাগ্রাফ। আপনি এখানে <span class="highlight">CSS</span> এর ব্যবহার দেখতে পাচ্ছেন।</p>
<p>অন্য একটি <a href="#">লিঙ্ক</a> এখানে আছে।</p>
</body>
</html>
৩. বেসিক CSS প্রপার্টি এবং সিলেক্টর
৩.1 টেক্সট স্টাইলিং
color: টেক্সটের রঙ নির্ধারণ করে।font-family: ফন্টের ধরনের নির্বাচন করে।font-size: টেক্সটের আকার নির্ধারণ করে।line-height: লাইনের মধ্যে ব্যবধান বৃদ্ধি করে।
৩.2 বক্স মডেল
বক্স মডেল হল যেকোনো HTML উপাদান (যেমন প্যারাগ্রাফ বা চিত্র) চারটি অংশে বিভক্ত হয়:
padding: উপাদানের ভিতরের মার্জিন।border: উপাদানের চারপাশে সীমানা।margin: উপাদানের বাইরের ব্যবধান।
p {
margin: 20px;
padding: 10px;
border: 1px solid #ddd;
}
৩.3 পটভূমি এবং রঙ
background-color: উপাদানের পটভূমি রঙ।background-image: উপাদানের পটভূমিতে ছবি ব্যবহার।
body {
background-color: #f0f0f0;
}
h1 {
background-image: url('header-bg.jpg');
color: white;
}
৪. বাহ্যিক CSS ফাইল ব্যবহার
বাহ্যিক CSS ফাইল ব্যবহার করা সবচেয়ে ভালো পদ্ধতি যখন আপনার সাইটে একাধিক পেজ থাকে এবং আপনি স্টাইলগুলি পুনরায় ব্যবহার করতে চান।
৪.1 CSS ফাইল তৈরি করা
আপনি styles.css নামের একটি ফাইল তৈরি করুন এবং CSS কোড সেখানে লিখুন:
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: darkblue;
text-align: center;
}
p {
color: #333;
font-size: 16px;
}
৪.2 XHTML ডকুমেন্টে লিঙ্ক করা
এখন, XHTML ডকুমেন্টের <head> সেকশনে এই বাহ্যিক CSS ফাইলটি লিঙ্ক করুন:
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
এটি HTML অথবা XHTML ডকুমেন্টের স্টাইল সঠিকভাবে এক্সটার্নাল ফাইলে লিঙ্ক করবে এবং ওয়েব পেজের সমস্ত ট্যাগে প্রযোজ্য করবে।
৫. উপসংহার
XHTML ডকুমেন্টে CSS ইন্টিগ্রেশন আপনাকে ডিজাইন এবং লেআউট কাস্টমাইজ করতে সহায়তা করে। আপনি ইনলাইন, অভ্যন্তরীণ, বা বাহ্যিক CSS ব্যবহার করে আপনার ওয়েব পেজের স্টাইলিং করতে পারেন। বাহ্যিক CSS ফাইল ব্যবহারের মাধ্যমে বড় প্রজেক্টে কোডের পুনরাবৃত্তি কমিয়ে আপনি ডিজাইনকে আরও বেশি স্কেলেবল এবং মেনটেনেবল করতে পারবেন। CSS এর মাধ্যমে আপনি HTML বা XHTML ডকুমেন্টের কনটেন্টকে আরো আকর্ষণীয় এবং ব্যবহারকারী বান্ধব করে তুলতে পারেন।
Read more
