HTML Tutorial
HTML Tutorial

HTML - بیک گراؤنڈز


پہلے سے ہی، آپ کی ویب پیج کا بیک گراؤنڈ سفید ہوتا ہے۔ شاید آپ اسے پسند نہ کریں، لیکن فکر نہ کریں۔ HTML آپ کو ویب پیج کا بیک گراؤنڈ سنوارنے کے لئے دو اچھے طریقے فراہم کرتا ہے۔

  • HTML کلر کے ساتھ بیک گراؤنڈ
  • HTML تصویر کے ساتھ بیک گراؤنڈ

اب ہم دونوں طریقوں کو دیکھیں گے، ایک دوسرے کے بعد، مناسب مثالوں کا استعمال کرتے ہوئے۔

Html کلر کے ساتھ بیک گراؤنڈ

bgcolor آٹریبیوٹ کا استعمال ایک HTML المینٹ، خاص طور پر صفحہ بڈی اور ٹیبل بیک گراؤنڈ کو کنٹرول کرنے کے لئے ہوتا ہے۔

نوٹ - HTML5 میں bgcolor آٹریبیوٹ کو منسوخ کر دیا گیا ہے۔ اس آٹریبیوٹ کا استعمال نہ کریں۔

bgcolor آٹریبیوٹ کا استعمال کسی بھی HTML ٹیگ کے ساتھ کرنے کے لئے مندرجہ ذیل ہے۔

<tagname bgcolor = "color_value"...>
    

اس color_value کو مندرجہ ذیل فارمیٹس میں دیا جا سکتا ہے -

<!-- فارمیٹ 1 - کلر نام کا استعمال کریں -->
<table bgcolor = "lime" >

<!-- فارمیٹ 2 - ہیکس ویلیو کا استعمال کریں -->
<table bgcolor = "#f1f1f1" >

<!-- فارمیٹ 3 - RGB ٹرمز میں کلر ویلیو کا استعمال کریں -->
<table bgcolor = "rgb(0,0,120)" >
    

مثال

یہاں HTML ٹیگ کے بیک گراؤنڈ کو سیٹ کرنے کی مثالیں ہیں۔

<!DOCTYPE html>
    <html>

       <head>
          <title>HTML کلر بیک گراؤنڈ</title>
       </head>
    
       <body>
          <!-- فارمیٹ 1 - کلر نام کا استعمال کریں -->
          <table bgcolor = "yellow" width = "100%">
             <tr>
                <td>
                   یہ بیک گراؤنڈ زرد ہے
                </td>
             </tr>
          </table>
     
          <!-- فارمیٹ 2 - ہیکس ویلیو کا استعمال کریں -->
          <table bgcolor = "#6666FF" width = "100%">
             <tr>
                <td>
                   یہ بیک گراؤنڈ آسمانی نیلا ہے
                </td>
             </tr>
          </table>
     
          <!-- فارمیٹ 3 - RGB ٹرمز میں کلر ویلیو کا استعمال کریں -->
          <table bgcolor = "rgb(255,0,255)" width = "100%">
             <tr>
                <td>
                   یہ بیک گراؤنڈ ہرا ہے
                </td>
             </tr>
          </table>
       </body>
       
    </html>

یہ مندرجہ ذیل نتیجہ پیدا کرے گا -

Html تصویر کے ساتھ بیک گراؤنڈ

background آٹریبیوٹ بھی ایک HTML المینٹ، خاص طور پر صفحہ بڈی اور ٹیبل بیک گراؤنڈ کو کنٹرول کرنے کے لئے استعمال ہوتا ہے۔ آپ اپنے HTML صفحے یا ٹیبل کا بیک گراؤنڈ سیٹ کرنے کے لئے ایک تصویر مخصوص کرسکتے ہیں۔

نوٹ - HTML5 میں background آٹریبیوٹ کو منسوخ کر دیا گیا ہے۔ اس آٹریبیوٹ کا استعمال نہ کریں۔

background آٹریبیوٹ کا استعمال کسی بھی HTML ٹیگ کے ساتھ مندرجہ ذیل ہے۔

نوٹ - background آٹریبیوٹ کو منسوخ کر دیا گیا ہے اور بیک گراؤنڈ سیٹ کرنے کے لئے اسٹائل شیٹ کا استعمال کرنا مشورہ ہے۔

<tagname background = "Image URL"...>
    

سب سے زیادہ استعمال ہونے والے تصویر کی فارمیٹس JPEG، GIF اور PNG ہیں۔

مثال

یہاں ٹیبل کے بیک گراؤنڈ تصاویر کو سیٹ کرنے کی مثالیں ہیں۔

<!DOCTYPE html>
<html>

   <head>
      <title>HTML بیک گراؤنڈ تصاویر</title>
   </head>
	
   <body>
      <!-- ٹیبل بیک گراؤنڈ سیٹ ہو رہا ہے -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            یہ بیک گراؤنڈ HTML تصویر سے بھرا ہوا ہے۔
         </td></tr>
      </table>
   </body>
   
</html>

یہ مندرجہ ذیل نتیجہ پیدا کرے گا -

پیٹرن اور شفاف بیک گراؤنڈ

آپ نے مختلف ویب سائٹس پر مختلف پیٹرن یا شفاف بیک گراؤنڈ دیکھا ہوگا۔ یہ بس ایک پیٹرن یا شفاف تصویر کا استعمال کرکے حاصل ہوتا ہے۔

یہ تجویز ہے کہ جب آپ پیٹرن یا شفاف GIF یا PNG تصاویر بناتے ہیں، تو سب سے چھوٹے ابعاد استعمال کریں، حتی کہ 1x1 تک چھوٹا ہو، تاکہ دھیرے لوڈنگ سے بچا جا سکے۔

مثال

یہاں ٹیبل کے بیک گراؤنڈ پیٹرن سیٹ کرنے کی مثالیں ہیں۔

<!DOCTYPE html>
<html>

   <head>
      <title>HTML بیک گراؤنڈ تصاویر</title>
   </head>
	
   <body>
      <!-- پیٹرن کا استعمال کرکے ایک ٹیبل بیک گراؤنڈ سیٹ ہو رہا ہے -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               یہ بیک گراؤنڈ ایک پیٹرن تصویر سے بھرا ہوا ہے۔
            </td>
         </tr>
      </table>

      <!-- پیٹرن کا استعمال کرکے ٹیبل بیک گراؤنڈ پر ایک اور مثال -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               یہ بیک گراؤنڈ ایک پیٹرن تصویر سے بھرا ہوا ہے۔
            </td>
         </tr>
      </table>
   </body>
   
</html>

یہ مندرجہ ذیل نتیجہ پیدا کرے گا -