বেসিক এইচটিএমএল(HTML)শিখুন টিউটোরিয়াল [পর্ব-৭] : এইচটিএমএল ইমেজ [image]

শুরু করছি বেসিক এইচটিএমএল(HTML)শিখুন টিউটোরিয়াল এর ৭ম পর্ব।আজকে পর্বের বিষয় ইমেজ (image)।

ইমেজ (image):

একটা ওয়েব পেজকে আকর্ষণীয় করতে ইমেজ (image) খুবই গুরুত্বপূর্ণ উপাদান। ওয়েবপেজে ইমেজের এর সঠিক ব্যবহার করলে পেজটি আকর্ষণীয় ও ব্যবহারের সুবিধা হয়। ওয়েবসাইটের পেজে ইমেজ বা ছবি যুক্ত করার জন্য প্রয়োজনীয় ট্যাগটি হচ্ছে ইমেজ (<img>)। এটা মূলত একটি সিঙ্গেল ট্যাগ।এর কোন শেষ ট্যাগ নেই। তবে শুধুমাত্র ইমেজ (<img>) দিয়ে কোন কাজ হয় না,এর সাথে সবসময়ই সোর্স (src) এট্রিবিউটটি ব্যবহার করতে হয়। যেমনঃ <img scr= “এখানে ইমেজের এক্সটেনসহ ইমেজের নাম”/> । এবার চলুন ইমেজ বা ছবি এর ব্যাবহার দেখি, নিচের উদাহরণটি নোটপ্যাড এ লিখি বা কপি ও পেস্ট করি।

<!DOCTYPE HTML>

<html>

<head>

<title>Image Example</title>

</head>

<h3> This is an example of image.</h3>

</body>

</html>

এখন ফাইলটি সেভ করে যেকোনো ব্রাউজারে ওপেন করলে নিচের মতো দেখতে পাব।

আর এখানে একটা জরুরি বিষয় অবশ্যই খেয়াল রাখতে হবে এইচটিএমএল (html )ফাইলটি যেখানে ইমেজটিও সেখানে রাখতে হবে। যেমন নিচের চিত্রটিঃ

আমি আমার এইচটিএমএল (html) ফাইলটি যেখানে সেখানেই ইমেজটি রেখেছি,না হলে আমার ইমেজটি ব্রাউজারে দেখা যাবেনা।

ইমেজের সাইজ (image size):

ইমেজের সাইজ বা হাইট(height) এবং উইডিথ(width) ঠিক করার জন্য height এবং width এট্রিবিউট (attribute) ব্যাবহার করা হয়। যেমনঃ নিচের কোডটি আপনার এডিটরে লিখুন।

<!DOCTYPE HTML>

<html>

<head>

<title>Image Example</title>

</head>

<h3> This is an example of image.</h3>

</body>

</html

এরপর ফাইলটি সেভ করে আপনার ব্রাউজারে ওপেন করুন,ইমেজের সাইজ দেখতে পাবেন। আপনি আপনার ইচ্ছেমত সাইজ দিয়ে চর্চা করুন।

এখন যদি ইমেজটি অন্য পাশে(ডানে, মাঝখানে) বসাতে চান তাহলে আপনাকে ইমেজ ট্যাগ এর সাথে Align এবং valign এট্রিবিউটস (attribute) ব্যবহার করতে হবে। যেমনঃ

align (Horizontal)

right
left
center

valign (Vertical)

top
bottom
center

আপনারা উপরের এট্রিবিউটসগুলো ব্যাবহার করবেন এবং বার বার চর্চা করবেন। চর্চা না করলে মনে থাকবেনা এবং শেখাও হবেনা। আজকের পর্ব এখানেই এই পর্যন্ত। আগামী পর্ব দেখার আমন্ত্রণ জানিয়ে এখানেই শেষ করছি।