HTML Images
এইচটিএমএল ইমেজ টিউটোরিয়াল (বাংলায়)
এইচটিএমএল-এ ইমেজ যোগ করতে <img> ট্যাগ ব্যবহৃত হয়। এই টিউটোরিয়ালে আমরা শিখব কীভাবে ওয়েব পেজে ছবি যোগ করা যায় এবং সেগুলো স্টাইল করা যায়।
১. এইচটিএমএল ইমেজ কী?
ইমেজ ট্যাগ (<img>) ওয়েব পেজে ছবি প্রদর্শন করে। এটি একটি সেলফ-ক্লোজিং ট্যাগ, এবং এর প্রধান অ্যাট্রিবিউট হলো src (ছবির পাথ) এবং alt (বিকল্প টেক্সট)।
সিনট্যাক্স: <img src="image.jpg" alt="ছবির বর্ণনা">
২. গুরুত্বপূর্ণ অ্যাট্রিবিউট
- src: ছবির ফাইলের পাথ বা URL।
- alt: ছবি লোড না হলে প্রদর্শিত বিকল্প টেক্সট।
- width/height: ছবির প্রস্থ এবং উচ্চতা নির্ধারণ করে।
- title: হোভার করলে অতিরিক্ত তথ্য দেখায়।
৩. ইমেজ যোগ করার উদাহরণ
উদাহরণ ১: সাধারণ ইমেজ
একটি সাধারণ ছবি যোগ করা।
কোড:
<img src="https://via.placeholder.com/150" alt="একটি উদাহরণ ছবি">
ব্যাখ্যা: src ছবির URL নির্দেশ করে, এবং alt ছবি লোড না হলে বিকল্প টেক্সট দেখায়।
উদাহরণ ২: ইমেজের সাইজ নির্ধারণ
ছবির প্রস্থ এবং উচ্চতা নির্ধারণ করা।
কোড:
<img src="https://via.placeholder.com/200x100" alt="আয়তাকার ছবি" width="200" height="100">
দ্রষ্টব্য: width এবং height পিক্সেলে সেট করা হয়েছে।
উদাহরণ ৩: ইমেজের সাথে লিঙ্ক
ছবিকে ক্লিকযোগ্য লিঙ্কে রূপান্তর করা।
কোড:
<a href="https://www.example.com">
<img src="https://via.placeholder.com/150" alt="লিঙ্কযুক্ত ছBOSSMARKDOWN
ছবি">
</a>
ব্যাখ্যা: <a> ট্যাগের মধ্যে <img> ব্যবহার করে ছবি লিঙ্কযুক্ত হয়।
উদাহরণ ৪: সিএসএস দিয়ে ইমেজ স্টাইলিং
সিএসএস ব্যবহার করে ছবির চেহারা পরিবর্তন।
কোড:
<style>
.styled-img {
border: 2px solid #3498db;
border-radius: 8px;
padding: 5px;
}
</style>
<img src="https://via.placeholder.com/150" alt="স্টাইল করা ছবি" class="styled-img">
ব্যাখ্যা: সিএসএস দিয়ে ছবিতে বর্ডার এবং রাউন্ড কর্নার যোগ করা হয়েছে।
উদাহরণ ৫: ইমেজের টাইটেল অ্যাট্রিবিউট
হোভার করলে অতিরিক্ত তথ্য দেখানো।
কোড:
<img src="https://via.placeholder.com/150" alt="ছবির বর্ণনা" title="এটি একটি উদাহরণ ছবি">
ব্যাখ্যা: title অ্যাট্রিবিউট হোভার করলে টুলটিপ দেখায়।
৪. ইমেজ ব্যবহারের টিপস
- সবসময়
altটেক্সট ব্যবহার করুন, এটি SEO এবং অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ। - ছবির সাইজ অপ্টিমাইজ করুন যাতে পেজ দ্রুত লোড হয়।
- সিএসএস দিয়ে ইমেজের রেস্পন্সিভ ডিজাইন নিশ্চিত করুন (যেমন
max-width: 100%)। - সঠিক ফাইল ফরম্যাট ব্যবহার করুন (JPEG, PNG, WebP)।
- ইমেজের লাইসেন্স চেক করে ব্যবহার করুন।
