HTML <img> تگ

تعریف اور استعمال

<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>

عیناً امتحان کریں

مطالعه کی توسیع - کس طرحی کے ساتھ تصاویر کا استعمال کردار

HTML اور XHTML کا ایک بہت زیادہ قابل نظر خصوصیت یہ ہے کہ وہ سند کا متن میں تصاویر شامل کرسکتا ہے، یعنی وہ تصاویر کو سند کا داخلی آئیٹم (این لائن تصاویر) کے طور پر یا اس کا ایک علیحدہ سند کے طور پر یا اس کا پس منظر کے طور پر استعمال کرسکتا ہے.

مقادیر کی وجہ سے تصاویر کا استعمال (مثلاً موبائل یا موبائل کی تصاویر، توضیحات، تصاویر، اور دیگر) کا استعمال کردار میں جوڑنا، سند کو زیادہ زندہ اور جالب بنادیتا ہے، اور اس کا نتیجہ یہ ہوتا ہے کہ یہ زیادہ پروفیشنل اور معلومات کا استعمال کردار بھی ہوتا ہے، اور اس کا استعمال کردار آسان اور بہتر بنادیتا ہے، اور یہ ایک تصویر کو ویب لینک کا ویژن گائیڈ بن سکتا ہے.

لیکن اگر تصاویر کا استعمال زیادہ کیا جائے تو سند تباہ ہوجائیگی، کسارتی کی جائیگی، اور پڑھنا بھی مشکل ہوجائیگی، اور یہ کاربروں کو پیج کا ڈاؤن لوڈ اور دیکھنا کی وجہ سے بہت وقت کا استعمال کردار بھی ہوگا.

درآمدی مطالعه کنید، سعی کنید دو شکل اصلی تصاویر وب: GIF اور JPEG، اور کس طرحی کے ساتھ تصاویر کا استعمال کیجئے:

مقادیر CSS کا معیاری قیاس

ب大多数 براوزرز کا استعمال کردہ آپریشنل مقدارز <img> عنصر:

img {
  display: inline-block;
}

عیناً امتحان کریں

بrowsers کا پشتیبندی

کروم ایج فائر فاکس سافری آپریا
کروم ایج فائر فاکس سافری آپریا
معاونت معاونت معاونت معاونت معاونت