এক্সএইচটিএমএল (XHTML) ডকুমেন্টে একটি ওয়েব পেজের ইন্টারনাল স্ট্রাকচার তৈরি এবং বিভিন্ন টেম্পলেট ইনক্লুড করা ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ। এখানে মূলত পেজের কাঠামো এবং বিভিন্ন কোড ব্লক একত্রিত করার পদ্ধতি সম্পর্কে আলোচনা করা হবে।
১. এক্সএইচটিএমএল ডকুমেন্টের ইন্টারনাল স্ট্রাকচার
এক্সএইচটিএমএল ডকুমেন্টের ইন্টারনাল স্ট্রাকচার সাধারণত তিনটি প্রধান অংশে বিভক্ত থাকে:
<head>: এই অংশটি ডকুমেন্টের মেটাডেটা ধারণ করে, যেমন শিরোনাম, মেটা তথ্য, স্টাইলশীট, স্ক্রিপ্ট ইত্যাদি।<body>: এটি ডকুমেন্টের মূল কন্টেন্ট ধারণ করে, যেমন প্যারাগ্রাফ, ইমেজ, লিঙ্ক, টেবিল, ফর্ম ইত্যাদি।<html>: এটি একটি রূপরেখা ট্যাগ, যা পুরো ডকুমেন্টকে ধারণ করে এবং ডকুমেন্টের শুরুর এবং শেষ সীমা নির্ধারণ করে।
নিচে একটি সাধারণ 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>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 basic example of XHTML structure.</p>
</body>
</html>
এখানে <head> ট্যাগে ডকুমেন্টের মেটাডেটা এবং অন্যান্য রিসোর্স (যেমন স্টাইলশীট, স্ক্রিপ্ট) যুক্ত করা হয়েছে, এবং <body> ট্যাগে ডকুমেন্টের কন্টেন্ট রাখা হয়েছে।
২. টেম্পলেট ইনক্লুড করা
এক্সএইচটিএমএল ডকুমেন্টে টেম্পলেট ইনক্লুড করার মাধ্যমে আপনি বিভিন্ন অংশের কোড একাধিক পৃষ্ঠায় পুনঃব্যবহার করতে পারেন। যদিও এক্সএইচটিএমএল নিজে সরাসরি টেম্পলেট ইনক্লুড করার কোন বিল্ট-ইন সমাধান প্রদান করে না, তবে কিছু পদ্ধতি ব্যবহার করে আপনি টেম্পলেট ইনক্লুড করতে পারেন।
২.1 আইফ্রেম (iframe) ব্যবহার করা
এক্সএইচটিএমএল ডকুমেন্টে টেম্পলেটের বিভিন্ন অংশ ইনক্লুড করার সবচেয়ে সাধারণ পদ্ধতি হল iframe ব্যবহার করা। iframe ট্যাগ একটি নির্দিষ্ট ওয়েব পেজের কন্টেন্ট অন্য একটি পেজে এম্বেড করতে সহায়তা করে। এটি একধরণের "বক্স" তৈরি করে যেখানে আপনি অন্য পৃষ্ঠার কন্টেন্ট ইনক্লুড করতে পারেন।
<iframe src="header.xhtml" width="100%" height="100"></iframe>
<iframe src="footer.xhtml" width="100%" height="50"></iframe>
এখানে header.xhtml এবং footer.xhtml আলাদা XHTML ফাইল, যেগুলি পেজের হেডার এবং ফুটার হিসেবে কাজ করবে। iframe ব্যবহার করলে, আপনি একাধিক টেম্পলেট বা পেজের অংশ একত্রিত করতে পারেন।
২.2 সার্ভার-সাইড ইনক্লুড (SSI)
এছাড়া আপনি সার্ভার-সাইড স্ক্রিপ্টিং ভাষা (যেমন PHP, ASP, বা JSP) ব্যবহার করে টেম্পলেট ইনক্লুড করতে পারেন। একটি উদাহরণ হিসেবে, PHP কোডের মাধ্যমে এক্সএইচটিএমএল ডকুমেন্টে টেম্পলেট ইনক্লুড করার পদ্ধতি নিচে দেখানো হলো:
<?php include('header.xhtml'); ?>
এটি header.xhtml ফাইলের কন্টেন্ট এক্সএইচটিএমএল ডকুমেন্টে ইনক্লুড করবে। সার্ভার-সাইড স্ক্রিপ্টিং ব্যবহারে, আপনি ডাইনামিক কন্টেন্ট এবং টেম্পলেট ব্যবস্থাপনা খুব সহজে করতে পারেন।
২.3 JavaScript এর মাধ্যমে টেম্পলেট ইনক্লুড
JavaScript ব্যবহার করে আপনি টেম্পলেট ইনক্লুড করতে পারেন, যদিও এটি ক্লায়েন্ট-সাইড অপশন। এর মাধ্যমে আপনি পেজের কিছু অংশ বা টেম্পলেট একটি নির্দিষ্ট উপাদানে (DOM এ) অ্যাড করতে পারেন।
document.getElementById('header').innerHTML = '<object type="text/html" data="header.xhtml"></object>';
document.getElementById('footer').innerHTML = '<object type="text/html" data="footer.xhtml"></object>';
এখানে, JavaScript কোডটি পেজের নির্দিষ্ট অংশে (header এবং footer আইডি সহ) অন্য XHTML ফাইলের কন্টেন্ট ইনক্লুড করছে।
৩. এক্সএইচটিএমএল ডকুমেন্টে টেম্পলেট ব্যবহার করার সুবিধা
৩.1 পুনঃব্যবহারযোগ্যতা
এক্সএইচটিএমএল টেম্পলেট ব্যবহার করলে কোড পুনঃব্যবহারযোগ্য হয়। আপনি একবার একটি টেম্পলেট তৈরি করলে সেটি বিভিন্ন পেজে ব্যবহার করা যেতে পারে, ফলে কোডের অখণ্ডতা বজায় থাকে এবং রক্ষণাবেক্ষণ সহজ হয়।
৩.2 কোডের স্বচ্ছতা
একটি নির্দিষ্ট টেম্পলেটের মাধ্যমে ওয়েব পেজের কন্টেন্টের কাঠামো পরিষ্কার রাখা যায়। একাধিক পৃষ্ঠায় একই টেম্পলেট ব্যবহার করলে, কন্টেন্টের গঠন এবং ডিজাইন একীভূত থাকে, যা ব্যবহারকারী এবং ডেভেলপারদের জন্য সুবিধাজনক।
৩.3 ডাইনামিক কন্টেন্ট
সার্ভার-সাইড স্ক্রিপ্টিং ভাষা ব্যবহার করলে, টেম্পলেট ডাইনামিকভাবে কন্টেন্ট ইনক্লুড করার সুযোগ পাওয়া যায়। এতে বিভিন্ন ইউজার ইনপুট বা ডেটাবেস থেকে ডেটা অ্যাক্সেস করা সহজ হয়ে যায়।
এক্সএইচটিএমএল (XHTML) ডকুমেন্টে ইন্টারনাল স্ট্রাকচার এবং টেম্পলেট ইনক্লুড করা খুবই গুরুত্বপূর্ণ একটি বিষয়, বিশেষত যখন আপনি ওয়েব ডেভেলপমেন্টের মধ্যে পুনঃব্যবহারযোগ্য কোড এবং স্ট্রাকচার চান। <head> এবং <body> ট্যাগের মাধ্যমে ডকুমেন্টের কাঠামো তৈরি করা যায়, এবং iframe, সার্ভার-সাইড স্ক্রিপ্টিং, অথবা JavaScript ব্যবহার করে আপনি সহজেই টেম্পলেট ইনক্লুড করতে পারেন। এই পদ্ধতিগুলো আপনার ডেভেলপমেন্ট প্রক্রিয়াকে আরো কার্যকর এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।
