HTML <img> ট্যাগ

  • পূর্ববর্তী পৃষ্ঠা <iframe>
  • পরবর্তী পৃষ্ঠা <input>

অর্থ ও ব্যবহার

<img> ট্যাগটি HTML পৃষ্ঠায় চিত্রকে এম্বেড করার জন্য ব্যবহৃত হয়。

প্রযুক্তিগতভাবে, চিত্রকে ওয়েবসাইটে প্রবর্তন করা হয়নি, বরং ওয়েবসাইটে চিত্রকে লিঙ্ক করা হয়。<img> ট্যাগটি একটি কন্টেনার তৈরি করে, যা চিত্রকে উল্লেখ করে。

<img> ট্যাগটির দুটি প্রয়োজনীয় বৈশিষ্ট্য রয়েছে:

  • src - চিত্রের পাথ নির্ধারণ করুন
  • alt - যদি কোনও কারণে চিত্র দেখা যায় না, তবে চিত্রের প্রতিস্থাপন টেক্সট নির্ধারণ করুন。

মন্তব্য:আরও, চিত্রের প্রস্থ এবং উচ্চতা নির্ধারণ করুন। যদি প্রস্থ এবং উচ্চতা নির্ধারণ না হয়, তবে চিত্র লোড করার সময় পৃষ্ঠা ভ্রমণ করতে পারে。

সুঝানা:আরেকটি ডকুমেন্টের সাথে চিত্রকে লিঙ্ক করতে, শুধুমাত্র <img> ট্যাগ একটি <a> ট্যাগের ভিতরে (নিচের উদাহরণ দেখুন)。

আরও দেখুন:

HTML শিক্ষাদন্ড:HTML চিত্র

HTML DOM উপস্থাপনা মানক:Image অবজেক্ট

CSS শিক্ষাদন্ড:চিত্রের শৈলী নির্ধারণ

আরও পড়ার জন্য:চিত্রকে সঠিকভাবে ব্যবহার করা কিভাবে

উদাহরণ

উদাহরণ 1

নিচের উদাহরণে, আমরা পৃষ্ঠায় একটি CodeW3C.com ইঞ্জিনিয়ার দ্বারা শাংহাই ফ্লোরাল পার্কে ফুলগুলির ছবি যোগ করছি:

<img src="tulip.jpg" alt="শাংহাই ফ্লোরাল পার্ক - টিউলিপ" />

স্বয়ং প্রয়াস করুন

শাংহাই ফ্লোয়ার পোর্ট - টিউশিয়ান

উদাহরণ 2

আরেকটি চিত্র যোগ করার উদাহরণ:

<img src="dancer.png" alt="ড্যান্সার" width="500" height="749">

স্বয়ং প্রয়াস করুন

সুঝানা:পৃষ্ঠার নিচে আরও উদাহরণ পাবেন。

বৈশিষ্ট্য

বৈশিষ্ট্য মান বর্ণনা
alt টেক্সট চিত্রের প্রতিস্থাপন টেক্সট নির্ধারণ করুন。
crossorigin
  • anonymous
  • use-credentials
 অনুমতিপ্রাপ্ত ক্রস-ওরিজিন সাইটগুলির চিত্র এবং ক্যানভাস (canvas) সঙ্গে ব্যবহার করা অনুমতি দেওয়া হয়。
height পিক্সেল চিত্রের উচ্চতা নির্ধারণ করুন。
ismap ismap চিত্রকে সার্ভার পক্ষের চিত্র ম্যাপ হিসাবে নির্ধারণ করুন。
loading
  • eager
  • lazy
 ব্রাউজারকে তাৎক্ষণিকভাবে চিত্র লোড করা উচিত কিংবা কিছু শর্ত পূর্ণ হওয়ার পর চিত্র লোড করা হবে নির্ধারণ করুন。
longdesc URL চিত্রের বিস্তারিত বর্ণনার URL নির্ধারণ করুন。
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 চিত্র পাওয়ার সময় ব্যবহার্য উল্লেখনীমূলক তথ্য নির্ধারণ করুন。
sizes মাপ বিভিন্ন পৃষ্ঠ সাজার চিত্রের মাপ নির্ধারণ করুন。
src URL চিত্রের পাথ নির্ধারণ করুন。
srcset URL-list বিভিন্ন পরিস্থিতিতে ব্যবহৃত ছবির ফাইল তালিকা নির্ধারণ করুন
usemap #mapname ছবিকে ক্লায়েন্ট-সাইড ইমেজ ম্যাপ হিসাবে নির্ধারণ করুন
width পিক্সেল ছবির প্রশস্ততা নির্ধারণ করুন

গ্লোবাল অ্যাট্রিবিউট

<img> ট্যাগগুলি ইভেন্ট অ্যাট্রিবিউটসমূহকেও সমর্থন করে HTML-এর গ্লোবাল অ্যাট্রিবিউট。

ইভেন্ট অ্যাট্রিবিউট

<img> ট্যাগগুলি ইভেন্ট অ্যাট্রিবিউটসমূহকেও সমর্থন করে HTML-এর ইভেন্ট অ্যাট্রিবিউট。

আরও উদাহরণ

উদাহরণ 3

ছবির অবস্থান সাজান (CSS ব্যবহার করে)

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

স্বয়ং প্রয়াস করুন

উদাহরণ 4

ছবিতে হুক যুক্ত করুন (CSS ব্যবহার করে)

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

স্বয়ং প্রয়াস করুন

উদাহরণ 5

ছবিতে বাম-ডান মার্গ যুক্ত করুন (CSS ব্যবহার করে)

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

স্বয়ং প্রয়াস করুন

উদাহরণ 6

ছবিতে উপর-নিচ-পার্শ্বিক মার্গ যুক্ত করুন (CSS ব্যবহার করে)

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

স্বয়ং প্রয়াস করুন

উদাহরণ 7

অন্য ফোল্ডার বা অন্য ওয়েবসাইট থেকে ছবি যুক্ত করার কিভাবন

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

স্বয়ং প্রয়াস করুন

উদাহরণ 8

কিভাবে চিত্রকে হাইপারলিঙ্ক যোগ করা যায়

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

স্বয়ং প্রয়াস করুন

উদাহরণ 9

কিভাবে ক্লিকযোগ্য এক্সিকিউট চিত্রমানপটকে তৈরি করা যায়। প্রত্যেক এক্সিকিউট একটি হাইপারলিঙ্ক

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

স্বয়ং প্রয়াস করুন

প্রসারিত পড়া - কিভাবে যার্থপূর্ণভাবে চিত্র ব্যবহার করা যায়

এইচটিএমএল এবং এইচটিএক্সএইচ সবচেয়ে বেশি আকর্ষণীয় বৈশিষ্ট্যগুলির মধ্যে একটি, ডকুমেন্টের টেক্সটে চিত্রকে অন্তর্ভুক্ত করা পারে, চিত্রকে ডকুমেন্টের অভ্যন্তরীণ অবজেক্ট (ইনলাইন চিত্র) হিসাবে ব্যবহার করা যেতে পারে, কিংবা একটি পৃথক ডকুমেন্ট হিসাবে হাইপারলিঙ্ক দ্বারা ডাউনলোড করা হতে পারে, বা ডকুমেন্টের প্রকৃতি হিসাবে।

ডকুমেন্টের কনটেন্টে চিত্র (স্থির বা এনিমেশন সহ আইকন, ছবি, ব্যাখ্যা, চিত্রকর্ম, ইত্যাদি) সামগ্রীগুলি যথাযথভাবে যোগ করলে, ডকুমেন্টটি আরও জীবন্ত এবং আকর্ষণীয় হবে, এবং এটি আরও পেশাদারী এবং তথ্যযুক্ত হবে, এবং এটি পড়ার জন্য আরও সহজ হবে। এছাড়াও, একটি চিত্রকে হাইপারলিঙ্কের দৃশ্যমান পথপ্রদর্শক হিসাবে ব্যবহার করা যেতে পারে。

কিন্তু, যদি চিত্রকে অতিরিক্ত ব্যবহার করা হয়, তবে ডকুমেন্টটি বিচ্ছিন্ন হয়ে যাবে, অবিশ্বাস্য হয়, এবং পড়ার জন্য অসমর্থ, এবং ইউজাররা পৃষ্ঠা ডাউনলোড এবং দেখার জন্য অতিরিক্ত অপরিহার্য অপেক্ষা করবেন。

নিচের নিবন্ধটি পড়ুন, ওয়েবের দুই প্রধান চিত্র ফরম্যাট: GIF এবং JPEG, এবং চিত্রকে যার্থপূর্ণভাবে ব্যবহার করে শিখুন:

ডিফল্ট সিএসএস সেটিং

অধিকাংশ ব্রাউজারগুলি নিম্নোক্ত ডিফল্ট মান দ্বারা প্রদর্শন করবে <img> উপাদান:

img {
  display: inline-block;
}

স্বয়ং প্রয়াস করুন

ব্রাউজার সমর্থন

চ্রোম এডজ ফায়ারফক্স স্যাফারি ওপেরা
চ্রোম এডজ ফায়ারফক্স স্যাফারি ওপেরা
সমর্থন সমর্থন সমর্থন সমর্থন সমর্থন
  • পূর্ববর্তী পৃষ্ঠা <iframe>
  • পরবর্তী পৃষ্ঠা <input>