এইচটিএমএল বাংলা টিউটোরিয়াল পর্ব ১২ – ছবি টিউটোরিয়াল (HTML Images Tutorial in Bangla)

<img /> ট্যাগ ব্যবহার করে ওয়েব পেজে যেকোন ছবি প্রদর্শন করতে পারবেন। যেমন

1.<img src="/sunset.gif" alt="Sunset" />

প্রদর্শন

Sunset

 

এখানে src এবং alt হচ্ছে img ট্যাগের দুটি এট্রিবিউট। src দিয়ে ছবিটির অবস্থান দেখিয়ে দিতে হবে এবং alt এর মধ্যে ছবিটির কোন বর্ননা দিতে পারবেন। ছবি লোড হতে দেরি হলে ততক্ষন alt এর ভিতর লেখাটি দেখায়।

src এর ভিতর ছবিটির উৎস দুভাবে দিতে পারেন। absolute path অথবা relative path যেমন আমরা রিলেটিভ পাথ দিয়েছি। আপনি চাইলে absolute path (পুরো ঠিকানা) দিতে পারেন। http://www.careersourcebd.com/images/stories/imagel.jpg

এছাড়া আছে height এবং width নামে দুটি এট্রিবিউট। নাম দেখেই আন্দাজ হচ্ছে যে এদুটি দিয়ে কি করা যাবে। ছবির দৈর্ঘ্য এবং প্রস্থ নির্ধারন করে দিতে পারেন।

** width=”100″ বা height=”200″ এভাবে দিলেই হবে। 100px এভাবে দিতে হবেনা।

** যেকোন একটি দিলে একটা সুবিধা হচ্ছে ব্রাউজার অপরটি অটোমেটিক খাপ খাইয়ে নেয় ফলে ছবির আনুপাতিক আকার ঠিক থাকে। এত করে ছবিটি দেখতে সামন্জস্যপূর্ন হয়।

এইচটিএমএল বাংলা টিউটোরিয়াল পর্ব ১২ - ছবি টিউটোরিয়াল (HTML Images Tutorial in Bangla)

আরো এট্রিবিউট আছে যেমন align, valign এগুলি দিয়ে ছবির এলাইনমেন্ট ইচ্ছে মত দেয়া যায়

align এর মান হতে পারে right, center, left

আর valign এর মান হতে পারে top, bottom, center

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<img align="right" src="/images/stories/imagel.jpg" alt="sunset"/>
<p> Ut wisi enim </p>

কোডটি কেমন হবে তা দেখার জন্য এখানে ক্লিক করুন

 

তবে এই এট্রিবিউট দুটি এখন আর বেশি ব্যবহার হয়না

Leave a Reply