HTML Images - এইচটিএমএল ইমেজেস
ছবিগুলি একটি ওয়েব পৃষ্ঠার ডিজাইন এবং চেহারা উন্নত করতে পারে।
উদাহরণ:
<img src="pic_trulli.jpg"
alt="ইতালীয় ট্রলি">
উদাহরণ:
<img src="img_girl.jpg"
alt="জ্যাকেট পরা মেয়ে">
উদাহরণ:
<img src="img_bangladesh.jpg"
alt="বাংলাদেশের সপ্নপূরী">
HTML Images Syntax - এইচটিএমএল ইমেজ সিনট্যাক্স
HTML <img> ট্যাগটি একটি ওয়েব পেজে একটি ছবি এম্বেড করতে ব্যবহৃত হয়।
ছবি টেকনিক্যালি কোনো ওয়েব পেজে ঢোকানো হয় না; ছবি ওয়েব পেজে লিঙ্ক করা হয়. <img> ট্যাগ রেফারেন্স করা ছবির জন্য একটি হোল্ডিং স্পেস তৈরি করে।
<img> ট্যাগটি খালি অন্যান্য এইচটিএমএল ট্যাগে স্টার্ট এবং ক্লোজ ট্যাগ থা্লেও, এতে শুধুমাত্র অ্যাট্রিবিউট রয়েছে এবং ক্লোজিং ট্যাগ নেই।
<img> ট্যাগের দুটি প্রয়োজনীয় অ্যাট্রিবিউট রয়েছে:
- src - ছবির পথ নির্দিষ্ট করে
- alt - ছবির জন্য একটি বিকল্প টেক্সট নির্দিষ্ট করে
সিনট্যাক্স
<img src="url" alt="বিকল্প পাঠ্য">
src অ্যাট্রিবিউট
প্রয়োজনীয় src অ্যাট্রিবিউট চিত্রটির পাথ (URL) নির্দিষ্ট করে।
বিঃদ্রঃ:- যখন একটি ওয়েব পৃষ্ঠা লোড হয়, তখন এটি ব্রাউজার, সেই মুহুর্তে, একটি ওয়েব সার্ভার থেকে ছবিটি পায় এবং এটি পৃষ্ঠায় সন্নিবেশ করে। অতএব, নিশ্চিত করুন যে ছবিটি আসলে ওয়েব পৃষ্ঠার সাথে একই জায়গায় থাকে, অন্যথায় আপনার দর্শকরা একটি ভাঙা লিঙ্ক আইকন পাবেন। ব্রাউজার ছবিটি খুঁজে না পেলে ভাঙা লিঙ্ক আইকন এবং Alt টেক্সট দেখানো হয়।
উদাহরণ:
<img src="img_bangladesh.jpg"
alt="বাংলাদেশের সপ্নপূরী">
Warning: include(../SingleAds.php): Failed to open stream: No such file or directory in
/home/nbpbangl/public_html/html/html-image.php on line
134
Warning: include(): Failed opening '../SingleAds.php' for inclusion (include_path='.:/opt/alt/php83/usr/share/pear:/opt/alt/php83/usr/share/php:/usr/share/pear:/usr/share/php') in
/home/nbpbangl/public_html/html/html-image.php on line
134
alt অ্যাট্রিবিউট
প্রয়োজনীয় alt অ্যাট্রিবিউট একটি চিত্রের জন্য একটি বিকল্প পাঠ্য সরবরাহ করে, যদি কোনও কারণে ব্যবহারকারী এটি দেখতে না পারে (ধীর সংযোগের কারণে, src অ্যাট্রিবিউট একটি ত্রুটির কারণে, বা ব্যবহারকারী যদি একটি স্ক্রিন রিডার ব্যবহার করে)।
Alt অ্যাট্রিবিউটের ভিতরে চিত্রটি বর্ণনা করতে হবে:
উদাহরণ:
<img src="img_bangladesh.jpg"
alt="বাংলাদেশের সপ্নপূরী">
টিপ: একটি স্ক্রিন রিডার হল একটি সফ্টওয়্যার প্রোগ্রাম যা HTML কোড পড়ে, এবং ব্যবহারকারীকে বিষয়বস্তু "শোনার" অনুমতি দেয়৷ স্ক্রীন রিডার এমন লোকদের জন্য উপযোগী যারা দৃষ্টি প্রতিবন্ধী বা শেখার অক্ষম।
ইমেজ সাইজ - প্রস্থ এবং উচ্চতা (Image Size - Width and Height)
আপনি একটি চিত্রের প্রস্থ এবং উচ্চতা নির্দিষ্ট করতে style অ্যাট্রিবিউট ব্যবহার করতে পারেন।
উদাহরণ:
<img src="img_girl.jpg" alt="জ্যাকেট পরা মেয়ে" style="width:500px;height:600px;">
বিকল্পভাবে, আপনি height এবং width অ্যাট্রিবিউটগুলি ব্যবহার করতে পারেন:
উদাহরণ:
<img src="img_girl.jpg" alt="জ্যাকেট পরা মেয়ে" width="500" height="600">
width এবং height অ্যাট্রিবিউটগুলি সর্বদা পিক্সেলে চিত্রের প্রস্থ এবং উচ্চতা নির্ধারণ করে।
নোটঃ- সর্বদা একটি চিত্রের প্রস্থ এবং উচ্চতা নির্দিষ্ট করুন। যদি প্রস্থ এবং উচ্চতা নির্দিষ্ট করা না থাকে, তাহলে ছবি লোড হওয়ার সময় ওয়েব পৃষ্ঠাটি ঝিকিমিকি করতে পারে।
Width and Height, or Style?
<width>, <height> এবং <style> অ্যাট্রিবিউটগুলি সবই HTML-এ বৈধ৷
যাইহোক, আমরা <style> অ্যাট্রিবিউট ব্যবহার করার পরামর্শ দিই। এটি স্টাইল শীটগুলিকে ছবির আকার পরিবর্তন করতে বাধা দেয়:
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5_logo.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5_logo.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
অন্য ফোল্ডারে ছবি(ছবি যদি এইচটিএমএল ফাইল যেখানে আছে অই খানে না থাকে)
সাব-ফোল্ডারে আপনার ছবি থাকলে, আপনাকে অবশ্যই src অ্যাট্রিবিউটে ফোল্ডারের নাম অন্তর্ভুক্ত করতে হবে:
উদাহরণ:
<img src="images/html5_logo.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
অন্য সার্ভার বা ওয়েবসাইটে ছবি
কিছু ওয়েব সাইট অন্য সার্ভারে একটি চিত্র নির্দেশ করে।
অন্য সার্ভারে একটি চিত্র নির্দেশ করতে, আপনাকে অবশ্যই src অ্যাট্রিবিউটে একটি সম্পূর্ণ (full) URL উল্লেখ করতে হবে:
উদাহরণ:
<img src="https://www.nbp3bangla.com/img/nbp3_old.png" alt="nbp3bangla.com">
নোট:- বহিরাগত ছবি কপিরাইট অধীনে হতে পারে। আপনি যদি এটি ব্যবহার করার অনুমতি না পান তবে আপনি কপিরাইট আইন লঙ্ঘন করতে পারেন। উপরন্তু, আপনি বহিরাগত ছবি নিয়ন্ত্রণ করতে পারবেন না; তারা হঠাৎ সরানো বা পরিবর্তন করতে পারে।
অ্যানিমেটেড ইমেজ
এইচটিএমএল অ্যানিমেটেড GIF-এর অনুমতি দেয়:
উদাহরণ:
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
একটি লিঙ্ক হিসাবে ছবি
একটি লিঙ্ক হিসাবে একটি ছবি ব্যবহার করতে, <a> ট্যাগের ভিতরে <img> ট্যাগ রাখুন:
উদাহরণ:
<a href="index.php">
<img src="smiley.gif" alt="HTML Tutorial"
style="width:42px;height:42px;">
</a>
Image Floating
চিত্রটিকে একটি পাঠ্যের ডানে বা বামে ভাসতে দেওয়ার জন্য CSS float অ্যাট্রিবিউট ব্যবহার করুন:
উদাহরণ:
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
চিত্রটি পাঠ্যের ডানদিকে ভাসবে।</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
চিত্রটি পাঠ্যের বাম দিকে ভাসবে।</p>
সাধারণ চিত্র বিন্যাস - Common Image Formats
এখানে সবচেয়ে সাধারণ ইমেজ ফাইলের ধরন রয়েছে, যেগুলি সমস্ত ব্রাউজারে সমর্থিত (Chrome, Edge, Firefox, Safari, Opera):
| সংক্ষিপ্ত রূপ |
ফাইলের বিন্যাস/file format |
ফাইল এক্সটেনশন |
| APNG |
অ্যানিমেটেড পোর্টেবল নেটওয়ার্ক গ্রাফিক্স |
.apng |
| GIF |
গ্রাফিক্স ইন্টারচেঞ্জ ফরম্যাট |
.gif |
| ICO |
মাইক্রোসফট আইকন |
.ico, .cur |
| JPEG |
যৌথ ফটোগ্রাফিক বিশেষজ্ঞ গ্রুপ ইমেজ |
.jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG |
পোর্টেবল নেটওয়ার্ক গ্রাফিক্স |
.png |
| SVG |
স্কেলেবল ভেক্টর গ্রাফিক্স |
.svg |
অধ্যায়ের সারাংশ
- একটি ছবি সংজ্ঞায়িত করতে HTML
<img> উপাদান ব্যবহার করুন
- ছবির URL নির্ধারণ করতে HTML
src অ্যাট্রিবিউট ব্যবহার করুন
- একটি চিত্রের জন্য একটি বিকল্প পাঠ্য সংজ্ঞায়িত করতে HTML
alt অ্যাট্রিবিউট ব্যবহার করুন, যদি এটি প্রদর্শিত না হয়
- ছবির আকার নির্ধারণ করতে HTML
width এবং height অ্যাট্রিবিউট বা CSS width এবং height অ্যাট্রিবিউট ব্যবহার করুন
- ছবিটিকে বাম বা ডানে ভাসতে দেওয়ার জন্য CSS
float প্রপার্টি ব্যবহার করুন
দ্রষ্টব্য:- বড় ছবি লোড করতে সময় লাগে, এবং আপনার ওয়েব পৃষ্ঠাকে ধীর করে দিতে পারে। সাবধানে ছবি ব্যবহার করুন।
এইচটিএমএল ইমেজ ট্যাগ
| ট্যাগ |
বর্ণনা |
| <img> |
একটি চিত্র সংজ্ঞায়িত করে |
| <map> |
একটি চিত্র মানচিত্র সংজ্ঞায়িত করে |
| <area> |
একটি চিত্র মানচিত্রের ভিতরে একটি ক্লিকযোগ্য এলাকা সংজ্ঞায়িত করে |
| <picture> |
একাধিক চিত্র সম্পদের জন্য একটি ধারক সংজ্ঞায়িত করে |
