XHTML ডকুমেন্টে ইমেজ (image) ব্যবহারের জন্য <img> ট্যাগ ব্যবহার করা হয়, যা একটি একক ট্যাগ এবং এটিকে বন্ধন সহ ব্যবহার করা আবশ্যক (যেমন <img />)। XHTML-এ, ছবির লিঙ্ক বা উৎস (source) এবং অন্যান্য অ্যাট্রিবিউটস সঠিকভাবে নির্ধারণ করতে হয়, যাতে ব্রাউজার এবং সার্ভার উভয়ই তা সঠিকভাবে রেন্ডার করতে পারে।
১. <img> ট্যাগের গঠন
ইমেজ যোগ করার জন্য XHTML-এ <img /> ট্যাগ ব্যবহার করা হয়। এই ট্যাগে কিছু মৌলিক অ্যাট্রিবিউট থাকে যা ইমেজের উৎস (source), বর্ণনা (description), আকার (size) ইত্যাদি নির্দেশ করে।
<img src="image.jpg" alt="Sample Image" width="300" height="200" />
২. <img> ট্যাগের প্রধান অ্যাট্রিবিউটস
২.1 src (source)
src অ্যাট্রিবিউটটি ইমেজের উৎস বা লিঙ্ক নির্দেশ করে। এটি ছবি বা গ্রাফিক্সের ফাইলপথ (URL) বা লোকাল ফাইল সিস্টেমে ইমেজের অবস্থান দেখায়।
উদাহরণ:
<img src="images/photo.jpg" alt="Photo" />
২.2 alt (alternative text)
alt অ্যাট্রিবিউটটি ছবির বর্ণনা প্রদান করে যা ছবিটি যদি লোড না হয় বা যদি ব্যবহারকারী ছবিটি দেখতে না পারে, তখন প্রদর্শিত হয়। এটি SEO এবং অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ।
উদাহরণ:
<img src="images/logo.png" alt="Company Logo" />
২.3 width এবং height
width এবং height অ্যাট্রিবিউটগুলি ছবির আকার (ব্রাউজারে প্রদর্শিত আকার) নির্ধারণ করে। এগুলি পিক্সেলে (px) প্রদান করতে হয়।
উদাহরণ:
<img src="images/photo.jpg" alt="Sample Photo" width="500" height="300" />
২.4 title
title অ্যাট্রিবিউটটি ছবির উপর মাউস রেখে যাওয়া অবস্থায় একটি টুলটিপ প্রদর্শন করে। এটি ব্যবহারকারীর জন্য অতিরিক্ত তথ্য প্রদান করতে সহায়ক।
উদাহরণ:
<img src="images/pic.jpg" alt="Picture" title="Click to view full image" />
২.5 longdesc (long description)
longdesc অ্যাট্রিবিউটটি ছবির জন্য একটি বিস্তারিত বর্ণনা প্রদান করে। এটি বিশেষ করে ব্যবহারকারীদের জন্য সহায়ক, যারা ছবির কন্টেন্ট বুঝতে সমস্যার সম্মুখীন হন।
উদাহরণ:
<img src="diagram.jpg" alt="Diagram of a circle" longdesc="circle-description.html" />
৩. ইমেজ লিঙ্ক তৈরি করা
XHTML-এ, আপনি ইমেজটিকে একটি লিঙ্কের অংশ হিসেবেও ব্যবহার করতে পারেন, যাতে ব্যবহারকারী ছবির উপর ক্লিক করলে একটি নির্দিষ্ট পেজ বা URL-এ চলে যান। এটি <a> (অ্যাঙ্কর) ট্যাগের সঙ্গে ব্যবহার করা হয়।
উদাহরণ:
<a href="https://www.example.com">
<img src="logo.jpg" alt="Company Logo" />
</a>
এখানে, ছবির উপর ক্লিক করলে ব্যবহারকারী https://www.example.com-এ চলে যাবে।
৪. ইমেজের জন্য কিছু গুরুত্বপূর্ণ নিয়ম
৪.1 XML সঙ্গততার জন্য বন্ধন সহ ট্যাগ
XHTML ডকুমেন্টে সমস্ত ট্যাগ অবশ্যই বন্ধন সহ থাকতে হবে। সুতরাং, <img> ট্যাগটিকে এইভাবে বন্ধ করতে হবে:
<img src="image.jpg" alt="Sample Image" />
৪.2 অ্যাট্রিবিউটস কোটেশন
XHTML-এ সমস্ত অ্যাট্রিবিউটের মান কোটেশনে থাকতে হবে, যেমন:
<img src="photo.jpg" alt="A beautiful landscape" />
৪.3 কেস-সেনসিটিভ ট্যাগ
XHTML একটি কেস-সেনসিটিভ ভাষা, অর্থাৎ আপনি <img> এবং <IMG> এর মধ্যে পার্থক্য বুঝতে হবে। সমস্ত ট্যাগ ছোট হাতের অক্ষরে লেখা উচিত:
<img src="image.jpg" alt="Example" />
৫. উদাহরণ: একটি সম্পূর্ণ 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>Image Link Example</title>
</head>
<body>
<h1>Welcome to Our Website</h1>
<p>Click the image below to visit our homepage:</p>
<a href="https://www.example.com">
<img src="logo.png" alt="Website Logo" width="200" height="100" title="Click here to visit our homepage" />
</a>
</body>
</html>
এখানে:
srcঅ্যাট্রিবিউটে ছবির উৎস বা URL দেয়া হয়েছে।altঅ্যাট্রিবিউটে ছবির বর্ণনা দেওয়া হয়েছে।widthএবংheightঅ্যাট্রিবিউটের মাধ্যমে ছবির আকার নির্ধারণ করা হয়েছে।titleঅ্যাট্রিবিউটটি টুলটিপ হিসেবে প্রদর্শিত হবে যখন ব্যবহারকারী ছবির উপর মাউস রেখে যাবে।<a>ট্যাগ ব্যবহার করে ছবিকে লিঙ্ক হিসেবে রূপান্তরিত করা হয়েছে।
XHTML-এ ইমেজ ব্যবহার করার জন্য <img /> ট্যাগের সঠিক গঠন এবং অ্যাট্রিবিউটস মেনে চলা অত্যন্ত গুরুত্বপূর্ণ। src, alt, width, height, title ইত্যাদি অ্যাট্রিবিউটগুলি সঠিকভাবে ব্যবহারের মাধ্যমে আপনি একটি কার্যকর এবং অ্যাক্সেসিবল ওয়েব পেজ তৈরি করতে পারবেন।
Read more
