html img tag কিভাবে ব্যাবহার করবেন
Web Page এ ছবি নিয়ে আসবার জন্য আমাদের img tag টি ব্যবহার করতে হয় html code এ । html5 standard এ img tag এর দুটি attribute থাকতেই হবে, আর তারা হচ্ছে, src ও alt . এর আগে আমরা html tag ও html attributes নিয়ে বিস্তারিত আলোচনা করেছি । তো চলুন দেখা html img ট্যাগ কিভাবে ব্যাবহার করবেন
img tag in html
<img src="imagename.jpg" alt="New Image">
উপরে দেখতে পাচ্ছি এইচটিএমএল পেজে ইমেজ নিয়ে আসবার একটি কোড যেখানে src (source) attribute এর ভিতরে একটি ইমেজের নাম দেয়া আছে ( imagename.jpg ) ইমেজ ফাইল এ্ক্সটেনশন (.jpg) সহ । আর এর সাথে যে alt attribute টি আছে সেটি আসলে Alternative Text নামে পরিচিত যা কোন কারনে ইমেজ টি লোড না হয়ে এর ভেলু কে দেখায় (উপরের কোডের ক্ষেত্রে New Image দেখাবে যদি ইমেজ টি না লোড হয় )
Note : উপরের কোড এম মতো করে HTML পেইজ এ ইমেজ নিতে হলে ইমেজ ফাইলটিকে html file টি যে ফোল্ডারে আছে সেই এ্কই ফোল্ডারে রাখতে হবে । অনেক সময় ফাইলের extension দেখা যায়না, সে ক্ষেত্রে দেখে নিন কিভাবে ফাইল এক্সটেনশন দেখা যায় ।
- img tag এর কোন closing tag নেই
- img tag একটি inline element
- html5 এ দম img tag এর সাথে অবশ্যই alt attribute যোগ করতে হবে
ইমেজের সাইজ ছোট বা বড় করবার জন্য আমরা চাইলে height ও width এট্রিবিউট ব্যবহার করতে পারি । যদিও কাজটি করার জন্য CSS ই ভালো অপশন । নিচের কোড টি খেয়াল করুন …
<img src="imagename.jpg" alt="New Image" width="250" height="250">
আমরা এখানে height ও width এর ভেলু দিয়েছি 250, ফলে ইমেজ টি এবার স্কয়ার হবে । তবে এতে করে ইমেজ টি shape টা নষ্ট হয়ে যেতে পারে কারন ইমেজ টি আগে থেকে হয়তো স্কয়ার ছিলোনা । সে ক্ষেত্রে শুধু height কিংবা width ব্যবহার করা যেতে পারে ।
