একটি ওয়েব পেজ কে দৃষ্টিনন্দন ও আকর্ষণীয় করে তোলার জন্য ইমেজ এর ব্যবহার অনস্বীকার্য। ওয়েব পেজ কে সুন্দর করে সাজাতে যেমন বিভিন্ন স্টাইলের ফন্ট, মানানসই কালার এর প্রয়োজন, তেমনি সুন্দর ইমেজ এর প্রয়োজনীয়তাও রয়েছে। সঠিক স্থানে সঠিক ইমেজ এর ব্যবহার একটি ওয়েব পেজ এর উন্নত আউটলুক নির্ধারণে সহায়তা করে।
এইচটিএমএল এ ইমেজ কে প্রদর্শন বা ডিফাইন করার হয় <img> ট্যাগ ব্যবহার করে। এটি একটি খালি বা empty ট্যাগ অর্থাৎ এর কোন শেষ ট্যাগ নেই, সুধু এট্রিবিউট আছে। ওয়েব পেজে ইমেজ প্রদর্শন করার জন্য আপনাকে src এট্রিবিউট ব্যবহার করতে হবে। src হল ‘source’ এর সংক্ষিপ্ত রূপ। src এট্রিবিউটের মান হল যে ইমেজ টি আপনি প্রদর্শন করতে চাচ্ছেন তার url বা ঠিকানা অর্থাৎ ইমেজ টি কোথায় সংরক্ষিত আছে তার ঠিকানা। নিছে এর সিনট্যাক্স দেখুন।
<img src="image_name.formate"/>
নিচে ওয়েব পেজে একটি ছবি প্রদর্শনের কোড গুলো অর্থাৎ একটি উদাহরণ দেখুন।
<body> <img src="flower.jpg" /> </body>
নোট - যদি আপনি একটি ইমেজ কে ২টি প্যারাগ্রাফ এর মাঝে রাখেন তবে ব্রাউজার আগে ১ম প্যারাগ্রাফ পরে ইমেজটি ও তারপর ২য় প্যারাগ্রাফটি প্রদর্শন করবে।
ওয়েব পেজ বা এইচটিএমএল ডকুমেন্টে ব্যবহার করার মত সর্বজন বিদিত এবং সর্বত্তম ফরম্যাট গুলো হল - JPG, PNG এবং GIF, নিছে এগুলোর ব্যবহার ক্ষেত্র উল্লেখ করা হল।
কোন কারনে ব্রাউজার যদি ইমেজ প্রদর্শনে ব্যার্থ হয় বা ইউজার ইমেজ বন্ধ করে রাখে বা ধীরে ধীরে পেজ লোড হবার কারনে যদি ইমেজ লোড না হয় তবে ইমেজ এর স্থানে একটি বক্স বা আইকন দেখা যায় এবং এর সাথে সেই ছবি সম্পর্কিত কোন তথ্য বা উপাত্ত দেখা যায়। alt এট্রিবিউট ব্যবহার করে এই কাজটি করা যায়।
<body> <img src="flower.jpg" alt="This is a flower."/> </body>
নোট - ওয়েব পেজে বাবহ্রিত ছবির সাথে অর্থাৎ <img> ট্যাগে alt এট্রিবিউট ব্যবহার না করা হলে, ওয়েব পেজটি validation করা যায় না।
নোট - যদি আপনি একটি ইমেজ কে ২টি প্যারাগ্রাফ এর মাঝে রাখেন তবে ব্রাউজার প্রথমে ১ম প্যারাগ্রাফ পরে ইমেজটি ও তারপর ২য় প্যারাগ্রাফটি প্রদর্শন করবে।
কোন ছবি বা image এর দৈর্ঘ্য বা height এবং প্রস্থ বা width নির্ধারণ করার জন্য img ট্যাগের সাথে style এট্রিবিউট এবং এতে height ও width প্রপার্টি ব্যবহার করা হয়। নিচে এর উদাহরণ দেখুন।
<img src="demo.jpg" alt="demo image" style="width:400px;height:250px;" />
এর দৈর্ঘ্য অর্থাৎ height এবং প্রস্থ অর্থাৎ width এর মান বা value স্বয়ংক্রিয় বা defoult ভাবেই pixel এ নির্ধারিত হয়। তবে আপনি এই মান শতকরা (%), em ইত্যাদি একক ব্যবহার করেও করতে পারেন।
কোন ছবি বা image এর দৈর্ঘ্য বা height এবং প্রস্থ বা width নির্ধারণ করার জন্য img ট্যাগের সাথে height এবং width এট্রিবিউট ব্যবহার করা যায়। নিচে এর উদাহরণ দেখুন।
<img src="demo.jpg" alt="demo image" width="400" height="250" />
এর দৈর্ঘ্য অর্থাৎ height এবং প্রস্থ অর্থাৎ width এর মান বা value স্বয়ংক্রিয় বা defoult ভাবেই pixel এ নির্ধারিত হয়। তবে আপনি এই মান শতকরা (%), em ইত্যাদি একক ব্যবহার করেও করতে পারেন।
height এবং width এট্রিবিউট ব্যবহার করে image এর height এবং width পূর্ব থেকেই নির্ধারণ করে দেয়ার একটি ভাল দিক হল এতে করে ব্রাউজার আগে থেকেই image এর আকার জানতে পারে এবং পেজ লোড হওয়ার সময় ওয়েব পেজের লেআউট এ এর কোন প্রভাব পরে না।
ছবির প্রস্থ এবং উচ্চতা নির্ধারণ করার জন্য width, height অথবা style, এই তিনটি এট্রিবিউটই এইচটিএমএল এ অনুমোদিত।
কিন্তু width, height ব্যবহার না করে style এট্রিবিউট ব্যবহারে বাড়তি সুবিধা পাওয়া যায়। তা হল style এট্রিবিউট ব্যবহার করা হলে, আভ্যন্তরীণ স্টাইল বা বহিঃস্থ স্টাইল ছবির আকার পরিবর্তন করতে পারবে না।
<!DOCTYPE html> <html> <head> <style> img{ width:100%; } </style> </head> <body> <img src="flower.jpg" alt="Flower image" width="100%" height="100%"> <img src="bird.png" alt="Bird image" style="width:500px;height:400px;"> </body> </html>
সাধারণ ভাবে ব্রাউজার ধরে নেয়, ছবি এবং এইচটিএমএল ডকুমেন্ট একই ফোল্ডারে রয়েছে, কিন্তু আপনি যদি ছবিটি অন্য কোন ফোল্ডারে রেখে থাকেন, তবে সেই ফোল্ডারের যথার্থ ডিরেক্টরি অর্থাৎ যথাযথ ফোল্ডারের নাম src এট্রিবিউটে উল্লেখ করে দিতে হবে।
<img src="/image/Flower.jpg" alt="Flower image" style="width:500px;height:400px;">
কিছু কিছু ওয়েবসাইট আছে, যারা তাদের ছবিগুলো কিছু ইমেজ সার্ভারে রাখে এবং তাদের ওয়েবসাইটে সেই ছবি গুলো লিংক করে ব্যবহার করে। নিছে একটি উদাহরণ দেখুন।
<img src="https://www.websschool.com/images/image_example.jpg" alt="websSchools.com">
এ সম্পর্কে আরও বিস্তারিত জানতে আমাদের এইচটিএমএল ফাইল পাথ পেজটি ব্রাউজ করুন।
এনিমেটেড ছবিকে সকল ছবির মত সাধারন ভাবেই কোন ওয়েব পেজে প্রদর্শন করা যায়। তবে ছবিটি অবশ্যই GIF ফরম্যাটের হতে হবে। নিচে একটি উদাহরণ দেখুন।
<img src="animated-image.gif" alt="Its a animated image" style="width:200px;height:200px;">
সিএসএস float প্রোপার্টিটি ব্যবহার কোন ছবিকে লেখার ডান অথবা বাম পাশে প্রদর্শনের করা যায়। নিচে এর উদাহরণ দেখুন।
<p><img src="Flower.png" alt="Flower image" style="float:right;width:70px;height:70px;"> The flower image will float to the right of the text.</p> <p><img src="bird.png" alt="Bird flower" style="float:left;width:70px;height:70px;"> The bird image will float to the left of the text.</p>
নোট - সিএসএস float প্রোপার্টি সম্পর্কে আরও জানতে আমাদের সিএসএস ফ্লোটিং টিউটোরিয়ালটি দেখুন।
কোন এইচটিএমএল এলিমেন্টের ব্যাকগ্রাউন্ড এ কোন ছবি যুক্ত করতে চাইলে সিএসএস background-image প্রপার্টি ব্যবহার করুন। নিচে এর একটি উদাহর দেখুন।
<body style="background-image:url('sky.jpg')"> <h2>Background Image</h2> </body>
কোন প্যারাগ্রাফ এলিমেন্টের ব্যাকগ্রাউন্ডে কোন ছবি যুক্ত করতে হলে, p এলিমেন্টে background-image প্রপার্টি ব্যবহার করুন।
<body>
<p style="background-image:url('clouds.jpg')"> ... </p> </body>
নোট - ব্যাকগ্রাউন্ডে ছবির ব্যবহার সম্পর্কে আরও জানতে আমাদের সিএসএস background প্রপার্টি পেজটি ব্রাউজ করুন।
এইচটিএমএল ৫ ই প্রথম <picture> এলিমেন্টের পরিচয় করিয়েছে। এর ফলে কোন ছবির সোর্স আরও ভালভাবে নির্ধারণ করা সম্ভব হয়েছে। <picture> এলিমেন্ট আসলে কতগুলো <source> এলিমেন্ট ধারন করে, যার প্রত্যেকটি ভিন্ন ভিন ছবির লিংক ধারন করে। এই পদ্ধতিতে ব্রাউযার ছবিগুলো থেকে আমন একটি ছবি বেছে নিতে পারে জেটা ব্রাউজার স্ক্রীনের সাথে সর্বোত্তম মানানসই হয়।
প্রত্যেক <source> এলিমেন্টে এট্রিবিউট আছে যেগুলো কোন আকারের ব্রাউজার স্ক্রীনে প্রদর্শিত হবে টা নির্ধারণ করতে নির্দেশ করে।
ব্রাউজার প্রথম <source> এলিমেন্টের এট্রিবিউট মেলাতে চেষ্টা করে এবং না হলে পরের <source> এলিমেন্টে যায়।
<picture> <source media="(min-width: 650px)" srcset="flower_one.jpg"> <source media="(min-width: 465px)" srcset="flower_two.jpg"> <img src="flower_three.jpg" alt="Flowers" style="width:auto;"> </picture>
নোট - সব সময় <picture> এলিমেন্টের শেষ child এলিমেন্ট হিসেবে একটি <img> এলিমেন্টকে নির্ধারণ করুন। যে সকল ব্রাউজারে <picture> এলিমেন্ট সমর্থন করে না সেগুলোতে <img> এলিমেন্টটি কাজ করবে অথবা যদি কোন <source> এলিমেন্টই না মেলে তবে <img> এলিমেন্টের ছবিটি প্রদর্শিত হবে।
| ট্যাগ | বর্ণনা |
|---|---|
| <img> | কোন ছবি প্রদর্শন করার জন্য ব্যবহার করা হয় |
| <map> | কোন ইমেজ-ম্যাপ তৈরি করার জন্য ব্যবহার করা হয় |
| <area> | ছবিতে ম্যাপের clickable area নির্ধারণ করার জন্য ব্যবহার করা হয় |
| <picture> | একাধিক ছবি বা image এর রিসোর্সের জন্য একটি কন্টেইনার নির্ধারণ করে। |
শেয়ার করুন
