XHTML একটি ওয়েব ডেভেলপমেন্ট ভাষা, যা HTML-এর উপর ভিত্তি করে XML-এর নিয়ম অনুসরণ করে। XHTML ব্যবহার শুরু করার জন্য বিশেষ কোনো ইনস্টলেশন প্রক্রিয়া প্রয়োজন হয় না, কারণ এটি সাধারণ HTML কোডের মতোই লেখা হয় এবং সাধারণভাবে ওয়েব সার্ভার বা ব্রাউজারে রান হয়। তবে, XHTML ডকুমেন্ট তৈরি করার জন্য কিছু মৌলিক প্রস্তুতি এবং কোডিং নিয়ম রয়েছে, যা এই টিউটোরিয়ালে আলোচনা করা হবে।
১. XHTML ডকুমেন্ট তৈরির জন্য প্রয়োজনীয় সফটওয়্যার
XHTML কোড লেখার জন্য আপনাকে কোনো বিশেষ সফটওয়্যার ইনস্টল করতে হবে না, তবে নিচে কিছু জনপ্রিয় কোড এডিটর দেওয়া হলো, যা আপনাকে XHTML কোডিংয়ে সহায়তা করতে পারে:
কোড এডিটর:
- Visual Studio Code (VS Code)
- Sublime Text
- Notepad++
- Atom
- Brackets
এগুলোর মধ্যে VS Code এবং Sublime Text খুবই জনপ্রিয় এবং উন্নত বৈশিষ্ট্যের জন্য ব্যবহৃত হয়।
২. XHTML ডকুমেন্টের বেসিক গঠন
XHTML ডকুমেন্ট তৈরি করার জন্য আপনাকে কিছু মৌলিক গঠন অনুসরণ করতে হবে। XHTML ডকুমেন্ট একটি স্ট্রিক্ট এবং সঠিকভাবে গঠিত কোডের সাহায্যে তৈরি হয়, যেটি XML এর নিয়ম অনুসরণ করে। একটি সাধারণ 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>XHTML Example</title>
</head>
<body>
<h1>Welcome to XHTML!</h1>
<p>This is a simple XHTML document.</p>
<br />
</body>
</html>
কোডের ব্যাখ্যা:
<!DOCTYPE html>: XHTML ডকুমেন্টের টাইপ ডিক্লেয়ারেশন, যা ব্রাউজারকে জানায় যে এটি একটি XHTML ডকুমেন্ট।<html xmlns="http://www.w3.org/1999/xhtml">: XHTML ডকুমেন্টের শুরুর ট্যাগ, যা XML-এর নামস্পেস ব্যবহার করে।<meta charset="UTF-8" />: ডকুমেন্টের চরিত্র এনকোডিং সেট করে।<br />: XHTML-এ<br>ট্যাগকে অবশ্যই বন্ধন সহ ব্যবহার করতে হবে (যেমন<br />)।
৩. কোডিং নিয়মাবলী
XHTML ডকুমেন্টের জন্য কিছু গুরুত্বপূর্ণ কোডিং নিয়মাবলী রয়েছে, যেগুলো মেনে চলা আবশ্যক:
- কেস সেন্সিটিভিটি: সব ট্যাগ এবং অ্যাট্রিবিউট নাম ছোট হাতের অক্ষরে লিখতে হবে। যেমন,
<html>,<head>,<body>। - সঠিক ট্যাগ বন্ধন: প্রতিটি ট্যাগ সঠিকভাবে বন্ধ করতে হবে। যেমন
<p>...</p>,<div>...</div>। - অ্যাট্রিবিউটের কোটেশন: সব অ্যাট্রিবিউট যেমন
href,src,altকোটেশনে রাখতে হবে। যেমন,<img src="image.jpg" alt="Description" />। - একক ট্যাগের বন্ধন: একক ট্যাগগুলোর জন্যও বন্ধন ব্যবহার করতে হবে, যেমন
<img />,<br />,<hr />।
৪. ব্রাউজারে XHTML ডকুমেন্ট পরীক্ষা করা
XHTML ডকুমেন্ট তৈরি করার পরে, আপনি ব্রাউজারে এটি পরীক্ষা করতে পারবেন। ব্রাউজারে দেখতে, আপনার তৈরি করা XHTML ডকুমেন্ট ফাইলের এক্সটেনশন .xhtml বা .html হতে পারে। নিচে কিছু পদক্ষেপ দেওয়া হলো:
- ফাইল তৈরি করুন: একটি নতুন ফাইল তৈরি করুন, যেমন
index.xhtmlবাindex.html। - কোড লিখুন: আপনার পছন্দের কোড এডিটর ব্যবহার করে XHTML কোড লিখুন।
- ফাইল সংরক্ষণ করুন: ফাইলটি
.xhtmlবা.htmlএক্সটেনশন দিয়ে সংরক্ষণ করুন। - ব্রাউজারে খোলার জন্য: ফাইলটি ডাবল ক্লিক করুন অথবা ব্রাউজারে
File > Openমেনু থেকে খুলুন।
৫. ওয়েব সার্ভার ব্যবহার (ঐচ্ছিক)
যদি আপনি ওয়েব সার্ভারে ডিপ্লয় করতে চান বা ডাইনামিক কনটেন্টের জন্য XHTML ব্যবহার করতে চান, তবে একটি ওয়েব সার্ভার (যেমন Apache, Nginx) ইনস্টল করতে হতে পারে। সাধারণভাবে, যদি আপনি শুধুমাত্র লোকাল কোডিং এবং পরীক্ষা করতে চান, তবে এটি প্রয়োজনীয় নয়।
XHTML ব্যবহার শুরু করার জন্য বিশেষ কোনো ইনস্টলেশন প্রয়োজন হয় না, তবে কোডিংয়ের জন্য কিছু জনপ্রিয় কোড এডিটর ব্যবহার করা যেতে পারে। XHTML ডকুমেন্টের গঠন ও কোডিং নিয়ম মেনে চললে, এটি HTML-এর চেয়ে আরও নির্ভুল এবং শক্তিশালী ওয়েব ডেভেলপমেন্ট ভাষা হিসেবে কাজ করবে। ডকুমেন্টের কোড সঠিকভাবে গঠন করে, আপনি XHTML ডকুমেন্ট তৈরি করতে পারবেন এবং সহজেই এটি ওয়েব ব্রাউজারে পরীক্ষা করতে পারবেন।
XHTML ডকুমেন্ট তৈরি করতে বা ওয়েব ডেভেলপমেন্টের জন্য কিছু নির্দিষ্ট টুলস এবং সফটওয়্যার প্রয়োজন হয়। এই টুলগুলো আপনার কোডিং, টেস্টিং এবং ডেভেলপমেন্ট প্রক্রিয়াকে আরও কার্যকর এবং সহজ করে তোলে। নিচে প্রয়োজনীয় কিছু টুলস এবং সফটওয়্যার তুলে ধরা হলো:
১. কোড এডিটর
১.1 Visual Studio Code (VS Code)
Visual Studio Code একটি জনপ্রিয় এবং শক্তিশালী কোড এডিটর, যা বিশেষভাবে ওয়েব ডেভেলপমেন্টের জন্য উপযোগী। এটি বিভিন্ন প্লাগিন এবং এক্সটেনশনের মাধ্যমে XHTML, HTML, CSS, JavaScript ইত্যাদি ভাষার জন্য সমর্থন প্রদান করে।
বৈশিষ্ট্য:
- সিনট্যাক্স হাইলাইটিং এবং অটোকমপ্লিট
- ইন্টিগ্রেটেড টার্মিনাল এবং ডিবাগিং
- এক্সটেনশনের মাধ্যমে আরো ফিচার যোগ করা যায়
ডাউনলোড: Visual Studio Code
১.2 Sublime Text
Sublime Text একটি দ্রুত এবং শক্তিশালী কোড এডিটর। এটি সোজা এবং সহজ ব্যবহারযোগ্য, বিশেষ করে ছোট প্রকল্পগুলোর জন্য। XHTML, HTML, CSS, JavaScript ইত্যাদি কোড লেখার জন্য এটি বেশ জনপ্রিয়।
বৈশিষ্ট্য:
- দ্রুত এবং প্রাথমিক কোডিং জন্য উপযুক্ত
- মাল্টিপল কার্সর এবং সিম্বোল হাইলাইটিং
- প্লাগিন সাপোর্ট
ডাউনলোড: Sublime Text
১.3 Notepad++
Notepad++ একটি লাইটওয়েট এবং ফ্রি কোড এডিটর, যা ওয়েব ডেভেলপমেন্টে ব্যবহার করা হয়। এটি সাধারণ HTML, XHTML, CSS এবং JavaScript এর জন্য অত্যন্ত উপযোগী।
বৈশিষ্ট্য:
- ফ্রি এবং ওপেন সোর্স
- সিম্পল ইউজার ইন্টারফেস
- সিনট্যাক্স হাইলাইটিং এবং কোড ফোল্ডিং
ডাউনলোড: Notepad++
২. ওয়েব ব্রাউজার
২.1 Google Chrome
Google Chrome একটি অত্যন্ত জনপ্রিয় ওয়েব ব্রাউজার, যা ওয়েব ডেভেলপমেন্টের জন্য অনেক উন্নত টুল এবং ফিচার প্রদান করে। এটি ডেভেলপার টুলস (DevTools) এর মাধ্যমে সহজে ওয়েব পেজের ডিবাগিং এবং টেস্টিং করা যায়।
বৈশিষ্ট্য:
- DevTools দিয়ে HTML, CSS, JavaScript কোড পরীক্ষা করা
- ব্রাউজার রেন্ডারিং পরীক্ষা এবং ট্রাবলশুটিং
- এক্সটেনশনের মাধ্যমে নতুন ফিচার যুক্ত করা
ডাউনলোড: Google Chrome
২.2 Mozilla Firefox
Mozilla Firefox আরেকটি শক্তিশালী ওয়েব ব্রাউজার, যা HTML এবং XHTML ডকুমেন্টের জন্য বিশেষভাবে সহায়ক। Firefox-এর ডেভেলপার টুলস ব্যবহার করে আপনি সহজেই কোড টেস্ট এবং ডিবাগ করতে পারবেন।
বৈশিষ্ট্য:
- ব্রাউজার ডিবাগিং এবং টেস্টিং
- এক্সটেনশন এবং ডেভেলপার টুলস সাপোর্ট
- ওয়েব স্ট্যান্ডার্ডের সাথে সামঞ্জস্যপূর্ণ
ডাউনলোড: Mozilla Firefox
৩. ওয়েব সার্ভার
৩.1 XAMPP
XAMPP একটি জনপ্রিয় ওপেন সোর্স ওয়েব সার্ভার প্যাকেজ, যা Apache, MySQL, PHP, এবং Perl অন্তর্ভুক্ত করে। এটি ওয়েব ডেভেলপমেন্টের জন্য একটি সহজ এবং দ্রুত সার্ভার পরিবেশ প্রদান করে।
বৈশিষ্ট্য:
- Apache ওয়েব সার্ভার ইনস্টল করা থাকে
- ডাটাবেসের জন্য MySQL সাপোর্ট
- PHP এবং Perl ভাষার সমর্থন
ডাউনলোড: XAMPP
৩.2 WampServer
WampServer একটি ওয়েব ডেভেলপমেন্ট প্ল্যাটফর্ম যা Windows-এর জন্য ডিজাইন করা। এটি Apache, MySQL, এবং PHP ইন্সটল করে দেয়, যাতে আপনি একটি লোকাল সার্ভারে ওয়েব ডেভেলপমেন্ট শুরু করতে পারেন।
বৈশিষ্ট্য:
- Windows-এ সহজভাবে ওয়েব সার্ভার সেটআপ
- Apache, MySQL এবং PHP সমর্থন
- লক্যাল সার্ভারে কোড পরীক্ষা করা
ডাউনলোড: WampServer
৪. ওয়েব স্ট্যান্ডার্ডস চেকার
৪.1 W3C Markup Validation Service
W3C Markup Validation Service একটি অনলাইন টুল, যা HTML এবং XHTML ডকুমেন্টের স্ট্যান্ডার্ড পরীক্ষা করে। এটি নিশ্চিত করে যে আপনার ডকুমেন্ট W3C-এর নির্ধারিত নিয়ম অনুসরণ করছে কি না।
বৈশিষ্ট্য:
- HTML, XHTML, এবং অন্যান্য মার্কআপ ভাষার জন্য কোড ভ্যালিডেশন
- কোডের ত্রুটি এবং সতর্কতা প্রদর্শন
- ওয়েব স্ট্যান্ডার্ড চেক
ব্যবহার: W3C Validator
৪.2 HTMLHint
HTMLHint একটি ওপেন সোর্স লিন্টার টুল, যা HTML এবং XHTML কোডের জন্য সঠিকতা এবং মান পরীক্ষা করে। এটি কোড লেখার সময় ত্রুটি ও সতর্কতা প্রদর্শন করে।
বৈশিষ্ট্য:
- কোডিং সঠিকতা পরীক্ষা করা
- HTML এবং XHTML কোডের ত্রুটি চিহ্নিত করা
- কনফিগারেবল সেটিংস
ডাউনলোড: HTMLHint
৫. ডিবাগিং এবং টেস্টিং টুলস
৫.1 Firebug (Firefox)
Firebug একটি Firefox এক্সটেনশন, যা ওয়েব ডেভেলপারদের জন্য বিভিন্ন ডিবাগিং এবং টেস্টিং টুল প্রদান করে। এটি HTML, CSS, JavaScript এবং অন্যান্য ওয়েব প্রযুক্তি পরীক্ষা করতে সহায়তা করে।
বৈশিষ্ট্য:
- HTML, CSS, এবং JavaScript ডিবাগিং
- লাইভ টেস্টিং এবং কোডের পরিবর্তন
- DOM বিশ্লেষণ
ব্যবহার: Firebug
৫.2 Chrome DevTools
Chrome DevTools গুগল ক্রোম ব্রাউজারে বিল্ট-ইন ডেভেলপার টুলস। এটি HTML, CSS, JavaScript কোডের ত্রুটি সনাক্তকরণ এবং ডিবাগিংয়ের জন্য ব্যবহৃত হয়।
বৈশিষ্ট্য:
- HTML, CSS এবং JavaScript পরীক্ষা ও ডিবাগ
- নেটওয়ার্ক রিকোয়েস্ট, পারফরম্যান্স অ্যানালাইসিস
- DOM এবং স্টাইল চেঞ্জের জন্য সরঞ্জাম
ব্যবহার: Chrome DevTools
XHTML ডকুমেন্ট তৈরি, টেস্টিং, এবং ডিবাগিং-এর জন্য বিভিন্ন শক্তিশালী টুলস এবং সফটওয়্যার রয়েছে। কোড এডিটর, ওয়েব ব্রাউজার, সার্ভার, স্ট্যান্ডার্ড চেকার, এবং ডিবাগিং টুলস এগুলোর মধ্যে কিছু। এগুলো ব্যবহার করে আপনি সহজে এবং দ্রুত XHTML ডকুমেন্ট তৈরি, টেস্ট এবং ডিবাগ করতে পারবেন।
XHTML (Extensible Hypertext Markup Language) একটি ওয়েব ডকুমেন্ট তৈরি করার জন্য HTML এর পরিবর্তে XML এর নিয়ম অনুসরণ করে। XHTML ডকুমেন্ট তৈরি করার সময়, আপনাকে কিছু নির্দিষ্ট গঠন এবং কোডিং নিয়ম অনুসরণ করতে হবে। এখানে আমরা একটি মৌলিক XHTML ডকুমেন্ট তৈরি করার পুরো প্রক্রিয়া ব্যাখ্যা করব।
১. XHTML ডকুমেন্টের মৌলিক গঠন
একটি সাধারণ XHTML ডকুমেন্টে কয়েকটি মৌলিক অংশ থাকে। এই অংশগুলো যথাযথভাবে গঠন করা উচিত যাতে তা XML-এর নিয়ম অনুসরণ করে। নিচে একটি মৌলিক 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 First XHTML Document</title>
</head>
<body>
<h1>Welcome to XHTML</h1>
<p>This is a simple XHTML document.</p>
<br />
<img src="image.jpg" alt="Sample Image" />
</body>
</html>
২. ডকুমেন্টের প্রধান উপাদান
২.1 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">
২.2 HTML ট্যাগ
<html> ট্যাগটি ডকুমেন্টের মূল উপাদান এবং এটি XML নামস্পেস (xmlns) নির্দেশ করে, যা XHTML ডকুমেন্টের বৈধতা নিশ্চিত করে। এই ট্যাগের মধ্যে পুরো ডকুমেন্টের কনটেন্ট থাকে।
<html xmlns="http://www.w3.org/1999/xhtml">
২.3 Head এবং Meta ট্যাগ
<head> ট্যাগের মধ্যে ডকুমেন্টের মেটাডেটা থাকে, যেমন শিরোনাম এবং চরিত্র এনকোডিং।
<head>
<meta charset="UTF-8" />
<title>My First XHTML Document</title>
</head>
<meta charset="UTF-8" />ট্যাগটি চরিত্র এনকোডিং নির্দেশ করে।<title>ট্যাগে ডকুমেন্টের শিরোনাম রাখা হয়, যা ব্রাউজারের ট্যাবে দেখানো হয়।
২.4 Body ট্যাগ
<body> ট্যাগের মধ্যে ওয়েব পেজের প্রধান কনটেন্ট থাকে। এখানে বিভিন্ন HTML এলিমেন্ট যেমন হেডিং, প্যারাগ্রাফ, ছবি, লিঙ্ক ইত্যাদি রাখা হয়।
<body>
<h1>Welcome to XHTML</h1>
<p>This is a simple XHTML document.</p>
<br />
<img src="image.jpg" alt="Sample Image" />
</body>
<h1>: একটি হেডিং ট্যাগ, যা বড় আকারে টেক্সট প্রদর্শন করে।<p>: প্যারাগ্রাফ ট্যাগ, যেটি সাধারণ টেক্সট প্রদর্শন করে।<br />: একটি লাইনের ব্রেক ট্যাগ, যা লাইনের মধ্যে ব্যবধান তৈরি করে। XHTML-এ এটি বন্ধনসহ ব্যবহার করতে হয়, যেমন<br />।<img />: একটি ছবি ট্যাগ, যেটিতেsrc(ছবির উৎস) এবংalt(ছবির বর্ণনা) অ্যাট্রিবিউট থাকে।
৩. XHTML ডকুমেন্টে কিছু গুরুত্বপূর্ণ নিয়ম
৩.1 কেস সেন্সিটিভিটি
XHTML-এর মধ্যে সব ট্যাগ এবং অ্যাট্রিবিউট নাম ছোট হাতের অক্ষরে থাকতে হবে। যেমন:
<html xmlns="http://www.w3.org/1999/xhtml">
৩.2 ট্যাগ বন্ধন
XHTML-এ সব ট্যাগকে সঠিকভাবে বন্ধ করতে হবে। একক ট্যাগগুলোও যেমন <br />, <img /> বন্ধন সহ ব্যবহার করতে হবে।
৩.3 অ্যাট্রিবিউট কোটেশন
এটা নিশ্চিত করতে হবে যে, সব অ্যাট্রিবিউটের মান কোটেশনে থাকবে, যেমন:
<img src="image.jpg" alt="Sample Image" />
৩.4 স্ট্রিক্ট কোডিং
XHTML ডকুমেন্টে কোডিং স্টাইল এবং গঠন খুবই স্ট্রিক্ট। প্রতিটি ট্যাগ সঠিকভাবে বন্ধ হতে হবে এবং একক ট্যাগগুলোকেও (যেমন <img>, <br>) বন্ধন সহ ব্যবহার করতে হবে।
৪. কোডের উদাহরণ: একটি পূর্ণাঙ্গ XHTML ডকুমেন্ট
এখানে একটি সম্পূর্ণ 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 First XHTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a basic XHTML document that demonstrates the structure and syntax of XHTML.</p>
<h2>Key Features of XHTML</h2>
<ul>
<li>Case-sensitive tags</li>
<li>Strict syntax rules</li>
<li>XML-based structure</li>
</ul>
<p>Visit <a href="https://www.w3.org" target="_blank">W3C</a> for more information on XHTML.</p>
<br />
<img src="images/sample.jpg" alt="Sample Image" />
</body>
</html>
৫. XHTML ডকুমেন্ট ব্রাউজারে পরীক্ষা করা
ডকুমেন্ট তৈরি করার পর, এটি ব্রাউজারে পরীক্ষা করতে হবে। এর জন্য নিম্নলিখিত পদক্ষেপগুলো অনুসরণ করুন:
- ফাইল তৈরি করুন: একটি নতুন ফাইল তৈরি করুন এবং
.xhtmlএক্সটেনশন দিন, যেমনindex.xhtml। - কোড লিখুন: আপনার পছন্দের কোড এডিটর (যেমন VS Code, Sublime Text) ব্যবহার করে XHTML কোড লিখুন।
- ফাইল সংরক্ষণ করুন: ফাইলটি
.xhtmlবা.htmlএক্সটেনশন দিয়ে সংরক্ষণ করুন। - ব্রাউজারে পরীক্ষা করুন: ব্রাউজারে ফাইলটি ওপেন করুন এবং দেখুন কিভাবে এটি প্রদর্শিত হয়।
XHTML ডকুমেন্ট তৈরি করার জন্য এই গঠন এবং নিয়মগুলো মেনে চললে আপনি একটি সঠিক এবং কার্যকরী XHTML পেজ তৈরি করতে পারবেন।
XHTML ডকুমেন্ট তৈরি করার সময় .xhtml এক্সটেনশন ব্যবহার করা অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি ব্রাউজার এবং সার্ভারকে জানায় যে এটি একটি XHTML ডকুমেন্ট। .xhtml এক্সটেনশন ব্যবহারের মাধ্যমে আপনি নিশ্চিত করেন যে আপনার ডকুমেন্টটি HTML-এর পরিবর্তে XML-এর নিয়ম অনুসরণ করছে।
১. .xhtml এক্সটেনশন কেন ব্যবহার করবেন?
১.1 XML সঙ্গত
XHTML HTML-এর মতোই একটি মার্কআপ ভাষা হলেও এটি XML এর গঠন অনুসরণ করে, যার মানে হলো সমস্ত ট্যাগকে সঠিকভাবে বন্ধ করতে হবে এবং অন্যান্য XML সম্পর্কিত নিয়ম মেনে চলতে হবে। .xhtml এক্সটেনশনটি এই পার্থক্যটি স্পষ্ট করে এবং ডকুমেন্টটির XML বৈশিষ্ট্য প্রদর্শন করে।
১.2 ওয়েব স্ট্যান্ডার্ডস
XHTML ব্রাউজার এবং সার্ভারের সাথে সঠিকভাবে যোগাযোগ করার জন্য XML-ভিত্তিক কাঠামো ব্যবহার করে। .xhtml এক্সটেনশন ব্যবহার করলে, আপনার ডকুমেন্টটি ওয়েব স্ট্যান্ডার্ডসের সাথে সামঞ্জস্যপূর্ণ থাকে।
১.3 ডকুমেন্ট বৈধতা
যেহেতু XHTML একটি XML-ভিত্তিক ভাষা, .xhtml এক্সটেনশনটি ডকুমেন্টের বৈধতা নিশ্চিত করতে সহায়তা করে। এটি W3C-এর XHTML ডিটিএস (DTD) অনুযায়ী ডকুমেন্টের কনফর্মিটি পরীক্ষা করতে সহায়ক।
২. .xhtml এক্সটেনশন ব্যবহার করার নিয়ম
২.1 ডকুমেন্ট ফাইলের নামের সাথে .xhtml যোগ করা
যখন আপনি একটি XHTML ডকুমেন্ট তৈরি করেন, তখন ফাইলটির নামের শেষে .xhtml এক্সটেনশন যোগ করতে হবে। উদাহরণস্বরূপ:
index.xhtmlabout_us.xhtmlcontact_page.xhtml
এটি ব্রাউজার এবং সার্ভারকে জানায় যে এটি একটি XHTML ফাইল এবং তাদের এই ফাইলটি XML সাপোর্ট সহ রেন্ডার করতে হবে।
২.2 ব্রাউজারে ফাইল খুলতে .xhtml এক্সটেনশন ব্যবহার
যখন আপনি .xhtml এক্সটেনশনের ফাইল ব্রাউজারে ওপেন করেন, ব্রাউজারটি ফাইলটির মধ্যে থাকা XML নিয়ম অনুসরণ করে রেন্ডার করে। আপনি চাইলে .html এক্সটেনশন ব্যবহার করেও XHTML ফাইলটি ব্রাউজারে দেখতে পারেন, তবে .xhtml এক্সটেনশনটি সঠিকভাবে ডকুমেন্টের পরিচয় দেয় এবং XML-এর গঠন অনুসরণ নিশ্চিত করে।
৩. .xhtml এবং .html এক্সটেনশনের মধ্যে পার্থক্য
৩.1 HTML ফাইল (.html)
.htmlফাইল সাধারণত HTML ডকুমেন্টের জন্য ব্যবহৃত হয়।- HTML-এর মধ্যে XML-এর কঠোর নিয়মগুলো অনুসরণ করার প্রয়োজন হয় না।
- ব্রাউজার HTML ফাইলগুলোকে সাধারণত গ্রহণ করে, তবে এটি সঠিকভাবে গঠিত না হলেও সেগুলো রেন্ডার করে।
৩.2 XHTML ফাইল (.xhtml)
.xhtmlফাইলের মধ্যে XML-এর গঠন এবং নিয়ম মেনে চলতে হয়।- এতে সমস্ত ট্যাগ সঠিকভাবে বন্ধ করা এবং কেস সেনসিটিভিটি রক্ষা করা আবশ্যক।
.xhtmlএক্সটেনশন ব্যবহার করলে ব্রাউজার XHTML ডকুমেন্টের স্ট্রিক্ট গঠন অনুসরণ করে রেন্ডার করে।
৪. উদাহরণ
৪.1 XHTML ফাইল তৈরি এবং .xhtml এক্সটেনশন সংরক্ষণ
- ফাইল তৈরি করুন: একটি নতুন ফাইল তৈরি করুন এবং এটি
.xhtmlএক্সটেনশন দিয়ে সংরক্ষণ করুন, যেমনindex.xhtml। - কোড লিখুন: XHTML কোড লিখুন এবং সেই ফাইলটি
.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>XHTML Example</title>
</head>
<body>
<h1>Welcome to My XHTML Page</h1>
<p>This is a simple XHTML document using the .xhtml extension.</p>
</body>
</html>
- ফাইল ব্রাউজারে পরীক্ষা করুন: ফাইলটি
.xhtmlএক্সটেনশন সহ ব্রাউজারে ওপেন করুন। আপনি যদি Chrome বা Firefox ব্যবহার করেন, তাহলে এটি XML সঠিকভাবে রেন্ডার করবে।
.xhtml এক্সটেনশন ব্যবহার করলে আপনি একটি XHTML ডকুমেন্টের সঠিক গঠন এবং XML-এর নিয়মগুলো নিশ্চিত করেন। এটি ওয়েব স্ট্যান্ডার্ডস অনুযায়ী ডকুমেন্টের বৈধতা এবং রেন্ডারিংয়ের মান বজায় রাখে। .html এক্সটেনশন ব্যবহারের তুলনায় .xhtml এক্সটেনশন ব্যবহার করলে XHTML এর সঠিক গঠন এবং XML-এর নিয়মগুলো অনুসরণ করতে সহায়ক হয়।
একটি XHTML ডকুমেন্ট তৈরি করা এবং সেটি ব্রাউজারে প্রদর্শন করা একটি সহজ প্রক্রিয়া, তবে এটি HTML এর থেকে কিছুটা আলাদা। XHTML কোডের গঠন XML-এর নিয়ম অনুসরণ করে এবং এতে কিছু নির্দিষ্ট নিয়ম মেনে চলতে হয়। এখানে প্রথম XHTML পৃষ্ঠা তৈরি করার প্রক্রিয়া দেখানো হলো।
১. প্রথম XHTML পৃষ্ঠা তৈরি
নিচে একটি মৌলিক 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 First XHTML Page</title>
</head>
<body>
<h1>Welcome to My XHTML Page</h1>
<p>This is my first XHTML page. XHTML is an XML-based version of HTML.</p>
<br />
<a href="https://www.w3.org" target="_blank">Visit W3C for more information.</a>
</body>
</html>
২. XHTML পৃষ্ঠা তৈরি করার ধাপসমূহ
২.1 DOCTYPE ডিক্লেয়ারেশন
প্রথমে DOCTYPE ডিক্লেয়ারেশনটি রাখতে হবে, যা XHTML ডকুমেন্টের গঠন এবং বৈধতা নির্ধারণ করে। এটি ব্রাউজারকে জানায় যে আপনি XHTML ব্যবহার করছেন।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
২.2 html ট্যাগ এবং XML নামস্পেস
XHTML ডকুমেন্টের মধ্যে <html> ট্যাগ ব্যবহার করতে হবে, এবং এর মধ্যে xmlns (XML namespace) অ্যাট্রিবিউটটি ব্যবহার করা উচিত।
<html xmlns="http://www.w3.org/1999/xhtml">
২.3 head ট্যাগ
এটি মেটাডেটা (যেমন শিরোনাম এবং চরিত্র এনকোডিং) ধারণ করে। এখানে meta ট্যাগ ব্যবহার করে UTF-8 এনকোডিং নির্ধারণ করা হয় এবং <title> ট্যাগে পৃষ্ঠার শিরোনাম দেওয়া হয়।
<head>
<meta charset="UTF-8" />
<title>My First XHTML Page</title>
</head>
২.4 body ট্যাগ
এটি মূল কনটেন্ট ধারণ করে। এখানে আমরা একটি হেডিং, প্যারাগ্রাফ, লিঙ্ক এবং ব্রেক ট্যাগ (line break) ব্যবহার করেছি।
<body>
<h1>Welcome to My XHTML Page</h1>
<p>This is my first XHTML page. XHTML is an XML-based version of HTML.</p>
<br />
<a href="https://www.w3.org" target="_blank">Visit W3C for more information.</a>
</body>
৩. XHTML ফাইল সংরক্ষণ
- ফাইল তৈরি করুন: একটি নতুন টেক্সট ফাইল তৈরি করুন এবং
.xhtmlএক্সটেনশন দিয়ে সংরক্ষণ করুন। যেমন:index.xhtml। - কোড লিখুন: উপরের উদাহরণের কোডটি আপনার পছন্দের কোড এডিটরে (যেমন Visual Studio Code, Sublime Text) লিখুন।
- ফাইল সংরক্ষণ করুন: ফাইলটি
.xhtmlএক্সটেনশন দিয়ে সংরক্ষণ করুন, যেমনindex.xhtml।
৪. ব্রাউজারে XHTML পৃষ্ঠা দেখানো
এখন আপনি ফাইলটি ব্রাউজারে ওপেন করতে পারেন:
- ফাইলটি ব্রাউজারে খুলুন: আপনি যেই ব্রাউজারটি ব্যবহার করেন (Chrome, Firefox, Edge ইত্যাদি), সেখানে
index.xhtmlফাইলটি ওপেন করুন। - ফলাফল দেখুন: ব্রাউজারে আপনার XHTML পৃষ্ঠা দেখা যাবে। এখানে হেডিং, প্যারাগ্রাফ, এবং লিঙ্ক সঠিকভাবে প্রদর্শিত হবে।
৫. XHTML ডকুমেন্টের বৈশিষ্ট্য
- XML কেস সেনসিটিভ: XHTML ডকুমেন্টে সব ট্যাগ এবং অ্যাট্রিবিউট ছোট হাতের অক্ষরে থাকতে হবে। উদাহরণ:
<h1>এবং<title>। - সব ট্যাগ বন্ধ করা: XHTML-এ প্রতিটি ট্যাগ সঠিকভাবে বন্ধ করা আবশ্যক, যেমন
<br />,<img />ইত্যাদি। - ভাল গঠন: XHTML ডকুমেন্টের গঠন XML-এর স্ট্রিক্ট নিয়ম অনুসরণ করে।
এটি ছিল একটি মৌলিক XHTML পৃষ্ঠা তৈরি করার প্রক্রিয়া। .xhtml এক্সটেনশন ব্যবহার করে একটি বৈধ XHTML ডকুমেন্ট তৈরি করতে হলে XML-এর গঠন এবং নিয়ম মেনে চলা উচিত। এই প্রক্রিয়াটি আপনাকে XHTML-এর মৌলিক কাঠামো এবং ব্রাউজারে প্রদর্শনের উপায় শেখাবে।
Read more