এইচটিএমএল ইমেজ ট্যাগ
| ট্যাগ | বর্ণনা |
|---|---|
| <img> | একটি ইমেজ অন্তর্ভুক্ত করার জন্য ব্যবহার করা হয় |
| <map> | একটি ইমেজ-ম্যাপ তৈরি করার জন্য ব্যবহার করা হয় |
| <area> | ইমেজে ম্যাপের ক্লিকের স্থান নির্ধারণ করার জন্য ব্যবহার করা হয় |
এই অধ্যায়ে আমরা নিম্নলিখিত ফর্মেটের ইমেজগুলো কিভাবে একটি ওয়েবপেজে ব্যবহার করা যায়, তা উদাহরণ সহ আলোচনা করবো।
- JPG ইমেজ
- GIF ইমেজ
- PNG ইমেজ
kt_satt_skill_example_id=1471
সিনট্যাক্স
এইচটিএমএলে ইমেজ যোগ করার জন্য < img > ট্যাগ ব্যবহার করা হয়।
< img > ট্যাগটিতে শুধুমাত্র এট্রিবিউট থাকে এবং এর কোন ক্লোজিং ট্যাগ নেই।
src এট্রিবিউটের মধ্যে ইমেজের URL(ডিরেক্টরি) নির্ধারণ করা হয়।
kt_satt_skill_example_id=1472
alt এট্রিবিউট
ইমেজ ফাইলের ভূল ডিরেক্টরি বা অন্য যেকোন কারণে যদি ব্রাউজারে ইমেজ প্রদর্শন করা সম্ভব না হয়, তখন ইমেজের বিকল্প হিসেবে একটি টেক্সট প্রদর্শন করানোর জন্য alt এট্রিবিউটের মাধ্যমে টেক্সট নির্ধারণ করা হয়।
kt_satt_skill_example_id=1472
ওয়েব পেজকে ভ্যালিডেট করার জন্য alt এট্রিবিউট আবশ্যক।
ইমেজ Width এবং Height
ইমেজের width(প্রস্থ) এবং height(উচ্চতা) নির্ধারণ করার জন্য style এট্রিবিউট ব্যবহার করুন।
ভ্যালুগুলো pixel এ সেট করুনঃ
kt_satt_skill_example_id=1473
width & height এট্রিবিউট নাকি style এট্রিবিউট
ইমেজের প্রস্থ এবং উচ্চতা নির্ধারণ করার ক্ষেত্রে width,height এবং style তিনটি এট্রিবিউটই এইচটিএমএল(৫) এ বৈধ।
আমরা আপনাকে ইনলাইন style এট্রিবিউট ব্যবহারে পরামর্শ দিবো। কারণ ইনলাইন স্টাইল করা হলে, ইন্টার্নাল স্টাইল বা এক্সটার্নাল স্টাইল ইমেজের সাইজকে পরিবর্তন করতে পারবে না।
kt_satt_skill_example_id=1474
অন্য ফোল্ডারের ইমেজ
ইমেজ ফাইলটি কোথায় আছে তা যদি আপনি নির্ধারণ করে না দেন তাহলে ব্রাউজার বুঝে নিবে যে এইচটিএমএল ফাইলটি যে ফোল্ডারে রয়েছে ইমেজটিও একই ফোল্ডারে রয়েছে।
যদি আপনি ইমেজটি অন্য কোনো ফোল্ডারে রাখেন তখন অবশ্যই src এট্রিবিউটে ফোল্ডারের নাম উল্লেখ করে দিবেন।
kt_satt_skill_example_id=1476
এনিমেটেড ইমেজ
kt_satt_skill_example_id=1477
নোটঃ এনিমেটেড ইমেজকেও সাধারন ইমেজের মত একই পদ্ধতিতে ব্রাউজারে প্রদর্শন করা হয়।
ইমেজ ফ্লোটিং
ইমেজকে টেক্সটের ডান পাশে অথবা বাম পাশে প্রদর্শনের করার জন্য সিএসএস float প্রোপার্টিটি ব্যবহার করা হয়ঃ
kt_satt_skill_example_id=1479
ইমেজ ম্যাপ
ইমেজ ম্যাপ তৈরি করার জন্য < map > ট্যাগ ব্যবহার করুন। ইমেজ-ম্যাপ হলো এমন একটি ইমেজ যার বিভিন্ন অংশে ক্লিক করা যায়।
< map > ট্যাগের name এট্রিবিউট এবং < img > ট্যাগের usemap এট্রিবিউট সহযোগী হিসেবে কাজ করে এবং < img > ও < map > ট্যাগের মধ্যে সম্পর্ক তৈরি করে।
< map > ট্যাগের মধ্যে একের অধিক < area > ট্যাগ থাকে যা একটি ইমেজ ম্যাপের ক্লিক করার স্থানকে বুঝায়ঃ
kt_satt_skill_example_id=1480
অধ্যায়ের সারাংশ
- ডকুমেন্টে ইমেজ যোগ করার জন্য এইচটিএমএল
< img >এলিমেন্ট ব্যবহার করা হয়। - একটি ইমেজের URL নির্ধারণ করার জন্য
srcএট্রিবিউট ব্যবহার করা হয়। - ইমেজ লোড না হলে ইমেজের পরিবর্তে বিকল্প টেক্সট সেট করার জন্য
altএট্রিবিউট ব্যবহার করা হয়। - ইমেজের সাইজ নির্ধারণ করার জন্য
widthএবংheightএট্রিবিউট ব্যবহার করা হয়। - ইমেজকে কোন কন্টেন্টের ডানে বা বামে নেওয়ার জন্য সিএসএস
floatপ্রোপার্টি ব্যবহার করা হয়। - ইমেজ-ম্যাপ তৈরি করার জন্য এইচটিএমএল
< map >এলিমেন্ট ব্যবহার করা হয়। - ইমেজ-ম্যাপ এর মধ্যে ক্লিক করার স্থান যুক্ত করার জন্য এইচটিএমএল
< area >এলিমেন্ট ব্যবহার করা হয়।
Read more
