HTML Images

ওয়েব পেজকে ডিজাইন করতে অনেক ক্ষেত্রে ছবি  (image) ব্যাবহার করতে হয়।ছবি ব্যাবহার করে ওয়েব পেজকে আকর্ষণীয় রুপ দেয়া যায়। ওয়েব পেজে ছবি যুক্ত করেত <img/> ট্যাগ ব্যাবহার করা হয়।এই ট্যাগের কোন closing ট্যাগ নাই। 

<img/> ট্যাগ এর সাথে src attribute ব্যাবহার করা হয়। 
 <img src="url" alt="some_text">

এখানে src আর  alt <img/> ট্যাগের attribute। src ব্যাবহার করে ছবির অবস্থান (location) দেখিয়ে দেয়া হয়।আর  alt ব্যাবহার করে ছবির বর্ণনা লেখা হয়। alt এর মাঝে যে text লেখা হবে সেটা ফটো লোড হতে দেরি হলে তখন লেখাটা দেখাবে।

যদি কোন folder  থেকে ছবি নিতে চান তাহলে

 <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">

দেখুন এখানে প্রথমে html folder  এর ভিতরে images নামের folder টা দেখানো হয়েছে।

এখানে src এর পরে folder  এবং তার ভিতরে ছবির extension  সহ (html5.gif) লেখা হয়েছে। extension  সহ না লিখলে কাজ করবে না।ছবি যদি jpg হয় তাহলে ছবির নামের পরে .jpg দিয়ে দিতে হবে।যদি PNG  হয় তাহলে .PNG  দিয়ে দিতে হবে।আপনার ছবির যে ফরম্যাট থাকবে সেটাই দিতে হবে।

আপনি যদি 
  <img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px"> এভাবে লিখেন তাহলে কাজ করবে না।কারন এখানে ছবিটা কোন জায়গাতে মানে কোন folder  এ আছে সেটা চিনিয়ে দেয়া হয় নাই।আপনার ছবিটা যে folder  এ রেখেছেন সে folder   দেখিয়ে না দিলে ছবি খুজে পাবে না।প্রথমে folder  দেখিয়ে দিয়ে সেই folder  এর মাঝে রাখা ছবির extension  সহ নাম লিখতে হবে। আবার আপনি যদি কোন folder  না করে শুধু যে folder  এ html  ফাইলটি আছে সেখানে যদি আপনার ছবিটা থাকে সেক্ষেত্রে আপনাকে শুধু ছবির নামটা extension  সহ লিখেই হবে।

আপনি চাইলে আলাদা server  থেকে ছবি insert  করতে পারেন।এর জন্য লিখতে হবে

<img src="http://bdtutorialweb.blogspot.com/images/html.jpg">

এখানে server   এর নাম এবং server  এর ছবির অবস্থান সহ ছবির নাম। 

আবার যদি animation  ছবি ব্যাবহার করতে চান তাহলে

<img src="image.gif" alt="some_text" style="width:48px;height:48px">

আপনাদের জানা আছে gif একটা ছবি animation  ফরম্যাট।

আপনি ওয়েব পেজে একটা ছবি insert  করলেন। এখন আপনি চাচ্ছেন সেটার height এবং width আপনি নির্ধারণ করে দিবেন, তখন কি করবেন?

খুব সহজ।আপনি <style> attribute ব্যাবহার করে এই কাজটা করতে পারেন। যেমন-

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">

এখানে style="width:128px;height:128px" দিয়ে ছবিটার width 128px করে দেয়া হয়েছে। আর height করা হয়েছে 128px।

এখানে একটা বেপার আছে। সেটা হল px লেখাটা ব্যাবহার না করলেও কোন সমস্যা নাই। যেমন-

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">