এইচটিএমএল এবং এক্সএইচটিএমএল (HTML & XHTML)
এক্সএইচটিএমএল কি?
- XHTML-এর পূর্ণরূপ EXtensible HyperText Markup Language
- এইচটিএমএল এবং এক্সএইচটিএমএল প্রায় একই রকম
- এক্সএইচটিএমএল এইচটিএমএলের চেয়ে কঠোর
- এক্সএইচটিএমএল প্রায় সকল ব্রাউজারে সাপোর্ট করে
এক্সএইচটিএমএল কেন ব্যবহার করা হয়?
ইন্টারনেটে এইচটিএমএল অনেক পেজ রয়েছে যাদের গঠনপ্রণালী সঠিক নয়।
যদিও এই পেজের কোডগুলো এইচটিএমএলের নিয়ম অনুসরন করে না তারপরও সকল ব্রাউজারে এগুলো কাজ করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<body>
<h1>একটি হেডিং
<p>একটি প্যারাগ্রাফ
<body>
এক্সএমএলে ট্যাগকে সঠিকভাবে ক্লোজ করতে হয়। এই বৈশিষ্ট্যকে কেন্দ্র করে এক্সএমএল এবং এইচটিএমএলকে যোগ করে এক্সএইচটিএমএল তৈরি করা হয়েছে।
এক্সএমএল শিখতে আমাদের এক্সএমএল টিউটোরিয়াল পড়ুন।
এইচটিএমএল এবং এক্সএইচটিএমএলের পার্থক্যঃ
ডকুমেন্টের গঠনঃ
- এক্সএইচটিএমএল DOCTYPE অবশ্যই ডিক্লেয়ার করতে হবে
- <html>-এ অবশ্যই xmlns এট্রিবিউট থাকতে হবে
- এক্সএইচটিএমএল ডকুমেন্টে <html>, <head>, <title> এবং <body> অবশ্যই থাকতে হবে
এক্সএইচটিএমএল এলিমেন্ট
- এলিমেন্টকে সঠিকভাবে নেস্টেড হতে হবে
- এলিমেন্টের ক্লোজিং ট্যাগ অবশ্যই দিতে হবে
- এলিমেন্ট অবশ্যই ছোট হাতের অক্ষরে হতে হবে
- ডকুমেন্টে অবশ্যই একটি মূল এলিমেন্ট থাকতে হবে
এক্সএইচটিএমএল এট্রিবিউট
- এট্রিবিউটের নাম অবশ্যই ছোট হাতের অক্ষরে লিখতে হবে
- এট্রিবিউট মান অবশ্যই কোটেশনের("") মধ্যে থাকবে
- এট্রিবিউট সংক্ষিপ্ত আকারে লিখা নিষিদ্ধ
এক্সএইচটিএমএল <!DOCTYPE ...>
এক্সএইচটিএমএল ডকুমেন্টে অবশ্যই এক্সএইচটিএমএল DOCTYPE ডিক্লেয়ার করতে হবে।
আমাদের ট্যাগ রেফারেন্সে এক্সএইচটিএমএল Doctypes এর সম্পূর্ণ তালিকা পাবেন।
ডকুমেন্টে <html>, <head>, <title> এবং <body> এলিমেন্ট অবশ্যই থাকবে এবং <html>-এর xmlns এট্রিবিউট ব্যবহার করতে হবে।
নিচে একটি উদাহরন দেওয়া হলোঃ
উদাহরণ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://sattacademy.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&get;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
এখানে কন্টেন্ট থাকবে...
</body>
</html>
এক্সএইচটিএমএল এলিমেন্ট সঠিকভাবে নেস্টেড করতে হয়
এইচটিএমএলের কোড সঠিকভাবে নেস্টেড না হলেও কাজ করে। যেমনঃ
<b><i>বোল্ড এবং ইটালিক টেক্সট</b></i>
এক্সএইচটিএমএল এ, সকল এলিমেন্ট অবশ্যই সঠিকভাবে নেস্টেড করতে হবে। যেমনঃ
<b><i>বোল্ড এবং ইটালিক টেক্সট</i></b>
এক্সএইচটিএমএলে ক্লোজিং ট্যাগ বাধ্যতামূলক
এক্সএইচটিএমএলে এলিমেন্টের ক্লোজিং ট্যাগ দেওয়া বাধ্যতামূলকঃ
<p>এটি একটি প্যারাগ্রাফ</p>
<p>এটি আরেকটি প্যারাগ্রাফ</p>
এম্পটি এলিমেন্টকে ক্লোজ করা বাধ্যতামূলক
এক্সএইচটিএমএলে এম্পটি এলিমেন্টকেও সঠিকভাবে ক্লোজ করতে হয়ঃ
<p>একটি লাইন ব্রেক করবে</p><br />
<p>একটি অনুভূমিক রেখা তৈরি হবে</p><hr />
<p>একটি ইমেজঃ</p> <img src="happy.gif" alt="Happy face" />
এক্সএইচটিএমএল এলিমেন্ট অবশ্যই ছোট হাতের অক্ষরে হবে
ভুল
<BODY>
<P>একটি প্যারাগ্রাফ</P>
</BODY>
সঠিক
<body>
<p>একটি প্যারাগ্রাফ</p>
</body>
এক্সএইচটিএমএল এট্রিবিউটের নাম অবশ্যই ছোট হাতের অক্ষরে হবে
ভুল
<table WIDTH="100%">
সঠিক
<table width="100%">
এট্রিবিউটের মান অবশ্যই কোটেশনের("") মধ্যে রাখতে হবে
ভুল
<table width=100%>
সঠিক
<table width="100%">
এট্রিবিউট সংক্ষিপ্ত করা নিষিদ্ধ
ভুল
<input type="text" name="lastname" disabled />
সঠিক
<input type="text" name="lastname" disabled="disabled" />