এইচটিএমএল <img> ট্যাগ
<img>
ট্যাগের ব্রাউজার সাপোর্ট
এলিমেন্ট | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
---|---|---|---|---|---|
<img> |
সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন |
সংজ্ঞা ও ব্যবহার
এইচটিএমএল ডকুমেন্টে ইমেজ অন্তর্ভুক্ত করার জন্য <img>
ট্যাগ ব্যবহার করা হয়। অর্থাৎ <img>
ট্যাগ দ্বারা ইমেজকে বুঝানো হয়। <img>
ট্যাগটিতে শুধুমাত্র এট্রিবিউট থাকে এবং এর কোন ক্লোজিং ট্যাগ নেই। src
এট্রিবিউটের মধ্যে ইমেজের URL(ডিরেক্টরি) নির্ধারণ করা হয়।
<img>
ট্যাগের দুটি আবশ্যক এট্রিবিউট রয়েছেঃ src
এবং alt
ব্যবহার করা হয়।
টেকনিক্যাললি এইচটিএমএল পেজের মধ্যে ইমেজ অন্তর্ভুক্ত করা যায় না। ইমেজকে এইচটিএমএল পেজে লিংক করা হয়। <img>
ট্যাগ ইমেজের জন্য প্রয়োজনীয় জায়গা করে দেয়।
ইমেজের মাধ্যমে অন্য আরেকটি ডকুমেন্টের সাথে লিংক করতে <a>
ট্যাগের ভিতরে <img>
ট্যাগটি ব্যবহার করুন।
নিচের উদাহরণে দেখানো হলো কিভাবে এইচটিএমএল পেজে ইমেজ সংযুক্ত করতে হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<img src="satt.png" alt="Satt Logo" height="100" width="100">
</body>
</html>
ফলাফল
এট্রিবিউট
নিচের টেবিলে <img>
ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ
এট্রিবিউট | ভ্যালু | বর্ণনা |
---|---|---|
align | top bottom middle left right |
এইচটিএমএল(৫)-এ সাপোর্ট করে না। চারপাশের এলিমেন্টের উপর ভিত্তি করে <img> এলিমেন্টের alignment নির্ধারণ করে। |
alt | text | ইমেজের জন্য একটি বিকল্প টেক্সট নির্ধারণ করে। কোন কারনে যখন ইমেজটি প্রদর্শিত না হবে তখন এটি বিকল্প হিসেবে প্রদর্শিত হবে। |
border | pixels | এইচটিএমএল(৫)-এ সাপোর্ট করে না। ইমেজের চারপাশের বর্ডারের প্রস্থ নির্ধারণ করে। |
height | pixels | ইমেজ এর উচ্চতা নির্ধারণ করে। |
hspace | pixels | এইচটিএমএল(৫)-এ সাপোর্ট করে না। ইমেজের বাম এবং ডান পাশের স্পেস নির্ধারণ করে। |
ismap | ismap | একটি ইমেজকে সার্ভার-সাইড ইমেজ-ম্যাপ হিসেবে নির্ধারণ করে। |
longdesc | URL | ইমেজের বিশদ ব্যাখ্যা/বিবরণের জন্য একটি URL নির্ধারণ করে। |
src | URL | ইমেজ এর সোর্স URL নির্ধারণ করে। |
usemap | #mapname | একটি ইমেজকে ক্লাইন্ট-সাইড ইমেজ হিসেবে নির্ধারণ করে। |
vspace | pixels | এইচটিএমএল(৫)-এ সাপোর্ট করে না। ইমেজ এর উপরে এবং নিচে স্পেস নির্ধারণ করে। |
width | pixels | ইমেজ এর প্রস্থ/width নির্ধারণ করে। |
<img>
ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?
গ্লোবাল এট্রিবিউট | ইভেন্ট এট্রিবিউট |
---|---|
সাপোর্ট করে | সাপোর্ট করে |
<img>
ট্যাগের ডিফল্ট স্টাইল
অধিকাংশ ব্রাউজারেই <img>
এলিমেন্ট নিম্নলিখিত স্টাইল ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ
img {
display: inline-block;
}