XHTML ডকুমেন্টে ছবি (ইমেজ) প্রদর্শন করার জন্য <img> ট্যাগ ব্যবহৃত হয়। এই ট্যাগটি একটি বন্ধনহীন ট্যাগ, অর্থাৎ এটি কোনো বন্ধনীয় ট্যাগ ছাড়াই ব্যবহার করা হয়। <img> ট্যাগের মাধ্যমে বিভিন্ন অ্যাট্রিবিউট দেওয়া হয়, যা ইমেজের উৎস (source), বর্ণনা, এবং আকার নিয়ন্ত্রণ করে। XHTML-এ, সব অ্যাট্রিবিউট বন্ধনসহ (self-closing) ব্যবহার করতে হয়, যেমন <img src="image.jpg" alt="description" />।
এই টিউটোরিয়ালে আমরা src, alt, width, এবং height অ্যাট্রিবিউটগুলোর বিস্তারিত ব্যাখ্যা করব।
১. src (source) অ্যাট্রিবিউট
১.1 বর্ণনা
src অ্যাট্রিবিউটটি ইমেজের উৎস নির্ধারণ করে, অর্থাৎ কোন ফাইল বা ওয়েব পেজ থেকে ছবি লোড করা হবে। এই অ্যাট্রিবিউটটি একটি URL (ইউআরএল) বা লোকাল ফাইল পাথ হতে পারে।
১.2 ব্যবহার
src অ্যাট্রিবিউটের মাধ্যমে আপনি ছবি বা গ্রাফিক্স ফাইলের অবস্থান প্রদান করেন। এটি ইমেজের ফাইল নাম এবং এক্সটেনশন (যেমন .jpg, .png, .gif) অন্তর্ভুক্ত করতে হয়।
উদাহরণ:
<img src="images/logo.png" alt="Website Logo" />
এখানে src="images/logo.png" ছবির উৎস (লিঙ্ক) নির্দেশ করে এবং alt অ্যাট্রিবিউটের মাধ্যমে ছবির বর্ণনা প্রদান করা হয়।
২. alt (alternative text) অ্যাট্রিবিউট
২.1 বর্ণনা
alt অ্যাট্রিবিউটটি ছবির বর্ণনা বা বিকল্প টেক্সট সরবরাহ করে, যা ব্রাউজারে ছবি লোড না হলে বা কোনো কারণে ছবিটি প্রদর্শিত না হলে ব্যবহারকারীর কাছে দৃশ্যমান থাকে। এটি SEO (Search Engine Optimization) এবং অ্যাক্সেসিবিলিটি (বিশেষত স্ক্রীন রিডার ব্যবহারকারীদের জন্য) এর জন্য গুরুত্বপূর্ণ।
২.2 ব্যবহার
alt অ্যাট্রিবিউটের মানটি সংক্ষিপ্ত, কিন্তু ছবির বিষয়বস্তু সঠিকভাবে বর্ণনা করতে হবে।
উদাহরণ:
<img src="images/cat.jpg" alt="A cute cat sitting on a sofa" />
এখানে, ছবিটি না দেখা গেলে বা ব্রাউজারে লোড না হলে "A cute cat sitting on a sofa" টেক্সটটি প্রদর্শিত হবে।
৩. width এবং height অ্যাট্রিবিউট
৩.1 বর্ণনা
width এবং height অ্যাট্রিবিউটগুলি ছবির প্রস্থ এবং উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়। এই অ্যাট্রিবিউটগুলোর মান সাধারণত পিক্সেলে দেওয়া হয়। এগুলি ব্যবহারকারীর ওয়েব পেজে ছবি প্রদর্শন করার আকার নিয়ন্ত্রণ করতে সাহায্য করে।
৩.2 ব্যবহার
width: ছবির প্রস্থ নির্ধারণ করে।height: ছবির উচ্চতা নির্ধারণ করে।
এগুলো প্রয়োগ করলে ছবির আকার ব্রাউজার দ্বারা মানানসই হবে এবং এটি পেজ লোড হওয়ার সময় ব্রাউজারকে দ্রুত রেন্ডার করতে সাহায্য করে।
উদাহরণ:
<img src="images/dog.jpg" alt="A dog in a park" width="300" height="200" />
এখানে, ছবিটি 300 পিক্সেল প্রস্থ এবং 200 পিক্সেল উচ্চতা দিয়ে প্রদর্শিত হবে।
৪. একসাথে সব অ্যাট্রিবিউট ব্যবহার
একটি পূর্ণাঙ্গ <img> ট্যাগে সব অ্যাট্রিবিউট একত্রে ব্যবহার করা যেতে পারে, যেমন:
<img src="images/car.jpg" alt="A red sports car" width="400" height="250" />
এখানে:
srcঅ্যাট্রিবিউট ছবির উৎস নির্দেশ করে,altঅ্যাট্রিবিউট ছবির বর্ণনা দেয়,widthএবংheightঅ্যাট্রিবিউট ছবির আকার নির্ধারণ করে।
৫. XHTML-এ ইমেজ অ্যাট্রিবিউটের নিয়ম
- বন্ধন সহ ব্যবহার: XHTML-এ, সমস্ত ট্যাগ (এবং অ্যাট্রিবিউট) বন্ধনসহ ব্যবহার করতে হয়। যেমন,
<img />ট্যাগেsrc,alt,width, এবংheightঅ্যাট্রিবিউটগুলো সঠিকভাবে বন্ধনসহ লিখতে হবে। - কেস সেনসিটিভিটি: XHTML-এ, অ্যাট্রিবিউট নাম এবং মান কেস সেনসিটিভ হতে হবে। তাই
ALTএর পরিবর্তেaltএবংSRCএর পরিবর্তেsrcব্যবহার করা উচিত।
XHTML ডকুমেন্টে <img> ট্যাগ ব্যবহার করে ছবি প্রদর্শন করার জন্য src, alt, width, এবং height অ্যাট্রিবিউটগুলো অত্যন্ত গুরুত্বপূর্ণ। সঠিকভাবে এই অ্যাট্রিবিউটগুলো ব্যবহার করলে আপনার ওয়েব পেজে ছবি সঠিকভাবে প্রদর্শিত হবে এবং তা SEO ও অ্যাক্সেসিবিলিটি উন্নত করবে।
Read more
