img tag
image শব্দ থেকে img ট্যাগ এর নামকরণ করা হয়েছে। ছবি দেখাতে এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের মাঝে src নামে একটি এট্রিবিউট থাকে, এই এট্রিবিউটের মাঝে image এর লিংকটি দিয়ে দিতে হয়। src এট্রিবিউট এসেছে source শব্দটি থেকে।
এখানে alt নামে আরেকটি এট্রিবিউট ব্যবহার করা হয়েছে। এই এট্রিবিউটটি এসেছে alternative শব্দটি থেকে। যদি কোন কারনে image টা src এর মাঝে খুঁজে না পায় তাহলে alt এর মাঝে যেই লেখাটি আছে সেটি দেখাবে, সাথে একটি ভাঙ্গা ছবির আইকন দেখাবে। যেমন নিচের উদাহরণে আমি ইচ্ছে করে src এর এমন একটি মান দিয়েছি যেখানে আসলে কোন ছবি নাই।
img ট্যাগে আরও দুইটি এট্রিবিউট আছেঃ height এবং width. এই দুইটি এট্রিবিউটের মান যথাক্রমে ইমেজের উচ্চতা এবং প্রস্থ নির্ধারন করে দেয়। যেমন নিচের উদাহরণে অরিজিনাল ইমেজ এর সাইজ যত বড় অথবা যত ছোটই হোক না কেন, এর উচ্চতা = ১০০ পিক্সেল এবং প্রস্থ ৪০০ পিক্সেল দেখাতে height = 100 এবং width = 400 লিখা হয়েছে।
পিক্সেল শব্দ টা যদি আপনার কাছে নতুন মনে হয় তাহলে এটা নিয়ে বেশি ভাববেন না। শুধু এতটুকু মনে রাখুন, দূরত্ব মাপার জন্য যেমন মিটার, কিলোমিটার, ওজন মাপার জন্য গ্রাম, কিলগ্রাম একক ব্যবহার করেন, একই ভাবে ওয়েবে কোন কিছু পরিমাপ করার জন্য পিক্সেল (pixel) একক ব্যবহার করা হয়।
একটি ব্যাপার লক্ষ্য করুন, img ট্যাগের আলাদা করে ওপেনিং এবং ক্লোজিং ট্যাগ নাই। এই ধরনের ট্যাগ কে self closing ট্যাগ বলে। এই ট্যাগ গুলো দুইভাবে লিখা যায়ঃ <img> অথবা <img/>. আরও কিছু self closing ট্যাগের বেলায়ও এই কথাগুলো সত্যি, যেমন লাইন ব্রেকিং ট্যাগঃ <br> অথবা <br/>, horizontal ট্যাগঃ <hr> অথবা <hr/>
জটিলতা এড়ানোর জন্য আমরা কিছু আলোচনা এড়িয়ে যাচ্ছি, সেমনঃ src এর মানটা হল একটা ইমেজ কোথায় আছে সেই লিংক টা। এই লিন লিংকটা কিভাবে লিখবেন সেটা নিয়ে পরবর্তীতে বিস্তারিত আলোচনা করব ‘এডভান্স HTML এবং CSS’ কোর্সে।