XHTML ডকুমেন্টে ইমেজ ইনসার্ট করার জন্য <img> ট্যাগ ব্যবহার করা হয়। যদিও <img> একটি একক ট্যাগ, তবুও XHTML-এর ক্ষেত্রে এটি বন্ধনসহ ব্যবহার করতে হয়, অর্থাৎ /> ব্যবহার করতে হবে। <img> ট্যাগের মধ্যে কিছু গুরুত্বপূর্ণ অ্যাট্রিবিউট থাকে, যার মাধ্যমে আপনি ইমেজের উৎস, বর্ণনা, আকার এবং অন্যান্য বৈশিষ্ট্য নির্ধারণ করতে পারেন।
১. <img> ট্যাগের গঠন
XHTML-এ <img> ট্যাগের গঠন HTML-এর মতো হলেও এতে কিছু অতিরিক্ত নিয়ম এবং অ্যাট্রিবিউট থাকতে হয়।
সাধারণ গঠন:
<img src="image.jpg" alt="Image description" />
২. প্রধান অ্যাট্রিবিউট
২.1 src (source)
src অ্যাট্রিবিউটটি ইমেজের উৎস নির্দেশ করে। এটি ইমেজ ফাইলের পাথ বা URL হতে পারে।
উদাহরণ:
<img src="images/photo.jpg" alt="A beautiful sunset" />
২.2 alt (alternative text)
alt অ্যাট্রিবিউটটি ইমেজের একটি বর্ণনা প্রদান করে, যা যখন ইমেজ লোড না হয় বা ব্যবহারকারী যদি ইমেজ দেখতে না পারেন তখন প্রদর্শিত হয়। এটি এক্সএইচটিএমএল-এর অ্যাক্সেসিবিলিটি এবং সার্চ ইঞ্জিন অপটিমাইজেশনের (SEO) জন্য খুবই গুরুত্বপূর্ণ।
উদাহরণ:
<img src="logo.png" alt="Company Logo" />
২.3 width এবং height
width এবং height অ্যাট্রিবিউট ব্যবহার করে ইমেজের আকার নির্ধারণ করা যায়। এগুলোতে পিক্সেল পরিমাণ দিয়ে আকার নির্ধারণ করা হয়।
উদাহরণ:
<img src="image.jpg" alt="Sample Image" width="300" height="200" />
২.4 title
title অ্যাট্রিবিউটটি ইমেজের উপর মাউস হোভার করলে একটি টুলটিপ হিসেবে প্রদর্শিত হয়। এটি ইমেজের সম্পর্কে আরও বিস্তারিত তথ্য দিতে সাহায্য করে।
উদাহরণ:
<img src="flower.jpg" alt="Flower" title="A beautiful flower" />
৩. <img> ট্যাগের ব্যবহারিক উদাহরণ
উদাহরণ ১: সাধারণ ইমেজ
<img src="images/photo.jpg" alt="Sunset view" />
এটি একটি সাধারণ ইমেজ, যেখানে src অ্যাট্রিবিউটে ইমেজের অবস্থান এবং alt অ্যাট্রিবিউটে ইমেজের বর্ণনা দেওয়া হয়েছে।
উদাহরণ ২: আকার সহ ইমেজ
<img src="images/photo.jpg" alt="Sunset view" width="400" height="300" />
এটি ইমেজের আকার নির্ধারণ করেছে (প্রস্থ ৪০০ পিক্সেল এবং উচ্চতা ৩০০ পিক্সেল)।
উদাহরণ ৩: টাইটেল সহ ইমেজ
<img src="logo.png" alt="Company Logo" title="Our Company Logo" />
এটি title অ্যাট্রিবিউটের মাধ্যমে ইমেজের উপর টুলটিপ প্রদর্শন করবে যখন মাউস ইমেজের উপর রাখা হবে।
উদাহরণ ৪: পুরোপুরি ফাংশনাল ইমেজ
<img src="profile_picture.jpg" alt="User Profile Picture" width="150" height="150" title="User's profile picture" />
এটি একটি প্রোফাইল ছবি যেখানে আকার এবং টাইটেলসহ সকল বৈশিষ্ট্য নির্ধারণ করা হয়েছে।
৪. XHTML-এ <img> ট্যাগ ব্যবহারের ক্ষেত্রে কিছু গুরুত্বপূর্ণ নিয়ম
৪.1 কোনো ট্যাগ অপ্রত্যাশিতভাবে খোলামেলা রাখা যাবে না
XHTML-এর মধ্যে সমস্ত ট্যাগকে সঠিকভাবে বন্ধ করতে হয়, যার মানে হল যে <img> ট্যাগের পরে /> বন্ধন চিহ্ন থাকতে হবে।
উদাহরণ:
<img src="image.jpg" alt="Sample Image" />
৪.2 অ্যাট্রিবিউট মানের কোটেশন
XHTML-এ অ্যাট্রিবিউটের মান অবশ্যই কোটেশনে থাকতে হবে।
উদাহরণ:
<img src="image.jpg" alt="Sample Image" />
৪.3 XHTML কেস সেনসিটিভিটি
XHTML-এ ট্যাগ এবং অ্যাট্রিবিউট নামগুলি ছোট হাতের অক্ষরে থাকতে হবে। তাই <IMG> বা <Src> ভুল হবে।
সঠিক:
<img src="image.jpg" alt="Sample Image" />
XHTML ডকুমেন্টে ইমেজ ইনসার্ট করতে <img> ট্যাগ ব্যবহার করা হয়। এটি HTML-এর মতোই হলেও XHTML-এর নিয়ম অনুসারে সঠিকভাবে বন্ধনসহ এবং অ্যাট্রিবিউট মান কোটেশনে থাকতে হয়। src (ইমেজের উৎস), alt (বিকল্প বর্ণনা), width ও height (আকার) এবং title (টুলটিপ) ইত্যাদি অ্যাট্রিবিউটগুলি সঠিকভাবে ব্যবহার করে আপনি একটি কার্যকরী এবং বৈধ ইমেজ ইনসার্ট করতে পারেন।
Read more
