How to Add Picture in HTML in Urdu

HTML میں Picture کو شامل کرنا ایک اہم اور بنیادی مہارت ہے جو ہر ویب ڈویلپر کو سیکھنی چاہیے۔ اس تکنیک کے ذریعے، آپ اپنے ویب پیج کو مزید مکمل اور بصری طور پر دلچسپ بنا سکتے ہیں۔ Picture کا صحیح استعمال صارف کے تجربے کو بہتر بناتا ہے اور مواد کی وضاحت میں مدد گار ثابت ہوتا ہے۔

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

تصویر کے لئے صحیح ٹیگ کا انتخاب

جب آپ اپنی ویب سائٹ میں تصاویر شامل کرنے کا سوچتے ہیں، تو سب سے پہلا سوال یہ ہے کہ آپ کو کون سا HTML ٹٰیگ استعمال کرنا چاہیے۔ تصاویر شامل کرنے کے لئے بنیادی طور پر دو ٹیگ ہیں: <img> اور <picture>۔ آج ہم ان دونوں کا موازنہ کریں گے اور دیکھیں گے کہ کون سا ٹیگ آپ کی ضروریات کے لئے بہتر ہے۔

1. <img> ٹیگ

<img> ٹیگ بنیادی طور پر سیدھی سادی تصاویر کے لیے استعمال ہوتا ہے۔ یہ ایک سادہ اور مؤثر طریقہ ہے جس کے ذریعے آپ اپنی ویب سائٹس پر تصاویر شامل کر سکتے ہیں۔

• استعمال کا طریقہ: <img src="image.jpg" alt="ایک وضاحتی متنی بیان">
• خصوصیات: یہ ٹیگ آپ کو صرف ایک تصویر کو ظاہر کرنے کی اجازت دیتا ہے، اور اس میں alt وصف شامل کرنا ضروری ہوتا ہے تاکہ وہ لوگ جو تصویر دیکھ نہیں سکتے، اُنہیں تصویر کا مطلب سمجھ میں آئے۔

2. <picture> ٹیگ

<picture> ٹیگ زیادہ جدید ہے اور خاص طور پر مختلف ڈیوائسز اور اسکرین سائزز کے لئے مختلف امیجز دکھانے کے لیے استعمال ہوتا ہے۔ اگر آپ کی ویب سائٹ میں زیادہ بصری پیچیدگی ہے تو یہ ٹیگ آپ کے کام آسکتا ہے۔

• استعمال کا طریقہ:
  
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="ایک وضاحتی متنی بیان">
</picture>

• خصوصیات: یہ آپ کو ایک ہی HTML فائل میں مختلف سائز کی تصاویر فراہم کرنے کی سہولت دیتا ہے، جو کہ لوڈنگ کی رفتار بھی بہتر کرتا ہے۔

نتیجہ

خلاصہ یہ ہے کہ اگر آپ کو صرف ایک ہی تصویر شامل کرنی ہے تو <img> ٹیگ کافی ہوگا۔ لیکن اگر آپ کو مختلف ڈیوائسز کے لئے مختلف تصاویر کی ضرورت ہے، تو <picture> ٹیگ آپ کے لئے بہترین انتخاب ہو گا۔ اپنی ضروریات کے مطابق صحیح ٹیگ کا انتخاب کرنا نہایت اہم ہے تاکہ آپ کی ویب سائٹ بہتر نظر آئے اور بہتر کام کرے۔

یہ بھی پڑھیں: Condom کیا ہے اور کیوں استعمال کیا جاتا ہے – استعمال اور سائیڈ ایفیکٹس

تصویر کا راستہ کیسے درج کریں

جب آپ HTML میں تصویر شامل کرنا چاہتے ہیں، تو اس کے لئے آپ کو src (source) اٹریبیوٹ کا استعمال کرنا ہوگا۔ یہ اٹریبیوٹ بالکل واضح کرتا ہے کہ تصویر کہاں سے حاصل کی جائے۔ اس کے لئے آپ کو تصویر کے راستے (path) کی صحیح معلومات دینے کی ضرورت ہوتی ہے۔ یہاں ہم یہ دیکھیں گے کہ آپ صحیح طور پر تصویر کا راستہ کیسے درج کر سکتے ہیں۔

تصویر کے راستے کی اقسام

تصویر کا راستہ دو قسموں میں ہوتا ہے:

• مکمل راستہ (Absolute Path): یہ انٹرنیٹ پر ایک مکمل URL ہوتا ہے جو تصویر کی درست لوکیشن بتاتا ہے۔ جیسے:

src="https://www.example.com/images/photo.jpg"

• نصف راستہ (Relative Path): یہ آپ کی ویب سائٹ کے موجودہ فولڈر کے لحاظ سے تصویر کی لوکیشن بیان کرتا ہے۔ جیسے:

src="images/photo.jpg"

مثال

چلیے ایک سادہ مثال دیکھتے ہیں۔ اگر آپ کو اپنی HTML فائل میں ایک تصویر شامل کرنی ہے تو آپ اس طرح لکھ سکتے ہیں:

<img src="images/photo.jpg" alt="کمال کی تصویر">

یہاں:

• src: یہ اٹریبیوٹ تصویر کا راستہ بتاتا ہے۔
• alt: یہ اٹریبیوٹ تصویر کی وضاحت کرتا ہے، جو کہ اگر تصویر نہ لوڈ ہو تو دکھائی جائے گا۔

یاد رکھنے والی باتیں

1. ہمیشہ راستہ درست اور مکمل درج کریں۔
2. تصویر کی فائل کا نام اور اس کی ایکسٹنشن (مثلاً .jpg، .png) درست ہونی چاہئے۔
3. حال اگر آپ لوکل (local) فائل کے راستے استعمال کر رہے ہیں تو آپ کو دھیان رکھنا ہوگا کہ تصویر آپ کی HTML فائل کے قریب ہو۔

اگر آپ ان باتوں کا خیال رکھیں گے تو آپ کی تصویریں بغیر کسی مسائل کے دکھائی دینگی۔ اس طرح آپ اپنے HTML صفحات کو مزید متحرک بنا سکتے ہیں!

یہ بھی پڑھیں: How to Change Google Email Address in Urdu

تصویر کی وسعت اور اونچائی کو ترتیب دینا

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

img {
   width: 100%; / تصویر کی وسعت /
   height: auto; / اونچائی خود بخود متوازن ہوگی /
}

اس طریقے سے، آپ کی تصویر ویب پیج کی چوڑائی کے مطابق خود کو ایڈجسٹ کر لے گی، جبکہ اونچائی خود بخود متناسب رہے گی۔ یہ خاص طور پر ریسپانسیو ڈیزائن کے لئے بہت فائدہ مند ہے۔

اگر آپ فوری طور پر کسی تصویر پر اسٹائل لگانا چاہتے ہیں تو آپ inline styles کا استعمال بھی کر سکتے ہیں:

کبھی کبھار آپ تصویر کی وسعت اور اونچائی کو فی صد میں بھی مقرر کر سکتے ہیں:

یہ طریقہ آپ کی تصویر کو والدین کے عناصر کی چوڑائی اور اونچائی کے مطابق ایڈجسٹ کرنے کی اجازت دیتا ہے، جو کہ ایک فلیکسئیبل لے آؤٹ میں مددگار ثابت ہوتا ہے۔

جب ہم HTML میں تصاویر کو شامل کرتے ہیں تو ان کے لئے ایک اہم عنصر متبادل متن* (alt text) ہوتا ہے۔ متبادل متن وہ جملہ یا لفظ ہوتا ہے جو تصویر کے لئے وضاحت فراہم کرتا ہے۔ اگر تصویر نہ دکھائی جائے یا لوڈ نہ ہو سکے تو یہ متن مددگار ثابت ہوتا ہے۔

متبادل متن کا استعمال کرتے وقت ہمیں مندرجہ ذیل نکات کو مدنظر رکھنا چاہیے:

• وضاحت کریں: متبادل متن کو ایسی تفصیلات دینا چاہیے جو تصویر کی صحیح معنوں میں وضاحت کرے۔
• خلاصہ استعمال کریں: زیادہ لمبا متن استعمال کرنے کے بجائے مختصر اور جامع جملے میں تصویر کی خصوصیات بیان کریں۔
• کلیدی الفاظ شامل کریں: اگر ممکن ہو تو تصویر سے متعلق کلیدی الفاظ شامل کریں، اس سے SEO میں مدد ملے گی۔

یہ بھی پڑھیں: Aleovera خشکی کے لیے – استعمال اور سائیڈ ایفیکٹس

متبادل متن کی مثال

مثال کے طور پر، اگر آپ کسی پھول کی تصویر لگانا چاہتے ہیں تو آپ اس کا متبادل متن اس طرح لکھ سکتے ہیں:

تصویر	متبادل متن
	ایک خوبصورت سرخ گلاب کا پھول

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

نتیجہ

آخری بات یہ ہے کہ اچھی طرح سوچا ہوا تبدیل ہونے والا متبادل متن ویب کی رسائی کو بہتر بنانے اور موازنہ کرنے میں مدد دے سکتا ہے۔ تصاویر صرف بصری تجربہ نہیں بلکہ معلوماتی مواد کا بھی ایک حصہ ہیں۔ اس لئے ہمیں ان کا بھرپور استعمال کرنا چاہیے!