30 KiB

Raw Blame History Unescape Escape

ٹیریریم پروجیکٹ حصہ 1: HTML کا تعارف

اسکیچ نوٹ Tomomi Imura کی طرف سے

HTML، یا HyperText Markup Language، ہر ویب سائٹ کی بنیاد ہے جو آپ نے کبھی دیکھی ہے۔ HTML کو ویب صفحات کی ساخت دینے والے ڈھانچے کے طور پر سوچیں – یہ بتاتا ہے کہ مواد کہاں جائے گا، کیسے منظم ہوگا، اور ہر حصہ کیا ظاہر کرتا ہے۔ جبکہ CSS بعد میں آپ کے HTML کو رنگوں اور لے آؤٹ کے ساتھ "سجائے گا"، اور JavaScript اسے انٹرایکٹیویٹی کے ساتھ زندہ کرے گا، HTML وہ بنیادی ڈھانچہ فراہم کرتا ہے جو باقی سب کچھ ممکن بناتا ہے۔

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

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

پری لیکچر کوئز

📺 دیکھیں اور سیکھیں: اس مددگار ویڈیو کا جائزہ دیکھیں

اپنے پروجیکٹ کو ترتیب دینا

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

کام: اپنے پروجیکٹ کا ڈھانچہ بنائیں

آپ اپنے ٹیریریم پروجیکٹ کے لیے ایک مخصوص فولڈر بنائیں گے اور اپنا پہلا HTML فائل شامل کریں گے۔ یہاں دو طریقے ہیں جنہیں آپ استعمال کر سکتے ہیں:

آپشن 1: ویژول اسٹوڈیو کوڈ کا استعمال کرتے ہوئے

ویژول اسٹوڈیو کوڈ کھولیں
"فائل" → "فولڈر کھولیں" پر کلک کریں یا Ctrl+K, Ctrl+O (ونڈوز/لینکس) یا Cmd+K, Cmd+O (میک) استعمال کریں
ایک نیا فولڈر بنائیں جس کا نام terrarium ہو اور اسے منتخب کریں
ایکسپلورر پین میں، "نئی فائل" آئیکن پر کلک کریں
اپنی فائل کا نام index.html رکھیں

آپشن 2: ٹرمینل کمانڈز کا استعمال کرتے ہوئے

mkdir terrarium
cd terrarium
touch index.html
code index.html

یہ کمانڈز کیا کرتی ہیں:

ایک نیا ڈائریکٹری بناتی ہیں جس کا نام terrarium ہے آپ کے پروجیکٹ کے لیے
ٹریریم ڈائریکٹری میں جاتی ہیں
ایک خالی index.html فائل بناتی ہیں
فائل کو ویژول اسٹوڈیو کوڈ میں ایڈیٹنگ کے لیے کھولتی ہیں

💡 پرو ٹپ: فائل کا نام index.html ویب ڈیولپمنٹ میں خاص ہے۔ جب کوئی ویب سائٹ دیکھتا ہے، براؤزرز خود بخود index.html کو بطور ڈیفالٹ صفحہ دکھانے کے لیے تلاش کرتے ہیں۔ اس کا مطلب ہے کہ ایک URL جیسے https://mysite.com/projects/ خود بخود projects فولڈر سے index.html فائل کو پیش کرے گا بغیر URL میں فائل کا نام بتائے۔

HTML دستاویز کا ڈھانچہ سمجھنا

ہر HTML دستاویز ایک مخصوص ڈھانچے کی پیروی کرتی ہے جسے براؤزرز کو صحیح طریقے سے سمجھنے اور دکھانے کی ضرورت ہوتی ہے۔ اس ڈھانچے کو ایک رسمی خط کی طرح سوچیں – اس میں ایک خاص ترتیب میں مطلوبہ عناصر ہوتے ہیں جو وصول کنندہ (اس صورت میں، براؤزر) کو مواد کو صحیح طریقے سے پروسیس کرنے میں مدد دیتے ہیں۔

آئیے اس ضروری بنیاد کو شامل کریں جو ہر HTML دستاویز کو چاہیے۔

DOCTYPE اعلان اور روٹ عنصر

کسی بھی HTML فائل کی پہلی دو لائنیں براؤزر کے لیے دستاویز کا "تعارف" کے طور پر کام کرتی ہیں:

<!DOCTYPE html>
<html></html>

یہ کوڈ کیا کرتا ہے:

دستاویز کی قسم کو HTML5 کے طور پر اعلان کرتا ہے <!DOCTYPE html> کا استعمال کرتے ہوئے
روٹ <html> عنصر بناتا ہے جو تمام صفحہ مواد کو رکھے گا
جدید ویب معیارات قائم کرتا ہے مناسب براؤزر رینڈرنگ کے لیے
مختلف براؤزرز اور ڈیوائسز پر مستقل ڈسپلے کو یقینی بناتا ہے

💡 ویژول اسٹوڈیو کوڈ ٹپ: ویژول اسٹوڈیو کوڈ میں کسی بھی HTML ٹیگ پر ہوور کریں تاکہ MDN ویب ڈاکس سے مددگار معلومات دیکھ سکیں، بشمول استعمال کی مثالیں اور براؤزر مطابقت کی تفصیلات۔

📚 مزید سیکھیں: DOCTYPE اعلان براؤزرز کو "quirks mode" میں داخل ہونے سے روکتا ہے، جو بہت پرانی ویب سائٹس کو سپورٹ کرنے کے لیے استعمال ہوتا تھا۔ جدید ویب ڈیولپمنٹ سادہ <!DOCTYPE html> اعلان استعمال کرتی ہے تاکہ معیارات کے مطابق رینڈرنگ کو یقینی بنایا جا سکے۔

ضروری دستاویز میٹا ڈیٹا شامل کرنا

HTML دستاویز کا <head> سیکشن اہم معلومات پر مشتمل ہوتا ہے جو براؤزرز اور سرچ انجنز کو چاہیے، لیکن جو زائرین کو صفحے پر براہ راست نظر نہیں آتی۔ اسے "پردے کے پیچھے" کی معلومات کے طور پر سوچیں جو آپ کے ویب صفحے کو صحیح طریقے سے کام کرنے اور مختلف ڈیوائسز اور پلیٹ فارمز پر صحیح طور پر ظاہر ہونے میں مدد دیتی ہے۔

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

کام: دستاویز کا ہیڈ شامل کریں

اپنے کھلنے اور بند ہونے والے <html> ٹیگز کے درمیان یہ <head> سیکشن شامل کریں:

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

ہر عنصر کیا کرتا ہے:

صفحے کا عنوان سیٹ کرتا ہے جو براؤزر ٹیبز اور سرچ نتائج میں ظاہر ہوتا ہے
UTF-8 کریکٹر انکوڈنگ کی وضاحت کرتا ہے تاکہ دنیا بھر میں صحیح ٹیکسٹ ڈسپلے ہو
جدید انٹرنیٹ ایکسپلورر ورژنز کے ساتھ مطابقت کو یقینی بناتا ہے
ریسپانسیو ڈیزائن کو کنفیگر کرتا ہے ڈیوائس کی چوڑائی سے میچ کرنے کے لیے ویوپورٹ سیٹ کرکے
ابتدائی زوم لیول کنٹرول کرتا ہے تاکہ مواد کو قدرتی سائز پر دکھایا جا سکے

🤔 اس بارے میں سوچیں: اگر آپ نے ویوپورٹ میٹا ٹیگ کو اس طرح سیٹ کیا: <meta name="viewport" content="width=600">؟ یہ صفحے کو ہمیشہ 600 پکسل چوڑا رکھنے پر مجبور کرے گا، ریسپانسیو ڈیزائن کو خراب کر دے گا! ویوپورٹ کنفیگریشن کے بارے میں مزید جانیں۔

دستاویز کا باڈی بنانا

HTML کے <body> عنصر میں آپ کے ویب صفحے کا تمام نظر آنے والا مواد شامل ہوتا ہے – وہ سب کچھ جو صارفین دیکھیں گے اور اس کے ساتھ انٹرایکٹ کریں گے۔ جبکہ <head> سیکشن نے براؤزر کو ہدایات فراہم کیں، <body> سیکشن میں اصل مواد شامل ہوتا ہے: ٹیکسٹ، تصاویر، بٹن، اور دیگر عناصر جو آپ کا یوزر انٹرفیس بناتے ہیں۔

آئیے باڈی کا ڈھانچہ شامل کریں اور سمجھیں کہ HTML ٹیگز ایک ساتھ کیسے کام کرتے ہیں تاکہ معنی خیز مواد بن سکے۔

HTML ٹیگ ڈھانچہ سمجھنا

HTML جوڑے والے ٹیگز کا استعمال کرتا ہے تاکہ عناصر کی وضاحت کی جا سکے۔ زیادہ تر ٹیگز کے پاس ایک اوپننگ ٹیگ ہوتا ہے جیسے <p> اور ایک کلوزنگ ٹیگ جیسے </p>, جس کے درمیان مواد ہوتا ہے: <p>Hello, world!</p>۔ یہ ایک پیراگراف عنصر بناتا ہے جس میں "Hello, world!" ٹیکسٹ ہوتا ہے۔

کام: باڈی عنصر شامل کریں

اپنی HTML فائل کو اپ ڈیٹ کریں تاکہ <body> عنصر شامل ہو:

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>

یہ مکمل ڈھانچہ کیا فراہم کرتا ہے:

بنیادی HTML5 دستاویز کا فریم ورک قائم کرتا ہے
مناسب براؤزر رینڈرنگ کے لیے ضروری میٹا ڈیٹا شامل کرتا ہے
ایک خالی باڈی بناتا ہے جو آپ کے نظر آنے والے مواد کے لیے تیار ہے
جدید ویب ڈیولپمنٹ کے بہترین طریقوں کی پیروی کرتا ہے

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

تصاویر اور لے آؤٹ کنٹینرز کے ساتھ کام کرنا

HTML میں تصاویر خاص ہوتی ہیں کیونکہ وہ "سیلف کلوزنگ" ٹیگز استعمال کرتی ہیں۔ عناصر جیسے <p></p> جو مواد کے ارد گرد لپیٹتے ہیں، کے برعکس، <img> ٹیگ اپنی تمام معلومات ٹیگ کے اندر ہی رکھتا ہے، جیسے src تصویر فائل کے راستے کے لیے اور alt رسائی کے لیے۔

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

پہلے، اپنی تصاویر ترتیب دیں:

اپنے ٹیریریم پروجیکٹ فولڈر کے اندر ایک فولڈر بنائیں جس کا نام images ہو
پودوں کی تصاویر حل فولڈر سے ڈاؤنلوڈ کریں (کل 14 پودوں کی تصاویر)
تمام پودوں کی تصاویر کو اپنے نئے images فولڈر میں کاپی کریں

کام: پودوں کی ڈسپلے لے آؤٹ بنائیں

اب اپنے <body></body> ٹیگز کے درمیان پودوں کی تصاویر کو دو کالموں میں منظم کریں:

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.ur.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.ur.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.ur.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.ur.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.ur.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.ur.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.ur.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.ur.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.ur.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.ur.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.ur.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.ur.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.ur.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.ur.png" />
		</div>
	</div>
</div>

مرحلہ وار، اس کوڈ میں کیا ہو رہا ہے:

ایک مرکزی صفحہ کنٹینر بناتا ہے id="page" کے ساتھ جو تمام مواد کو رکھے گا
دو کالم کنٹینرز قائم کرتا ہے: left-container اور right-container
7 پودوں کو بائیں کالم میں اور 7 پودوں کو دائیں کالم میں منظم کرتا ہے
ہر پودے کی تصویر کو ایک plant-holder div میں لپیٹتا ہے انفرادی پوزیشننگ کے لیے
CSS اسٹائلنگ کے لیے مستقل کلاس ناموں کا اطلاق کرتا ہے اگلے سبق میں
ہر پودے کی تصویر کو منفرد IDs تفویض کرتا ہے بعد میں JavaScript انٹرایکشن کے لیے
تصاویر فولڈر کی طرف اشارہ کرنے والے مناسب فائل راستے شامل کرتا ہے

🤔 اس پر غور کریں: نوٹ کریں کہ تمام تصاویر کے پاس فی الحال ایک ہی alt ٹیکسٹ "plant" ہے۔ یہ رسائی کے لیے مثالی نہیں ہے۔ اسکرین ریڈر استعمال کرنے والے "plant" کو 14 بار سنیں گے بغیر یہ جانے کہ ہر تصویر کون سا مخصوص پودا دکھاتی ہے۔ کیا آپ ہر تصویر کے لیے بہتر، زیادہ وضاحتی alt ٹیکسٹ کے بارے میں سوچ سکتے ہیں؟

📝 HTML عنصر کی اقسام: <div> عناصر "بلاک لیول" ہوتے ہیں اور مکمل چوڑائی لیتے ہیں، جبکہ <span> عناصر "ان لائن" ہوتے ہیں اور صرف ضروری چوڑائی لیتے ہیں۔ آپ کے خیال میں کیا ہوگا اگر آپ ان تمام <div> ٹیگز کو <span> ٹیگز میں تبدیل کر دیں؟

اس مارک اپ کو شامل کرنے کے ساتھ، پودے اسکرین پر ظاہر ہوں گے، حالانکہ وہ ابھی تک پالش نہیں لگیں گے – یہی کام CSS کا ہے اگلے سبق میں! فی الحال، آپ کے پاس ایک مضبوط HTML بنیاد ہے جو آپ کے مواد کو صحیح طریقے سے منظم کرتی ہے اور رسائی کے بہترین طریقوں کی پیروی کرتی ہے۔

رسائی کے لیے سیمینٹک HTML کا استعمال

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

یہ طریقہ آپ کی ویب سائٹس کو معذوری والے صارفین کے لیے زیادہ قابل رسائی بناتا ہے اور سرچ انجنز کو آپ کے مواد کو بہتر طور پر سمجھنے میں مدد دیتا ہے۔ یہ جدید ویب ڈیولپمنٹ کا ایک بنیادی اصول ہے جو سب کے لیے بہتر تجربات پیدا کرتا ہے۔

سیمینٹک صفحہ عنوان شامل کرنا

آئیے آپ کے ٹیریریم صفحے کے لیے ایک مناسب ہیڈنگ شامل کریں۔ اپنے کھلنے والے <body> ٹیگ کے فوراً بعد یہ لائن شامل کریں:

<h1>My Terrarium</h1>

سیمینٹک مارک اپ کیوں اہم ہے:

اسکرین ریڈرز کو صفحہ کی ساخت کو نیویگیٹ کرنے اور سمجھنے میں مدد دیتا ہے
سرچ انجن آپٹیمائزیشن (SEO) کو بہتر بناتا ہے مواد کی درجہ بندی کو واضح کر کے
بصری معذوری یا علمی فرق والے صارفین کے لیے رسائی کو بڑھاتا ہے
تمام ڈیوائسز اور پلیٹ فارمز پر بہتر یوزر تجربات تخلیق کرتا ہے
پیشہ ورانہ ترقی کے لیے ویب معیارات اور بہترین طریقوں کی پیروی کرتا ہے

سیمینٹک بمقابلہ غیر سیمینٹک انتخاب کی مثالیں:

مقصد	✅ سیمینٹک انتخاب	❌ غیر سیمینٹک انتخاب
مرکزی ہیڈنگ	`<h1>عنوان</h1>`	`<div class="big-text">عنوان</div>`
نیویگیشن	`<nav><ul><li></li></ul></nav>`	`<div class="menu"><div></div></div>`
بٹن	`<button>کلک کریں</button>`	`<span onclick="...">کلک کریں</span>`
مضمون کا مواد	`<article><p></p></article>`	`<div class="content"><div></div></div>`

🎥 عمل میں دیکھیں: اسکرین ریڈرز ویب صفحات کے ساتھ کیسے انٹرایکٹ کرتے ہیں دیکھیں تاکہ سمجھ سکیں کہ سیمینٹک مارک اپ رسائی کے لیے کیوں ضروری ہے۔ نوٹ کریں کہ مناسب HTML ساخت صارفین کو مؤثر طریقے سے نیویگیٹ کرنے میں مدد دیتی ہے۔

ٹیریریم کنٹینر بنانا

اب آئیے ٹیریریم کے لیے HTML ساخت شامل کریں – شیشے کا کنٹینر جہاں پودے بالآخر رکھے جائیں گے۔ یہ سیکشن ایک اہم تصور کو ظاہر کرتا ہے: HTML ساخت فراہم کرتا ہے، لیکن بغیر CSS اسٹائلنگ کے، یہ عناصر ابھی تک نظر نہیں آئیں گے۔

ٹریریم مارک اپ وضاحتی کلاس ناموں کا استعمال کرتا ہے جو اگلے سبق میں CSS اسٹائلنگ کو بدیہی اور برقرار رکھنے کے قابل بنائے گا۔

کام: ٹیریریم ساخت شامل کریں

آخری </div> ٹیگ کے اوپر یہ مارک اپ شامل کریں (صفحہ کنٹینر کے بند ہونے والے ٹیگ سے پہلے):

<div id="terrarium">
	<div class="jar-top"></div>
	<div class="jar-walls">
		<div class="jar-glossy-long"></div>
		<div class="jar-glossy-short"></div>
	</div>
	<div class="dirt"></div>
	<div class="jar-bottom"></div>
</div>

اس ٹیریریم ساخت کو سمجھنا:

ایک مرکزی ٹیریریم کنٹینر بناتا ہے منفرد ID کے ساتھ اسٹائلنگ کے لیے
ہر بصری جزو کے لیے الگ الگ عناصر کی وضاحت کرتا ہے (اوپر، دیواریں، مٹی، نیچے)
شیشے کے انعکاس اثرات کے لیے گھونسلا عناصر شامل کرتا ہے (چمکدار عناصر)
وضاحتی کلاس ناموں کا استعمال کرتا ہے جو ہر عنصر کے مقصد کو واضح طور پر ظاہر کرتے ہیں
شیشے کے ٹیریریم ظاہری شکل بنانے کے لیے CSS اسٹائلنگ کے لیے ساخت تیار کرتا ہے

🤔 کچھ نوٹ کریں؟: حالانکہ آپ نے یہ مارک اپ شامل کیا، آپ صفحے پر کچھ نیا نہیں دیکھتے! یہ بال پلانٹ کی دیکھ بھال کے رہنما

پانی دینا

پودوں کو مناسب مقدار میں پانی دینا ضروری ہے تاکہ وہ صحت مند رہ سکیں۔ زیادہ پانی دینے سے جڑیں خراب ہو سکتی ہیں، جبکہ کم پانی دینے سے پودے سوکھ سکتے ہیں۔ ہر پودے کی پانی کی ضروریات مختلف ہوتی ہیں، اس لیے ان کی نوعیت کے مطابق پانی دیں۔

روشنی کی ضروریات

پودوں کو بڑھنے کے لیے روشنی کی ضرورت ہوتی ہے، لیکن ہر پودے کی روشنی کی ضروریات مختلف ہوتی ہیں۔ کچھ پودے دھوپ میں بہتر بڑھتے ہیں، جبکہ کچھ کو سایہ پسند ہوتا ہے۔ اپنے پودے کی نوعیت کو سمجھیں اور اسے مناسب روشنی فراہم کریں۔

مٹی کی دیکھ بھال

پودوں کی صحت مند نشوونما کے لیے مٹی کا معیار بہت اہم ہے۔ مٹی کو وقتاً فوقتاً کھاد دیں اور اس کی نمی کو برقرار رکھیں۔ مٹی کی قسم اور اس میں موجود غذائی اجزاء پودے کی بڑھوتری پر اثر انداز ہوتے ہیں، اس لیے مناسب مٹی کا انتخاب کریں۔

ایجنٹ موڈ کے بارے میں مزید جانیں۔

HTML کی تاریخ کا چیلنج

ویب کی ترقی کے بارے میں سیکھنا

HTML نے 1990 میں ٹم برنرز لی کے ذریعہ CERN میں پہلا ویب براؤزر بنانے کے بعد سے بہت ترقی کی ہے۔ کچھ پرانے ٹیگز جیسے <marquee> اب ختم ہو چکے ہیں کیونکہ وہ جدید رسائی کے معیار اور ریسپانسیو ڈیزائن اصولوں کے ساتھ مطابقت نہیں رکھتے۔

یہ تجربہ کریں:

اپنے <h1> عنوان کو عارضی طور پر <marquee> ٹیگ میں لپیٹیں: <marquee><h1>میرا ٹیریریم</h1></marquee>
اپنے صفحے کو براؤزر میں کھولیں اور اسکرولنگ اثر کا مشاہدہ کریں
غور کریں کہ یہ ٹیگ کیوں ختم کیا گیا (اشارہ: صارف کے تجربے اور رسائی کے بارے میں سوچیں)
<marquee> ٹیگ کو ہٹا دیں اور سیمینٹک مارک اپ پر واپس جائیں

عکاسی کے سوالات:

اسکرولنگ عنوان بصری معذوری یا حرکت کی حساسیت والے صارفین کو کیسے متاثر کر سکتا ہے؟
کون سی جدید CSS تکنیکیں اسی طرح کے بصری اثرات کو زیادہ قابل رسائی طریقے سے حاصل کر سکتی ہیں؟
ختم شدہ عناصر کے بجائے موجودہ ویب معیارات کا استعمال کیوں ضروری ہے؟

ختم شدہ اور ختم کیے گئے HTML عناصر کے بارے میں مزید جانیں تاکہ ویب معیارات کے ارتقاء کو سمجھ سکیں اور صارف کے تجربے کو بہتر بنایا جا سکے۔

لیکچر کے بعد کا کوئز

جائزہ اور خود مطالعہ

HTML کے علم کو گہرا کریں

HTML گزشتہ 30 سالوں سے ویب کی بنیاد رہا ہے، ایک سادہ دستاویز مارک اپ زبان سے انٹرایکٹو ایپلیکیشنز بنانے کے لیے ایک جدید پلیٹ فارم میں تبدیل ہو گیا ہے۔ اس ارتقاء کو سمجھنا جدید ویب معیارات کی قدر کرنے اور بہتر ترقیاتی فیصلے کرنے میں مدد کرتا ہے۔

تجویز کردہ سیکھنے کے راستے:

HTML کی تاریخ اور ارتقاء
- HTML 1.0 سے HTML5 تک کے ٹائم لائن کی تحقیق کریں
- معلوم کریں کہ کچھ ٹیگز کیوں ختم کیے گئے (رسائی، موبائل دوستانہ، برقرار رکھنے کی صلاحیت)
- ابھرتی ہوئی HTML خصوصیات اور تجاویز کی تحقیق کریں
سیمینٹک HTML کی گہرائی میں مطالعہ
- HTML5 سیمینٹک عناصر کی مکمل فہرست کا مطالعہ کریں
- یہ پہچاننے کی مشق کریں کہ کب <article>, <section>, <aside>, اور <main> استعمال کرنا ہے
- بہتر رسائی کے لیے ARIA صفات کے بارے میں سیکھیں
جدید ویب ترقی
- ریسپانسیو ویب سائٹس بنانا پر Microsoft Learn پر تحقیق کریں
- سمجھیں کہ HTML CSS اور JavaScript کے ساتھ کیسے انٹیگریٹ ہوتا ہے
- ویب کی کارکردگی اور SEO کے بہترین طریقوں کے بارے میں سیکھیں