XHTML ডকুমেন্টে ডেটা ম্যানিপুলেশন এবং স্টাইলিং সাধারণত JavaScript এবং CSS এর মাধ্যমে করা হয়। XHTML একটি XML-ভিত্তিক ভাষা, তাই এটি HTML এর তুলনায় আরও কঠোর গঠন এবং নিয়ম মেনে চলে। তবে, CSS এবং JavaScript ব্যবহার করে আপনি XHTML ডকুমেন্টের কন্টেন্ট এবং প্রদর্শনকে সহজেই ম্যানিপুলেট এবং স্টাইল করতে পারেন।
১. ডেটা ম্যানিপুলেশন (Data Manipulation)
XHTML ডকুমেন্টে ডেটা ম্যানিপুলেশন করতে JavaScript ব্যবহার করা হয়। JavaScript ব্যবহার করে আপনি ডকুমেন্টের বিভিন্ন উপাদানকে পরিবর্তন, মুছে ফেলা বা যুক্ত করতে পারেন। এটি ডাইনামিক ইন্টারঅ্যাকশন এবং ইউজার ইন্টারফেসের জন্য অপরিহার্য।
১.১. JavaScript ব্যবহার করে ডেটা ম্যানিপুলেশন
XHTML ডকুমেন্টে JavaScript অন্তর্ভুক্ত করার জন্য <script> ট্যাগ ব্যবহার করা হয়। JavaScript কোড সাধারণত <head> বা <body> সেকশনে রাখা হয়।
উদাহরণ:
<!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>XHTML Data Manipulation Example</title>
<script type="text/javascript">
function changeContent() {
document.getElementById("demo").innerHTML = "Content changed via JavaScript!";
}
</script>
</head>
<body>
<h1>Welcome to XHTML</h1>
<p id="demo">This is some sample content.</p>
<button onclick="changeContent()">Change Content</button>
</body>
</html>
এখানে, JavaScript ব্যবহার করে প্যারাগ্রাফের কনটেন্ট পরিবর্তন করা হয়েছে। changeContent() ফাংশনটি ব্যবহারকারী যখন বাটনে ক্লিক করবেন, তখন <p> ট্যাগের কনটেন্ট পরিবর্তন করবে।
২. স্টাইলিং (Styling)
XHTML ডকুমেন্টে স্টাইলিং করার জন্য CSS (Cascading Style Sheets) ব্যবহার করা হয়। CSS এর মাধ্যমে HTML উপাদানগুলোর রঙ, আকার, অবস্থান এবং অন্যান্য বৈশিষ্ট্য নির্ধারণ করা হয়। স্টাইলশীটগুলি তিনটি পদ্ধতিতে যুক্ত করা যেতে পারে: ইন্টারনাল, এক্সটার্নাল, অথবা inline।
২.১. CSS এর মাধ্যমে স্টাইলিং
XHTML ডকুমেন্টে CSS স্টাইলিং করার জন্য <style> ট্যাগ বা একটি এক্সটার্নাল CSS ফাইল ব্যবহার করা হয়।
উদাহরণ:
<head>
<style type="text/css">
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: #3366cc;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.6;
color: #555555;
}
.highlight {
background-color: #ffeb3b;
color: #d32f2f;
}
</style>
এই উদাহরণে, আমরা body, h1, p, এবং .highlight ক্লাসের জন্য CSS স্টাইল শিরোনাম, টেক্সট রঙ, ব্যাকগ্রাউন্ড রঙ, এবং অন্যান্য প্রপার্টি নির্ধারণ করেছি।
৩. ইন্টারনাল এবং এক্সটার্নাল স্টাইলশীট
৩.১. ইন্টারনাল স্টাইলশীট
ইন্টারনাল স্টাইলশীট ব্যবহার করে CSS কোড <style> ট্যাগের মধ্যে ডকুমেন্টের <head> সেকশনে রাখা হয়।
<head>
<style type="text/css">
h1 {
color: #008080;
}
</style>
</head>
৩.২. এক্সটার্নাল স্টাইলশীট
এক্সটার্নাল স্টাইলশীট ব্যবহার করার জন্য একটি আলাদা CSS ফাইল তৈরি করতে হয় এবং তারপর সেই ফাইলটি XHTML ডকুমেন্টে <link> ট্যাগের মাধ্যমে সংযুক্ত করতে হয়।
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
এখানে, styles.css হল এক্সটার্নাল CSS ফাইল যেখানে সমস্ত স্টাইলশীট কোড রাখা হবে।
৪. ইন্টিগ্রেটেড ডেটা ম্যানিপুলেশন এবং স্টাইলিং
XHTML ডকুমেন্টে ডেটা ম্যানিপুলেশন এবং স্টাইলিং একসাথে করা যেতে পারে। JavaScript ব্যবহার করে ডেটা ম্যানিপুলেশন এবং CSS দিয়ে স্টাইলিং একত্রে ইউজার ইন্টারফেসে উন্নতি করতে সহায়তা করে।
উদাহরণ:
<!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>Data Manipulation and Styling Example</title>
<style type="text/css">
.highlight {
color: #ff5733;
font-weight: bold;
}
</style>
<script type="text/javascript">
function changeText() {
document.getElementById("text").className = "highlight";
document.getElementById("text").innerHTML = "Text has been highlighted!";
}
</script>
</head>
<body>
<h1>Interactive Data Manipulation</h1>
<p id="text">Click the button to manipulate this text.</p>
<button onclick="changeText()">Change Text</button>
</body>
</html>
এখানে, যখন ব্যবহারকারী বাটনে ক্লিক করবে, JavaScript দ্বারা টেক্সট পরিবর্তিত হবে এবং একই সাথে CSS ক্লাস অ্যাপ্লাই হয়ে এটি হাইলাইট হবে।
XHTML ডকুমেন্টে ডেটা ম্যানিপুলেশন এবং স্টাইলিং করার জন্য JavaScript এবং CSS অত্যন্ত গুরুত্বপূর্ণ। JavaScript ব্যবহার করে ডকুমেন্টের কনটেন্ট পরিবর্তন বা ম্যানিপুলেট করা যায়, আর CSS দ্বারা স্টাইলিংয়ের মাধ্যমে দৃশ্যমান উপাদানগুলির ডিজাইন নিয়ন্ত্রণ করা যায়। JavaScript এবং CSS একত্রে ব্যবহারের মাধ্যমে আপনি ডকুমেন্টে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ফিচার যোগ করতে পারেন।
Read more
