মিডিয়া-সম্পর্কিত ট্যাগসমূহ

এই প্রবন্ধটি মিডিয়া সম্পর্কিত ট্যাগসমূহ ব্যাখ্যা করে।

HTML এ চিত্র, ভিডিও, অডিও ইত্যাদি কীভাবে বর্ণনা করতে হয়, সেইসাথে ভাঁজযোগ্য উপাদান এবং ইনলাইন ফ্রেমগুলি কীভাবে বর্ণনা করতে হয় তা ব্যাখ্যা করা হয়েছে।

YouTube Video

মিডিয়া-সম্পর্কিত ট্যাগসমূহ

<img> ট্যাগ

1<img src="/images/image.jpg" alt="Description of the image" width="200">

• <img> ট্যাগটি ছবি এম্বেড করতে ব্যবহৃত হয়। src অ্যাট্রিবিউটটি চিত্রের পথ নির্দিষ্ট করে এবং alt অ্যাট্রিবিউটটি বর্ণনা করে যখন চিত্র প্রদর্শন করা যায় না।

<figure> এবং <figcaption> ট্যাগসমূহ

1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>

• <figure> ট্যাগটি মিডিয়া কনটেন্ট যেমন ছবি বা ইলাস্ট্রেশনগুলিকে <figcaption> ট্যাগ ব্যবহার করে একটি ক্যাপশনের সাথে গোষ্ঠীভুক্ত করে।

<picture> ট্যাগ

1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

• <picture> ট্যাগটি প্রতিক্রিয়াশীল চিত্রগুলি সমর্থন করতে ব্যবহৃত হয়, যা বিভিন্ন প্রদর্শনের অবস্থার উপর ভিত্তি করে উপযুক্ত চিত্র নির্বাচন করতে সক্ষম করে।

• মিডিয়া অ্যাট্রিবিউটটি CSS মিডিয়া কুয়েরির মতো একই ফর্ম্যাটে শর্ত নির্ধারণ করে।

  • আপনি ন্যূনতম প্রস্থ (min-width), সর্বাধিক প্রস্থ (max-width), অথবা স্ক্রীনের অভিমুখতা (orientation) মতো শর্তগুলি নির্ধারণ করতে পারেন।

• এই উদাহরণে, স্ক্রীনের প্রস্থের ওপর নির্ভর করে নিম্নলিখিত ছবি প্রদর্শিত হয়।

  • যদি স্ক্রীনের প্রস্থ ৮০০px বা তার বেশি হয়, তাহলে large.jpg প্রদর্শিত হয়।
  • যদি স্ক্রীনের প্রস্থ ৪০০px বা তার বেশি এবং ৮০০px এর কম হয়, তাহলে medium.jpg প্রদর্শিত হয়।
  • যদি স্ক্রীনের প্রস্থ ৪০০px এর কম হয়, তাহলে small.jpg (<img> ট্যাগের মধ্যে থাকা ছবি) প্রদর্শিত হয়।

<canvas> ট্যাগ

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>

• <canvas> ট্যাগটি এমন একটি অঞ্চল সরবরাহ করে যেখানে ডায়নামিক গ্রাফিক্স জাভাস্ক্রিপ্ট ব্যবহার করে আঁকা যেতে পারে।

<map> ট্যাগ

1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>

• <map> ট্যাগটি একটি ইমেজ ম্যাপ নির্ধারণ করতে ব্যবহৃত হয়। ম্যাপের মধ্যে ক্লিকযোগ্য অঞ্চলগুলি <area> ট্যাগ ব্যবহার করে সংজ্ঞায়িত করা হয়। এটি ইমেজের নির্দিষ্ট অংশগুলি ক্লিকযোগ্য করে তোলে, যা একটি লিঙ্কের দিকে নিয়ে যায়।
• প্রাসঙ্গিক ম্যাপ এলেমেন্টের নাম (<map> ট্যাগ) উল্লেখ করুন <img> ট্যাগের usemap অ্যাট্রিবিউটে, যেটি # দিয়ে শুরু হয়।
• উপযুক্তভাবে <area> ট্যাগের alt অ্যাট্রিবিউট নির্ধারণ করে, আপনি দৃষ্টিশক্তিহীন ব্যবহারকারীদের জন্য অ্যাক্সেসিবিলিটি উন্নত করতে পারেন।

<embed> ট্যাগ

1<embed src="movie.mp4" width="300" height="200">

• <embed> ট্যাগটি বাহ্যিক কনটেন্ট যেমন পিডিএফ, ভিডিও বা অডিও এম্বেড করতে ব্যবহৃত হয়।

<video> ট্যাগ

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• <video> ট্যাগটি ভিডিও কনটেন্ট এম্বেড করতে ব্যবহৃত হয়। আপনি <source> ট্যাগ ব্যবহার করে একাধিক ফরম্যাট নির্দিষ্ট করতে পারেন।

1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• ব্রাউজারে ভিডিও চালানোর আগে ভিডিওর কতটুকু অংশ লোড হওয়া উচিত তা নির্ধারণ করতে preload অ্যাট্রিবিউট ব্যবহার করতে পারেন।
  • auto ব্রাউজারকে সম্পূর্ণ মিডিয়া প্রিলোড করার নির্দেশ দেয়। এটি প্লেব্যাক শুরুতে বিলম্ব কমাতে পারে, তবে ব্যবহারকারী মিডিয়া চালু না করলেও ডেটা ডাউনলোড হতে পারে।
  • metadata শুধুমাত্র মিডিয়ার মেটাডেটা (যেমন, দৈর্ঘ্য, ট্র্যাক তথ্য) লোড করে। ব্যবহারকারী প্লেব্যাক শুরু না করা পর্যন্ত মিডিয়া ডেটা নিজেই লোড হয় না। যখন মিডিয়ার সংক্ষিপ্ত তথ্য প্রয়োজন হয় তখন এটি উপযুক্ত।
  • none মিডিয়া ফাইল প্রিলোড করে না। প্লেব্যাক শুরু না হওয়া পর্যন্ত মিডিয়া কোন রিসোর্স ডাউনলোড করে না। যখন আপনি ডেটার ব্যবহার ন্যূনতম করতে চান এটি উপযুক্ত।

<audio> ট্যাগ

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>

• <audio> ট্যাগটি অডিও কনটেন্ট এম্বেড করতে ব্যবহৃত হয়। <source> ট্যাগটি একাধিক ফরম্যাট সমর্থন করে।
• <video> ট্যাগের মতো, preload অ্যাট্রিবিউট দিয়ে নির্ধারণ করা যায় যে প্লেব্যাক শুরুর আগে কতটুকু অডিও লোড হওয়া উচিত।

<track> ট্যাগ

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>

• <track> ট্যাগ সাবটাইটেল এবং ক্যাপশন এর মতো টেক্সট ট্র্যাক নির্দিষ্ট করতে ব্যবহৃত হয়। এটি <audio> বা <video> ট্যাগের ভিতরে ব্যবহার করা যেতে পারে।
• kind অ্যাট্রিবিউট দিয়ে আপনি ট্র্যাকের উদ্দেশ্য নির্ধারণ করতে পারেন (যেমন, সাবটাইটেল, ক্যাপশন, অধ্যায় ইত্যাদি)। আপনি নিম্নলিখিত মানগুলি নির্ধারণ করতে পারেন।
  • subtitles ভিডিও বা অডিওর বিষয়বস্তুকে অনুবাদ করে বা দর্শকদের জন্য বোঝা সহজ করে তোলে। এর প্রধান উদ্দেশ্য হলো অডিওর সরাসরি অনুবাদ।
  • captions অডিওর পাশাপাশি সংগীত এবং শব্দ প্রভাবের মতো অতিরিক্ত তথ্য সরবরাহ করে শ্রবণ প্রতিবন্ধীদের জন্য।
  • descriptions হল এমন ট্র্যাক যা ভিডিওর দৃশ্যমান কন্টেন্ট, যেমন কাজের বিবরণ এবং দৃশ্যপট, বর্ণনা করে দৃষ্টিপ্রতিবন্ধীদের জন্য।
  • chapters ভিডিওর নির্দিষ্ট পয়েন্টগুলিকে শনাক্ত করতে অধ্যায় মার্কার (অধ্যায় শিরোনাম) প্রদান করে।
  • metadata মিডিয়া পারস বা প্রক্রিয়া করার জন্য অতিরিক্ত তথ্য প্রদান করে তবে ব্যবহারকারীদের কাছে প্রদর্শন করা হয় না।

<iframe> ট্যাগ

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>

• <iframe> ট্যাগটি বর্তমান পৃষ্ঠায় অন্যান্য HTML পৃষ্ঠাগুলি বা বাহ্যিক সামগ্রী (যেমন ওয়েবসাইট, ভিডিও বা ডকুমেন্ট) এম্বেড করতে ব্যবহৃত হয়। সাধারণত একটি পৃষ্ঠায় YouTube ভিডিও এম্বেড করার জন্য এটি ব্যবহৃত হয়।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video