ایچ ٹی ایم ایل اور سی ایس ایس کی کلاسوں کا تعارف

یہ کہے بغیر چلا جاتا ہے ، ویب ڈویلپمنٹ بہت بڑی ہے۔ اس کا ایک بہت بڑا حصہ اس لئے ہے کہ تقریبا everyone ہر شخص ویب پر ہے۔ تاہم ، فیلڈ میں ڈویلپرز کی کمی ہے ، اور اسی وجہ سے ویب ڈویلپمنٹ نصاب اتنا آسانی سے دستیاب ہے ، اور مفت میں بھی۔ اس بات کو ذہن میں رکھتے ہوئے ، ہم آپ کو HTML اور CSS کے بارے میں تھوڑا سا دکھائیں گے۔ خاص طور پر ، ہم آپ کو یہ دکھانے کے لئے جارہے ہیں کہ "کلاس" کیسے چلتی ہیں۔

ہم آپ کو شروع سے ہی شروع نہیں کررہے ہیں ، کیوں کہ وہاں پہلے ہی بہت سارے مفت نصاب موجود ہیں۔ اس کے بجائے ، ہم خاص طور پر آپ کو یہ بتانے جارہے ہیں کہ کلاسز کیسے چلتے ہیں ، کیوں کہ یہ آپ کی ویب سائٹ کو اسٹائل کرنے کا ایک ضروری جز ہے۔ ہم نے یہ بھی سوچا کہ ٹویٹر کے بوٹسٹریپ API پر اپنی نظر ڈالنے سے پہلے یہ احاطہ کرنے کے قابل ہوگا کیونکہ کلاسز بھی اس میں ایک لازمی جزو ہیں۔

دستبرداری کے بطور ، اگر آپ HTML اور CSS کے لئے بالکل نئے ہیں ، تو یہ شاید آپ کے لئے اچھا آغاز نہیں ہے۔ اگر آپ اس سے واقف ہیں تو ، اس کے باوجود اسے اٹھانا زیادہ مشکل نہیں ہونا چاہئے۔ لیکن ، اگر آپ ایک مکمل ابتدائی ٹیوٹوریل تلاش کررہے ہیں تو ، آن لائن کے بہت سارے بہترین اختیارات موجود ہیں۔ چند ایک کے نام کے لئے ، فری کوڈ کیمپ ، اوڈن پروجیکٹ ، کوڈ ایکڈیمی ، کوڈ اسکول ، ٹیم ٹری ہاؤس ، اڈاسٹی ، اور بہت کچھ ہے۔ اگر آپ ان میں سے کسی کو کھودنا شروع کرتے ہیں تو ، میں آپ کو بہت زیادہ مشورہ دوں گا کہ کسی (جیسے مفت کوڈ کیمپ) کے ساتھ چپک کر رہوں اور دوسرا شروع کرنے سے پہلے اس کو ختم کردوں ، کیونکہ بہت سارے "بنیادی" مشمولات کو دہرایا جاسکتا ہے۔

اس طرح سے ، آئیے اس میں کھدائی کریں کہ کلاسز کیا ہیں۔

کلاس کیسے کام کرتے ہیں

کلاس انتہائی مفید ہیں۔ وہ اسٹائل ایچ ٹی ایم ایل سے اعادہ کرتے ہیں۔ کلاسوں کے بغیر ، آپ اپنے مارک اپ میں ہر عنصر کو انفرادی طور پر اسٹائل کر رہے ہوں گے۔ اور کیا ہوگا اگر آپ کے پاس ایک جیسے دو عنصر ہیں ، لیکن ان میں سے ہر ایک کو مختلف انداز میں رکھنا چاہتے ہیں؟ یہ ایک مکمل گڑبڑ ہوگی۔ اسی لئے ہمارے پاس کلاسز ہیں۔ طبقات کچھ تنظیمی ڈھانچے کو آپ کے HTML میں شامل کرتے ہیں ، اس سے آپ کوڈ کو نسبتا clean صاف رکھنے کی اجازت ملتی ہے۔ نہ صرف یہ ، بلکہ کلاسز کو ایک سے زیادہ بار استعمال کیا جاسکتا ہے۔ دوسرے الفاظ میں ، آپ کو کبھی بھی دو بار ایک ہی اسٹائل کے قواعد تشکیل دینے کی ضرورت نہیں ہوگی۔

یہاں ہمارے اندر کلاسز کی طرح نظر آتے ہیں ٹیگ:

جیسا کہ آپ دیکھ سکتے ہیں ، ہمارے جسمانی ٹیگ کے تحت ، ہمارے پاس دو ہیں

مختلف کلاسوں کے ساتھ عناصر. پہلہ

ٹیگ میں کلاس “ہیڈ 1” ہے جبکہ دوسرے ٹیگ میں کلاس ہے “ہیڈ 2”۔ لہذا ، ہمارے سی ایس ایس میں ، صرف اسٹائل لگانے کی بجائے

عنصر ، ہم انفرادی کلاسوں میں اسٹائل لگاسکتے ہیں۔ ہم ایسا کیوں کرنا چاہتے ہیں؟

بنیادی وجہ یہ ہے کہ آپ اپنے سب کو نہیں چاہتے ہیں

ایک ہی اسٹائل رکھنے کے ل elements عناصر. ویب سائٹ بناتے وقت یہ بہت زیادہ درد پیدا کرتا ہے ، اور اس کے علاوہ ، ویب سائٹیں بھی بہت عمدہ نہیں لگتی ہیں۔ طبقات ہمیں ٹیگ کی صرف ایک مثال پر اسٹائل لگانے کی اجازت دیتی ہیں ، تمام نہیں

دستاویز میں ٹیگز۔ تو ، آپ HTML میں کلاس کیسے لکھتے ہیں؟ اس کے جیسا:

کچھ مواد

آپ کسی بھی HTML عنصر میں "کلاس" پراپرٹی شامل کرسکتے ہیں۔

زبردست! تو ، ہمارے پاس کلاسز ہیں ، لیکن ان کی موجودہ حالت میں ، وہ حقیقت میں کچھ نہیں کر رہے ہیں۔ اس کی وجہ یہ ہے کہ ابھی ہم نے کلاس میں اسٹائل کے کوئی قواعد شامل نہیں کیے ہیں۔ ایسا کرنے کے ل we ، ہمیں ایک علیحدہ سی ایس ایس دستاویز بنانے کی ضرورت ہوگی۔ میں اسے مین سی ایس ایس کہنے جا رہا ہوں۔ اس دستاویز میں ، ہم اس طرح ایک کلاس سجائیں گے:

ہم جس کلاس کو اسٹائل کرنا چاہتے ہیں اسے منتخب کرنے کے ل we ، ہم یہ کرتے ہیں:

. ہیڈ 1 {رنگ: سرخ؛ متن کی سیدھ: مرکز؛ }

گھوبگھرالی منحنی خطوط وحدانی میں تمام "قواعد" (یا اسٹائل) ہوتے ہیں جن کا اطلاق ہم اس کلاس پر کرتے ہیں۔ اس طبقے کے اندر آپ بہت سارے مختلف اصول رکھ سکتے ہیں۔ میرے معاملے میں ، میں نے "رنگ" قاعدہ کا استعمال کرتے ہوئے متن کا رنگ تبدیل کرکے سرخ کردیا اور میں نے "ٹیکسٹ الائن" اصول کا استعمال کرکے متن کو مرکز کیا۔ آپ سی ایس ایس قواعد کی مکمل فہرست کے ساتھ ساتھ ان کی دستاویزات موزیلا کے ڈویلپر نیٹ ورک سے حاصل کرسکتے ہیں۔

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

آپ کا HTML دستاویز اس طرح نظر آنا چاہئے:

اور آپ کا ہمارے ٹیسٹ پروجیکٹ کو ویب پر اس طرح نظر آنا چاہئے:

ایک مزید تفصیلی ویڈیو کے لئے جو ان اقدامات پر چلتا ہے ، براہ کرم نیچے دیکھیں۔

ویڈیو

نتیجہ اخذ کرنا

اور یہی سب کچھ کلاسوں میں ہے! وہ واقعی سمجھنے میں آسان ہیں۔ ظاہر ہے کہ آپ جس بڑی اور مشہور ویب سائٹوں پر جاتے ہیں ان پر ، کلاسوں کے قواعد ہمارے احاطے سے کہیں زیادہ پیچیدہ ہوتے ہیں ، لیکن ان کی سب سے بنیادی شکل میں ، وہ اسی طرح کام کرتے ہیں۔

اگر آپ کو کوئی سوالات ہیں یا طویل عرصے کے بعد تکلیف ہو رہی ہے تو ، PCMech فورمز میں ذیل میں یا اس سے زیادہ تبصرے میں ہمیں بتائیں۔ یا ، اگر آپ PCMech پر مکمل HTML / CSS شروعاتی رہنما میں دلچسپی رکھتے ہیں تو ، ہمیں بھی بتانا نہ بھولیں!