HTML Tutorial
HTML Tutorial

HTML - بلاکس


تمام HTML عناصر کو دو زمرے میں تقسیم کیا جا سکتا ہے (ا) بلاک لیول عناصر (ب) ان لائن عناصر۔

بلاک عناصر

بلاک عناصر اس طرح سے ایک دوسرے سے قطار کرنے والے طور پر ایک لائن بریک ہونے والا مظاہرہ کرتے ہیں۔ مثال کے طور پر، <p>، <h1>، <h2>، <h3>، <h4>، <h5>، <h6>، <ul>، <ol>، <dl>، <pre>، <hr />، <blockquote>، اور <address> عناصر تمام بلاک لیول عناصر ہیں۔ یہ سب اپنی نئی لائن پر شروع ہوتے ہیں، اور جو بھی ان کے بعد آتا ہے، وہ اپنی نئی لائن پر مظاہرہ ہوتا ہے۔

ان لائن عناصر

دوسری طرف، ان لائن عناصر جملوں میں ظاہر ہوسکتے ہیں اور ان کو اپنی نئی لائن پر ظاہر ہونے کی ضرورت نہیں ہوتی۔ <b>، <i>، <u>، <em>، <strong>، <sup>، <sub>، <big>، <small>، <li>، <ins>، <del>، <code>، <cite>، <dfn>، <kbd>، اور <var> عناصر تمام ان لائن عناصر ہیں۔

HTML عناصر کا گروہ بنانا

ہم بہت بار کئی دوسرے HTML ٹیگز کو گروہ بنانے کے لیے دو اہم ٹیگز استعمال کرتے ہیں (ا) <div> ٹیگ اور (ب) <span> ٹیگ

<div> ٹیگ

یہ بہت اہم بلاک لیول ٹیگ ہے جو مختلف دیگر HTML ٹیگز کو گروہ بنانے اور گروہ کے عناصر پر CSS لاگو کرنے میں بڑا کردار ادا کرتا ہے۔ حتیٰ اب <div> ٹیگ کو ویب صفحے لے آئیے میں لے آئیے بنانے کے لیے استعمال کیا جا سکتا ہے جہاں ہم <div> ٹیگ کا استعمال کرکے صفحے کے مختلف حصوں (بائیں، دائیں، اوپر، وغیرہ) کو تعریف کرتے ہیں۔ یہ ٹیگ بلاک پر کسی بھی تبدیلی فراہم نہیں کرتا، لیکن جب یہ CSS کے ساتھ استعمال ہوتا ہے تو اس کا زیادہ مطلب ہوتا ہے۔

مثال

نیچے ایک <div> ٹیگ کا سادہ مثال ہے۔ ہم CSS کو ایک الگ بابت میں سیکھیں گے لیکن یہاں ہم نے دکھانے کے لیے اس کا استعمال کیا ہے −

<!DOCTYPE html>
    <html>
       
       <head>
          <title>HTML ٹیگ</title>
       </head>
    	
       <body>
          <!-- پہلا گروہ ٹیگز -->
          <div style = "رنگ:لال">
             <h4>یہ پہلا گروہ ہے</h4>
             <p>نیچے ایک سبزیوں کی فہرست ہے</p>
             
             <ul>
                <li>چقندر</li>
                <li>ادرک</li>
                <li>آلو</li>
                <li>مولی</li>
             </ul>
          </div>
    
          <!-- دوسرا گروہ ٹیگز -->
          <div style = "رنگ:سبز">
             <h4>یہ دوسرا گروہ ہے</h4>
             <p>نیچے ایک پھلوں کی فہرست ہے</p>
             
             <ul>
                <li>سیب</li>
                <li>کیلا</li>
                <li>آم</li>
                <li>سٹرابیری</li>
             </ul>
          </div>
       </body>
       
    </html>

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