XHTML-এ কাস্টম টেম্পলেট তৈরি করার মাধ্যমে আপনি ওয়েব পেজের জন্য একটি নির্দিষ্ট গঠন বা স্ট্রাকচার তৈরি করতে পারেন, যা পুনঃব্যবহারযোগ্য এবং সহজে কাস্টমাইজ করা যায়। একটি কাস্টম টেম্পলেট ওয়েবসাইটের ডিজাইন, লেআউট এবং কন্টেন্টের ধারাবাহিকতা বজায় রাখতে সাহায্য করে। এখানে, আমরা কিভাবে একটি সাধারণ XHTML কাস্টম টেম্পলেট তৈরি করা যায়, তা দেখব।
১. কাস্টম টেম্পলেটের মৌলিক গঠন
একটি সাধারণ XHTML কাস্টম টেম্পলেট তৈরি করতে, আপনাকে প্রথমে টেম্পলেটের সাধারণ গঠনটি তৈরি করতে হবে, যাতে রয়েছে:
- ডকুমেন্টের
DOCTYPEডিক্লেয়ারেশন <html>ট্যাগ এবং এরxmlnsঅ্যাট্রিবিউট<head>ট্যাগের মধ্যে মেটা ইনফরমেশন, CSS এবং স্ক্রিপ্ট লিংক<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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>কাস্টম টেম্পলেট</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<h1>স্বাগতম আমার ওয়েবসাইটে</h1>
<ul id="navigation">
<li><a href="#home">হোম</a></li>
<li><a href="#about">আমাদের সম্পর্কে</a></li>
<li><a href="#services">সেবা</a></li>
<li><a href="#contact">যোগাযোগ</a></li>
</ul>
</div>
<div id="content">
<h2>আমাদের সেবা</h2>
<p>এখানে সেবার বিবরণ দেয়া হবে।</p>
</div>
<div id="footer">
<p>© 2024 আমার ওয়েবসাইট</p>
</div>
</body>
</html>
এই কাস্টম টেম্পলেটটি একটি মৌলিক কাঠামো প্রদান করে, যেখানে একটি হেডার, নেভিগেশন বার, কন্টেন্ট এরিয়া এবং ফুটার রয়েছে।
২. কাস্টম টেম্পলেটের উপাদানসমূহ
২.১ DOCTYPE ডিক্লেয়ারেশন
XHTML ডকুমেন্টের প্রথম লাইনে DOCTYPE ডিক্লেয়ারেশন থাকা আবশ্যক। এটি ব্রাউজারকে জানায় যে এই ডকুমেন্টটি XHTML এবং W3C স্ট্যান্ডার্ড অনুসরণ করে।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
২.২ <html> ট্যাগ এবং নামস্পেস
XHTML ডকুমেন্টের শুরুতে <html> ট্যাগে xmlns অ্যাট্রিবিউট থাকা জরুরি, যা XML নামস্পেস নির্ধারণ করে।
<html xmlns="http://www.w3.org/1999/xhtml">
২.৩ <head> সেকশন
এটি ডকুমেন্টের মেটা তথ্য, স্টাইলশিট, স্ক্রিপ্ট ফাইল এবং অন্যান্য লিংক ধারণ করে।
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>কাস্টম টেম্পলেট</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
২.৪ <body> সেকশন
এটি পেজের প্রধান কন্টেন্ট ধারণ করে। এর মধ্যে আপনি বিভিন্ন সেকশন যেমন হেডার, ফুটার, কন্টেন্ট এরিয়া, ইত্যাদি যুক্ত করতে পারেন।
<body>
<div id="header">
<h1>স্বাগতম আমার ওয়েবসাইটে</h1>
<ul id="navigation">
<li><a href="#home">হোম</a></li>
<li><a href="#about">আমাদের সম্পর্কে</a></li>
<li><a href="#services">সেবা</a></li>
<li><a href="#contact">যোগাযোগ</a></li>
</ul>
</div>
এখানে, <header> ট্যাগের মধ্যে ওয়েবসাইটের নাম এবং নেভিগেশন বার দেওয়া হয়েছে, যা পেজের শীর্ষে অবস্থান করবে।
২.৫ <footer> সেকশন
ফুটার সেকশনে সাধারণত কপিরাইট তথ্য, লিঙ্ক, বা অন্যান্য ছোট তথ্য প্রদর্শন করা হয়।
<div id="footer">
<p>© 2024 আমার ওয়েবসাইট</p>
</div>
এটি পেজের নিচে অবস্থান করবে এবং সাধারণত ওয়েবসাইটের পেটেন্ট বা কপিরাইট তথ্য এখানে থাকে।
৩. কাস্টম টেম্পলেটের জন্য CSS স্টাইলিং
XHTML টেম্পলেট তৈরি করার পর, এর চেহারা পরিবর্তন করতে CSS (Cascading Style Sheets) ব্যবহার করা হয়। CSS-এর মাধ্যমে আপনি বিভিন্ন ট্যাগ, ক্লাস, বা আইডির জন্য ডিজাইন স্টাইল নির্ধারণ করতে পারবেন।
উদাহরণ:
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
#header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
#navigation {
list-style-type: none;
padding: 0;
}
#navigation li {
display: inline;
margin-right: 10px;
}
#navigation a {
color: white;
text-decoration: none;
}
#content {
padding: 20px;
background-color: white;
margin: 20px;
}
#footer {
text-align: center;
background-color: #333;
color: white;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
এখানে, style.css ফাইলে ওয়েব পেজের বিভিন্ন এলিমেন্টের স্টাইল নির্ধারণ করা হয়েছে। #header, #footer, এবং #content এলিমেন্টগুলোর জন্য বিভিন্ন ডিজাইন নির্ধারণ করা হয়েছে।
৪. কাস্টম টেম্পলেটের ব্যবহার
একবার কাস্টম টেম্পলেট তৈরি হলে, আপনি এটি বিভিন্ন পেজে পুনঃব্যবহার করতে পারেন। নতুন পেজ তৈরি করতে হলে, আপনাকে শুধুমাত্র কন্টেন্ট পরিবর্তন করতে হবে, যেমন:
<body>
<div id="header">
<h1>আমাদের সেবা</h1>
</div>
<div id="content">
<h2>আমরা কী করি?</h2>
<p>আমরা ওয়েব ডিজাইন, ডেভেলপমেন্ট এবং মার্কেটিং সেবা প্রদান করি।</p>
</div>
<div id="footer">
<p>© 2024 আমাদের সেবা</p>
</div>
</body>
এখানে, কন্টেন্টের অংশে কেবল ওয়েবসাইটের সেবা সম্পর্কিত তথ্য পরিবর্তন করা হয়েছে, আর অন্যান্য স্ট্রাকচার যেমন হেডার ও ফুটার অপরিবর্তিত রয়েছে।
XHTML-এ কাস্টম টেম্পলেট তৈরি করা একটি শক্তিশালী পদ্ধতি যা আপনাকে একটি ওয়েবসাইটের গঠন এবং ডিজাইন নির্দিষ্ট করতে সাহায্য করে। একটি কাস্টম টেম্পলেটের মধ্যে আপনি হেডার, নেভিগেশন বার, কন্টেন্ট এরিয়া এবং ফুটার সহ অন্যান্য গুরুত্বপূর্ণ উপাদান রাখতে পারেন। CSS-এর মাধ্যমে আপনি এই উপাদানগুলোর স্টাইল এবং লেআউট কাস্টমাইজ করতে পারেন। একটি ভালো কাস্টম টেম্পলেট ওয়েবসাইটের উন্নয়ন প্রক্রিয়া সহজতর এবং দ্রুত করতে সহায়ক।
Read more
