یو آر ایل سے ایک تصویر شامل کرنا - HTML

Yw Ar Ayl S Ayk Tswyr Shaml Krna Html



ایچ ٹی ایم ایل میں، تصاویر ویب سائٹس کو زیادہ پرکشش بناتی ہیں اور لوگوں کے ارادے کو حاصل کرتی ہیں۔ یہ ڈویلپرز کو مختلف تصاویر کے ساتھ اپنے ویب صفحات کو اپنی مرضی کے مطابق کرنے کی اجازت دیتا ہے۔ مزید برآں، وہ مطلوبہ تصویر کے یو آر ایل کو کاپی کرکے اور پھر اس کی قدر کے طور پر وضاحت کرکے انہیں انٹرنیٹ سے براہ راست شامل کرسکتے ہیں۔ src ” امیج ٹیگ کے اندر انتساب۔ مزید یہ کہ، ڈویلپر سی ایس ایس پراپرٹی کی مدد سے تصویر کو شامل کر سکتے ہیں جسے ' پس منظر کی تصویر '

یہ پوسٹ یو آر ایل سے تصویر کو شامل کرنے کے طریقہ کار کی مختصر وضاحت کرے گی۔

HTML/CSS میں URL سے تصویر کیسے شامل کی جائے؟

HTML/CSS میں، URL کا استعمال کرتے ہوئے تصویر شامل کرنے کے لیے دو طریقے دستیاب ہیں، جو ذیل میں درج ہیں۔







طریقہ 1: عنصر کا استعمال کرکے تصویر شامل کریں۔

' عنصر ایک واحد باطل عنصر ہے جس میں کوئی چائلڈ مواد اور اختتامی ٹیگ نہیں ہے۔ ' src 'اور' سب کچھ ' دو کلیدی صفات ہیں جو ' ' ٹیگ کے اندر استعمال ہوتی ہیں۔



آئیے عنصر کا استعمال کرتے ہوئے تصویر شامل کرنے کے لیے ذیل میں دی گئی ہدایات کو دیکھیں!



مرحلہ 1: ایک div کنٹینر بنائیں

سب سے پہلے، 'کا استعمال کرکے ایک div کنٹینر بنائیں

'ٹیگ۔ پھر، داخل کریں ' کلاس خواہش کے مطابق کلاس کو ایک نام منسوب کریں اور تفویض کریں۔





مرحلہ 2: سرخی داخل کریں۔

اگلا، 'سے مطلوبہ سرخی والا ٹیگ استعمال کریں۔

'سے'
'ٹیگ۔ مثال کے طور پر، ہم

ٹیگ کا استعمال کریں گے اور مخصوص متن کو ابتدائی اور اختتامی ٹیگ کے اندر بطور سرخی شامل کریں گے۔


مرحلہ 3: URL کا استعمال کرتے ہوئے ایک تصویر شامل کریں۔

اس کے بعد، ایک شامل کریں ' ” ٹیگ کریں اور امیج ٹیگ کے اندر درج ذیل صفات داخل کریں:



  • ' src ” وصف میڈیا فائل کو شامل کرنے کے لیے استعمال کیا جاتا ہے۔ اس مقصد کے لیے، اپنا مطلوبہ ویب براؤزر لانچ کریں اور مطلوبہ تصویری URL کاپی کریں۔
  • پھر، یو آر ایل کو 'کی قدر کے طور پر بیان کریں src ' وصف.
  • اگلے، ' سب کچھ تصویر کے لیے نام شامل کرنے کے لیے استعمال کیا جاتا ہے جب اسے کسی وجہ سے نہیں دکھایا جاتا ہے۔
  • ' اونچائی پراپرٹی دی گئی قدر کے مطابق عنصر کی اونچائی کی وضاحت کرتی ہے۔
  • ' چوڑائی عنصر کی چوڑائی کو ترتیب دینے کے لیے استعمال کیا جاتا ہے:
< div کلاس = 'img-container' >

< h2 > URL کے ساتھ تصویر شامل کریں۔ < / h2 >

< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' سب کچھ = 'تصویر!' اونچائی = '400px' چوڑائی = '300px' / >

< / div >

ذیل میں دی گئی آؤٹ پٹ کے مطابق، مخصوص تصویر کامیابی کے ساتھ شامل کی گئی ہے:



طریقہ 2: HTML میں CSS پراپرٹیز کا استعمال کرتے ہوئے تصویر شامل کریں۔

ڈویلپر سی ایس ایس کا استعمال کرتے ہوئے یو آر ایل سے تصویر بھی شامل کر سکتے ہیں۔ پس منظر کی تصویر سی ایس ایس۔ اس مقصد کے لیے، ذیل میں دیے گئے اقدامات پر عمل کریں۔

مرحلہ 1: سرخی داخل کریں۔

سب سے پہلے،

کھولنے اور بند کرنے والے ٹیگ کی مدد سے ایک سرخی کا متن داخل کریں۔

مرحلہ 2: div کنٹینر بنائیں

اگلا،

ٹیگ کا استعمال کرکے ایک div کنٹینر بنائیں اور اس کے نام کے ساتھ ایک کلاس وصف شامل کریں:

> URL کے ساتھ تصویر شامل کریں >

= 'img-کنٹینر' > >

مرحلہ 3: کنٹینر تک رسائی حاصل کریں۔

اب، ڈاٹ سلیکٹر کے ذریعے کلاس تک رسائی حاصل کریں۔ . اور کلاس کا نام جو پہلے بنایا گیا تھا۔

مرحلہ 4: 'بیک گراؤنڈ امیج' سی ایس ایس پراپرٹی کا استعمال کرتے ہوئے تصویر شامل کریں۔

اس کے بعد، کلاس کے اندر یو آر ایل سے تصویر شامل کرنے کے لیے ذیل میں درج سی ایس ایس خصوصیات کا اطلاق کریں:

.img-کنٹینر {

اونچائی : 400px ;

چوڑائی : 250px ;

پس منظر کا سائز : پر مشتمل ;

پس منظر کی تصویر : یو آر ایل ( https : //تصاویر .pexels .com/photos/ 2260800 /pexels-photo- 2260800 .jpeg؟ آٹو = کمپریس اور سی ایس = tinysrgb&w = 1260 &h = 750 &dpr = ایک )

}

اوپر فراہم کردہ کوڈ میں:

  • ' اونچائی عنصر کی اونچائی کو ترتیب دینے کے لیے پراپرٹی کا استعمال کیا جاتا ہے۔
  • ' چوڑائی عنصر کی چوڑائی کا سائز بتانے کے لیے استعمال کیا جاتا ہے۔
  • ' پس منظر کا سائز پس منظر کے عنصر کا سائز ترتیب دینے کے لیے استعمال کیا جاتا ہے۔
  • ' پس منظر کی تصویر ' پراپرٹی عنصر کے پچھلے حصے میں ایک تصویر کا اضافہ کرتی ہے۔ اسی مقصد کے لیے، ' url() فنکشن کا استعمال تصویر کو شامل کرنے اور تصویر کا URL فنکشن میں چسپاں کرنے کے لیے کیا جاتا ہے۔ () '

آؤٹ پٹ

آپ نے URL سے تصاویر شامل کرنے کے مختلف طریقوں کے بارے میں سیکھا ہے۔

نتیجہ

یو آر ایل سے تصویر شامل کرنے کے لیے، ڈویلپر استعمال کر سکتے ہیں ' 'ٹیگ۔ پھر، داخل کریں ' src ' انتساب اور URL کو 'src' قدر کے طور پر تفویض کریں۔ مزید برآں، صارف سی ایس ایس کا استعمال کرکے یو آر ایل سے ایک تصویر شامل کرسکتا ہے۔ پس منظر کی تصویر ' جائیداد. اس تحریر نے HTML/CSS میں URL سے تصویر کو شامل کرنے کے طریقے بتائے ہیں۔