ইমেজ এবং মিডিয়া এলিমেন্টস

XHTML-এ ইমেজ এবং মিডিয়া এলিমেন্টস ব্যবহার করা HTML-এর মতোই, তবে এর মধ্যে কিছু বিশেষ নিয়ম মেনে চলতে হয় কারণ এটি XML ভিত্তিক। ইমেজ এবং অন্যান্য মিডিয়া ফাইল (যেমন অডিও, ভিডিও) ট্যাগগুলোর গঠন এবং ব্যবহার XHTML-এ XML-এর নিয়ম অনুসরণ করে।

১. ইমেজ ট্যাগ (<img />) ব্যবহার

একটি ইমেজ ওয়েব পেজে যুক্ত করার জন্য <img /> ট্যাগ ব্যবহার করা হয়। XHTML-এ, এই ট্যাগটি অবশ্যই বন্ধন সহ থাকতে হবে, অর্থাৎ <img> এর পরিবর্তে <img /> ব্যবহার করতে হবে।

১.১ মৌলিক গঠন

<img src="image.jpg" alt="Image description" />

• src: এই অ্যাট্রিবিউটটি ইমেজের উৎস নির্দেশ করে (ফাইলের পাথ বা URL)।
• alt: ইমেজটি যদি প্রদর্শিত না হয়, তাহলে এই অ্যাট্রিবিউটটি ইমেজের বর্ণনা হিসেবে দেখায়, যা SEO এবং অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ।

১.২ অতিরিক্ত অ্যাট্রিবিউটস

• width: ইমেজের প্রস্থ নির্ধারণ করে।
• height: ইমেজের উচ্চতা নির্ধারণ করে।

<img src="image.jpg" alt="Description of the image" width="500" height="300" />

২. অডিও ট্যাগ (<audio />) ব্যবহার

XHTML-এ অডিও ফাইল প্লে করার জন্য <audio /> ট্যাগ ব্যবহার করা হয়। এটি ব্রাউজারে অডিও প্লে করতে সক্ষম করে, এবং আপনি বিভিন্ন ধরনের অডিও ফাইল যেমন MP3 বা Ogg ফরম্যাট ব্যবহার করতে পারেন।

২.১ মৌলিক গঠন

<audio controls>
  <source src="audio.mp3" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>

• controls: এই অ্যাট্রিবিউটটি ব্যবহার করলে প্লে, পজ, ভলিউম কন্ট্রোলসহ অডিও ফাইলের নিয়ন্ত্রণ প্রদর্শিত হয়।
• source: অডিও ফাইলের উৎস (ফাইলের পাথ বা URL) এবং টাইপ নির্দেশ করে।

২.২ একাধিক ফাইল ফরম্যাট সমর্থন

আপনি একাধিক ফাইল ফরম্যাটের উৎস উল্লেখ করতে পারেন যাতে একাধিক ব্রাউজারে একে সঠিকভাবে প্লে করা যায়।

<audio controls>
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.mp3" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>

৩. ভিডিও ট্যাগ (<video />) ব্যবহার

XHTML-এ ভিডিও ফাইল প্লে করতে <video /> ট্যাগ ব্যবহার করা হয়। এই ট্যাগটি ভিডিও ফাইল প্লে করার জন্য প্রয়োজনীয় কন্ট্রোল এবং অন্যান্য বৈশিষ্ট্য সরবরাহ করে।

৩.১ মৌলিক গঠন

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  Your browser does not support the video element.
</video>

• width এবং height: ভিডিওর আকার নির্ধারণ করে।
• controls: ভিডিও প্লে, পজ, ভলিউম কন্ট্রোল সহ ভিডিও নিয়ন্ত্রণ প্রদর্শিত করে।
• source: ভিডিও ফাইলের উৎস এবং ফরম্যাট নির্দেশ করে।

৩.২ ভিডিও অটো-প্লে এবং লুপ

ভিডিওটি স্বয়ংক্রিয়ভাবে শুরু করার জন্য autoplay অ্যাট্রিবিউট ব্যবহার করতে পারেন। যদি আপনি ভিডিওটি পুনরায় প্লে করতে চান, তাহলে loop অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<video width="640" height="360" autoplay loop>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  Your browser does not support the video element.
</video>

৪. ফ্ল্যাশ (SWF) ফাইল ব্যবহার

ফ্ল্যাশ ফাইল (.swf) সাধারণত <object> অথবা <embed> ট্যাগ ব্যবহার করে ওয়েব পেজে এম্বেড করা হয়। তবে, আধুনিক ব্রাউজারে ফ্ল্যাশ সমর্থন কমে আসায় এটি এখন কম ব্যবহৃত।

৪.১ ফ্ল্যাশ ফাইল এম্বেড করা

<object type="application/x-shockwave-flash" data="flashfile.swf" width="600" height="400">
  <param name="movie" value="flashfile.swf" />
  Your browser does not support Flash.
</object>

৫. ইমেজ এবং মিডিয়া এলিমেন্টসের বিশেষত্ব

৫.১ XHTML এর কেস-সেনসিটিভ নিয়ম

XHTML ডকুমেন্টে সব ট্যাগ এবং অ্যাট্রিবিউট ছোট হাতের অক্ষরে থাকতে হবে। উদাহরণস্বরূপ:

<img src="image.jpg" alt="Sample Image" />

৫.২ ট্যাগ বন্ধন

XHTML-এ সব ট্যাগ সঠিকভাবে বন্ধ হতে হবে। একক ট্যাগগুলোর জন্য যেমন <img />, <audio />, <video />, <br /> বন্ধন সহ ব্যবহার করা হয়।

৫.৩ অ্যাক্সেসিবিলিটি

XHTML-এ মিডিয়া ফাইল ব্যবহার করার সময় অ্যাক্সেসিবিলিটি নিশ্চিত করা গুরুত্বপূর্ণ। এজন্য alt (ইমেজের বর্ণনা) এবং অন্যান্য যথাযথ অ্যাট্রিবিউট ব্যবহার করা উচিত।

XHTML-এ ইমেজ এবং মিডিয়া এলিমেন্টস ব্যবহার করা HTML-এর মতো হলেও এর কিছু বিশেষ নিয়ম রয়েছে যা XML এর সঠিক গঠন অনুসরণ করে। ইমেজ এবং মিডিয়া ফাইলগুলো <img />, <audio />, <video /> ট্যাগ ব্যবহার করে ওয়েব পেজে যোগ করা হয়, এবং XHTML এর নিয়ম অনুযায়ী এই ট্যাগগুলো বন্ধন সহ থাকতে হবে।

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 (টুলটিপ) ইত্যাদি অ্যাট্রিবিউটগুলি সঠিকভাবে ব্যবহার করে আপনি একটি কার্যকরী এবং বৈধ ইমেজ ইনসার্ট করতে পারেন।

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 ও অ্যাক্সেসিবিলিটি উন্নত করবে।

XHTML-এ ওয়েব পেজে অডিও এবং ভিডিও ফাইল এমবেড করতে <audio> এবং <video> ট্যাগ ব্যবহার করা হয়। এই ট্যাগগুলি HTML5-এর একটি অংশ, তবে XHTML ডকুমেন্টে সঠিকভাবে তাদের ব্যবহার করতে কিছু নিয়ম এবং কনভেনশন অনুসরণ করতে হয়। এখানে আমরা কিভাবে XHTML ডকুমেন্টে অডিও এবং ভিডিও এমবেড করা যায়, তা আলোচনা করব।

১. <audio> ট্যাগ ব্যবহার

<audio> ট্যাগের মাধ্যমে ওয়েব পেজে অডিও ফাইল এমবেড করা যায়। এটি এক বা একাধিক অডিও সোর্স ফাইল অন্তর্ভুক্ত করতে সক্ষম এবং ব্রাউজারগুলিকে অডিও প্লে করার জন্য নির্দেশ দেয়। XHTML-এ এটি সঠিকভাবে ব্যবহার করতে হবে এবং বন্ধনসহ লিখতে হবে।

১.১ <audio> ট্যাগের মৌলিক গঠন

<audio controls>
    <source src="audiofile.mp3" type="audio/mp3" />
    <source src="audiofile.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>

• controls অ্যাট্রিবিউট: এটি প্লে, পজ, ভলিউম নিয়ন্ত্রণ ইত্যাদি যোগ করে।
• <source> ট্যাগ: এটি বিভিন্ন ফাইল ফরম্যাট প্রদান করে, যাতে ব্রাউজারটি যেকোনো একটি ফরম্যাট খেলতে পারে।
• Fallback text: যদি ব্রাউজার অডিও প্লে করতে সক্ষম না হয়, তাহলে এখানে একটি ব্যাখ্যামূলক টেক্সট থাকতে পারে।

১.২ অডিও ফাইল ফরম্যাট

অডিও ফাইলের জন্য সাধারণত ব্যবহৃত ফরম্যাটগুলি হল:

• MP3: সবচেয়ে সাধারণ এবং জনপ্রিয় অডিও ফরম্যাট।
• OGG: ওপেন সোর্স অডিও ফরম্যাট, অনেক ব্রাউজারে সমর্থিত।

অডিও ফাইল এমবেড করার সময় আপনি একাধিক সোর্স ফরম্যাট দিতে পারেন, যেমন উপরের উদাহরণে দেওয়া হয়েছে।

২. <video> ট্যাগ ব্যবহার

<video> ট্যাগের মাধ্যমে ওয়েব পেজে ভিডিও ফাইল এমবেড করা যায়। এটি বিভিন্ন ভিডিও ফরম্যাট সমর্থন করে এবং ব্রাউজারকে নির্দেশ দেয় ভিডিও ফাইল প্লে করার জন্য। XHTML-এ এটি ব্যবহারের সময় সঠিকভাবে controls এবং অন্যান্য অ্যাট্রিবিউট ব্যবহার করতে হয়।

২.১ <video> ট্যাগের মৌলিক গঠন

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogg" type="video/ogg" />
    Your browser does not support the video element.
</video>

• width এবং height অ্যাট্রিবিউট: ভিডিও প্লেয়ারটির প্রস্থ এবং উচ্চতা নির্ধারণ করে।
• controls অ্যাট্রিবিউট: ভিডিও প্লেব্যাকের জন্য প্লে, পজ, ভলিউম নিয়ন্ত্রণ ইত্যাদি প্রদর্শন করে।
• <source> ট্যাগ: এটি একাধিক ভিডিও ফরম্যাট প্রদান করে, যাতে ব্রাউজারটি উপযুক্ত ফরম্যাট প্লে করতে পারে।
• Fallback text: যদি ব্রাউজার ভিডিও প্লে করতে সক্ষম না হয়, তাহলে এখানে একটি ব্যাখ্যামূলক টেক্সট থাকতে পারে।

২.২ ভিডিও ফাইল ফরম্যাট

ভিডিও ফাইলের জন্য সাধারণত ব্যবহৃত ফরম্যাটগুলি হল:

• MP4: সবচেয়ে জনপ্রিয় ভিডিও ফরম্যাট, অধিকাংশ ব্রাউজারে সমর্থিত।
• OGG: ওপেন সোর্স ভিডিও ফরম্যাট, কিছু ব্রাউজারে সমর্থিত।
• WebM: বিশেষত Chrome এবং Firefox-এ ব্যবহৃত হয়।

৩. XHTML-এ <audio> এবং <video> ব্যবহারের নিয়ম

৩.১ সব ট্যাগ এবং অ্যাট্রিবিউট কেস সেনসিটিভ

XHTML-এ সব ট্যাগ এবং অ্যাট্রিবিউট ছোট হাতের অক্ষরে থাকতে হবে। উদাহরণস্বরূপ:

<audio controls>
    <source src="audiofile.mp3" type="audio/mp3" />
</audio>

৩.২ ট্যাগগুলো বন্ধনসহ ব্যবহার

XHTML-এ একক ট্যাগগুলির জন্য (যেমন <audio>, <video>, <source>) বন্ধন ব্যবহার করা আবশ্যক। উদাহরণস্বরূপ:

<source src="video.mp4" type="video/mp4" />

৩.৩ ব্রাউজার ফলোব্যাক টেক্সট

যদি ব্রাউজার অডিও বা ভিডিও ফাইল প্লে করতে না পারে, তাহলে একটি ব্যাখ্যামূলক টেক্সট প্রদান করা উচিত, যা ব্যবহারকারীকে জানাবে।

Your browser does not support the video element.

৪. উদাহরণ: এক্সএইচটিএমএল-এ অডিও এবং ভিডিও এমবেড

৪.১ অডিও এমবেড উদাহরণ

<!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>Audio Example</title>
</head>
<body>
    <h1>Audio Player</h1>
    <audio controls>
        <source src="sample-audio.mp3" type="audio/mp3" />
        <source src="sample-audio.ogg" type="audio/ogg" />
        Your browser does not support the audio element.
    </audio>
</body>
</html>

৪.২ ভিডিও এমবেড উদাহরণ

<!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>Video Example</title>
</head>
<body>
    <h1>Video Player</h1>
    <video width="640" height="360" controls>
        <source src="sample-video.mp4" type="video/mp4" />
        <source src="sample-video.ogg" type="video/ogg" />
        Your browser does not support the video element.
    </video>
</body>
</html>

XHTML-এ <audio> এবং <video> ট্যাগ ব্যবহার করার মাধ্যমে আপনি আপনার ওয়েব পেজে অডিও এবং ভিডিও ফাইল এমবেড করতে পারেন। তবে, XHTML-এর স্ট্রিক্ট গঠন অনুসরণ করতে হয়, যেমন ট্যাগগুলি বন্ধনসহ ব্যবহার, কেস সেনসিটিভিটি রক্ষা, এবং ফরম্যাট ফ্যালব্যাক যুক্ত করা। এই নিয়মগুলো অনুসরণ করলে আপনি একটি সঠিকভাবে কাজ করা মাল্টিমিডিয়া এমবেড পেজ তৈরি করতে পারবেন।

এক্সএইচটিএমএল (XHTML)-এ ইমেজ ম্যাপ এবং ক্লিকেবল ইমেজ তৈরি করা সম্ভব। এই টেকনিকগুলো ব্যবহার করে একটি ইমেজের ভেতরে বিভিন্ন অংশকে ক্লিকযোগ্য লিঙ্কে পরিণত করা যায়। এক্সএইচটিএমএল গঠন অনুসরণ করে, এটি করতে হলে কিছু নির্দিষ্ট নিয়ম মেনে চলতে হয়।

১. ইমেজ ম্যাপ (Image Map) কী?

ইমেজ ম্যাপ একটি HTML উপাদান যা একটি চিত্রের নির্দিষ্ট অংশে লিঙ্ক তৈরি করার সুযোগ দেয়। অর্থাৎ, একটি ইমেজের বিভিন্ন অঞ্চলে আলাদা আলাদা লিঙ্ক নির্ধারণ করা যায়। এক্সএইচটিএমএল (XHTML)-এ ইমেজ ম্যাপ তৈরির জন্য <map> এবং <area> ট্যাগ ব্যবহার করা হয়।

১.১ ইমেজ ম্যাপ তৈরির উদাহরণ

এখানে একটি সিম্পল ইমেজ ম্যাপের উদাহরণ দেওয়া হলো, যেখানে একটি ইমেজের দুইটি ভিন্ন অংশ ক্লিকযোগ্য করা হয়েছে:

<!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 Map Example</title>
</head>
<body>
    <h1>Image Map Example</h1>
    
    <img src="world-map.jpg" usemap="#map1" alt="World Map" />
    
    <map name="map1">
        <area shape="rect" coords="34,44,270,350" alt="North America" href="https://en.wikipedia.org/wiki/North_America" />
        <area shape="circle" coords="450,150,50" alt="Europe" href="https://en.wikipedia.org/wiki/Europe" />
    </map>

</body>
</html>

১.২ কোড বিশ্লেষণ:

• <img> ট্যাগ: ইমেজের সোর্স নির্ধারণ করা হয় এবং usemap অ্যাট্রিবিউটের মাধ্যমে map1 নামক ম্যাপটি ব্যবহার করা হয়।
• <map> ট্যাগ: এটি একটি ম্যাপের ডেফিনিশন করে। name অ্যাট্রিবিউটটি usemap এর সাথে মিলতে হবে, যাতে ইমেজটি এই ম্যাপের সাথে যুক্ত হয়।
• <area> ট্যাগ: এর মাধ্যমে ইমেজের নির্দিষ্ট অংশে লিঙ্ক তৈরি করা হয়। shape অ্যাট্রিবিউটটি ইমেজের অংশের গঠন (যেমন rect বা circle) নির্ধারণ করে, এবং coords অ্যাট্রিবিউটটি সেই অংশের স্থানাঙ্ক নির্ধারণ করে।
  • shape="rect": একটি আয়তক্ষেত্র আকৃতির এলাকা।
  • shape="circle": একটি বৃত্তাকার এলাকা।

coords: এটি লিঙ্কের কোঅর্ডিনেট সিস্টেমের তথ্য প্রদান করে। rect শেপের জন্য এটি চারটি মান নেয় (বাম, উপরের, ডান, নিচের কোণ)। circle শেপের জন্য এটি তিনটি মান নেয় (X, Y এবং ব্যাসার্ধ)।

২. ক্লিকেবল ইমেজ (Clickable Image)

একটি ক্লিকেবল ইমেজ তৈরি করার জন্য সাধারণত ইমেজকে একটি লিঙ্কের মধ্যে র‍্যাপ করা হয়। এক্সএইচটিএমএল (XHTML)-এ এটি করতে হলে <a> ট্যাগ ব্যবহার করা হয়, যা ইমেজটিকে একটি লিঙ্কে পরিণত করে।

২.১ ক্লিকেবল ইমেজের উদাহরণ

<!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>Clickable Image Example</title>
</head>
<body>
    <h1>Clickable Image Example</h1>

    <a href="https://www.example.com">
        <img src="clickable-image.jpg" alt="Clickable Image" />
    </a>

</body>
</html>

২.২ কোড বিশ্লেষণ:

• <a> ট্যাগ: এটি একটি লিঙ্ক তৈরি করে এবং href অ্যাট্রিবিউটের মাধ্যমে গন্তব্য URL নির্দেশ করে।
• <img> ট্যাগ: এটি ইমেজটিকে পেজে প্রদর্শন করে, এবং এটি <a> ট্যাগের মধ্যে রাখা হয়েছে, যার ফলে ইমেজটি ক্লিক করা হলে সেই URL-এ নিয়ে যাবে।

এই পদ্ধতিতে, ইমেজটি পুরোপুরি ক্লিকযোগ্য হয়ে ওঠে এবং ব্যবহারকারী যখন সেই ইমেজের উপর ক্লিক করবে, তখন তাকে নির্দিষ্ট URL-এ নিয়ে যাবে।

৩. ইমেজ ম্যাপ এবং ক্লিকেবল ইমেজের পার্থক্য

• ইমেজ ম্যাপ: এটি একটি ইমেজের বিভিন্ন অংশকে আলাদা আলাদা লিঙ্কে পরিণত করে। ব্যবহারকারীরা ইমেজের নির্দিষ্ট অংশে ক্লিক করলে তারা আলাদা আলাদা ওয়েব পেজে চলে যাবে।
• ক্লিকেবল ইমেজ: এটি পুরো ইমেজটিকে একটি লিঙ্কে পরিণত করে, যার ফলে পুরো ইমেজটি ক্লিক করলে নির্দিষ্ট URL-এ নিয়ে যাবে।

এক্সএইচটিএমএল (XHTML)-এ ইমেজ ম্যাপ এবং ক্লিকেবল ইমেজ তৈরি করা খুবই সহজ এবং কার্যকরী। ইমেজ ম্যাপ ব্যবহার করে একটি ইমেজের বিভিন্ন অংশে লিঙ্ক তৈরি করা সম্ভব, যা ইন্টারেক্টিভ ওয়েব ডিজাইন তৈরি করতে সাহায্য করে। অন্যদিকে, ক্লিকেবল ইমেজ তৈরি করা হলে পুরো ইমেজটিই একটি লিঙ্কে পরিণত হয়ে যায়, যা ব্যবহারকারীর জন্য সহজ এবং দ্রুত ব্রাউজিং অভিজ্ঞতা তৈরি করে।