এইচটিএমএল ছবি - HTML Image



একটি ওয়েব পেজ কে দৃষ্টিনন্দন ও আকর্ষণীয় করে তোলার জন্য ইমেজ এর ব্যবহার অনস্বীকার্য। ওয়েব পেজ কে সুন্দর করে সাজাতে যেমন বিভিন্ন স্টাইলের ফন্ট, মানানসই কালার এর প্রয়োজন, তেমনি সুন্দর ইমেজ এর প্রয়োজনীয়তাও রয়েছে। সঠিক স্থানে সঠিক ইমেজ এর ব্যবহার একটি ওয়েব পেজ এর উন্নত আউটলুক নির্ধারণে সহায়তা করে।


এইচটিএমএল <img> ট্যাগ ও src এট্রিবিউট

এইচটিএমএল এ ইমেজ কে প্রদর্শন বা ডিফাইন করার হয় <img> ট্যাগ ব্যবহার করে। এটি একটি খালি বা empty ট্যাগ অর্থাৎ এর কোন শেষ ট্যাগ নেই, সুধু এট্রিবিউট আছে। ওয়েব পেজে ইমেজ প্রদর্শন করার জন্য আপনাকে src এট্রিবিউট ব্যবহার করতে হবে। src হল ‘source’ এর সংক্ষিপ্ত রূপ। src এট্রিবিউটের মান হল যে ইমেজ টি আপনি প্রদর্শন করতে চাচ্ছেন তার url বা ঠিকানা অর্থাৎ ইমেজ টি কোথায় সংরক্ষিত আছে তার ঠিকানা।

উদাহরণ দেখুন

<body>
<img src="image_name.formate"/>
</body>


নোট - যদি আপনি একটি ইমেজ কে ২টি প্যারাগ্রাফ এর মাঝে রাখেন তবে ব্রাউজার আগে ১ম প্যারাগ্রাফ পরে ইমেজটি ও তারপর ২য় প্যারাগ্রাফটি প্রদর্শন করবে।


alt এট্রিবিউট

কোন কারনে ব্রাউজার যদি ইমেজ প্রদর্শনে ব্যার্থ হয় বা ইউজার ইমেজ বন্ধ করে রাখে বা ধীরে ধীরে পেজ লোড হবার কারনে যদি ইমেজ লোড না হয় তবে ইমেজ এর স্থানে একটি বক্স বা আইকন দেখা যায় যেটার উপর কার্সর রাখলে টুলটিপের মধ্যে ইমেজ সম্পর্কে কোন তথ্য বা উপাত্ত দেখা যায়। alt এট্রিবিউট ব্যবহার করে এই কাজটি করা যায়।

উদাহরণ দেখুন

<body>
<img src="image_name.formate" alt="a data about image"/>
</body>


নোট - যদি আপনি একটি ইমেজ কে ২টি প্যারাগ্রাফ এর মাঝে রাখেন তবে ব্রাউজার প্রথমে ১ম প্যারাগ্রাফ পরে ইমেজটি ও তারপর ২য় প্যারাগ্রাফটি প্রদর্শন করবে।


height এবং weight এট্রিবিউট

কোন ছবি বা image এর দৈর্ঘ্য অর্থাৎ height এবং প্রস্থ অর্থাৎ width নির্ধারণ করার জন্য img ট্যাগের সাথে height এবং width এট্রিবিউট ব্যবহার করা হয়।

উদাহরণ দেখুন

<img src="demo.jpg" alt="demo image" width="400" height="250" />


এর দৈর্ঘ্য অর্থাৎ height এবং প্রস্থ অর্থাৎ width এর মান বা value স্বয়ংক্রিয় বা defoult ভাবেই pixel এ নির্ধারিত হয়।

height এবং width এট্রিবিউট ব্যবহার করে image এর height এবং width পূর্ব থেকেই নির্ধারণ করে দেয়ার একটি ভাল দিক হল এতে করে ব্রাউজার আগে থেকেই image এর আকার জানতে পারে এবং পেজ লোড হওয়ার সময় ওয়েব পেজের লেআউট এ এর কোন প্রভাব পরে না।


width & height অথবা style এট্রিবিউট

ছবির প্রস্থ এবং উচ্চতা নির্ধারণ করার ক্ষেত্রে width,height এবং style তিনটি এট্রিবিউটই এইচটিএমএল ৫ এ অনুমোদিত।
আমরা আপনাকে style এট্রিবিউট ব্যবহারে পরামর্শই দেই, কারণ style এট্রিবিউট ব্যবহার করা হলে, আভ্যন্তরীণ স্টাইল বা বহিঃস্থ স্টাইল ছবির আকার পরিবর্তন করতে পারবে না।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
img{
width:100%;
}
</style>
</head>
<body>

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

</body>
</html>




অন্য ফোল্ডারের ছবি

Image ফাইলটি কোথায় আছে তা যদি নির্ধারণ করে না দেয়া হয়, তাহলে ব্রাউজার বুঝে নিবে যে এইচটিএমএল ফাইলটি যে ফোল্ডারে রয়েছে ছবিটিও একই ফোল্ডারে রয়েছে।

যদি Image ফাইলটি অন্য কোনো ফোল্ডারে রাখা হয় তখন অবশ্যই src এট্রিবিউটে ফোল্ডারের নাম উল্লেখ করে দিতে হয়।

উদাহরণ

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




অন্য সার্ভারের ছবি ব্যবহার

কিছু কিছু ওয়েবসাইট আছে, যারা তাদের ছবিগুলো কিছু ইমেজ সার্ভারে রাখে এবং তাদের ওয়েবসাইটে সেই ছবি গুলো লিংক করে ব্যবহার করে।

উদাহরণ

<img src="https://www.websschool.com/images/image_example.jpg" alt="WebsSchools.com">


এ সম্পর্কে আরও বিস্তারিত জানতে আমাদের এইচটিএমএল ফাইল পাথ পেজটি ব্রাউজ করুন।


এনিমেটেড ছবি

এনিমেটেড ছবিকেও অর্থাৎ .gif ফরম্যাটের ছবিকে সাধারন ছবির মত একই পদ্ধতিতে ব্রাউজারে প্রদর্শন করা যায়। নিচে একটি উদাহরণ দেখুন।

HTML example

উদাহরণ

<img src="example.gif" alt="Example" style="width:50px;height:50px;">




ফ্লোটিং

ইমেজকে টেক্সটের ডান পাশে অথবা বাম পাশে প্রদর্শনের করার জন্য সিএসএস float প্রোপার্টিটি ব্যবহার করা হয়।

উদাহরণ

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> The image will float to the left of the text.</p>


নোট - সিএসএস float প্রোপার্টি সম্পর্কে আরও জানতে আমাদের সিএসএস ফ্লোটিং টিউটোরিয়ালটি দেখুন।


ইমেজ ম্যাপ

ইমেজ ম্যাপ তৈরি করার জন্য <map> ট্যাগ ব্যবহার করতে হয়। ইমেজ-ম্যাপ হলো এমন একটি ইমেজ যার বিভিন্ন অংশে ক্লিক করা যায়।

Workplace Computer Phone Cup of coffee

উদাহরণ

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<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="Coffee" href="coffee.htm">
</map>


<map> ট্যাগের name এট্রিবিউট এবং <img> ট্যাগের usemap এট্রিবিউট সহযোগী হিসেবে কাজ করে এবং <img> ও <map> ট্যাগের মধ্যে সম্পর্ক তৈরি করে।

<map> ট্যাগের মধ্যে একের অধিক <area> ট্যাগ থাকে যা একটি ইমেজ ম্যাপের ক্লিক করার স্থানগুলোকে প্রকাশ করে।


background-image প্রপার্টি

কোন এইচটিএমএল এলিমেন্টের ব্যাকগ্রাউন্ড এ কোন ছবি যুক্ত করতে চাইলে সিএসএস 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> এলিমেন্টের পরিচয় করিয়েছে। এর ফলে কোন ছবির সোর্স আরও ভালভাবে নির্ধারণ করা সম্ভব হয়েছে। <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> ইমেজে ম্যাপের ক্লিকের স্থান নির্ধারণ করার জন্য ব্যবহার করা হয়
<picture> একাধিক ছবি বা image এর রিসোর্সের জন্য একটি কন্টেইনার নির্ধারণ করে।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.