HTML Tutorial
HTML Tutorial

HTML - تصاویر


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

تصویر شامل کریں

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

<img src = "Image URL" ... attributes-list/>
    

<img> ٹیگ ایک خالی ٹیگ ہے، جس کا مطلب ہے کہ اس میں صرف خصوصیات کی فہرست ہوتی ہے اور اس کا کوئی بند کرنے والا ٹیگ نہیں ہوتا۔

مثال

اس مثال کو آزمانے کے لئے ہمارے HTML فائل test.htm اور تصویر فائل test.png کو ایک ہی ڈائریکٹری میں رکھیں −

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

یہ نتیجہ پیدا کرے گا −

آپ اپنی راحت کے مطابق PNG، JPEG یا GIF تصویر کا فائل استعمال کرسکتے ہیں، لیکن یہ یقینی بنائیں کہ آپ src خصوصیت میں صحیح تصویر کا نام ذکر کریں۔ تصویر کا نام ہمیشہ کیس سینسٹویٹو ہوتا ہے۔

alt خصوصیت ایک لازمی خصوصیت ہے جو تصویر کے لئے ایک بدلہ ٹیکسٹ مخصوص کرتی ہے، اگر تصویر دکھائی نہ جا سکے۔

تصویر کی جگہ مختصر کریں

عام طور پر ہم تمام تصاویر کو ایک الگ ڈائریکٹری میں رکھتے ہیں۔ تو ہم اپنی ہوم ڈائریکٹری میں HTML فائل test.htm رکھیں اور ہوم ڈائریکٹری کے اندر images نام کی ایک ذیلی ڈائریکٹری بنائیں جہاں ہم اپنی تصویر test.png رکھیں گے۔

مثال

اگر ہماری تصویر کا مقام "images/test.png" ہو، تو نیچے دی گئی مثال آزمائیں −

<!DOCTYPE html>
    <html>
    
       <head>
          <title>Using Image in Webpage</title>
       </head>
    	
       <body>
          <p>Simple Image Insert</p>
          <img src = "/html/images/test.png" alt = "Test Image" />
       </body>
    	
    </html>

یہ نتیجہ پیدا کرے گا −

تصویر کی چوڑائی/لمبائی مختصر کریں

آپ width اور height خصوصیات استعمال کرکے اپنی ضروریات کے مطابق تصویر کی چوڑائی اور لمبائی مختصر کرسکتے ہیں۔ آپ تصویر کی چوڑائی اور لمبائی کو یا تو پکسلز یا اس کی اصل سائز کی فیسد میں فیسد کرسکتے ہیں۔

مثال

<!DOCTYPE html>
        <html>
        
           <head>
              <title>Set Image Width and Height</title>
           </head>
        	
           <body>
              <p>Setting image width and height</p>
              <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
           </body>
        	
        </html>