X

X

X

HTML এ ছবি বা স্থির চিত্রের ব্যবহার


ওয়েবপেজে ছবি ব্যবহারের মাধ্যমে এর সৌন্দর্য আরও উন্নত করা যায়। তাছাড়া কোনো কন্টেটকে সঠিকভাবে উপস্থাপণের জন্য ছবি ব্যবহার করা উত্তম।


HTML এ ছবি ব্যবহার

<img src="http://www.seicoder.com/resources/html/images/pulpitrock.jpg" alt="Mountain View" width="500" height="377">

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML এ ছবি ব্যবহারের নিয়ম

HTML -এ <img> tag এর মাধ্যমে ছবি উপস্থাপণ করা যায়। <img> মূলত একটি Empty (কন্টেন্ট বিহীন) ট্যাগ। কেননা এর ভেতরে কোনো কন্টেন্ট নেই। এটি শুধুমাত্র attribute ধারণ করে।

src attribute -এর মাধ্যমে ওয়েবপেজে উপস্থাপিত ছবির ঠিনানা উল্লেখ করা হয়।

<img src=”url“>

alt Attribute (ছবির বিকল্প শিরোনাম)

যদি কোনো কারণে ওয়েবপেজে কাংখিত ছবি লোড না হয়, তবে সেক্ষেত্রে ছবির পরিবর্তে কোনো লেখা বা বর্ণনা উপস্থাপণ করা যায়। এ পরিবর্তিত লেখাটিকে alt attribute এর মাধ্যমে বর্ণনা করতে হয়।

এটির মাধ্যমে ছবি কি জন্যে উপস্থাপিত হচ্ছে সেটি বর্ণনা করা উচিত।

HTML Image এর বিকল্প লেখা


    

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

যদি ব্রাউজার src attribute এ বর্ণিত কাংখিত ছবি খুজে না পায়, সেক্ষেত্রে alt attribute -এর মান প্রদর্শিত হয়।

বি: দ্র: alt attribute ব্যবহার করা বাধ্যতামূলক। এটি ছাড়া কোনো HTML validator পেজটিকে Invalid হিসেবে মূল্যায়ন করবে।


Image Size – দৈর্ঘ্য ও প্রস্থ

CSS style attribute এর মাধ্যমে কোনো ছবির দৈর্ঘ্য এবং প্রস্থ সেট করা যায়।

HTML Image size

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

অথবা, width ও height attribute ব্যবহার করেও কোনো ছবির দৈর্ঘ্য ও প্রস্থ সেট করা যায়। এদের মাধ্যমে ছবির দৈর্ঘ্য ও প্রস্থের মান সবসময় পিক্সেলে হিসাবে বিবেচিত হয়।

বি:দ্র: HTML -এ ছবি ব্যবহারের সময় সবসময় তার দৈর্ঘ্য ও প্রস্থ উল্লেখ করবেন। নাহলে ছবির বড় আকারের জন্য পুরো পেজের ডিজাইন নষ্ট হয়ে যেতে পারে।


width, height নাকি style atttribute ব্যবহার করবেন

HTML5 এ width, height, এবং style attributes সবগুলোর ব্যবহারই বৈধ।

তবে ব্যক্তিগতভাবে আমার পরামর্শ হচ্ছে, style attribute ব্যবহার করা উত্তম। কেননা এটি CSS style sheet এর দ্বারা ছবির আকৃতি পরিবর্তনে বাধা দেয়। ফলে স্বাভাবিকভাবে ছবির আকৃতি ঠিক থাকে।

HTML Image size attribute or style attribute

<!DOCTYPE html>
<html>
<head>
<style>
/*This stylesheet sets the width of all images to 100%: */
img {
    width:100%;
}
</style>
</head>
<body>

<p>
The image below has the width attribute set to 128 pixels, but the stylesheet overrides it, and sets the width to 100%.
</p>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<p>The image below uses the style attribute, where the width is set to 128 pixels which overrides the stylesheet:</p>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


অন্যকোনো ফোল্ডার থেকে ছবি প্রদর্শণ

যদি অন্য ফোল্ডার বর্ণনা করা না থাকে তবে ব্রাউজার সাধারণত একই ফোল্ডারে ছবিকে খুজে। তবে ছবিগুলোকে সাধারণত কোনো ফোল্ডারে রাখা ভালো। তখন ফোল্ডারের নাম অবশ্যই ছবির ঠিকানার আগে যুক্ত করতে হবে।

অন্যকোনো ফোল্ডার থেকে ছবি প্রদর্শণ

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


অন্য সার্ভার থেকে ছবি প্রদর্শণ

কিছু কিছু ওয়েবসাইট তাদের সকল ছবি আলাদা সার্ভারে সংরক্ষণ করে থাকে। আসলে, আপনি পৃথিবীর যেকোনো পাবলিক ওয়েবসাইট থেকে ছবি আপনার ওয়েবসাইটে প্রকাশ করতে পারবেন।

অন্য সার্ভার থেকে ছবি প্রদর্শণ

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

ফাইল পথ সম্পর্কে বিস্তারিত  HTML File Paths চ্যাপ্টারে জানতে পারবেন।


Animated ছবি প্রদর্শণ

HTML -এ GIF ছবি প্রদর্শণ করা যায়। GIF এক্সটেনশন বিশিষ্ট ছবিগুলো সাধারণত এনিমেটেড হয়ে থাকে।

HTML এ এনিমেটেড ছবির ব্যবহার

<p>The GIF standard allows moving images.</p>

<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ছবিকে লিংক হিসেবে ব্যবহার

কোনো ছবিকে লিংক হিসেবে ব্যবহারের জন্য উক্ত ছবিকে একটি লিংকের কন্টেন্ট হিসেবে উপস্থাপণ করতে হবে। অর্থাৎ, উক্ত ছবিকে <a> ট্যাগের ভিতরে লিখতে হবে।

ছবিকে লিংক হিসেবে ব্যবহার

<p>The image is a link. You can click on it.</p>

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

<p>Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: IE9 এবং তার আগের ভার্শনের ব্রাউজারে যাতে ছবির চারপাশে বর্ডার প্রদর্শিত না হয়, এজন্য  border:0; img ট্যাগে ব্যবহার করা হয়, যখন ছবিকে লিংক হিসেবে ব্যবহার করা হয়। border:0; image ট্যাগের style attribute -এর মান হিসেবে লিখতে হয়।


ছবির অবস্থান

CSS float property ব্যবহার করে কোনো লেখার ডান কিংবা বামে ছবির অবস্থান বর্ণনা করা হয়।

ছবির অবস্থান

<p><strong>Float the image to the right:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.  
</p>

<p>Please use the CSS float property. The align attribute is deprecated in HTML 4, and not supported in HTML5.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Image Maps বা ছবির কিছু অংশ মার্ককরণ

<map> tag ব্যবহার করে কোনো ছবির নির্দিষ্ট কিছু অংশ ম্যাপ করা হয়। ইমেজ ম্যাপ হচ্ছে ছবির কিছু নির্দিষ্ট অংশকে clickable করা।
নিচের ছবিতে কম্পিউটার, ফোন এবং কাপকে আলাদাভাবে ম্যাপ করা হয়েছে। সেগুলোতে ক্লিক করে দেখুন কি হয়।

Workplace

Sun Mercury Venus

HTML Image Mapping

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

<map> tag এর name attribute <img> usemap attribute এর সাথে সম্পর্কিত এবং এটি তাদের পরস্পরের মধ্যে একটি সম্পর্ক স্থাপন করে।

<map> tag এ কয়েকটি <area> tag আছে, যা দ্বারা উক্ত ছবির clickable স্থান নির্ধারণ করা হয়েছে।


কোনো ইলামেন্টের ব্যকগ্রাউন্ডে ছবি প্রদর্শণ

CSS property background-image ব্যবহার করে কোনো ইলামেন্টের ব্যাকগ্রাউন্ডে ছবি প্রদর্শণ করা যায়।

HTML Background Image

<body style="background-image:url('clouds.jpg')">

<h2>Background Image</h2>

<p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY element.</p>

</body>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

ব্যাকগ্রাউন্ডে ছবি সম্পর্কে আরও বিস্তারিত জানার জন্য CSS Background Tutorial টি পড়তে পারেন।


<picture> ইলামেন্ট

HTML5 এ <picture> element যুক্ত করা হয়েছে যাতে আরও সহজভাবে ছবির উৎস বর্ণনা করা যায়। কেননা আগে একটি img ট্যাগে শুধুমাত্র একটি ছবির উৎস সেট করা যেতো। ফলে কোনো কারণে যদি ছবিটি না পাওযা যেতো তবে সেটি ফাকা দেখাতো। নতুন <picture> element এর মাধ্যমে একই সাথে অনেকগুলো ছবির উৎস সেট করা যায়, ফলে একটি না পাওয়া গেলে অপরটি ব্যবহৃত হয়। আবার ডিভাইসের আকার অনুযায়ী বিভিন্ন ছবি এই ইলামেন্টের মাধ্যমে প্রদর্শণ করা যায়।

HTML picture Element

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

<p>Resize the browser to see different versions of the picture loading at different viewport sizes.
The browser looks for the first source element where the media query matches the user's current viewport width,
and fetches the image specified in the srcset attribute.</p>

<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.
</p>

<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: সবসময় <img> element কে শেষ চাইল্ড হিসেবে সেট করবেন। যদি কোনো ব্রাউজার picture element সাপোর্ট না করে তবে সেক্ষেত্রে img ইলামেন্ট ব্যবহৃত হবে।


HTML Screen Readers

Screen reader এক ধরণের সফটওয়্যার যেটি HTML code পড়তে পারে, এবং টেক্সটগুলোকে পড়ে শোনাতে পারে। যারা দেখতে পায় না, বা পড়তে পারে না তাদের জন্য Screen reader সফটওয়্যার খুবই উপকারি।


অধ্যায়ের সারাংশ

এ অধ্যায়ে যা শিখলাম-

  • HTML <img> element এর মাধ্যমে ছবি উপস্থাপণ।
  • HTML src attribute এর মাধ্যমে কোনো ছবির URL (ঠিকানা ) উপস্থাপণ।
  • যদি ছবি প্রদর্শিত না হয়, তবে alt attribute এর মাধ্যমে বিকল্প লেখা প্রদর্শণ।
  • width ও height attributes এর মাধ্যমে কোনো ছবির আকার আকৃতি বর্ণনা।
  • CSS width ও height property -এর মাধ্যমে কোনো ছবির প্রস্থ ও দৈর্ঘ্য বর্ণনা।
  • CSS float property এর মাধ্যমে কোনো ছবির অবস্থান বর্ণনা।
  • <map> element এর মাধ্যমে কোনো ছবির নির্দিষ্ট অংশ ম্যাপ করা।
  • <area> element এর মাধ্যমে কোনো ছবির নির্দিষ্ট অংশকে Clickable করা।
  • Use the HTML <img>’s element usemap attribute to point to an image-map
  • <picture> element এর মাধ্যমে স্বয়ংক্রিয়ভাবে বিভিন্ন ডিভাইসে বিভিন্ন ছবি প্রদর্শণ।

বি:দ্র: ছবি লোড হতে সময় নেয়। অকারণে পেজে খুব বেশি ছবি ব্যবহার না করাই ভালো ।


HTML ছবি প্রদর্শণে ব্যবহৃত ট্যাগসমূহ

ট্যাগ বর্ণনা
<img> এটি দ্বারা ছবি উপস্থাপণ করা হয়।
<map> এটি দ্বারা কোনো ছবিকে ম্যাপ করা হয়।
<area> এটি দ্বারা কোনো ইমেজ ম্যাপকে clickable করা হয়।
<picture> এটি দ্বারা একই সাথে একই স্থানে অনেকগুলো ছবি উপস্থাপণ করা হয়।