تصویر کے ارد گرد متن لپیٹ کیسے کریں

کسی بھی ویب صفحہ کو دیکھو اور آپ متن کے مواد اور تخیل کی ایک مجموعہ دیکھیں گے. یہ دونوں عناصر ایک ویب سائٹ کی کامیابی میں ضروری اجزاء ہیں. ٹیکسٹ مواد یہ ہے کہ سائٹ کے زائرین کتنے پڑھے جائیں گے اور ان کی درجہ بندی الگورتھم کے حصے کے طور پر کیا سرچ انجن استعمال کریں گے . تصاویر سائٹ پر بصری دلچسپی کا اضافہ کریں گے اور ٹیکسٹ مواد کو جمع کرنے میں مدد ملے گی.

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

سی ایس ایس کا استعمال کرتے ہوئے

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

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

1. آپ کے سٹائل شیٹ میں، آپ اب مندرجہ ذیل انداز میں شامل کر سکتے ہیں:
   1. .بائیں {
   2. فلوٹ: بائیں؛
   3. بھرتی: 0 20px 20px 0؛
   4. }
   5. آپ یہاں کیا کر رہے ہیں سی ایس ایس "فلوٹ" پراپرٹی کا استعمال کرتے ہیں، جس سے تصویر کو عام دستاویز کے بہاؤ سے (جس طرح سے تصویر عام طور پر ظاہر ہوتا ہے، اس کے نیچے متناسب متن کے ساتھ) دکھایا جائے گا اور یہ اس کے کنٹینر کے بائیں جانب . اس متن کے بعد جو اس کے بعد ایچ ٹی ایم ایل مارک اپ میں آتا ہے اب اس کے آس پاس پڑتا ہے. ہم نے کچھ پیڈنگ اقدار کو بھی شامل کیا تاکہ اس متن کو براہ راست تصویر کے خلاف نہ ہو. اس کے بجائے، اس میں کچھ اچھا فاصلہ مل جائے گا جس میں صفحے کے ڈیزائن میں نظر انداز ہو جائے گا. پیڈنگ کے لئے سی ایس ایس کی املاک میں، ہم نے تصویر کے اوپر اور بائیں طرف 0 اقدار کو شامل کیا، اور اس کے بائیں اور نیچے 20 پکسلز کو شامل کیا. یاد رکھو، آپ کو بائیں مدتی تصویر کی دائیں طرف کچھ بھرتی شامل کرنے کی ضرورت ہے. صحیح دائیں منسلک تصویر (جو ہم ایک لمحہ میں نظر آئیں گے) اس کی بائیں طرف پر گراؤنڈ لاگو ہوگی.
2. اگر آپ اپنے ویب پیج کو کسی براؤزر میں دیکھتے ہیں، تو آپ کو اب یہ پتہ چلتا ہے کہ آپ کی تصویر صفحہ کے بائیں جانب سے منسلک ہے اور متن اچھی طرح سے اس کے ارد گرد پڑتا ہے. یہ کہنا کرنے کا ایک اور طریقہ یہ ہے کہ تصویر "بائیں طرف چلتا ہے".

1. اگر آپ چاہتے ہیں کہ اس تصویر کو دائیں طرف مماثلت کی جاسکتی ہے (مثلا تصویر کی مثال میں اس آرٹیکل کے ساتھ)، یہ آسان ہوگا. سب سے پہلے، آپ کو اس بات کو یقینی بنانا چاہیے کہ، اس سٹائل کے علاوہ ہم نے صرف "بائیں" کی کلاس کی قیمت کے لئے ہمارے سی ایس ایس میں شامل کیا ہے، ہمارے پاس بھی صحیح سیدھ کے لئے بھی ہے. یہ اس طرح نظر آئے گا:
   1. .right {
   2. فلوٹ: دائیں؛
   3. بھرتی: 0 0 20px 20px؛
   4. }
   5. آپ دیکھ سکتے ہیں کہ ہم نے پہلے لکھا کہ ہم نے پہلے ہی لکھا ہے. واحد فرق یہ ہے کہ ہم "فلوٹ" پراپرٹی اور ہمدردی اقدار کے استعمال کے لئے استعمال کرتے ہیں (ہم حق کے بجائے ہماری تصویر کے بائیں جانب کچھ شامل کرتے ہیں).
2. آخر میں، آپ اپنے "HTML" میں "بائیں" سے "صحیح" سے تصویر کی کلاس کی قدر کو تبدیل کردیں گے.
3. اب براؤزر میں اپنے صفحے کو دیکھو اور آپ کی تصویر کو صحیح طریقے سے اس کے ارد گرد لپیٹ متن کے متن میں منسلک کیا جانا چاہئے. ہم ان دونوں شیلیوں کو، "بائیں" اور "صحیح" اپنے تمام شیلیوں کی شناختوں میں شامل کرنا چاہتے ہیں تاکہ ہم ان بصری شیلیوں کا استعمال کریں جب ہم ویب صفحات تیار کررہے ہیں. یہ دو شیلیوں اچھے، دوبارہ پرسکون خصوصیات بن جاتے ہیں جب ہم اپنے ارد گرد متن ریپنگ کے ساتھ سٹائل کی تصاویر کی ضرورت ہوتی ہے.

سی ایس ایس کے بجائے ایچ ٹی ایم ایل کا استعمال کرتے ہوئے (اور آپ یہ کیوں نہیں کرتے)

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