تصاویر کو ویب صفحات میں شامل کرنا

آج کسی بھی ویب صفحہ کو دیکھیں اور آپ کو یہ پتہ چل جائے گا کہ وہ کچھ چیزیں عام طور پر مشترکہ کرتے ہیں. ان مشترکہ علامات میں سے ایک تصاویر ہیں. دائیں تصاویر ایک ویب سائٹ کے پریزنٹیشن میں بہت زیادہ شامل ہیں. ان تصاویر میں سے کچھ جیسے، ایک کمپنی کی علامت (لوگو) کی طرح، سائٹ کو برینڈ کریں اور اس ڈیجیٹل ادارے سے آپ کی جسمانی کمپنی سے رابطہ کریں.

ایک تصویر، آئیکن یا گرافکس کو اپنے ویب صفحے پر شامل کرنے کے لئے، آپ کو صفحے کے HTML کوڈ میں ٹیگ استعمال کرنے کی ضرورت ہے. آپ اپنے ایچ ٹی ایم ایل میں جی ایم ایم ٹیگ رکھتے ہیں، جہاں آپ گرافک کو ظاہر کرنے کے لئے چاہتے ہیں. ویب براؤزر جو صفحہ کا کوڈ انجام دے رہا ہے، اس ٹیگ کو صفحہ کو دیکھا جانے کے بعد موزوں گرافک سے لے جائے گا. ہماری کمپنی علامت (لوگو) مثال کے طور پر واپس جا رہے ہیں، یہاں ہے کہ آپ اس سائٹ کو آپ کی سائٹ میں کس طرح شامل کر سکتے ہیں:

تصویری خصوصیات

مندرجہ ذیل ایچ ٹی ایم ایل کوڈ کو دیکھ کر، آپ دیکھیں گے کہ عنصر میں دو صفات شامل ہیں. ان میں سے ہر ایک کی تصویر کے لئے ضروری ہے.

پہلی خصوصیت "src" ہے. یہ بہت ساری تصویر کی فائل ہے جسے آپ صفحے پر ظاہر کرنا چاہتے ہیں. ہمارے مثال میں ہم "logo.png" نامی فائل کا استعمال کرتے ہیں. یہ گرافک ہے کہ ویب براؤزر اس وقت پیش کرے گا جب اس نے سائٹ فراہم کی.

آپ کو یہ بھی اطلاع ملے گی کہ اس فائل کا نام سے پہلے، ہم نے کچھ اضافی معلومات، "/ تصاویر /" شامل کیے ہیں. یہ فائل کا راستہ ہے. ابتدائی آگے سلیش سرور کو بتاتی ہے کہ ڈائریکٹری کی جڑ کو دیکھنے کے لئے. اس کے بعد "فولڈر" نامی فولڈر کو تلاش کریں گے اور آخر میں "logo.png" نامی فائل. ایک ویب سائٹ کے گرافکس کو ذخیرہ کرنے کے لئے "تصاویر" نامی فولڈر کا استعمال ایک عام عام مشق ہے، لیکن آپ کی ویب سائٹ کے لئے جو بھی مناسب ہے اس کی فائل کا راستہ تبدیل ہوجائے گا.

دوسری مطلوبہ خصوصیت "alt" متن ہے. یہ "اختیاری متن" ہے جس سے ظاہر ہوتا ہے کہ تصویر کسی وجہ سے لوڈ کرنے میں ناکام ہے. اگر یہ ایرر برقرار رہے تو ہمارے ہیلپ ڈیسک سے رابطہ کریں. غلط استعمال رپورٹ نہیں کیا جا سکا. ایک یا زیادہ ایرر آ گئے ہیں. براہ مہربانی ایرر پیغام سے نشان زدہ فیلڈز کو ٹھیک کریں. ایسا کیوں ہوگا؟ مختلف وجوہات:

یہ صرف چند امکانات ہیں کیوں کہ ہماری مخصوص تصویر غائب ہو سکتی ہے. ان صورتوں میں، ہمارے alt متن کے بجائے ظاہر کرے گا.

الٹ ٹیکسٹ اسکرین ریڈر سوفٹ ویئر کے ذریعہ بھی استعمال کیا جاتا ہے جس میں کسی ایسے وزیٹر کو "پڑھنے" کی شکل میں دیکھا جا سکتا ہے جو نقطہ نظر سے محروم ہے. چونکہ وہ ایسی تصویر نہیں دیکھ سکتے جیسے ہم کرتے ہیں، یہ متن انہیں بتاتی ہیں کہ تصویر خود ہی کیا ہے. لہذا alt متن کی ضرورت ہوتی ہے اور یہ واضح طور پر یہ بتانا چاہئے کہ یہ تصویر کیا ہے.

alt متن کا ایک عام غلط فہمی یہ ہے کہ یہ سرچ انجن مقاصد کے لئے ہے. یہ سچ نہیں ہے. جبکہ Google اور دیگر سرچ انجنیں یہ متن اس بات کا تعین کرنے کے لئے پڑھتے ہیں کہ تصویر کیا ہے (یاد رکھیں، وہ آپ کی تصویر یا تو نہیں دیکھ سکتے ہیں)، آپ کو انجن تلاش کرنے کے لئے اپیل کرنے کیلئے alt متن لکھنے نہیں دینا چاہئے. مصنف صاف ایل متن جس کا مطلب انسانوں کے لئے ہے. اگر آپ کچھ مطلوبہ الفاظ کو ٹیگ میں بھی شامل کرسکتے ہیں جو تلاش کے انجن پر اپیل کرتے ہیں، یہ ٹھیک ہے، لیکن ہمیشہ یہ یقینی بنائیں کہ اے ایل متن اس کے بنیادی مقصد کی خدمت کر رہا ہے.

دیگر خصوصیات

IMG کی ٹیگ میں دو دیگر صفات بھی ہیں جو آپ اپنے ویب صفحے پر گرافک کرتے وقت استعمال میں دیکھ سکتے ہیں - چوڑائی اور اونچائی. مثال کے طور پر، اگر آپ WYSIWYG ایڈیٹر کا استعمال کرتے ہیں جیسے Dreamweaver، خود کار طریقے سے آپ کے لئے یہ معلومات شامل کرتی ہے. یہاں ایک مثال ہے:

WIDTH اور HEIGHT خاصیت براؤزر تصویر کا سائز بتاتے ہیں. براؤزر پھر جانتا ہے کہ ترتیب کو مختص کرنے کے لئے کتنا جگہ ہے، اور اس صفحے پر اگلے عنصر پر منتقل ہوسکتا ہے. آپ کے ایچ ٹی ایم ایل میں اس معلومات کو استعمال کرنے میں مسئلہ یہ ہے کہ آپ ہمیشہ اپنی تصویر اس عین مطابق سائز پر ظاہر نہیں کرسکتے. مثال کے طور پر، اگر آپ کے پاس ایک ذمہ دار ویب سائٹ ہے جس کے ذریعے سیاحوں اور آلے کے سائز کی بنیاد پر جن کے سائز کی تبدیلیاں ہوتی ہیں، آپ بھی اپنی تصاویر کو لچکدار بنانا چاہتے ہیں. اگر آپ اپنے ایچ ٹی ایم ایل میں بتاتے ہیں تو کیا مقررہ سائز کیا ہے، آپ کو ذمہ دار سی ایس ایس میڈیا کے سوالات کے ساتھ اوورائڈ کرنے کے لئے بہت مشکل مل جائے گا. اس وجہ سے، اور طرز (سی ایس ایس) اور ساخت (ایچ ٹی ایم ایل) کی علیحدگی کو برقرار رکھنے کے لئے، یہ سفارش کی جاتی ہے کہ آپ چوڑائی اور اونچائی کی صفات کو اپنے HTML کوڈ میں شامل نہ کریں.

ایک نوٹ: اگر آپ یہ سائز سازی کے ہدایات کو چھوڑ دیتے ہیں اور سی ایس ایس میں سائز کی وضاحت نہیں کرتے ہیں تو براؤزر تصویر کو اس کے ڈیفالٹ، مقامی انداز میں بھی دکھایا جائے گا.

جیریمی Girard کی طرف سے ترمیم