هڪ تصوير جي ڀرسان متن لپائڻ

ڪنهن به ويب پيج تي ڏسو ۽ توهان کي متن جي مواد ۽ تصويري جي هڪ ميلاپ ڏسڻ ۾ ايندي. انهن ٻنهي عناصر ويب سائيٽ جي ڪاميابي ۾ لازمي اجزاء آهن. متن جو مواد ڇا آهي جيڪو سٿين ويٽرن کي پڙهي سگهندو آهي ۽ انهن جي ڳولا جا نشان ان جي درجه بندي الورورڊس جي حصي جي طور تي استعمال ڪندو . تصويرون سائيٽ ڏانهن بصري دلچسپي شامل ڪندي ۽ متن جي مواد کي جمع ڪرڻ ۾ مدد ڪندو.

متن ۽ تصويرون شامل ڪرڻ لاء ويب سائيٽن تي آسان آھي. متن پيراگراف، سرنگ ۽ فهرستن جي معياري HTML ٽيگ سان شامل ڪيو ويو آهي، جڏهن ته تصويرون هڪ صفحي تي عنصر سان رکيل آهن. هڪ دفعو توهان هڪ ويب پيج تي هڪ تصوير شامل ڪيو آهي، تنهن هوندي، توهان شايد هيٺيان سٽون بجاء متن جي وهڪري ڪرڻ چاهيندا هوندا، (جيڪو ڊيموٽيڪل طريقو جيڪو HTML ڪوڊ ۾ شامل ڪيو ويو آهي برائوزر ۾ شامل ڪيو ويندو آهي). تخنيقي طور تي، ٻه طريقا موجود آهن، يا ته سي ايس استعمال ڪيو وڃي (يا سفارش ڪيل) استعمال ڪندي يا سڌو سنئون هدايتات شامل ڪري سڌو HTML ۾ (سفارش ٿيل نه، किनकि तपाईं आफ्नो वेबसाइटको लागि शैली र संरचना को अलग राख्न चाहानुहुन्छ).

CSS استعمال ڪندي

ھڪ صفحي جو متن ۽ تصويرن جي طريقي کي تبديل ڪرڻ جو صحيح رستو ۽ ڪھڙي طرح ان جي بصري شالين برائوزر ۾ ظاهر ٿيندو CSS سان گڏ آھي. بس ياد رکون، ڇو ته اسان صفحي تي هڪ بصري تبديلي بابت ڳالهايو آهي (تصوير جي ارد گرد متن جي وهڪري ٺاهڻ)، انهي جو مطلب اهو آهي ته ڪاساسنگنگ انداز شيڪن جو ڊومين آهي.

1. پھريون، پنھنجو تصوير پنھنجو ويب پيج ۾ شامل ڪريو. انهي HTML مان ڪنهن به بصري خاصيتن (جهڙوڪ چوڏائي ۽ اوچائي ويلن) کان ٻاهر ڪرڻ جي ياد رکو. اهو اهم آهي، خاص طور تي هڪ قبول ڪندڙ ويب سائيٽ لاء، جتي برائوزر جي بنياد تي تصوير جي شڪل مختلف هوندي آهي. ڪجهه ويب سافٽ ويئر، جهڙوڪ ايڊوڊ ڊائويويور، جيڪي تصويرون ۽ چوٽي جي معلومات شامل ڪندا جيڪي تصويرون جيڪي ڊزائين سان داخل ڪيا وڃن، پوء هي ڄاڻايل HTML कोड مان هٽائي پڪ ڪريو! يقيني طور تي، مناسب alt متن ۾ شامل ڪرڻ لاء. هتي هڪ مثال آهي ته توهان جي HTML ڪوڊ ڪيئن ٿي سگهي ٿي؟
2. اسٽائل مقصدن لاء، توهان هڪ طبقي کي هڪ تصوير کي پڻ شامل ڪري سگهو ٿا. هي درجي جي قيمت جيڪو اسان اسان جي CSS فائل ۾ استعمال ڪنداسين. ياد رهي ته اسان جيڪو هتي استعمال ڪيو اسان کي خودمختياري آهي، باقي، هن خاص طريقي سان، اسان کي "بائیں" يا "صحيح" جا قدر استعمال ڪندا آهيون، انهي تي منحصر آهي ته اسان جي تصوير کي ترتيب ڏيڻ چاهين ٿا. اسان انهي ڪم لاء سادو نحو سکي سگهندا آهيون ۽ ٻين لاء آسان سمجهڻ لاء جيڪو مستقبل ۾ سائيٽ کي منظم ڪرڻ جي لاء هجي، پر توهان هن کي ڪنهن به قسم جي قيمت چاهيندا هجو.
   2. پاڻ کي، هن ڪلاس جي قيمت ڪابه شيء نه ڪندو. عڪس مطابق کاٻي پاسي واري تصوير خود بخود نه ٿي ويندي. انهي جي لاء، اسان کي هاڻي اسان جي سي ايس ڊي تي رخ ڪرڻو پوندو.

1. توھان جي خاڪي شئيٽ ۾، توھان ھاڻي ھيٺ ڏنل طريقي سان شامل ڪري سگھو ٿا:
   1. .کاٻو {
   2. سچل: ڇڏي؛
   3. لڳائڻ: 0 20px 20px 0؛
   4. }
   5. توهان هتي ڇا ڪيو آهي سي ايس "فلوت" ملڪيت استعمال ڪري ٿي، جيڪا تصوير کي عام دستاويزن جي وهڪري کان ڇڪيندو (طريقو اهو آهي ته تصوير عام طور تي ڏيکاري ويندو آهي، ان جي هيٺان متن واري متن سان گڏ) ۽ اهو ان جي ڪنٽرول جي کاٻي پاسي کي . اهو متن جيڪو بعد ۾ اچي ٿو HTML HTML مارڪ اپ ۾ ان جي چوڌاري ان جي چوڌاري. اسان ڪجهه پيادنگ وار پڻ شامل ڪيا وڃن ته جيئن هي متن سڌو سنئون تصوير جي خلاف نه ٿين ها. ان جي بدران، اهو ڪجهه لڳائڻ جو لڳائڻ وارو هوندو جيڪو صفحي جي ڊزائن ۾ ويٺل جذباتي ٿيندو. پيڊنگ لاء سي ايس ايس جي آڙتال ۾، اسان تصويرن جي شڪل کي چوٽي ۽ کاٻي پاسي کي 0 ڏيکاري ٿو ۽ 20 پکسلز ان جي کاٻي ۽ تري ڏانهن وڌايو. ياد رکو ته توهان کي کاٻي پاسي واري عڪس جي ساڄي پاسي ڪجهه پلنگ شامل ڪرڻ جي ضرورت آهي. ھڪڙي عڪس جو عڪس (جيڪو اسان کي ھڪڙي وقت ۾ نظر ايندو) ھاڌا پنھنجو بائیں طرف لاڳو ڪيو وڃي ھا.
2. جيڪڏهن توهان پنهنجي ويب پيج کي برائوزر ۾ ڏسي سگهو ٿا، هاڻي توهان کي ڏسڻ گهرجي ته توهان جي تصوير صفحي جي کاٻي پاسي ۽ لکت کي ترتيب ڏنل آهي. ٻيو ڪجهه چوڻ جو چوڻ آهي ته اها تصوير "بائیں طرف ڏانهن سچل" آهي.

1. جيڪڏھن توھان چاھيو ٿا تہ ھن تصوير کي درست ٿيڻ سان جڙيل ٿيڻ (جيئن تصوير جو مثال ھن مضمون سان گڏ آھي)، اھو آسان آھي. پهرين، توهان کي پڪ ڪرڻ گهرجي ته، اسلوب جي اضافي سان، اسان صرف "بائیں" جي طبقي قدر لاء اسان ايس ايس ايس ۾ شامل ڪيو، اسان وٽ پڻ هڪ ئي حق-صفائي لاء آهي. اهو هن کي نظر ايندو
   1. .ساڄو {
   2. سچل: صحيح؛
   3. لڳائڻ: 0 0 20px 20px؛
   4. }
   5. توهان اهو ڏسي سگهو ٿا ته اهو اسان وٽ لکيل هڪ مڪمل سي ايس جي تقريبا هڪجهڙائي آهي. رڳو فرق اهو آهي ته اسين "فلوت" ملڪيت لاء استعمال ڪريون ٿا ۽ اسان جي وڌڻ وارا قدر جيڪي استعمال ڪندا آهيون (حق جي بدران اسان جي تصوير جي بائیں طرف ڪجهه شامل ڪندا).
2. آخرڪار، توهان تصوير جي طبقي جي قيمت تبديل ڪري ڇڏي ها "بائیں" پنهنجي HTML ۾ "حق" کان:
3. برائوزر ۾ توھان جي صفحي کي ڏسو ۽ ھاڻي تصوير پنھنجو ساڄي پاسي سان لکھي ويھي رھيا آھن. اسان انهن سڀني شالن کي شامل ڪرڻ لاء، "بائیں" ۽ "صحيح" کي اسان جي سڀني شئي سائيٽن ڏانهن شامل ڪندا آهيون جيئن اسان انهن بصري طرزن کي استعمال ڪري سگهون ٿا، جڏهن اسان ويب صفحن کي ٺاهيندا آهيون. اهي ٻه شالتون لڳن ٿيون، قابل اطلاق خاصيتون جيڪي اسان کي انهن جي تصويرن سان گڏ لکن ٿا، انهن جي چوڌاري تصويرون جي ضرورت آهي.

CSS جي بدران HTML استعمال ڪندي (۽ ڇو ته توهان هي ناهي)

جيتوڻيڪ اهو ممڪن آهي HTML سان تصوير جي چوڌاري متن لکه، ويب معيار ٺاهي ٿو ته سي ايس (۽ مٿي پيش ڪيل قدم) وڃڻ جو طريقو آهي انهي ڪري جو اسين انهي جي جوڙجڪ (HTML) ۽ اسلوب (سي ايس) کي برقرار رکون ٿا. اهو خاص طور تي ضروري آهي جڏهن توهان انهي تي غور ڪيو، ڪجهه ڊوائيس ۽ ترتيب لاء، انهي متن کي تصوير جي ڀرسان وهڻ جي ضرورت ناهي. ننڍن اسڪرين لاء، هڪ قبول ڪندڙ ويب سائيٽ جي جوڙجڪ جي ضرورت هوندي آهي ته متن کي حقيقت سان هيٺان ڦيرايو آهي ۽ اسڪرين کي اسڪرين جي مڪمل چوٿين کي وڌايو وڃي. اهو آساني سان ميڊيا سوالن سان ڪيو ويندو آهي جيڪڏهن توهان جو انداز توهان جي HTML مارڪ اپ مان الڳ آهي. اڄ جي ڪيتري ئي ڊوائيس دنيا ۾، جتي تصويرون ۽ متن مختلف زائرینن ۽ مختلف اسڪرين تي مختلف طور تي ظاهر ٿيندا آهن، اهو علحدگيء لاء ويب پيج جي آخري ڊگهي ڪاميابي ۽ انتظام لاء ضروري آهي.