এইচটিএমএল ইমেজ (HTML Image)
এইচটিএমএল ইমেজ ট্যাগ
| ট্যাগ | বর্ণনা |
|---|---|
| <img> | একটি ইমেজ অন্তর্ভুক্ত করার জন্য ব্যবহার করা হয় |
| <map> | একটি ইমেজ-ম্যাপ তৈরি করার জন্য ব্যবহার করা হয় |
| <area> | ইমেজে ম্যাপের ক্লিকের স্থান নির্ধারণ করার জন্য ব্যবহার করা হয় |
এই অধ্যায়ে আমরা নিম্নলিখিত ফর্মেটের ইমেজগুলো কিভাবে একটি ওয়েবপেজে ব্যবহার করা যায়, তা উদাহরণ সহ আলোচনা করবো।
- JPG ইমেজ
- GIF ইমেজ
- PNG ইমেজ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<h4>নীলগিরি</h4>
<img src="../nilgiri.jpg" alt="Nilgiri Bangladesh" style="width:320px;height:240px;">
</body>
</html>
ফলাফল
সিনট্যাক্স
এইচটিএমএলে ইমেজ যোগ করার জন্য <img> ট্যাগ ব্যবহার করা হয়।
<img> ট্যাগটিতে শুধুমাত্র এট্রিবিউট থাকে এবং এর কোন ক্লোজিং ট্যাগ নেই।
src এট্রিবিউটের মধ্যে ইমেজের URL(ডিরেক্টরি) নির্ধারণ করা হয়।
<img src="url" alt="some_text">alt এট্রিবিউট
ইমেজ ফাইলের ভূল ডিরেক্টরি বা অন্য যেকোন কারণে যদি ব্রাউজারে ইমেজ প্রদর্শন করা সম্ভব না হয়, তখন ইমেজের বিকল্প হিসেবে একটি টেক্সট প্রদর্শন করানোর জন্য alt এট্রিবিউটের মাধ্যমে টেক্সট নির্ধারণ করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<img src="error.png" alt="Satt Icon" style="width:40px;height:40px;">
</body>
</html>
ফলাফল
 |
ওয়েব পেজকে ভ্যালিডেট করার জন্য alt এট্রিবিউট আবশ্যক। |
|---|
ইমেজ Width এবং Height
ইমেজের width(প্রস্থ) এবং height(উচ্চতা) নির্ধারণ করার জন্য style এট্রিবিউট ব্যবহার করুন।
ভ্যালুগুলো pixel এ সেট করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<img src="../satt.png" alt="Satt Icon" style="width:128px;height:128px;">
</body>
</html>
ফলাফল
width & height এট্রিবিউট নাকি style এট্রিবিউট
ইমেজের প্রস্থ এবং উচ্চতা নির্ধারণ করার ক্ষেত্রে width,height এবং style তিনটি এট্রিবিউটই এইচটিএমএল(৫) এ বৈধ।
আমরা আপনাকে ইনলাইন style এট্রিবিউট ব্যবহারে পরামর্শ দিবো। কারণ ইনলাইন স্টাইল করা হলে, ইন্টার্নাল স্টাইল বা এক্সটার্নাল স্টাইল ইমেজের সাইজকে পরিবর্তন করতে পারবে না।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
img {
width:60%;
}
</style>
</head>
<body>
<img src="../satt.png" alt="Satt Icon" style="width:128px;height:128px;">
<img src="../satt.png" alt="Satt Icon" width="128" height="128">
</body>
</html>
ফলাফল
অন্য ফোল্ডারের ইমেজ
ইমেজ ফাইলটি কোথায় আছে তা যদি আপনি নির্ধারণ করে না দেন তাহলে ব্রাউজার বুঝে নিবে যে এইচটিএমএল ফাইলটি যে ফোল্ডারে রয়েছে ইমেজটিও একই ফোল্ডারে রয়েছে।
যদি আপনি ইমেজটি অন্য কোনো ফোল্ডারে রাখেন তখন অবশ্যই src এট্রিবিউটে ফোল্ডারের নাম উল্লেখ করে দিবেন।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<img src="../../images/satt.png" alt="satt" style="width:128px;height:128px;">
</body>
</html>
ফলাফল
এনিমেটেড ইমেজ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<img src="../../images/gif2.gif" alt="Walking Man" style="width:304px;height:220px">
</body>
</html>
ফলাফল
নোটঃ এনিমেটেড ইমেজকেও সাধারন ইমেজের মত একই পদ্ধতিতে ব্রাউজারে প্রদর্শন করা হয়।
ইমেজ ফ্লোটিং
ইমেজকে টেক্সটের ডান পাশে অথবা বাম পাশে প্রদর্শনের করার জন্য সিএসএস float প্রোপার্টিটি ব্যবহার করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<p><strong>ইমেজটি টেক্সটের ডানপাশে ফ্লোট হবেঃ</strong></p>
<p>
<img src="../../images/img_tree.gif" alt="Tree" style="float:right;width:42px;height:42px;">
ডানে ফ্লোটকৃত ইমেজের পাশে কিছু টেক্সট।
</p>
<p><strong>ইমেজটি টেক্সটের বামপাশে ফ্লোট হবেঃ</strong></p>
<p>
<img src="../../images/img_tree.gif" alt="Tree" style="float:left;width:42px;height:42px;">
বামে ফ্লোটকৃত ইমেজের পাশে কিছু টেক্সট।
</p>
</body>
</html>
ফলাফল
ইমেজ ম্যাপ
ইমেজ ম্যাপ তৈরি করার জন্য <map> ট্যাগ ব্যবহার করুন। ইমেজ-ম্যাপ হলো এমন একটি ইমেজ যার বিভিন্ন অংশে ক্লিক করা যায়।
<map> ট্যাগের name এট্রিবিউট এবং <img> ট্যাগের usemap এট্রিবিউট সহযোগী হিসেবে কাজ করে এবং <img> ও <map> ট্যাগের মধ্যে সম্পর্ক তৈরি করে।
<map> ট্যাগের মধ্যে একের অধিক <area> ট্যাগ থাকে যা একটি ইমেজ ম্যাপের ক্লিক করার স্থানকে বুঝায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<p>কাছ থেকে দেখার জন্য সূর্য বা অন্য কোন গ্রহের উপর ক্লিক করুন</p>
<img src="../planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="../sun.html">
<area shape="circle" coords="90,58,3" alt="Mercury" href="../mercur.html">
<area shape="circle" coords="124,58,8" alt="Venus" href="../venus.html">
</map>
</body>
</html>
ফলাফল
অধ্যায়ের সারাংশ
- ডকুমেন্টে ইমেজ যোগ করার জন্য এইচটিএমএল
<img>এলিমেন্ট ব্যবহার করা হয়। - একটি ইমেজের URL নির্ধারণ করার জন্য
srcএট্রিবিউট ব্যবহার করা হয়। - ইমেজ লোড না হলে ইমেজের পরিবর্তে বিকল্প টেক্সট সেট করার জন্য
altএট্রিবিউট ব্যবহার করা হয়। - ইমেজের সাইজ নির্ধারণ করার জন্য
widthএবংheightএট্রিবিউট ব্যবহার করা হয়। - ইমেজকে কোন কন্টেন্টের ডানে বা বামে নেওয়ার জন্য সিএসএস
floatপ্রোপার্টি ব্যবহার করা হয়। - ইমেজ-ম্যাপ তৈরি করার জন্য এইচটিএমএল
<map>এলিমেন্ট ব্যবহার করা হয়। - ইমেজ-ম্যাপ এর মধ্যে ক্লিক করার স্থান যুক্ত করার জন্য এইচটিএমএল
<area>এলিমেন্ট ব্যবহার করা হয়।