ٹولز درکار ہیں۔
ایچ ٹی ایم ایل میں صف بندی کے تصور کو واضح کرنے کے لیے ہمیں ایچ ٹی ایم ایل کوڈ کو چلانے کے لیے درکار کچھ ضروری ٹولز کا ذکر کرنے کی ضرورت ہے۔ ایک ٹیکسٹ ایڈیٹر ہے ، اور دوسرا براؤزر ہے۔ ایک ٹیکسٹ ایڈیٹر شاید نوٹ پیڈ ، شاندار ، نوٹ پیڈ ++ ، یا کوئی اور جو مدد کر سکتا ہے۔ اس گائیڈ میں ، ہم نے نوٹ پیڈ ، ونڈوز میں ڈیفالٹ ایپلی کیشن ، اور گوگل کروم کو بطور براؤزر استعمال کیا ہے۔
ایچ ٹی ایم ایل فارمیٹ۔
صف بندی کو سمجھنے کے لیے ، ہمیں پہلے ایچ ٹی ایم ایل کی بنیادی باتوں کے بارے میں جاننے کی ضرورت ہے۔ ہم نے ایک نمونہ کوڈ کا اسکرین شاٹ پیش کیا ہے۔
< html >
< سر >...</ سر >
< جسم >….</ جسم >
</ html >
ایچ ٹی ایم ایل کے دو اہم حصے ہیں۔ ایک سر ہے ، اور دوسرا جسم ہے۔ تمام ٹیگز کونیی بریکٹ میں لکھے گئے ہیں۔ سر کا حصہ عنوان کے ٹیگ کا استعمال کرتے ہوئے HTML صفحہ کے نام سے متعلق ہے۔ اور بھی ، سر کے اندر سٹائل سٹیٹمنٹ استعمال کریں۔ دوسری طرف ، جسم متن ، تصاویر یا ویڈیوز وغیرہ کے دیگر تمام ٹیگز سے دوسرے لفظوں میں نمٹتا ہے ، جو بھی آپ اپنے ایچ ٹی ایم ایل پیج میں شامل کرنا چاہتے ہیں وہ ایچ ٹی ایم ایل کے باڈی پارٹ میں لکھا جاتا ہے۔
ایک چیز جو مجھے یہاں اجاگر کرنے کی ضرورت ہے وہ ہے ٹیگ کھولنا اور بند کرنا۔ ہر ٹیگ جو لکھا ہوا ہے بند ہونا چاہیے۔ مثال کے طور پر ، ایچ ٹی ایم ایل کا ٹیگ اسٹارٹ ہے اور اختتامی ٹیگ ہے۔ لہذا یہ مشاہدہ کیا گیا ہے کہ اختتامی ٹیگ میں سلیش ہوتا ہے جس کے بعد ٹیگ کا نام ہوتا ہے۔ اسی طرح ، دیگر تمام ٹیگز بھی اسی نقطہ نظر کی پیروی کرتے ہیں۔ ہر ٹیکسٹ ایڈیٹر کو HTML کی توسیع کے ساتھ محفوظ کیا جاتا ہے۔ مثال کے طور پر ، ہم نے example.html نام والی فائل استعمال کی ہے۔ پھر آپ دیکھیں گے کہ نوٹ پیڈ کا آئیکن براؤزر کے آئیکن میں بدل گیا ہے۔
جیسا کہ صف بندی اسٹائل کا مواد ہے۔ HTML میں سٹائل تین اقسام کا ہے۔ ایک آن لائن سٹائل ، اندرونی اور بیرونی سٹائل۔ ٹیگ میں ان لائن کا مطلب ہے۔ اندرونی سر کے اندر لکھا جاتا ہے۔ ایک ہی وقت میں ، بیرونی انداز الگ سی ایس ایس فائل میں لکھا جاتا ہے۔
متن کی ان لائن اسٹائلنگ۔
مثال 1۔
اب وقت آگیا ہے کہ یہاں ایک مثال پر بات کی جائے۔ اوپر دکھائی گئی تصویر پر غور کریں۔ نوٹ پیڈ کی اس فائل میں ، ہم نے ایک سادہ متن لکھا ہے۔ جب ہم اسے براؤزر کے طور پر چلاتے ہیں تو یہ نیچے دی گئی آؤٹ پٹ کو براؤزر میں دکھائے گا۔
اگر ہم چاہتے ہیں کہ یہ متن مرکز میں دکھایا جائے تو ہم ٹیگ کو تبدیل کر دیں گے۔
یہ ٹیگ ایک ان لائن ٹیگ ہے۔ ہم یہ ٹیگ اس وقت لکھیں گے جب ہم HTML باڈی میں پیراگراف ٹیگ متعارف کرائیں گے۔ متن کے بعد ، پھر پیراگراف ٹیگ بند کریں۔ محفوظ کریں اور پھر براؤزر میں فائل کھولیں۔
پیراگراف مرکز میں سیدھا ہے ، جیسا کہ یہ براؤزر میں ظاہر ہوتا ہے۔ اس مثال میں استعمال ہونے والا ٹیگ کسی بھی صف بندی کے لیے استعمال کیا جاتا ہے ، یعنی بائیں ، دائیں اور مرکز کے لیے۔ لیکن اگر آپ متن کو صرف مرکز میں سیدھا کرنا چاہتے ہیں ، تو اس مقصد کے لیے ایک مخصوص ٹیگ استعمال کیا جاتا ہے۔
< مرکز > …… ..</ مرکز >سینٹر ٹیگ متن سے پہلے اور بعد میں استعمال ہوتا ہے۔ یہ پچھلی مثال کی طرح نتیجہ بھی دکھائے گا۔
مثال 2۔
یہ HTML متن میں پیراگراف کے بجائے ہیڈنگ کو سیدھ کرنے کی ایک مثال ہے۔ سرخی کی اس سیدھ کے لیے نحو یکساں ہے۔ یہ دونوں ٹیگ کے ذریعے یا ان لائن سٹائل کے ذریعے یا ہیڈنگ ٹیگ کے اندر سیدھ والے ٹیگ کو شامل کرکے کیا جاسکتا ہے۔
آؤٹ پٹ براؤزر میں دکھایا گیا ہے۔ ہیڈنگ ٹیگ نے سادہ متن کو ہیڈنگ میں تبدیل کر دیا ہے ، اور ٹیگ نے اسے مرکز میں سیدھا کر دیا ہے۔
مثال 3۔
متن کو مرکز میں سیدھ کریں۔
ایک مثال پر غور کریں جس میں براؤزر میں ایک پیراگراف دکھایا گیا ہے۔ ہمیں اسے مرکز میں سیدھا کرنے کی ضرورت ہے۔
ہم اس فائل کو نوٹ پیڈ میں کھولیں گے اور پھر ٹیگ کا استعمال کرکے اسے مرکز کی پوزیشن میں سیدھ کریں گے۔
< p سٹائل =متن-سیدھ کریں: center>>اس ٹیگ کو پیراگراف ٹیگ میں شامل کرنے کے بعد ، براہ کرم فائل کو محفوظ کریں اور اسے براؤزر پر چلائیں۔ آپ دیکھیں گے کہ پیراگراف اب مرکوز ہے۔ نیچے دی گئی تصویر دیکھیں۔
متن کو دائیں طرف سیدھ کریں۔
متن کو دائیں طرف جھکانا صفحے کے بیچ میں رکھنا ہے۔ پیراگراف ٹیگ میں صرف مرکز کا لفظ دائیں سے بدل دیا گیا ہے۔
< p سٹائل =متن-سیدھ کریں: صحیح>> ……… ..</ p >تبدیلیاں نیچے دی گئی تصویر کے ذریعے دیکھی جا سکتی ہیں۔
براؤزر میں ویب پیج کو محفوظ اور ریفریش کریں۔ متن اب صفحے کے دائیں جانب منتقل کر دیا گیا ہے۔
متن کا اندرونی انداز
مثال 1۔
جیسا کہ اوپر بیان کیا گیا ہے کہ اندرونی سی ایس ایس (کیسکیڈنگ اسٹائل شیٹ) یا اندرونی اسٹائل ایک قسم کی سی ایس ایس ہے جو صفحے کے ایچ ٹی ایم ایل کے ہیڈ حصے میں بیان کی گئی ہے۔ یہ اندرونی ٹیگز کی طرح کام کرتا ہے۔
اوپر دکھائے گئے صفحے پر غور کریں اس میں عنوانات اور پیراگراف شامل ہیں۔ ہمیں مرکز میں متن دیکھنے کی ضرورت ہے۔ ان لائن سیدھ میں ہر پیراگراف کے اندر ٹیگز کی دستی تحریر درکار ہوتی ہے۔ لیکن اندرونی اسٹائل خود بخود متن کے ہر پیراگراف پر اسٹائل اسٹیٹمنٹ میں p کا ذکر کرکے لاگو کیا جا سکتا ہے۔ پھر پیراگراف ٹیگ کے اندر کوئی ٹیگ لکھنے کی ضرورت نہیں ہے۔ اب کوڈ کا مشاہدہ کریں ، اور یہ کام کر رہا ہے۔
< سٹائل >پی۔{متن-سیدھ کریں: مرکز}
</ سٹائل >
یہ ٹیگ سر کے حصے میں سٹائل ٹیگ کے اندر لکھا گیا ہے۔ اب براؤزر میں کوڈ چلائیں۔
جب آپ براؤزر میں صفحے پر عملدرآمد کرتے ہیں ، تو آپ دیکھیں گے کہ تمام پیراگراف صفحے کے بیچ میں جڑے ہوئے ہیں۔ یہ ٹیگ متن میں موجود ہر پیراگراف پر لاگو ہوتا ہے۔
مثال 2۔
اس مثال میں ، ایک پیراگراف کی طرح ، ہم متن کے تمام عنوانات کو دائیں جانب سیدھ کریں گے۔ اس مقصد کے لیے ہم سر کے اندر سٹائل سٹیٹمنٹ میں ہیڈنگز کا ذکر کریں گے۔
H2 ، H3۔{
متن-سیدھ کریں: ٹھیک ہے
}
اب فائل کو محفوظ کرنے کے بعد براؤزر میں نوٹ پیڈ فائل چلائیں۔ آپ دیکھیں گے کہ عنوانات HTML صفحے کے دائیں جانب سیدھے ہیں۔
مثال 3۔
اندرونی اسٹائل میں ، ایسی صورت حال ہوسکتی ہے جہاں آپ کو متن میں صرف کچھ پیراگراف کے متن کو سیدھا کرنے کی ضرورت ہو جبکہ دیگر ایک جیسے رہیں۔ لہذا ، ہم کلاس کا تصور استعمال کر رہے ہیں۔ ہم سٹائل ٹیگ کے اندر ڈاٹ طریقہ کے ساتھ کلاس متعارف کرواتے ہیں۔ اس پیراگراف ٹیگ کے اندر کلاس کا نام شامل کرنا ضروری ہے جسے آپ سیدھ میں لانا چاہتے ہیں۔
< سٹائل >. مرکز{
متن-سیدھ کریں: مرکز}
</ سٹائل >
کلاس =مرکز> ……</ p >
ہم نے پہلے تین پیراگراف میں کلاس شامل کی ہے۔ اب کوڈ چلائیں۔ آپ آؤٹ پٹ میں دیکھ سکتے ہیں کہ پہلے تین پیراگراف مرکز میں جڑے ہوئے ہیں ، جبکہ دوسرے نہیں ہیں۔
نتیجہ
اس مضمون نے وضاحت کی ہے کہ صف بندی مختلف طریقوں سے ان لائن اور اندرونی ٹیگز کے ذریعے کی جا سکتی ہے۔