تصاویر اور آبجیکٹ کے لئے HTML IMG ٹیگ کا استعمال
HTML IMG ٹیگ ایک ویب صفحہ کے اندر تصاویر اور دیگر جامد گرافیکل اشیاء کی اندراج کو کنٹرول کرتی ہے. یہ مشترکہ ٹیگ کئی لازمی اور اختیاری صفات کی حمایت کرتا ہے جو آپ کو ایک مصروف، تصویر پر مبنی ویب سائٹ بنانے کے لئے اپنی صلاحیت میں امیرتا ہے.
مکمل طور پر تشکیل شدہ ایچ ایم ایم ایم ایم ٹی ٹیگ کا ایک مثال ایسا لگتا ہے:
ضروری IMG ٹیگ کی خصوصیات
ایس آر سی. صرف ایک خاص خصوصیت آپ کو ایک ویب صفحہ پر ظاہر کرنے کے لئے ایک تصویر حاصل کرنے کی ضرورت SRC خاصیت ہے. یہ خصوصیت تصویر کی فائل کے نام اور مقام کی نشاندہی کی جا سکتی ہے.
ALT. درست XHTML اور HTML4 لکھنے کے لئے، ALT کی خاصیت بھی ضروری ہے. یہ خصوصیت متن کے ساتھ غیر نظری براؤزر فراہم کرنے کے لئے استعمال کیا جاتا ہے جو تصویر بیان کرتا ہے. براؤزر مختلف طریقوں سے متبادل متن دکھاتا ہے. جب آپ اپنے ماؤس کی تصویر پر ڈالتے ہیں تو کچھ اسے خاص طور پر ظاہر کرتا ہے جب آپ تصویر پر دائیں کلک کریں، اور کچھ اسے بالکل ظاہر نہیں کرتے.
ویب صفحہ کے متن سے متعلقہ یا اہم نہیں ہے اس تصویر کے بارے میں اضافی تفصیلات دینے کے لئے alt متن کا استعمال کریں. لیکن اس یاد رکھیں کہ اسکرین قارئین اور دیگر ٹیکسٹ صرف براؤزرز میں، متن کے باقی متن کے ساتھ متن پڑھا جائے گا. الجھن سے بچنے کے لۓ، صرف "علامت (لوگو)" کے بجائے وضاحتی جملہ متن کا استعمال کریں (مثال کے طور پر)، "ویب ڈیزائن اور ایچ ٹی ایم ایل کے بارے میں".
HTML5 میں، ALT کی خاصیت ہمیشہ کی ضرورت نہیں ہے، کیونکہ آپ اس میں مزید تفصیل شامل کرنے کے لئے ایک کاپیشن استعمال کرسکتے ہیں. آپ خصوصیت ARIA-DESCRIBEDBY کو ایک ID کی وضاحت کرنے کے لئے بھی استعمال کرسکتے ہیں جس میں مکمل وضاحت شامل ہے.
اگرچہ تصویر خالصانہ آرائشی ہے تو الٹ متن کی ضرورت بھی نہیں ہے، جیسے ویب صفحہ یا شبیہیں کے اوپر گرافک. لیکن اگر آپ اس بات کا یقین نہیں کر رہے ہیں، تو صرف کیس میں alt متن شامل ہیں.
سفارش شدہ IMG کی خصوصیات
چوڑائی اور اونچی . آپ کو ہمیشہ WIDTH اور HEIGHT صفات کا استعمال کرتے ہوئے کی عادت میں جانا چاہئے. اور آپ کو ہمیشہ حقیقی سائز کا استعمال کرنا چاہئے اور براؤزر کے ساتھ اپنی تصاویر کا سائز تبدیل نہیں کرنا چاہئے.
یہ صفات اس صفحے کے انجام کو تیز کرتے ہیں کیونکہ براؤزر کو تصویر کے لئے ڈیزائن میں جگہ مختص کرسکتا ہے، اور پھر باقی تصویر کو ڈاؤن لوڈ کرنے کے بجائے، باقی مواد کو ڈاؤن لوڈ جاری رکھیں.
دیگر مفید IMG خصوصیات
TITLE . خصوصیت ایک عالمی خصوصیت ہے جو کسی HTML عنصر پر لاگو کیا جاسکتا ہے . اس کے علاوہ، TITLE کی خصوصیت آپ کو تصویر کے بارے میں مزید معلومات شامل کرنے میں مدد دیتا ہے.
زیادہ سے زیادہ براؤزر TITLE خاصیت کی حمایت کرتے ہیں، لیکن وہ مختلف طریقے سے کرتے ہیں. بعض متن کو پاپ اپ کے طور پر پیش کرتے ہیں جبکہ دوسروں کو اس کی معلومات کے اسکرین میں دکھاتا ہے جب صارف تصویر پر دائیں کلکس کو ظاہر کرتا ہے. آپ تصویر کے بارے میں اضافی معلومات لکھنے کیلئے TITLE خصوصیت کا استعمال کرسکتے ہیں، لیکن اس معلومات پر بھی متفق نہ ہوں جو چھپے ہوئے یا ظاہر ہوتے ہیں. تلاش انجن کے مطلوبہ الفاظ کو چھپانے کے لئے آپ کو یہ یقینی طور پر استعمال نہیں کرنا چاہئے. یہ عمل اب سب سے زیادہ تلاش کے انجن کی طرف سے سزا دی گئی ہے.
USEMAP اور ISMAP . یہ دو خاصیت آپ کی تصاویر پر کلائنٹ سائڈ () اور سرور سائڈ (آئی ایس ایم اے پی) کی تصویر نقشوں کو مقرر کرتی ہیں.
لنکس خصوصیت تصویر کی زیادہ تفصیل سے یو آر ایل کی حمایت کرتا ہے. یہ خصوصیت آپ کی تصاویر کو زیادہ قابل رسائی بناتی ہے.
منحصر اور غیر متوقع IMG خصوصیات
ایچ ٹی ایم ایل 5 میں کئی متصف ہیں یا ایچ ٹی ایم ایل 4 میں ناراض ہیں. بہترین ایچ ٹی ایم ایل کے لئے، آپ کو ان صفات کو استعمال کرنے کے بجائے دیگر حل تلاش کرنا چاہئے.
بارڈر . خصوصیت تصویر کے ارد گرد کسی بھی سرحد کے پکسلز میں چوڑائی کی وضاحت کرتا ہے. یہ HTML4 میں سی ایس ایس کے حق میں محروم ہو گیا ہے اور HTML5 میں غیر معمولی ہے.
ALIGN . یہ خصوصیت آپ کو ٹیکسٹ کے اندر ایک تصویر رکھنے اور اس کے ارد گرد متن کا بہاؤ رکھنے کی اجازت دیتا ہے. آپ ایک تصویر کو دائیں یا بائیں طرف سیدھ کر سکتے ہیں. HTML4 میں فلوٹ سی ایس ایس پراپرٹی کے حق میں اس سے محروم ہوگیا ہے اور ایچ ٹی ایم ایل 5 میں غیر معمولی ہے.
HSPACE اور VSPACE . HSPACE اور VSPACE خاصیت سفید جگہ افقی طور پر (HSPACE) اور عمودی طور پر شامل ہیں (VSPACE). گرافک (اوپر اور نچلے یا بائیں اور دائیں) کے دونوں اطراف وائٹ اسپیس کو شامل کیا جائے گا، لہذا اگر آپ کو صرف ایک طرف کی جگہ کی ضرورت ہو تو، آپ کو سی ایس ایس کا استعمال کرنا چاہئے. یہ صفات HTML4 میں مارجن سی ایس ایس پراپرٹی کے حق میں محروم ہوگئے ہیں، اور وہ ایچ ٹی ایم ایل 5 میں غیر معمولی ہیں.
LOWSRC . LOWSRC خاصیت ایک متبادل تصویر فراہم کرتا ہے جب آپ کی تصویر کا ذریعہ اتنا بڑا ہے کہ یہ انتہائی آہستہ سے ڈاؤن لوڈ کرتا ہے. مثال کے طور پر، آپ کو ایک تصویر ہوسکتی ہے جو 500KB ہے جسے آپ اپنے ویب صفحے پر ظاہر کرنا چاہتے ہیں، لیکن 500 کلوگرام بی بی ڈاؤن لوڈ ہونے کا وقت لگے گا. لہذا آپ تصویر کی ایک بہت چھوٹی سی نقل بنا سکتے ہیں، شاید سیاہ اور سفید میں یا صرف انتہائی مرضی کے مطابق ہو، اور یہ کہ LOWSRC خاصیت میں ڈالیں. چھوٹی تصویر پہلی بار ڈاؤن لوڈ کریں اور دکھائے گی، اور پھر جب بڑی تصویر ظاہر ہوتی ہے تو یہ کم ذریعہ ایک کی جگہ لے لے گی.
IMG ٹیگ پر LetsSRC خاصیت نیٹسس نیویگیٹر 2.0 میں شامل کیا گیا تھا. یہ ڈوم سطح 1 کا حصہ تھا لیکن اس کے بعد ڈوم سطح سے ہٹا دیا گیا. 2. اس خاصیت کے لئے براؤزر کی حمایت کی نچلی ہوئی ہے، اگرچہ بہت سے سائٹس کا دعوی ہے کہ یہ تمام جدید براؤزرز کی مدد سے ہے. ایچ ٹی ایم ایل 5 میں ایچ ٹی ایم ایل 4 یا غیر متغیر میں ڈرایا گیا ہے کیونکہ یہ کسی بھی تفصیلات کا ایک حصہ نہیں تھا.
اس خاصیت کو استعمال کرنے سے بچیں اور اپنی تصاویر کو بہتر بنانے کے لۓ تاکہ وہ تیزی سے لوڈ کریں. صفحہ لوڈنگ کی رفتار اچھا ویب ڈیزائن کا ایک اہم حصہ ہے، اور بڑی تصاویر سست صفحات بہت کم ہوتی ہیں- یہاں تک کہ اگر آپ LOWSRC خاصیت کا استعمال کرتے ہیں.