یہ پوسٹ تصویر کے نیچے کیپشن لکھنے کے بارے میں بتاتی ہے۔
تصویر کے نیچے کیپشن کیسے لکھیں؟
تصویر کے نیچے کیپشن لکھنے کے لیے، ہم ذیل میں بیان کردہ مختلف طریقے فراہم کریں گے۔
- طریقہ 1: ایچ ٹی ایم ایل کا استعمال کرتے ہوئے تصویری کیپشن کیسے شامل کریں
'عنصر؟ - طریقہ 2: 'کا استعمال کرتے ہوئے تصویری کیپشن کیسے شامل کریں 'عنصر؟
طریقہ 1: HTML '
' عنصر کا استعمال کرتے ہوئے تصویری کیپشن کیسے شامل کریں؟ تصویری کیپشن شامل کرنے کے لیے، درج ذیل ہدایات پر عمل کریں:
- سب سے پہلے، شامل کریں ' <اعداد و شمار> ' عنصر، جو ممکنہ طور پر اختیاری کیپشن کے ساتھ، خود ساختہ مواد کی نمائندگی کے لیے استعمال کیا جاتا ہے۔
- اگلا، ایک داخل کریں '
'پیراگراف کے اندر ٹیگ' 'ٹیگ۔ 'کا استعمال کرکے تصویر شامل کریں src ' وصف. ' سب کچھ اگر تصویر کسی وجہ سے ظاہر نہیں ہوتی ہے تو پراپرٹی اضافی مواد دکھاتی ہے۔
- تصویر کی چوڑائی کو 'کے طور پر مقرر کریں 200px '
- پھر '
” ٹیگ تصویر کے لیے کیپشن شامل کرنے کے لیے استعمال ہوتا ہے۔ مزید یہ کہ، ' ' ٹیگز کے درمیان کیپشن شامل کریں:
= 'TSL.png' سب کچھ = 'TSL مواد تخلیق کار' چوڑائی = '200' >
>آپ دیکھ سکتے ہیں کہ مخصوص کیپشن والی تصویر ظاہر ہو چکی ہے:
اب، CSS کا استعمال کرتے ہوئے کیپشن شامل کرنے کے دوسرے طریقے کی طرف بڑھیں۔
طریقہ 2: '
' عنصر کا استعمال کرتے ہوئے تصویری کیپشن کیسے شامل کریں؟' کا استعمال کرتے ہوئے تصویری کیپشن شامل کرنے کے لیے
عنصر، دی گئی ہدایات کو آزمائیں:
- بنائیے ایک ' 'کنٹینر اور نام کے ساتھ ایک کلاس وصف شامل کریں' تصویر رکھنے والا '
- ہیڈنگ ٹیگ شامل کریں ' سرخی داخل کرنے اور اپنی پسند کے مطابق سرخی کو اسٹائل کرنے کے لیے۔
- ایک اور '
' عنصر شامل کریں اور ایک ' داخل کریں'کے ساتھ ٹیگ کریں' src '،' سب کچھ 'اور' چوڑائی div کنٹینر کے درمیان کی خصوصیات۔
- کلاس کے نام کے ساتھ ایک تیسرا '
' شامل کریں۔ img-caption ' پھر، '' ٹیگز کے درمیان کیپشن فراہم کریں۔ مزید یہ کہ '
' عنصر ایک لائن وقفے کو شامل کرنے کے لئے استعمال کیا جاتا ہے:= 'تصویر رکھنے والا' >
= 'رنگ: آر جی بی(95، 31، 245)' > HTML تصویر >
= 'TSL.png' سب کچھ = 'TSL مواد تخلیق کار' چوڑائی = '200' >
= 'img-caption' >
>
>یہ دیکھا جا سکتا ہے کہ تصویر کے لیے کیپشن کامیابی سے شامل کر دیا گیا ہے:
اب، آئیے پراپرٹیز کو لاگو کرنے کے لیے CSS سیکشن کی طرف چلتے ہیں۔
سی ایس ایس میں انداز '. امیج ہولڈر'
سب سے پہلے، تک رسائی حاصل کریں '
'کلاس رکھنے والا عنصر' .image-holder ' پھر، درج ذیل سی ایس ایس خصوصیات کو لاگو کریں: .image-holder {
پوزیشن : رشتہ دار ;
اونچائی : 100px ;
چوڑائی : 200px ;
مارجن : آٹو ;
}مذکورہ بالا خصوصیات کی تفصیلات ذیل میں بیان کی گئی ہیں۔
- ' پوزیشن 'کے طور پر مقرر کیا گیا ہے' رشتہ دار ' کسی عنصر کی اصل پوزیشن کی وضاحت کرنے کے لیے جو دستاویز کے بہاؤ میں رہتی ہے، بالکل جامد قدر کی طرح۔
- پھر، ' اونچائی عنصر کی اونچائی کی وضاحت کے لیے استعمال کیا جاتا ہے۔
- ' چوڑائی ' پراپرٹی چوڑائی میں عنصر کے سائز کی وضاحت کرتی ہے۔
- ' مارجن 'کے طور پر مقرر کیا گیا ہے' آٹو عنصر کے ارد گرد جگہ خود بخود سیٹ کرنے کے لیے۔
سی ایس ایس میں اسٹائل کیپشن
اس مرحلے میں، ہم نام کے ساتھ دو کلاسوں تک رسائی حاصل کریں گے۔ تصویر رکھنے والا 'اور' img-caption اور درج ذیل سی ایس ایس خصوصیات کو لاگو کریں:
.image-holder .img-caption {
پوزیشن : مطلق ;
متن سیدھ : مرکز ;
فونٹ کا وزن : بولڈ ;
چوڑائی : 200px ;
اونچائی : 50px ;
بائیں : 0px ;
رنگ : #f80909 ;
پس منظر : آر جی بی ( 140 , 166 , 253 ) ;
}مندرجہ بالا خصوصیات کی تفصیل اس طرح ہے:
- ' متن سیدھ 'پراپرٹی سیٹ کی گئی ہے' مرکز مرکز میں متن کی پوزیشن کو سیدھ میں لانے کے لیے۔
- اگلے، ' فونٹ کا وزن 'کے طور پر مختص کیا جاتا ہے' بولڈ تصویر کیپشن فونٹ سیٹ کرنے کے لیے۔
- پھر ' رنگ ' جائیداد کو رسائی شدہ عنصر کا رنگ ترتیب دینے کے لیے استعمال کیا جاتا ہے۔
- ' پس منظر ” پراپرٹی عنصر کے پس منظر کا رنگ متعین کرتی ہے۔
- دیگر خصوصیات، بشمول ' پوزیشن '،' اونچائی '، اور ' چوڑائی متعلقہ افعال کو لاگو کرنے کے لیے بھی استعمال کیا جاتا ہے۔
آؤٹ پٹ
ہم نے تصویر کے نیچے کیپشن لکھنے کے طریقوں پر تبادلہ خیال کیا ہے۔
نتیجہ
تصویر کے نیچے کیپشن لکھنے کے لیے، صارفین یا تو استعمال کر سکتے ہیں '
'عنصر یا ایک سادہ' 'کنٹینر. '' استعمال کرنے کے لیے، پہلے، ' تصویر کے اندر ایمبیڈ کرنے کے لیے عنصر <اعداد و شمار> ' عنصر، پھر، '
' عنصر کا استعمال کریں اور اس کے ٹیگز کے درمیان ایک کیپشن شامل کریں۔ دوسرے نقطہ نظر میں، صارفین آسانی سے استعمال کر سکتے ہیں ' کیپشن کو خوبصورت بنانے کے لیے ” عنصر اور مختلف سی ایس ایس خصوصیات کا اطلاق کریں۔ اس پوسٹ نے تصویر کے نیچے کیپشن لکھنے کے طریقے دکھائے ہیں۔