এইচটিএমএল ইমেজ বা ছবি গুলো ওয়েব পেজ গুলোর ডিজাইন ও অ্যাপেয়ারেন্স ইমপ্রুভ করে ।
একটি ওয়েব পেজের ছবি তার সৌন্দর্য অনেক খানি বাড়িয়ে দেয় ।
উদাহরণ
<img src="flower.jpg" alt="Flower">
HTML Images Syntax
এইচটিএমএল <img> ট্যাগটি কোনও ওয়েব পেজে একটি চিত্র এম্বেড করতে ব্যবহৃত হয়।
<img> ট্যাগটির কোনও ক্লোজিং ট্যাগ নেই, এতে কেবলমাত্র অ্যাট্রিবিউট রয়েছে।
<img> ট্যাগটিতে দুটি আবশ্যিক অ্যাট্রিবিউট রয়েছে:
- src – ছবির পাথ ঠিক করে দেয়।
- alt – ছবিটি লোড না হলে কি দেখাবে সেটি ঠিক করে দেয়।
Syntax
<img src="url" alt="alternatetext">
src Attribute
আবশ্যিক src অ্যাট্রিবিউট টি ইমেজের পাথ বা ফাইল লোকেশন ঠিক করে দেয় ।
যখন একটি ওয়েব পেজটি লোড হয়, তখন ইমেজ ফাইল টি ব্রাউজার এ লোড সার্ভার থেকে। এবং ব্রাউজার সেই ইমেজটি ওয়েব পেজে যুক্ত করে। তাই খেয়াল রাখুন যেন সার্ভার বা প্রজেক্ট ফোল্ডার এর সঠিক জায়গায় ইমেজ সোর্স ফাইল টি থাকে। আর ইমেজের পাথ ঠিক না থাকলে alt তে যে টেক্সট থাকবে, সেটি দেখাবে ।
<img src="/nature.jpg" alt="Beauty of Nature" />
alt Attribute
আবশ্যিক alt অ্যাট্রিবিউট টি ইমেজের Alternative Text কে বোঝায় । অর্থাৎ ইমেজ টি কোন কারনে লোড না হলে বিকল্প হিসেবে alt অ্যাট্রিবিউট টির ভেলু দেখাবে ওয়েব ব্রাউজার এ ।
<img src="nature.jpg" alt="Beauty of Nature" />
যদি কোনও ব্রাউজার কোনও চিত্র খুঁজে না পায়, তবে এটি alt এর মানটি প্রদর্শন করবে
ইমেজ ফাইল পাথ নিয়ে অনেকেরই সমস্যা হয় এবং এর সঠিক সমাধান পেতে দেখে নিন নিচের টিউটোরিয়াল টি ।
Image Size – Width and Height
আপনি কোনও চিত্রের প্রস্থ এবং উচ্চতা নির্দিষ্ট করতে style বৈশিষ্ট্যটি ব্যবহার করতে পারেন।
<img src="/nature.jpg" alt="Beauty of Nature" style="width:300px; height:200px" />
আপনি ছবির প্রস্থ এবং উচ্চতা নির্দিষ্ট করতে width ও height অ্যাট্রিবিউট ব্যবহার করতে পারেন।
<img src="/nature.jpg" alt="Beauty of Nature" width="300" height="200" />
ইমেজের width ও height অ্যাট্রিবিউট এর ভেলু সবসময় pixel unit এ হয়, তাই px যোগ করার দরকার নেই ।
সর্বদা চিত্রের প্রস্থ এবং উচ্চতা নির্দিষ্ট করুন। প্রস্থ এবং উচ্চতা সুনির্দিষ্ট না করা থাকলে, চিত্রটি লোড হওয়ার সময় ওয়েব পেজটি লাফাতে পারে।
অন্য সার্ভার এর ছবি ওয়েব পেজে লোড করা
কিছু ওয়েব সাইট অন্য সার্ভারের ছবি নিজের ওয়েব পেজে যোগ করে।
অন্য সার্ভারের কোনও চিত্রকে নিজের ওয়েব পেজে যোগ করতে, আপনাকে অবশ্যই src অ্যাট্রিবিউট এ ছবিটির Absulute URL উল্লেখ করতে হবে:
<img src="http://kivabe.com/wp-content/uploads/2017/04/img-tag-in-html.jpg" alt="My image">
অন্য সার্ভার এর ছবিগুলো কপিরাইটের অধীনে হতে পারে। আপনি যদি এটি ব্যবহারের অনুমতি না পান তবে আপনি কপিরাইট আইন লঙ্ঘন করতে পারেন। এছাড়াও, আপনিঅন্য সার্ভার এর ছবিগুলো নিয়ন্ত্রণ করতে পারবেন না; এটি হঠাৎ সরানো বা পরিবর্তন করা হতে পারে।
লিংক হিসেবে ছবি
ছবিতে লিংক হিসেবে ব্যবহার করার জন্য <a> ট্যাগের মধ্যে <img> ট্যাগটি রাখুন।
<img src="/logo_round.png" alt="kivabe.com logo">
ওয়েবে ব্যবহৃত ইমেজের এক্সটেনশন
ওয়েব পেজে যে ইমেজ গুলো সাপোর্ট করে সেগুলোর ফাইল এক্সটেনশন সহ নাম দেয়া হল যা সমস্ত ব্রাউজারে সমর্থিত (Chrome, Edge, Firefox, Safari, Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
বড় চিত্রগুলি লোড হতে সময় লাগে এবং আপনার ওয়েব পৃষ্ঠাটি ধীর করতে পারে। সাবধানে চিত্র ব্যবহার করুন
ইমেজের ট্যাগ গুলো
| ট্যাগ | বর্ণনা |
|---|---|
| <img> | ছবি যোগ করে |
| <map> | ছবি ম্যাপিং করতে ব্যবহার হয় |
| <area> | ছবি ম্যাপিং করে এর বিভিন্ন অংশ ক্লিক করার যগ্য করা যায় |
| <picture> | একাধিক ছবির একটি গ্রুপ ডিফাইন করে । |
ধন্যবাদ এটু সুন্দর ও সুস্পষ্ট করে HTML Image এর একটি টিউটোরিয়াল উপহার দেবার জন্য ।