ويب ڊولپمينٽ ڪورس ڪلاس 6

اميج ٽيگ Image Tags in HTML
Image Tag ۽ ان جا Attributes: ويب ڊولپمينٽ ڪورس ڪلاس 6

HTML ۾ تصويرن کي ظاهر ڪرڻ لاءِ <img> ٽيگ استعمال ڪيو ويندو آهي. هي ٽيگ هڪ خالي ٽيگ آهي، جنهن ۾ ختم ڪرڻ جو ٽيگ ناهي. ان ۾ مختلف Attributes استعمال ڪري تصوير جو درست ڏيک ظاهر ڪري سگهجي ٿو.

---

1. <img> Tag

• HTML ۾ لکڻ:

   <img src="image.jpg" alt="Description of image">

• شارٽ ڊيفينيشن:
• <img> ٽيگ تصوير کي ويب پيج ۾ ڏيکارڻ لاءِ استعمال ٿيندو آهي. ان ۾ تصوير جو سورس (src) ۽ تصوير جو متبادل متن (alt) رکڻ ضروري آهي.

---

2. src Attribute

• HTML ۾ لکڻ:

   <img src="image.jpg" alt="A beautiful view">

• شارٽ ڊيفينيشن:
• src (Source) ايٽريبيوٽ تصوير جي فائل جو رستو (path) ظاهر ڪندو آهي. اهو ٻڌائي ٿو ته تصوير ڪٿي رکيل آهي.
• مثال: src="image.jpg" تصوير “image.jpg” جي فائل کي لوڊ ڪندو.

---

3. alt Attribute

• HTML ۾ لکڻ:

   <img src="image.jpg" alt="A beautiful view">

• شارٽ ڊيفينيشن:
• alt (Alternative Text) ايٽريبيوٽ تصوير جي متبادل متن لاءِ استعمال ٿيندو آهي جڏهن تصوير لوڊ نه ٿي سگھي يا ڊوائيس اسڪرين ريڊر استعمال ڪري رهي هجي.
• مثال: جيڪڏهن تصوير نظر نه اچي، ته “A beautiful view” متن ڏيکاريو ويندو.

---

4. width and height Attributes

• HTML ۾ لکڻ:

<img src="image.jpg" alt="A beautiful view" width="500" height="300">

• شارٽ ڊيفينيشن:
• width ۽ height ايٽريبيوٽس تصوير جي چوڙائي ۽ اوچائي کي پيڪس (pixels) ۾ مقرر ڪرڻ لاءِ استعمال ٿيندا آهن.
• مثال: width="500" تصوير جي چوڙائي کي 500 پيڪسلس تائين محدود ڪندو، ۽ height="300" تصوير جي اوچائي کي 300 پيڪسلس تائين مقرر ڪندو.

---

5. title Attribute ويب ڊولپمينٽ ڪورس ڪلاس 6

• HTML ۾ لکڻ:

   <img src="image.jpg" alt="A beautiful view" title="This is a scenic view">

• شارٽ ڊيفينيشن:
• title ايٽريبيوٽ تصوير تي هوور ڪرڻ تي هڪ ٽول ٽپ ڏيکارڻ لاءِ استعمال ٿيندو آهي. اهو تصوير جي متعلق اضافي معلومات فراهم ڪندو آهي.
• مثال: جڏهن توهان تصوير تي ڪرسٽ رکندا، ته “This is a scenic view” ٽول ٽپ طور ڏيکاريو ويندو.

---

6. loading Attribute

• HTML ۾ لکڻ:

   <img src="image.jpg" alt="A beautiful view" loading="lazy">

• شارٽ ڊيفينيشن:
• loading ايٽريبيوٽ تصوير کي سست لوڊ ڪرڻ لاءِ استعمال ٿيندو آهي، جيئن ويب پيج تي ڪارڪردگي کي بهتر بڻائي سگهجي.
• مثال: loading="lazy" تصوير کي سست لوڊ ڪرڻ لاءِ چالو ڪندو.

---

7. longdesc Attribute

• HTML ۾ لکڻ:

   <img src="image.jpg" alt="A beautiful view" longdesc="image-description.html">

• شارٽ ڊيفينيشن:
• longdesc ايٽريبيوٽ تصوير جو تفصيلي بيان ظاهر ڪرڻ لاءِ استعمال ٿيندو آهي.
• مثال: longdesc="image-description.html" لنڪ تصوير جي تفصيل واري صفحي ڏيکارڻ لاءِ استعمال ڪندو آهي.

---

خلاصو: ويب ڊولپمينٽ ڪورس ڪلاس 6

• <img> ٽيگ تصويرن کي ويب پيج تي ڏيکارڻ لاءِ استعمال ٿيندو آهي.
• ان ۾ مختلف Attributes موجود آهن، جهڙوڪ src (سورس)، alt (متبادل ٽيڪسٽ)، width ۽ height (چوڙائي ۽ اوچائي)، title (هوور ٽول ٽپ)، loading (Lazy loading)، ۽ longdesc (تصوير جو تفصيلي بيان).

---

مثال: ويب ڊولپمينٽ ڪورس ڪلاس 6

<img src="nature.jpg" alt="A beautiful mountain landscape" width="600" height="400" title="Click to view more details" loading="lazy">

• هن مثال ۾، nature.jpg تصوير کي 600px چوڙائي ۽ 400px اوچائي سان ڏيکاريو ويندو. جڏهن صارف تصوير تي ڪرسٽ ڪندا، ته “Click to view more details” ٽول ٽپ ڏيکاريو ويندو، ۽ تصوير سست لوڊ ٿيندي.