এইচটি এম এল ইমেজ (HTML Images)
মোঃ রফিকুল ইসলাম
উদাহরণঃ
DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountains</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">
</body>
</html>
ফলাফলঃ
Spectacular Mountains
অবশ্যই ইমেজ (ছবির) উচ্চতা এবং প্রসস্থতা উল্লেখ করে দিতে হবে। যদি উচ্চতা এবং প্রসস্থতা নির্দিষ্ট করে না দেয়া হয়ে তাহলে পেজে ইমেজ লোড হওয়ার সময় ইমেজটি ফ্লিক (পেজের সাথে ছবিটি সামঞ্জস্য হওয়ার সময় ছবিটি লাফালাফি) করবে।
এইচটিএমএল ইমেজ সিনট্যাক্স
এইচটিএমএল এ ইমেজকে <img> ট্যাগ দ্বারা সংজ্ঞায়িত করা হয়।
<img> ট্যাগ এর ভিতরে শুধুমাত্র্ অ্যাট্রিবিউট থাকে এবং এর কোন ক্লোজিং ট্যাগ থাকে না।
src অ্যাট্রিবিউটম ইমেজ এর ইউআরএল (ওয়েব ঠিকানা বা ইমেজ এর অবস্থান এর ঠিকানা) কে সংজ্ঞায়িত করে।
<img src="url" alt="some_text">
Alt অ্যাট্রিবিউট
Alt অ্যাট্রিবিউট দ্বারা ওয়েব এ যদি কোন কারনে ইমেজ লোড না হতে পারে তাহলে উক্ত ইমেজ এর বিকল্প হিসেবে কি Text প্রদর্শিত হবে তা নির্ধারণ করে।
Alt অ্যাট্রিবিউট এর ভেলু (মান) হবে আপনি যে Text টি ইমেজ লোড না হলে প্রদর্শন করতে চান সেই Text.
<img src="html5.gif" alt="The official HTML5 Icon">
ফলাফল
Alt অ্যাট্রিবিউট অবশ্যই প্রদান করত হবে। এটি ছাড়া একটি ওয়েব পেজ সঠিকভাবে যাচাই করা যায় না।
এইচটিএমএল স্ক্রিন রিডার
স্ক্রিণ রিডার সফটওয়্যারগুলো পর্দায় কি প্রদর্শিত সকলকিছু পড়তে পারে।
ওয়েব এ ব্যবহৃত এইচটিএমএল কোড Text থেকে বক্তৃতা, শব্দের আইকন বা যেকোন প্রতীকি আউটপুট পুনরুদ্ধার করতে পারে।
স্ক্রিণ রিডার সাধারণত যারা অন্ধ, দৃষ্টিপ্রতিবন্ধি, অশিক্ষিতদের জন্য ব্যবহৃত হয়।
নোট: স্ক্রিন রিডার Alt অ্যাট্রিবিউট পড়তে পারে।
ছবির আকার - প্রস্থ এবং উচ্চতা
ইমেজ (ছবির) width (প্রস্থ) এবং height (উচ্চতা) নির্ধারণের জন্য আপনি style অ্যাট্রিবিউট ব্যবহার করতে পারেন।
এর মান পিক্সেল দ্বারা নির্ধারণ করা হয় (মান এর পরে px লিখতে হয়):
<img src="Mountain.jpg" alt="Mountain View" style="width:128px;height:128px">
ফলাফল:
বিকল্প হিসেবে আপনি width এবং height অ্যাট্রিবিউট ব্যবহার করতে পারেন।
এর মান পিক্সেল দ্বারা নির্ধারণ করা হয় (মান এর পরে px লিখতে হয়):
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Width এবং Height বা Style?
উভয় width, height, এবং style অ্যাট্রিবিউট লেটেস্ট HTML5 সাপর্ট করে।
আমরা আপনাকে style অ্যাট্রিবিউট ব্যবহারের পরামর্শ দেব। এটি স্টাইল শীটকে ইমেজ এর ডিফল্ট আকার পরিবর্তন করতে বাধা দেয়।
উদাহরণঃ
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body><img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128"></body>
</html>
অন্য ফোল্ডার এর ছবি যদি উল্লেখ করে দেয়া না হয় তাহলে ব্রাউজার ছবি খুঁজে পেতে ওয়েব পেজ এর একই ফোল্ডার এ খোঁজ করে। ওয়েব পেজ এ এটিই সাধারণ, যদি আপনি কোন সাব ফোল্ডার এ ইমেজটি রাখেন তাহলে এভাবে তা উল্লেখ করে দিতে হবে:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
ব্রাউজার যদি ইমেজটি খুঁজে না পায় তাহলে সে একটি ব্রোকেন লিঙ্ক আইকন প্রদশণ করবে। উদাহরণ
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px">
ফলাফল
অন্য সার্ভারের ছবি
কিছু ওয়েব সাইট তাদের ইমেজগুলো ইমেজ সার্ভারে লোড করে রাখে, আসলে আপনি বিশ্বের যে কোনো ওয়েব ঠিকানার ইমেজ এ প্রবেশ করতে পারেন:
<img src="http://www.rasta.edu.pk/images/EducationTraining1.jpg">
ফলাফল
অ্যানিমেটেড ছবি
GIF ফরমেট অ্যানিমেটেড ইমেজ সমর্থন করে।
<img src="Tree.gif" alt="Rain Tree" style="width:240px;height:320px">
ফলাফল
নোট: অ্যানিমেটেড ইমেজ ও ননঅ্যানিমেটেড ইমেজ এর সিনটেক্স এ কোন পার্থক্য নেই।
লিঙ্ক হিসেবে ইমেজ ব্যবহার
ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা খুবই সাধারণ ব্যাপার
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
ইমেজ ম্যাপ
একটি ইজেজ এর জন্য আপনি ক্লিক করা যায় এমনভাবে ইমেজ ম্যাপ তৈরি করতে পারেন।
উদাহরণ
usemap="#planetmap" style="width:145px;height:126px">
<map name="Bangladesh">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
ফলাফল
ইমেজ ফ্লোটিং
আপনি ইজেমকে প্যারাগ্রাফ এর বাম বা ডানে ভাসমান অবস্থায় রাখতে পারেন
উদাহরণ
<p>
60px;height:40px">
A paragraph with an image. The image floats to the left of the text.
</p>
ফলাফল:
.jpg?w=847)
A paragraph with an image. The image floats to the left of the text.
অধ্যায় সারসংক্ষেপ
- এইচটিএমএল এ <img> এলিমেন্ট ইমেজকে সংজ্ঞায়িত করে।
- এইচটিএমএল এ src অ্যাট্রিবিউট ইমেজ এর ফাইল নেমকে সংজ্ঞায়িত করে।
- এইচটিএমএল এ alt অ্যাট্রিবিউট ইমেজ এর বিকল্প টেক্সকে সংজ্ঞায়িত করে।
- এইচটিএমএল এ width এবং height অ্যাট্রিবিউট ইমেজ এর আকারকে সংজ্ঞায়িত করে।
- সিএসএস এ width and height প্রোপার্টি ইমেজ এর আকারকে সংজ্ঞায়িত করে (বিকল্পভাবে)।
- সিএসএস এ float প্রোপার্টি ইমেজকে ফ্লোট করতে সহায়তা করে।
- এইচটিএমএল এ usemap অ্যাট্রিবিউট ইমেজ ম্যাপ তৈরি করতে ব্যবহৃত হয়।
- এইচটিএমএল এ <map> এলিমেন্ট ইমেজ ম্যাপকে সংজ্ঞায়িত করতে ব্যবহৃত হয়।
- এইচটিএমএল এ <area> এলিমেন্ট ইমেজ ম্যাপ এর কোন এরিয়া ব্যবহার করতে তা সংজ্ঞায়িত করে।
