# এইচটিএমএল (HTML)-এ কিভাবে ছবি (Image), অডিও (Audio), এবং ভিডিও (Video) ওয়েব এড করা হয় তা দেখানো হয়েছে:

এখন আমরা আলোচনা করবো HTML-এ কিভাবে ছবি (Image), অডিও (Audio), এবং ভিডিও (Video) ওয়েবপেজে যুক্ত বা ইমপোর্ট করতে হয়। এইগুলো ওয়েব কনটেন্টকে আরও প্রাণবন্ত ও আকর্ষণীয় করে তোলে।

---

🖼️ ১. ইমেজ (Image) ইমপোর্ট – <img>

HTML-এ ছবি দেখানোর জন্য ব্যবহার হয় <img> ট্যাগ।

✅ উদাহরণ:

<img src="images/pic.jpg" alt="Beautiful Scenery" width="400" height="300">

অ্যাট্রিবিউট	কাজ
src	ছবির লোকেশন (Path or URL)
alt	ছবির না-লোড হলে দেখানো টেক্সট
width/height	ছবির আকার

✅ এটি একটি self-closing tag।

---

🔊 ২. অডিও (Audio) ইমপোর্ট – <audio>

অডিও ফাইল প্লে করাতে ব্যবহার হয় <audio> ট্যাগ।

✅ উদাহরণ:

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

অ্যাট্রিবিউট	কাজ
controls	প্লে-পজ বাটন দেখায়
autoplay	পেজ লোড হলে অটো প্লে করে
loop	শেষ হলে আবার শুরু করে
muted	শুরুতে মিউট করে দেয়

---

🎥 ৩. ভিডিও (Video) ইমপোর্ট – <video>

ভিডিও দেখাতে ব্যবহার হয় <video> ট্যাগ।

✅ উদাহরণ:

<video width="600" controls>
  <source src="videos/sample.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

অ্যাট্রিবিউট	কাজ
controls	ভিডিও প্লেয়ার দেখায়
autoplay	ভিডিও অটো চালু হয়
loop	ভিডিও শেষ হয়ে আবার শুরু হয়
muted	ভিডিও মিউট থেকে শুরু হয়
poster	ভিডিও লোড হওয়ার আগে দেখানো ইমেজ

---

🧠 সংক্ষেপে:

মিডিয়া	ট্যাগ	প্রধান অ্যাট্রিবিউট
Image	<img>	src, alt, width, height
Audio	<audio>	controls, autoplay, loop
Video	<video>	controls, poster, muted, autoplay

---

🎁 একটি সম্পূর্ণ উদাহরণ (Image + Audio + Video):

<h2>My Gallery</h2>

<img src="flower.jpg" alt="Flower" width="300">

<h3>Listen to Music</h3>
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>

<h3>Watch the Video</h3>
<video width="500" controls>
  <source src="video.mp4" type="video/mp4">
</video>

---

আপনি কি চান? চাইলে আমি একটা “মিডিয়া গ্যালারি” প্রজেক্ট করে দিতে পারি HTML + CSS দিয়ে, যেখানে ছবি, অডিও আর ভিডিও সুন্দরভাবে সাজানো থাকবে। আপনি আগ্রহী? 😄🎬📸🎧