[موسیقی بجانے] 

DAVID J MALAN: یہ CS50 ہے اور اس ہفتے کے 7 کا آغاز ہے. تو واپس کا خیر مقدم. اور تم اس کو یاد کر سکتے مسئلہ میں، چار ایک scavenger شکار کے تھوڑا سا تھا کچھ شاندار انعامات جس کے لئے آپ کی تصاویر کی وصولی کے بعد دونوں یہاں اور نیو ہیون میں عملے، آپ کے طور پر بہت تلاش کرنے کے لئے چیلنج کیا گیا تھا آپ کر سکتے تھے کے طور پر ان کمپیوٹر کے سائنسدانوں. اور ہم نے ایک پورے مل گیا ہے گذارشات کے گروپ. میں نے چند اشتراک سوچا آج یہاں آپ کے ساتھ. 

اور ہم آن لائن ان میں سے سب پوسٹ کریں گے. لیکن خاص طور پر، میں چاہتا تھا ایک اچھی طرح سے to-- آپ توجہ اپنی طرف متوجہ، سیم بہت ان میں سے چند ایک میں تھا عام طور پر اس طرح پیدا. لیکن اس کے طور پر ظاہر ہوتا ہے کہ اس صبح، فاتح ایک خاص کسی کے ساتھ کین نامزد کیا گیا تھا عملے کے 24 کیمرے پر قبضہ کر لیا تم میں لے جب زیادہ یا چند تصاویر میں سے زیادہ عملے اکاؤنٹ. یہاں تصویر اگلے کین ہے نیو ہیون میں مریم سے. 

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

لیکن کین مجھے آپ کو یقین دلانے کے لئے چاہوں گا وہ ایک بہت اچھا فوٹوگرافر ہے کہ، انہوں نے ایک پیشہ ور لیتا ہے blurry کی نہیں ہیں کہ تصاویر، توجہ مرکوز میں بہتر ہیں، اور یہ کہ وہ اپنے عملے کے چند لیا. بلکہ صرف سے تسلیم کرتے ہیں ہم ایسا سوچا تھا کیا کین، کی فہرست کے ذریعے جانا ہے جمع کرانے والے اصل طلباء. اور اس کے ساتھ کہ لانس باہر کر دیتا ہے اس صبح کے طور پر 15 فوٹو ہماری فاتح تھا. 

اور، لانس کولٹن کے ساتھ ہے یہاں تصویر خود کے ساتھ Skaz،، اور سیم کے ساتھ. لیکن اس وقت یہ پتہ چلا ہے کہ کے طور پر 11:46 AM، صرف تھوڑا سا پہلے تو، میں اپنے ای میل کرنے کے لئے واپس چلا گیا اور پتہ چلا ہم نے ابھی تک ایک جمع کرانے تھا کہ بونی نامی ایک طالب علم کی طرف جس ای میل صرف یہ کہا. جھوٹ بولنے والا نہیں، ہوں کلاس کے دوران ایسا کرنے. اور پھر صرف منسلک کرنے کے لئے روانہ 14 فوٹو، لانس کے 15 کی شرم ایک. 

لیکن بونی کی تصاویر میں، بدل جاتا ہے باہر ایک سے زیادہ عملے کے ارکان، سیم تھے ان کے درمیان، تو ہم نے کیا سوچا کروں گا ان میں سے دونوں کو تسلیم ہے. تو ڈراپ باکس حاصل کرنے کے لئے اس کے علاوہ میں خلا ہے کہ حصہ لینے والے سب موصول، ان دو قسموں کے بھی کریں گے ان کے لئے ایک اچھا catered کر دوپہر کا کھانا حاصل اور ان کے حصے اس آنے والے ہفتے Mate کرتی ہے. اور اس لئے تم ہم سے سن لیں گے، اس کے بارے میں لانس اور بونی،. ان کے لئے اتنا بڑا مبارک ہو. اب، تم میں سے وہ لوگ جو کریں گے دوپہر کے کھانے کی طرح زیادہ عام طور پر کیمبرج میں CS50 دوپہر کے کھانے جانتے اور نیو ہیون کے اس جمعہ ہے. CS50 کی ویب سائٹ سلیش RSVP پر جائیں. اور اب سیمینار پر ایک لفظ. مزید کی curricularly. تو ہم قریب آ رہے ہیں سمسٹر کے نقطہ آپ کو شروع کرنے چاہئے جہاں آخری منصوبوں کے بارے میں سوچ. اور حقیقت میں، صرف تھوڑا سا میں، گا پہلے پروپوزل کی وجہ سے ہو نام نہاد. تو پہلے پروپوزل مراد ہیں ہو بہت کم اثر اور واقعی کے لئے صرف ایک موقع آپ کو ایک مختصر نوٹ تحریر کرنے کے لئے آپ کی تعلیم فیلو سے آگاہ کرنے کے لئے اسے آپ کیا سوچ رہے ہیں آپ کی آخری منصوبے کے لئے کیا کرنا چاہتے ہو سکتا ہے. 

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

اور ان کے ہاتھ، پر، اختیاری ہیں یا مواقع کی بنیاد پر لیکچر ہیں کہ موضوعات کے بارے میں مزید جاننے کے لئے کورس کے لئے ایک چھوٹا سا ذیلی نصاب، لیکن بہر حال بہت اچھا مواد حتمی منصوبوں گاڑی چلانا. اور اس طرح یہ ہے کہ فہرست ہے یہاں نیو ہیون میں CS50 عملے کے ساتھ آئے ہیں iOS کے بارے میں اس سال پروگرامنگ، لوڈ، اتارنا Android پروگرامنگ، کھیل کی ترقی، مزید ٹولز کا اور bunches اور زبانوں اور تکنیک. 

تو CS50 کی ویب سائٹ پر ایک نظر رکھنے کے. اور اس دوران میں، آپ کے لئے چاہتے ہیں تو ان میں سے کسی میں آپ کی دلچسپی رجسٹر، CS50 کی سلیش رجسٹر کرنے کے لئے جاؤ. اور پھر ہم کے طور پر کی پیروی کرے گا دن اور پرواز اوقات اور مقامات اور طرح سب کچھ سب سے زیادہ سب کچھ کریں گے ہو سلسلہ اور مطالبے پر بھی دستیاب آپ اصل میں یہ نہیں کر سکتے تو سب کے بعد. تو مزید ado کے بغیر، ہم حاصل کے ساتھ گزشتہ بار کو چھوڑ دیا. 

اور یہ تھا کہ پیغام کی طرح تھا مجازی لفافے کے اندر، یاد، ہم روٹر روٹر سے گزر چکا ہے کہ ایک ویب براؤزر اور ایک ویب کے درمیان روٹر سرور. اور اس پیغام کو دیکھا ایک اس طرح کچھ. یہ زیادہ arcane پیغام تھا کہ ایک لفافے کے اندر اصل میں تھا جس کاغذ کے ایک ٹکڑے پر لکھا پہلی سطر لفظی، سلیش حاصل ہے. 

اور صرف ایک وویک چیک کے طور پر، سلیش کیا مطلع کرنا تھا؟ سلیش جب کا مطلب کیا ہے ایک ویب سائٹ کی درخواست؟ آپ اسے ہر وقت کی درخواست. سب سے زیادہ کسی بھی وقت آپ کو ایک ویب سائٹ ملاحظہ کریں، آپ اصل میں ایک فائل کے نام میں ٹائپ نہیں ہے. آپ نے شاید صرف، Facebook.com پر جائیں ، gmail.com، یا جیسے میں داخل. اور سلیش نمائندگی کرتا ہے؟ کیا فائل؟ خاص طور پر تو کیا صفحہ،؟ 

انڈیکس، جی ہاں. پہلے سے طے شدہ صفحے تو. آپ کو ایک فائل کی وضاحت نہیں کرتے تو ہم کو دیکھنے کے لئے شروع کریں گے کے طور پر نام، تم صرف اصل میں درخواست کر رہے ہیں مجھے فیس بک کے پہلے سے طے شدہ صفحے دے یا میرے ان باکس دینے یا دینے مجھے خبر کی پہلے سے طے شدہ صفحے سی این این کی ویب سائٹ یا بلاگ پر. اور ایک سرور پھر جواب کچھ کے ساتھ اس پیغام اس طرح، میں، ہاں کہہ HTTP ورژن 1.1 بات. 

ایک حیثیت ہے جو 200، ہم شاذ و نادر ہی انسانوں کو کوڈ یہ اچھی بات ہے کیونکہ کبھی دیکھیں. یہ ٹھیک، درخواست کا مطلب ہے موصول ہوئی ہے اور مناسب طریقے سے سنبھالا گیا تھا. اور مواد کی قسم بظاہر جواب میں اکثر، لیکن ہمیشہ نہیں، متن ہے. اور خاص طور پر، ایچ ٹی ایم ایل. اور یہ کہ اصل میں ہے جہاں ہم آج دیکھو. 

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

اور میں آگے بڑھو اور to-- جا رہا ہوں میں پر کلک کریں یا دائیں کنٹرول کرنے کے لئے جا رہا ہوں ایک ویب کے صفحے پر کہیں بھی کلک کریں. میں عنصر کا معائنہ کرنے جا رہا ہوں. اور میں موافقت کرنے جا رہا ہوں میری یہاں کی سکرین صرف تھوڑا سا. مجھے نیچے کے لیے اس کو منتقل کرتے ہیں. تو یہ کہا جاتا ہے کروم کے انسپکٹر. تو یہ ایک بگ کی طرح ہے آلے کروم میں تعمیر. 

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

اور یہ تھوڑا بھاری ہے یہاں پہلی نظر میں. لیکن جو میں کرنے جا رہا ہوں دے رہا ہے مجھے یہ تھوڑا سا آسان بنانے. میں پر تبدیل کرنے کے لئے جا رہا ہوں یہ سرخ ہے تاکہ روشنی ریکارڈنگ. میں لاگ ان تحفظ کہنے جا رہا ہوں. اور یہ صرف ایک چھوٹی سی ہے بات میں نے سوچا وقت گزرنے کے ساتھ اس کو بچانے کے لئے جا رہا ہے براؤزر میں جو کچھ ہوتا ہے. اور اب میں جا رہا ہوں http://facebook.com کرنے. 

اصل میں، دیکھیے ورلڈ وائڈ ویب کرتے ہیں اچھا اقدام کے لئے، سلیش. درج. کی تو ایک یو آر ایل ہے کہ بہت سے آپ کا دورہ ہو سکتا ہے. اور اب فیس بک کی ویب صفحے کے سب سے اوپر آتا ہے. اور اس وقت کے ایک پورے گچرچھی چیزیں سب سے نیچے دیئے کی طرف سے اڑا. اور حقیقت میں، یہ پتہ چلا ہے کہ آپ Facebook.com کا دورہ کریں جب، آپ کو صرف، ایک HTTP درخواست نہیں کر رہے ہیں یہ Facebook.com کرنے کے لئے جا رہا ہے کہ باہر کر دیتا ہے ، ان لفافے کے 41 بھیجتا ہے اس کی اپنی حاصل کی درخواست کے ساتھ ایک، پردے کے پیچھے ہی سہی، اس بات کا اشارہ کے طور پر یہاں، سکرین کے نچلے حصے میں، یہ واقعی، کی طرف اشارہ کرتا میری براؤزر 41 درخواستوں بنایا. 

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

اور مجھے اس پر میں زوم. میں اگرچہ بائیں میں کیا ہے تو کیا یہاں چل رہی ایک بہت کچھ ہے میں روشنی ڈالی ہے ہے Facebook.com اور پھر ، میں نیچے سکرول رہا ہوں کہ توجہ ، نیچے سکرول نیچے سکرول، ہیڈر درخواست کرنے کے لئے. اور آپ کروم دکھا رہا ہے دیکھیں گے کہ مجھے بنیادی اندرونی مواد درخواست کی میں نے کر دیا. یہ بالکل اسی میں فارمیٹنگ نہیں ہے طریقہ ہے، لیکن حاصل کا ذکر وہاں کے نوٹس، ، میزبان کا ذکر وہاں کے نوٹس Facebook.com، راستہ، یا سلیش، جس میں درخواست کی فائل ہے. 

اور پھر میں سکرال بیک اپ، ہم اصل میں کروں گا دیکھیں فیس بک واپس کیا ہے کہ مجھ سے ان ہیڈر کی ہے. کہ مجازی لفافے کے اندر تو یقینا کلیدی قدر جوڑوں کی ایک بہت ہیں. ایک لفظ، ایک بڑی آنت، اور پھر ایک قیمت. ایک لفظ، ایک بڑی آنت، اور ایک قدر. یہ کہا جاتا ہے ہیڈر. اور راستے میں مزید تفصیل کے مقابلے میں یہاں موجود ہے ہم اصل میں ابھی پرواہ. 

لیکن اس سے پیچھے نہیں ہے وہاں گزشتہ ایک، نوٹس، Facebook.com سرور کہ، یقینا یہاں کہا کچھ متن ایچ ٹی ایم ایل آتا. تو اس کا کہنا ہے کہ کرنے کے لئے ہے آپ کو ایک ویب کی درخواست ہے کہ جب ایک پر ایک براؤزر سے صفحہ سرور، کہ سرور جواب اس کی اپنی ایک لفافے کے ساتھ جس کے اندر متن ہے. دوسرے الفاظ میں، ایچ ٹی ایم ایل. ہائپر ٹیکسٹ مارک اپ زبان. جس میں ایک زبان ہے ہم آج متعارف کرانے ہے کہ انسان یا کمپیوٹر کو پیدا ہے کہ ترتیب میں ویب صفحات لاگو کرنے کے لئے. 

خاص طور پر، اس کو دیکھو. اب میں واپس جا رہا ہوں فیس بک کی ویب سائٹ پر. اور میں جا رہا ہوں صرف کنٹرول پر کلک کریں یا دائیں کلک کریں اور دیکھیں صفحے کا ماخذ پر کلک کریں. اور آپ کروم استعمال نہیں کرتے یہاں تک کہ اگر، یعنی، فائر فاکس یہ کر سکتے ہیں کر سکتے ہیں، سفاری بھی مینو اگرچہ، یہ کر سکتے ہیں اختیارات تھوڑا مختلف نظر ہو سکتا ہے. یہ ایچ ٹی ایم ایل ہے کہ مارک اور فیس بک پر کمپنی لکھا ہے. 

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

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

لیکن صرف ایک لمحے کے لئے یہاں ایک کو روکنے. اس کوڈ، آپ نے یہاں تک کہ اگر اس سے پہلے کبھی نہیں لکھا لیکن اب بھی بہت سمجھ میں نہیں آتا کیا ہو رہا ہے، بہت اچھا لگ رہا. ٹھیک ہے، یہ بہت صاف ہے. یہ بہت اچھی بات ہے stylistically. پوٹ کاری اور سفید جگہ کا ایک بہت. فیس بک کی نہیں ہے. تو کیوں فیس بک اتنی زیادہ ہے ایچ ٹی ایم ایل لکھنے میں مجھ سے برا؟ بظاہر. 

ٹھیک ہے، یہ ایک طرح ہے سٹائل کے لیے پانچ میں سے. ایک مجبور کی وجہ سے ہے ان کے لئے ان کونے کونے کاٹ کرنے. ٹھیک ہے، تو وہ نہیں کرنا چاہتا یہ آسان آپ اس کو پڑھنے کے لئے بنانے. تو کچھ معنوں میں، وہ کر رہے ہیں یہ obfuscating، قسم کی یہ دوڑ دھوپ کم از کم جمالیاتی تو اس مااسپیس کے لئے مشکل ہے کہ جاؤ اور چیر ان سر ورق اور اس کے لئے ایچ ٹی ایم ایل. یہ پروگراموں کے ساتھ پتہ چلا ہے کہ کروم سمیت اگرچہ،، ہم سپر آسانی سے اس کو صاف کر سکتے. تو یہ وجہ کے طور پر کافی نہیں ہے. اور کیا وجہ سے ہو سکتا. جی ہاں. جی ہاں، سفید جگہ کے اخراجات کے اعداد و شمار. کیا مطلب ہے تمہارا؟ جی ہاں، بالکل. آپ کے ٹیب کی چابی ایک بہت یا مارا خلائی بار، مضمرات پر غور. تو اپنے کی بورڈ پر ہر کلید ایک ہے [اشراوی] ایک بائٹ کے طور پر نمائندگی. 

تو فرض کریں کہ مارک یا devs کے میں سے کسی ان دنوں صرف ایک بار اسپیس بار ہٹ یہ HTML صفحے میں اس کو فیس بک کے ہوم پیج پر کی نمائندگی کرتا ہے. اور فیس بک کے ایک بہت کچھ ہے صارفین کی ان دنوں. تو فرض کریں کہ فیس بک کے ہوم پیج آج ایک ارب لوگوں کی طرف سے دورہ کیا ہے. اور فیس بک پر کسی ہے صرف ایک بار کی جگہ بار مارا. 

تو ایک اضافی بائٹ، ایک ارب کی درخواستوں، کتنا زیادہ ڈیٹا فیس بک ہے انٹرنیٹ پر منتقل کسی مارا کیونکہ اس کا یا اس کی بورڈ پر spacebar؟ ایک ارب بائٹس، یا ایک گیگا بائٹ ڈیٹا فیس بک سرور سے بھیجا جا رہا ہے ارد گرد لوگوں کو کوئی اچھی وجہ کے لئے دنیا. اب، کہ صرف ایک جگہ ہے. 

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

لیکن آج، ہم کوڈ لکھنے شروع کر دیں گے کہ ہمیں انسانوں کی طرف سے اصل میں پڑھنے کے قابل ہے. تم واپس جاؤ تو یہ، اگرچہ، باہر کر دیتا ہے کروم میں اس آلے کے کرنے، عنصر کا معائنہ پہلے، ہم نیٹ ورک کے ٹیب پر تھے. یہ آپ کے لئے جاتے ہیں تو پتہ چلتا ہے کہ آپ اصل میں دیکھ کر کیا عناصر کے ٹیب، کروم کے خوبصورت چھپا ہوا ہے اسی ایچ ٹی ایم ایل کے ورژن. تو ہم اس deobfuscated ہے. تو یہ ایک کمپیوٹر کے لئے کوئی مقابلہ نہیں ہے. اور اب آپ اصل میں کر سکتے ہیں کے ارد گرد کلک کریں اور شروع ایک ویب کے صفحے ہے کہ تنظیمی ڈھانچے کو دیکھنے کے لئے. تو اصل میں یہ کرتے ہیں. میں آگے بڑھو اور پر کھولنے کے لئے جا رہا ہوں اپنے میک متن میں ترمیم کریں نامی ایک پروگرام. اور یہ تو صرف یہ ہے کہ یاد ایک سپر سادہ متن پروگرام. ونڈوز notepad.exe ہے. میں لفظ بہ لفظ کرنے جا رہا ہوں درج ذیل ٹائپ کریں. ڈاکٹر قسم ایچ ٹی ایم ایل، اوپن بریکٹ ایچ ٹی ایم ایل،، بریکٹ HTML بند ہم یہاں صفحے کے سر ہے یہاں صفحہ کے سربراہ کے اختتام، ایک عنوان، ہیلو دنیا کی طرح ہو جائے گا. 

اور پھر یہاں نیچے، ہمیں ضرورت ہے ویب کے صفحے کے جسم. بند جسم. اور پھر یہاں، ہیلو دنیا. بالکل ٹھیک. تو ہم نے ایک سپر روزہ ویب کے صفحے میں لکھا ہے. میں کے طور پر اس کو بچانے کے لئے جا رہا ہوں اپنے ڈیسک ٹاپ پر hello.html. اپنے میک کی، شکایت کرنے جا یہ سوچ کر کہ، ایک منٹ رکو، یہ ایک ٹیکسٹ فائل ہے، کیا آپ اسے TXT کی کال کرنا چاہتے ہیں؟ لیکن نہیں، مجھے ڈاٹ ایچ ٹی ایم ایل کا استعمال کرتے ہیں کرنا چاہتے ہیں. 

میں تو اچھا کیا ہے صرف اس فائل کو ڈبل کلک کریں، hello.html، یہاں میری ویب کے صفحے کے. بدقسمتی سے، میں ہوں دنیا میں صرف ایک شخص جو اب اس صفحے کو ملاحظہ کر سکتے ہیں. جہاں یہ بظاہر رہتا ہے کیونکہ؟ یہ میری میک پر ہے، ٹھیک ہے؟ جو بیکار ہے. اس کمرے میں کسی کی طرح انٹرنیٹ پر چھوڑ دو اصل میں اس صفحے کو ملاحظہ کر سکتے ہیں. تو آج، ہم کرنے کی ضرورت ایک اور عنصر کو متعارف کرانے. 

اور ایسا کرنے کے لئے، میں جا رہا ہوں آگے بڑھو اور کلاؤڈ 9 کھولو. تو کلاؤڈ 9 کورس کی ہے بادل کی بنیاد پر service-- CS50 IDE-- ہمارے ورک سپیسز کی تمام ہے کہیں انٹرنیٹ پر چل رہا ہے. اور یہ کہ ہمارے فائلوں کی ہے کہ تمام کا مطلب ہے پہلے ہی عوامی سطح پر قابل رسائی ہیں. تو آگے بڑھو اور اس کے کیا. میں آگے جانے کے لئے جا رہا ہوں اور ایک نئی فائل NCS50IDE پیدا. میں نے پہلے کے طور پر اس کو بچانے کے لئے جا رہا ہوں اور hello.html کے طور پر بچانے کلک. اور اب صرف وقت کو بچانے کے لئے، میں جا رہا ہوں اس کوڈ پیسٹ آگے بڑھو اور کاپی کرنے کے لئے بجائے اس ٹائپ. اور اس کو بچانے. اور اب میں ایک ہے فائل hello.html بلایا. لیکن کس طرح اصل میں مجھے کیا کرنا ہے ایک ویب کے صفحے کے طور پر کھولیں ویسے، یہ CS50 میں تعمیر باہر کر دیتا ہے IDE بجنا طرح صرف ایک سنکلک نہیں ہے اور GDB طرح ایک ٹھیک کرنے والا کھولتا اور دیگر پروگراموں کے bunches، ایک مکمل اصل میں وہاں ہے CS50 IDE کے اندر اندر چل ویب سرور. 

تم سب، کا کہنا ہے کہ کرنے کے لئے ہے، آپ کی اپنی ویب سرور ہے. اور ایک ویب سرور ایک ٹکڑا ہے جس کا مقصد زندگی میں سافٹ ویئر کی ویب صفحات کی خدمت کے لئے ہے. براؤزر کی طرف سے درخواستوں کے لئے سننے کے لئے اور تھوڑا مجازی لفافے کے ساتھ جواب جس کے اندر ہے میں نے لکھا ہے کہ مواد. لہذا اس ویب سرور ہے اصل میں مفت اور اوپن سورس. کہاں اوپن سورس صرف کا مطلب ہے کسی ہے کہ سافٹ ویئر لکھا ہم سب کر سکتے ہیں اصل میں دیکھ کر اور بھی لوڈ، اتارنا اور ماخذ کوڈ کو تبدیل. یہ اپاچی کہا جاتا ہے. 

اور ہم یہ تھوڑا آسان بنا دیا ہے اپاچی 50 بلا کی طرف سے CS50IDE میں استعمال. یہ اصل میں کر سکتے ہیں تاکہ مندرجہ ذیل کو سمجھنے. میں اپاچی 50 شروع کہنے جا رہا ہوں. اور پھر میں نے صرف ڈاٹ کہنے جا رہا ہوں. اور ہم نے کچھ حد تک دیکھیں کہہ جادو پیغام اپاچی کی دستاویز [ترتیب؟ گروپ؟] گھر میں، اوبنٹو، کہ جو کچھ بھی، کام کی جگہ سلیش. شروع ویب سرور کامیابی اپاچی 2. 

اتنی لمبی کہانی مختصر، میں صرف ایک بٹن دھکیل دیا ہے اور اب جو ایک ویب سرور پر تبدیل کر دیا TCP پورٹ انٹرنیٹ پر سننے ایک مخصوص ایڈریس پر 80. اور یہ یہاں کا کہنا ہے، اور اس کی بنیاد پر تبدیل کر دے گا اپنا صارف نام اور دوسرے عوامل پر، میں اس پر کلک کرتے ہیں تو، اب نوٹس IDE50 ڈاٹ jharvard کے اور تو اور نوٹس لہذا، یہ سب اس وقت ہے کہ گزشتہ کئی کے لئے ہفتوں، آپ ہو سکتا ہے اپنی خود کی رکنیت محسوس کیا ہے کہ اوپر دائیں ہاتھ میں سرایت کر رہا ہے CS50IDE کے کونے. 

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

اور میں ایک منصفانہ دیکھیں کہ محسوس بدسورت انڈیکس، ایک ڈائرکٹری کی لسٹنگ، لیکن کیا فائل شاید تم پر باہر چھلانگ؟ Hello.html. میں بچ کی وجہ سے ہے میرے کام کی جگہ میں فائل. اور میں اپاچی ویب سرور سے کہا ہے کیا داؤد کے کام کی جگہ ڈائریکٹری میں نظر آتے ہیں. اور میں کسی کو بھی دنیا ان فائلوں کو دیکھنے. 

اور یقینا، میں تو اب hello.html پر کلک کریں، میں بالکل اس ٹیب کہ فائل کے اندر اندر دیکھیں. کلاؤڈ 9 نے کیا، محسوس ہمارے لئے ایک چھوٹی سی مفید کچھ. CS50 IDE کے اندر اندر، وہاں کے نوٹس اچانک ایک ایڈریس بار. ہم ہو، اگرچہ اس کی وجہ سے ہے CS50IDE دورہ کرنے کروم استعمال کر رہے ہیں، CS50IDE کے اندر اپنا ہے ابھی ایک ویب براؤزر کے ورژن. اور اس کی بجائے اس طرح کے طور پر چیزوں کو پیچیدہ، میں آگے جانے کے لئے جا رہا ہوں اور صرف اس یو آر ایل کاپی. مجھے آگے اور صرف جانے کے لئے جا رہا ہوں اپنے کروم ونڈو کھولنے. تو یہاں کوئی جادو، کوئی CS50IDE ہے. میں صرف لفظی پیسٹ کرنے جا رہا ہوں میرے J ہارورڈ یو آر ایل اور درج کریں مارا. اور voila، اب میں، اور اصول میں، سب انٹرنیٹ پر، میں ترتیب دیا تو مناسب طریقے سے کی اجازت، اس فائل کو ملاحظہ کر سکتے ہیں. اور اس طرح اب میں نے کہا، تو hello.html، voila کے، وہاں میرے ناقابل یقین حد تک underwhelming کیا ویب صفحہ ہے. تو ایک فوری وویک چیک کرتے ہیں. اس کے تمام کیونکہ تصوراتی سیٹ اپ ہے. اور ہم واقعی اصل میں نہیں ہے کس طرح ایچ ٹی ایم ایل SE فی لکھنے کے لیے آپ کو سکھایا. کوئی سوال اس طرح اب تک صرف ہوا ہے پر؟ جی ہاں. CS50 ان ویب صفحات مالک ہے؟ کس معنی میں؟ اچھا سوال. تو CS50 کی CS50.io. مالک بیشک ہم نے اس ڈومین کے نام خریدا ہے. اور تم لوگ کی نوعیت کی طرف CS50IDE میں لاگ ان، تم سب کو ایک ذیلی کہا جاتا ہے حاصل. 

تو MALAN IDE50، یا IDE50-Rob.CS50.io، اس کے اندر اندر اپنے منفرد پتہ ہے اپنے ڈومین کا نام. کورس کے مقاصد کے لئے تو، آپ کو آپ کے اپنے لیے ایک منفرد ایڈریس ہے. لیکن ہم کی طرف سے چیزوں کو آسان ہے ٹاپ لیول ڈومین خریدنے، CS50 ڈاٹ I / O اور پھر ہر کسی کو ہے ہے کے اندر، تو بات کرنے کی. اور ہم اس سے واپس آ جائیں گے شاید ہفتوں کے ایک جوڑے میں، خاص طور پر حتمی منصوبے میں آپ کے وقت، جب کچھ اپنے ڈومین نام حاصل کرنے کے لئے چاہتے ہو سکتا ہے. یہ نسبتا اصل ہے براہ راست. بالکل ٹھیک. تو اب یہ کرتے ہیں. میں میں واپس جانے کے لئے جا رہا ہوں CS50IDE، جہاں میری فائل اب، hello.html، تمام دلچسپ ہے کہ نہیں ہے. میں کچھ کرنا چاہتے ہیں اس سے ایک چھوٹا سا اچھے. تو میں نے اس طرح کچھ کرنے جا رہا ہوں. کھلی paragraphs.html مجھے اندر آنے دو. تو اس میں پہلے سے لکھا ایک فائل ہے. اس کے سب سے اوپر، طرح ہمیشہ، ہم رائے ہے. لیکن ایچ ٹی ایم ایل میں، تبصرے تھوڑا مختلف نظر آتے ہیں. لائن تین اور لائن 14 پر، آپ تبصرہ شروع کرنے کے لئے نحو دیکھیں اور ایک تبصرہ ختم. 

لیکن چیزیں میں سے کوئی بھی میں فعل معاملات کے درمیان. یہ ایک کے لئے صرف ایک نوٹ ہے یہاں کیا ہو رہا ہے انسانی. اور صرف ایک فوری وویک کے طور پر میں ذیل میں سکرال تو، چیک، واضح نیا کیا ہے ہم متعارف کرایا ہے اس ٹیگ؟ ابھی تک ہم نے دیکھا ہے اس طرح ٹیگ کھلے ہیں بریکٹ ایچ ٹی ایم ایل، سر، عنوان، اور جسم. لیکن اب واضح طور پر نیا کیا ہے؟ 

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

اور اب، میں واپس جانا تو اس ڈائریکٹری کی لسٹنگ، میں آج سے ہر فائل کو دیکھنے محسوس. اور آپ میں دیکھیں گے اگلے مسئلہ سیٹ، ہم کریں گے آپ کو ہدایات دے بالکل ایسا کرنے کے لئے. میں paragraphs.html کھولتے ہیں تو، اس طاقت کے ساتھ ساتھ ایک پروگرامنگ زبان کی طرح نظر آتے ہیں آپ کو تم بولتے یا لاطینی نہیں پڑھتے تو. لیکن یہ صرف تین پیرا ہے متن کی کہ ایچ ٹی ایم ایل میں نشان لگا دیا گیا. 

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

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

آپ کو صرف ایک ہی ٹیگ کا سابقہ اس طرح ایک سیدھا سلیش کے ساتھ نام. بالکل ٹھیک. تو سب کہ دلچسپ نہیں. اور حقیقت میں، ہم کر نہیں کر رہے ہیں ویب کہ تمام زیادہ دلچسپ. کیا میں بنانا چاہتے ہیں تو بڑے اور جرات مندانہ ہے؟ تو یہ یہاں ایک مثال ہے کہ باہر کر دیتا headings.html میں، جہاں میرے جسم میں، میں نے ایک H1 ٹیگ، H2، H3 مل گیا ہے چار، پانچ، چھ، جن میں سے سب خوبصورت جادو لگتے ہیں. لیکن میں اس کو کھولنے جاتے ہیں تو مثال کے طور پر، ایک نظر ڈالیں. Headings.html. 

ڈیفالٹ کی طرف سے براؤزر دے سکتے ہیں تاکہ آپ متن ہے کہ بڑے اور مختلف سائز کے جرات مندانہ ہے. H1 بڑا ہے. H6 تو چھوٹا ہے درمیان میں سب کچھ. تو ہے کہ اب بھی دلچسپ ہے لیکن سچ میں نہیں مجھے معلوم ویب. کیا ہم کرنا چاہتے ہیں تو میں ہے ایک فہرست کی طرح کچھ. . تو یہاں سے ایک بولیٹ والی فہرست ہے ہارورڈ یونیورسٹی کے گھروں میں تین. 

آپ کو ایسا کرنے کے بارے میں کیسے جا سکتا ہے؟ ویسے، list.html پر ایک نظر ڈالیں. اور یہاں، ہم ایک دیکھیں funkiness کا تھوڑا سا لیکن کیا ہو رہا ہے پر غور کریں. تو کیا تم صرف دیکھا ہے کی بنیاد پر، الحق بے ترتیب فہرست کے لئے کھڑا ہے. بے ترتیب فہرست صرف شق مطلب. کوئی تعداد نہیں ہے. بھی ہے کچھ ایک ملاقات ٹیگ میں ایک دفتری ہے جس کی فہرست، کا حکم دیا. پھر لائٹ انفینٹری، فہرست کی اشیاء اس کا مطلب ہے. 

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

بالکل ٹھیک. تو یہ سب صرف متن ہے. اب زیادہ دلچسپ کچھ کرنا دو. میں آگے جانے کے لئے جا رہا ہوں اور یہ HTML کے کچھ قرضے لے. میں آگے جانے کے لئے جا رہا ہوں اور یہاں ایک نئی فائل بنانے کے. اور ہم نے اس rick.html فون کروں گا. ہم غیر متناسب طور پر ہے استعمال کیا جاتا ہے کچھ اس میں رک رول بلایا کلاس اس سال، مجھے پتہ نہیں ہے، یہ صرف بنیادی ہوا. 

اور اب یہ کنٹرول سے باہر ہے. تو میں صرف اس کے ساتھ جانے کے لئے جا رہا ہوں. اور میں نے گوگل پر جاتے ہیں تصاویر اور Rick Astley کی. ہم ایسا کیوں تم نہیں جانتے تو یہ صرف ویکیپیڈیا پر پڑھنے. اگر آپ لنک پر کلک کیا ہے ہر بار، کسی کو کہیں ہنس رہا ہے. اور مجھے ahead-- وہاں چلتے ہیں ہم نے اس تصویر کو دیکھنے دو، جاؤ. 

تو یہاں ہم ایک ہیں گوگل امیجز میں تصویر. اور ہم اس ہے کہ فرض کرتے ہیں معقول حد تک ہر جگہ انٹرنیٹ پر. لہذا میں نے یہ میرے لئے ٹھیک ہے فرض کرنے جا رہا ہوں اصل میں میری ویب کے صفحے میں یہ ڈال. میں آگے جانے کے لئے جا رہا ہوں اور تصویر یو آر ایل کاپی. اور اب میں کلاؤڈ پر واپس جانا تو 9، کی میں یہاں کیا کر سکتے ہیں دیکھتے ہیں. تو یہاں صرف ایک ویب صفحہ ہے. یہ ہا ہا، Rick Astley کی ہے، اب میں واپس جا رہا ہوں اپنے براؤزر میں، دوبارہ، اور دلچسپ. 

رک کہاں ہے؟ تو مجھے کیا ہوا ہے دیکھتے ہیں. اصل میں، میں جا رہا ہوں میں ایسا نہیں تھا کی طرح دکھاوا. [اشراوی] یہاں میں ڈال دیا. ہم ایک لمحے میں واپس آ جائیں گے. تو یہاں rick.html ہے. تاکہ Rick Astley کی نہیں ہے. یہ باہر کر دیتا تو ہم کر سکتے ہیں اصل میں یہاں میں شامل کریں. یہ رک Astley کی ہے. مجھے جن ایک تصویر دے کہنے جا رہا ہوں ذریعہ میں نے صرف کاپی یو آر ایل ہے، جس بظاہر ایک خوش ہے سالگرہ کچھ یا دیگر. 

اور اب میں جا رہا ہوں اس طرح ٹیگ کو بند. تو یہ سپر طویل ریپنگ ہے. لیکن میں ہے کہ نوٹس اوپن بریکٹ تصویر کیا جاتا ہے، اس کی ایک خصوصیت کے ساتھ منبع. اور یہ ایک بہت طویل یو آر ایل ہے. اور آخر میں، یہ محسوس. کیوں میں نے کیا سلیش angled ہے بریکٹ بجائے، ہر دوسرے ٹیگ کی طرح، ایک کھلی بریکٹ ہونے، IMG، بریکٹ بند؟ صرف یہاں تک کہ اگر آپ کو ایک اندازہ لے کوئی واقف ہے جو ایچ ٹی ایم ایل کے ساتھ پہلے. 

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

اگر ایسا ہے تو میں اب، اس فائل کو دوبارہ لوڈ کریں میں یہاں ایک اچھی ویب صفحے فن ہے. اور ہم یقینی طور پر کر سکتے ہیں واقعی لوگوں کو تنگ بجائے سرایت کی طرف سے ایک یو ٹیوب لنک کی طرح. اور حقیقت میں، کسی بھی وقت کیا تم نے کبھی، YouTube پر چلے گئے اور اتفاقی طور پر اصل میں مجھے دو رک یہاں اپنے رول. تو رک رول. تو رک میں یہاں جانے کے لئے جا رہا ہوں roll--. 

[موسیقی بجانے] 

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

اور صرف تو ہم ہوں، بہتر دیکھ سکتے ہیں میرے ٹیکسٹ ایڈیٹر میں پیسٹ کرنے کے لئے جا رہا. اس نوٹس کہ کیا یوٹیوب تم سے کہہ دیا گیا ہے. آپ کو ایک کا دورہ ہر وقت یوٹیوب ویڈیو، اگر آپ پر ویڈیو یمبیڈ کرنے کے لئے چاہتے ہیں آپ ویب کے صفحے، صرف اس پر قبضہ. تو یہ ابھی تک ایک اور مثال ہے HTML ٹیگ ایک iframe بلایا. یا لائن فریم میں. تو یہ بھی ایک چھوٹا سا زیادہ لگ رہا ہے تمام دوسروں کے مقابلے میں پیچیدہ. تو یہ پتہ چلا ہے کہ تصویر ٹیگ اور بظاہر iframe کے ٹیگ کہا جاتا صفات ہیں کیا لے. 

یہ ایک اور مثال ہے ایچ ٹی ایم ایل میں نحو کا ٹکڑا. ٹیگ کے پاس اس کے علاوہ نام، اوپن بریکٹ ٹیگ کا نام، آپ کو ٹیگ کے رویے کو کنٹرول کر سکتے ہیں وصف کی ایک پوری چڑھانے رکھنے کی طرف سے قیمت کے برابر. خصوصیت قدر کے برابر ہے. اور اس طرح مثال کے طور پر، یو ٹیوب ہمیں کہہ رہا ہے آپ کو اس ویڈیو کی چوڑائی چاہتے ہیں تو 420 پکسلز اور اونچائی ہونا 315 پکسلز ہونا، ہے کس طرح آپ کو ایچ ٹی ایم ایل میں اس کا اظہار. 

ویڈیو کے ذریعہ کی جا رہی ہے کہ طویل یو ٹیوب یو آر ایل ہونا اور پھر کچھ دیگر چیزیں ، فریم سرحد صفر ہے جیسے تاکہ شاید وہاں کا مطلب ہے چیز کے ارد گرد کوئی سرحد. شاید مکمل سکرین کی اجازت دیں صارف کا مطلب ہے کہ ایک بٹن پر کلک کر سکتے ہیں اور اصل میں مکمل سکرین پر ویڈیو. مجھے سچ میں ہو کرنا چاہتے ہیں تو رک ڈاٹ ایچ ٹی ایم ایل میں متاثر کن، تصویر ٹیگ استعمال کی بجائے، دو مجھے اس کو خارج کر دیں، بجائے اس چسپاں کر دیں. اور اب دوبارہ لوڈ. اور اب یہاں ہم پھر جانا. ٹھیک ہے، یہ کافی ہے. ٹھیک میں کوشش کرے گا تو مشکل دوبارہ ایسا کرنے کے لئے نہیں. تو یہاں takeaways میں سے کچھ کیا ہیں؟ ان ویب صفحات کے طور پر تو ایچ ٹی ایم ایل، کے طور پر بدسورت ہیں، واقعی بہت آسان ہے. یہ ایک پروگرامنگ زبان نہیں ہے. یہ کام کرتا ہے نہیں ہے. یہ loops کے نہیں ہے. یہ حالات نہیں ہے. یہ ہے سب سے درجنوں ہے مختلف ٹیگ، جن میں سے ہر صفر یا ایک سے زیادہ صفات ہے. اور حقیقت میں، مذاق کے بارے میں کیا ہے ایچ ٹی ایم ایل آپ میں گوتا لگا کرنے کے لئے شروع کے طور پر یہ بہت خود سکھایا ہے یہ ہے کہ. 

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

تو ہم پر بھی تصاویر کر سکتے ہیں. اور حقیقت میں، ہم ایک لمحے پہلے یہ کیا. مجھے آگے جانا ہے اور آپ کو صرف کو ظاہر کرتے ہیں. یہاں کچھ نمونے کوڈ ہے. کیا تم نے کبھی بدمزاج بلی کو دیکھنے کے لئے چاہتے ہیں تو. تو میں کر سکتے ہیں کہ محسوس کریں یہاں ایک تصویر ٹیگ. اور میں اس کے اوپر ایک تبصرہ ہے. میں ایک متبادل مل گیا ہے رسائی کے لئے متن. ایک سکرین استعمال کر رہا ہے جو کسی نظر کی وجہ سے ریڈر اصل میں تو ہو سکتا ہے ان کے سکرین ریڈر بدمزاج بلی کہتے ہیں. اگر وہ نہیں کر سکتے کیونکہ تصویر دیکھ، وہ کم از کم ان کے کمپیوٹر کر سکتے ہیں یہ زبانی طور پر کیا ہے انہیں بتانا. اور اس فائل کا ذریعہ cat.jpeg ہے. تو حقیقت میں، مجھے سچ میں کرنا چاہتے تھے تو میں کر سکتے ہیں کیا، ہوشیار حاصل done-- میں تو، Rick Astley میں جانے کے لئے نہیں وعدہ کرتا ہوں میں بجائے ایک بلی کے لئے Google کو جا رہا ہوں. اور میں نے گوگل تصاویر میں جاتے ہیں تو یہاں، اور ہم فرض کریں گے کہ اس میں میری بلی کی ایک تصویر ہے. 

میں کنٹرول کلک ہے کہ مان لیں یا دائیں اتفاقی طور پر، اس پر کلک کیا ڈراونا. اور cat.jpeg میں جا رہا ہوں اپنے ڈیسک ٹاپ پر بچانے کے لئے. اب مجھے کلاؤڈ 9 کرنے کے لئے واپس جانے دو. ، کہ میں یہاں کر سکتے ہیں نوٹس مقامی فائلوں کو اپ لوڈ کرنے کے لئے جانا. اور میں نے اس پر قبضہ تو فائل، cat.jpeg، نوٹس میں اسے کھینچ کر لائیں کر سکتے ہیں اور کلاؤڈ 9 میں چھوڑ اور یہ یہاں مجھ پر چللانا جا رہا ہے. 

ہم نے پہلے ہی ہے کیونکہ آپ کو ایک cat.jpeg فائل دی، لیکن یہ کرنے کے لئے سپر آسان ہے آپ ہے کہ ایک تصویر پر قبضہ فیس بک سے لیا فلکر یا پسند یا اور اصل میں ھیںچیں اور اسے چھوڑ پھر بادل 9 میں اور اس کے بنانے اپنی ذاتی کا حصہ ویب سائٹ یا مسئلہ ہم جلد ہی دیکھیں گے کے طور پر سات یا آٹھ مقرر. اور پھر جب آپ آخر میں ہے کہ بلی کا دورہ، مجھے لگتا ہے کہ ایک ہی بلی ڈاؤن لوڈ سنبھالنے، کہ that-- نوٹس پیارا تھا. 

کیا آپ کو دیکھ گا ہے یہاں اس کے چہرے کی طرح کچھ. فائلوں تاکہ آپ ایک ویب کے صفحے کے اندر اندر حوالہ تو آپ اپنے مقامی ہو سکتا ہے کسی دوسرے سرور پر اکاؤنٹ یا دور دراز رک کی صورت میں کے طور پر تھوڑا سا پہلے Astley کی تصویر. تو کہاں else-- ورنہ ہم یہاں کیا کر سکتے ہیں؟ تو مندرجہ ذیل میں ایک نظر ڈالیں. آپ کی طرح کے بارے میں کیا اچھا ہے پتہ ہے؟ 

ہم ابھی تک بنا دیا گیا ہے بہت مستحکم ویب صفحات. میں مندرجہ ذیل کے طور پر چیزوں کو چٹ پٹا بنانے کے لئے چاہتے ہیں. میں نے اپنے تلاش کے انجن بنانے کے لئے چاہتے ہیں. تو چلو، ایک تلاش کے انجن بنانے کے لئے آگے بڑھو اور اس کر شروع. میں آگے بڑھو اور پیدا کرنے کے لئے جا رہا ہوں ایک نئی فائل search.html بلایا. اور ہم آن لائن ورژن prefabed ہے. افوہ. آپ کے ٹرمنل ونڈو میں پیسٹ نہیں کرتے. آن لائن تیار شدہ ورژن. میں مندرجہ ذیل کے طور پر شروع کرنے کے لئے جا رہا ہوں. تو یہاں کا آغاز ہے ایک فائل search.html بلایا. میں اسے بچانے کے لئے جا رہا ہوں آج کے ذریعہ ڈائریکٹری. میں اس تلاش کو فون کرنے جا رہا ہوں. اصل میں، ہم اس کو بہتر بنانے گا. CS50 تلاش اور اصل میں برانڈ کی یہ. اور اب، میں کہنے جا رہا ہوں H1 CS50 تلاش کی طرح کچھ. اور پھر یہاں نیچے، H2 جلد ہی آرہا ہے. اور بس، H1 recap کرنے کے لئے اور H2 کیا بالترتیب مطلب ہے؟ 

جی ہاں، تو بڑے اور جرات مندانہ، اور کے طور پر بڑے، لیکن اب بھی نہیں جرات مندانہ. تو میں نے اس کو بچانے اور یہاں جانا ہے تو، کی فائل search.html دیکھتے ہیں. ٹھیک ہے، اور یہ ایک [اشراوی] right-- ہے. تیار. ڈیوڈ الجھن میں ہے. اوہ، یہ درست ہے. ڈیوڈ ایک بیوکوف ہے. ٹھیک ہے. تو وہاں ہے. تو CS50 تلاش جلد ہی آرہا ہے. تو اب، کی مرکب دو ہم نے گزشتہ ہفتے کیا کیا. 

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

اور اس ان پٹ کا نام میدان، میں نے اسے فون کرنے جا رہا ہوں سوال یہ ان پٹ فیلڈ کی قسم میں کہنے جا رہا ہوں صرف "متن" ہے. ایک متن والے فیلڈ اور، کے طور پر ہم کریں گے دیکھیں، صرف ایک ٹیکسٹ باکس ہے. اور اس طرح یہ کرنے کے لئے یہاں محسوس نہیں کرتا اس وقت اس کے اندر کچھ. اور اس میں صرف جا رہا ہوں اس کے ساتھ ٹیگ کو بند کرنے آگے ٹیگ میں ہی حق سلیش. اور پھر میں جا رہا ہوں ایک دوسرے ان پٹ ہے. ان پٹ کی قسم پیش برابر. اور پھر میں جا رہا ہوں یہ بھی بند. 

اور اب میں یہاں واپس جانے کے لئے جا رہا ہوں. اور پہلے ہی ہم دیکھتے خوبصورت بدسورت ہی سہی، میں نے کے آغاز ہے یہاں اپنے تلاش کے صفحے. اصل میں، مجھے کرنے کی کوشش کریں تھوڑا سا اس کو صاف. اس پر ہے کہ باہر کر دیتا ہے یہاں ان پٹ، میں کر سکتے ہیں پلیس ہولڈر نامی ایک اور وصف. میں مطلوبہ الفاظ کی طرح کچھ دیکھ سکتا ہے، یا اس سے زیادہ خاص طور پر، (ق) کے لئے سوال. 

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

میں نے اس کو چٹ پٹا بنانے کے لئے چاہتے ہیں. تو CS50 تلاش. میرے خود کا لوگو کی تخلیق کرتے ہیں. یہ اچھا لگ رہا ہے. تو اب مجھے اس پر آنے as-- بچانے. یہ کہاں جا رہا ہے؟ نہیں. ٹھیک ہے. فوت شدہ. ایسے محفوظ کریں. پاگل براؤزر. کی طرف سے کھڑے، ہم جا رہے ہیں اس ایک بار اور سب کے لئے طے کر. ہم وہاں جا رہے. بالکل ٹھیک. معذرت. چھٹی کا دن. اب اس funky ہے. فل سکرین سے باہر نکلیں. بالکل ٹھیک. 

اب، ایک معمول کی طرح شخص، کے طور پر تصویر کو بچانے کے. Logo.gif. اب میں CS50IDE اور میں جا رہا ہوں میں صرف علامت (لوگو) پر قبضہ کرنے جا رہا ہوں، میں میں ھیںچیں کرنے کے لئے جا رہا ہوں اپنے منبع سات ڈائریکٹری، فائل پہلے ہی میں نے اس کے ساتھ ٹھیک ہوں، موجود. تو میں نے اس کی جگہ لے لے کرنے کے لئے جا رہا ہوں میں نے پہلے ہی یہ تھا کیونکہ. اور اب میں کس طرح اس سے چھٹکارا حاصل کرتے ہیں؟ 

یہاں آگے بڑھو اور کرتے ہیں تصویر کا منبع logo.gif برابر. اس کے قریب. محفوظ کریں. اور اب میں اپنے تلاش کرنے کے لئے واپس جانا تو صفحہ، اب یہ بہت اچھا لگ رہا ہے. ٹھیک ہے، یہ نہیں ہے تو بہت مفید کچھ. اصل میں، مجھے تلاش کرنے کی کوشش کریں اور ایک بلی کے لئے دیکھتے ہیں کیا ہوتا. کیٹس. لعنت ہے. یہ صرف بظاہر، کام نہیں کرتا. تو اہم حصہ ہے کہ یہاں لاپتہ ہے؟ 

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

تو ہم نے آخری بار کیا یاد. آپ نے گوگل پر کچھ تلاش کرتے ہیں تو اور آپ کو پیشگی میں، بند کر دیا گیا ہے یاد، فوری طور پر تلاش. تو مجھے پر بند کردیں تاکہ یہ اصل ایک پرانے اسکول براؤزر کی طرح برتاؤ کرتی، اب میں بلیوں کی طرح کچھ تلاش کرتے ہیں تو، یو آر ایل کی طرح لگتا ہے یاد. یہ بہت خفیہ ہے. لیکن وہاں میں سرایت، یاد، سلیش تلاش ہے. سوالیہ نشان ق بلیوں برابر. 

اور یہ کہ مجھے دینا لگ رہے ہو گے تلاش کے نتائج کی ایک پوری چڑھانے. تو تم نے ایسا کرنے جا رہا ہوں کیا جانتے ہیں؟ کیا میں لے جا رہا ہوں صرف ایک منٹ کے لئے گوگل. میں جانے کے لئے جا رہا ہوں یہاں اور میں کہنے جا رہا ہوں اس کارروائی بناتی ہے کہ یا منزل، تو بات کرنے کی لفظی گوگل ہونا چاہئے. اور طریقہ کار میں چاہتا تھا استعمال کرنے کے لئے حاصل کیا جا کرنے کے لئے کی جا رہی ہے. 

تاکہ کارروائی کیا ہے؟ ایکشن عجیب طرح، کا نام ہے لیکن یہ صرف کا مطلب ہے کہ جو ہینڈل کرنے جا رہا ہے اس فارم کی کارروائی؟ میں تلاش، جہاں پر کلک کریں جب نتیجہ جانا چاہئے؟ اور اب مجھے اپنے طور پر واپس جانا تو یہاں اور میری ویب صفحہ کو دوبارہ لوڈ اور اب کچھ کے لئے تلاش کتے کی طرح، اب نوٹس میں نے گوگل کو لاگو کر رہے ہیں. ٹھیک ہے؟ 

میں کچھ تلاش کرنے کے لئے چاہتے ہیں، تو اور، یہ صرف کتوں کے لئے کام کرتا ہے، یہ بھی بلیوں کے لئے کام کرتا ہے. یہ بھی CS50 کے لئے کام کرتا ہے. اور ٹھیک ہے یہ صرف ہے whelming تحت، یہ نہیں ہے؟ ٹھیک ہے، لیکن یہ اصل میں کام کرتا ہے. تو اصل میں کیا چل رہا ہے؟ لہذا میں استعمال کر رہے ہیں، اپنے براؤزر سکھایا ہے ایچ ٹی ایم ایل، صارف کی طرف سے ان پٹ لینے کے لئے اور اصل میں ان پٹ بھیج ایک ریموٹ سرور پر HTTP کا استعمال کرتے ہوئے. 

اور اپنے براؤزر کی وجہ سے HTTP، یہ اصل میں سمجھتا کیا تاکہ URL کی تعمیر میں، اپنے براؤزر میں ختم ختم کیا ہوتا ہے توجہ جب میں کتے کے لئے تلاشی لی. میں تلاش پر کلک کریں، کہ محسوس میں نے ارادہ کیا کے طور پر یو آر ایل کو تبدیل استفسار کتے برابر google.com/search کرنے. اور اس فارم کی وجہ سے ہے طریقہ حاصل ہے کیونکہ، جانتا ہے، صرف وہاں کہ یو آر ایل کے لئے اسے شامل کرنے کے لئے. 

اب، ان ویب صفحات اب بھی بدسورت ہیں. تو ایک دوسرے کو متعارف کرانے نحو کا ٹکڑا آج ہم کر سکتے ہیں. اور اس نام سے جانا جاتا کچھ ہے جھرن کاری سٹائل شیٹس کے طور پر. تو مجھ پر ایک نظر ڈالیں یہاں اس مثال اور دیکھیں ہم پر کیا ہو رہا ہے اندازہ کر سکتے ہیں تو. یہ CSS0.html ہے. یہ جہاں چیز ہے تھوڑا بدسورت حاصل. ، بدقسمتی کی وجہ سے ویب کی دنیا میں، ایچ ٹی ایم ایل اکیلے سب کچھ نہیں کر سکتے. اور اس طرح آپ کرنا چاہتے ہیں تو ، آپ کی ویب صفحے stylize آپ اصل میں پر توجہ مرکوز کرنے کی ضرورت ہے ایک مختلف انداز میں جمالیات. تو یہاں، میں نے اپنے ویب کے جسم ہے جس کے اندر صفحے ایک بڑا div کی ہے. اور ایک div صرف تقسیم کا مطلب ہے. تو یہ ایک پیراگراف لیکن اس طرح ہے اسی semantics کے نہیں ہے متن کی ایک پیراگراف کے. 

یہ صرف کا مطلب ہے براؤزر، یہاں آتا ہے میری ویب کی ایک بڑی آئتاکار علاقے صفحے، میں خاص طور پر اس کو ہینڈل کرنا چاہتے ہیں. کہ div شروع ہوتا ہے جہاں اب، لائن 21 ہے. اور صرف ایک اندازہ لے. پر لائن 21 کے اثرات کیا ہے صفحے کے مواد کے باقی؟ یہ بمرکز. وہ سب ہے. تو ہم نے ایک راستے سے نہیں دیکھا ہے اصل متن بمرکز. 

اصل میں، اپنے تلاش کے انجن، اصل گوگل کے برعکس، تمام کو بائیں طرف کے جواز حاصل تھا. اور اس طرح اب لائن 21 میں، ارے، کہہ رہا ہوں براؤزر، صفحے کے ایک ڈویژن کی تخلیق. بس مجھے ایک بڑے، پوشیدہ مستطیل کرو. کہ میں چاہتا ہوں کہ کس طرح ہے ویب کے صفحے کے بارے میں سوچنا. مندرجہ ذیل کے طور پر اور پھر اس میں stylize. ان کی قیمت درج کے اندر، اب، ایک دوسری زبان ہے ہم آج متعارف کرایا کہا جاتا جھرن کاری سٹائل شیٹس. شکر ہے، یہ بھی نہیں ہے ایک پروگرامنگ زبان، تو یہ بہت اس نحو میں محدود ہے لیکن بھی بہت اس کی فعالیت میں محدود ایچ ٹی ایم ایل کے بارے میں ہے جبکہ ایک ویب کے صفحے کے اعداد و شمار کو نشان اور ایک ویب کے صفحے کی ساخت. سی ایس ایس کے بارے میں عام طور پر ہے آخری میل، جمالیات، سائز اور رنگ اور ہو رہی ہے ایک ویب کے صفحے میں بالکل صحیح جگہ کا تعین کرنے. اور یقینا، یہ قائم کیا جاتا ہے کلیدی قدر جوڑوں کے ساتھ. 

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

کاپی رائٹ نشان جان ہارورڈ. اور میں سب سے پہلے کرنا چاہتے ہیں لگتا ان لائنوں بہت بڑی ہو جائے کرنے کے لئے. 36 پکسلز. تو ہے کہ ایک مہذب سائز ہے. اور میں نے جرات مندانہ ہو اس کا وزن کرنے چاہتے تھے. لیکن اس وقت اس کے نیچے، میں چھوٹے متن چاہتے ہیں. اور اس کے نیچے، میں چاہتا ہوں یہاں تک کہ چھوٹے متن. معذرت. آج ایک چھٹی کا دن کی طرح لگتا ہے. 

تو اب، میں نے اس کا اظہار کیا کر رہا ہوں؟ یہاں 22 سطر پر سرایت ہے div یا اندر در اندر div کی، اگر آپ. یہ بھی اس کی اپنی سٹائل ٹیگ ہے. میں 36 کے فونٹ سائز کی وضاحت. میں نے جرات مندانہ کے فونٹ کا وزن کی وضاحت. یہاں نیچے، میں صرف 24 پکسلز کی وضاحت. اور آخر میں، لائن 28، میں 12 کی وضاحت. تو صرف ایک فوری وویک چیک کے طور پر اور ایک انسانی پڑھنے کے طور پر اس، سکرین پر جو الفاظ ہیں اصل میں جرات مندانہ ہونے جا رہا؟ جو لائنوں اصل جرات مندانہ ہیں؟ 

بس جان ہارورڈ. ٹھیک ہے؟ 22 لائن کا کہنا ہے کہ ارے صرف کیونکہ براؤزر، یہاں صفحے کے ایک ڈویژن ہے. یہ فونٹ سائز 36 نقطہ بنائیں. فونٹ کے وزن کو بولڈ بنائیں. جیسے ہی آپ تک پہنچنے کے طور پر اسی آخر ٹیگ یا لائن 24 پر بند ٹیگ، اس کا مطلب، ارے براؤزر، یہ آپ کیا کر رہے ہیں جو کچھ بھی کر روک. اور نوٹس، اگرچہ واضح ہونا 22 لائن ان صفات میں سے سب ہے سٹائل کی طرح، جب آپ 24 سطر میں ٹیگ کو بند، آپ کو صرف ٹیگ کا نام ذکر. 

آپ لفظ انداز نہ دہرائیں یا ان کی قیمت درج کے اندر ہے کہ کچھ. اور میں اب اس پر نظر ڈالیں تو اپنے براؤزر میں، کی ڈالیں ایک آخر نتیجہ طرف دیکھو. مجھے جانے دو آگے CSS 0 ہے جو اس فائل کو. اور یہ، خوبصورت سادہ اب بھی ہے لیکن بہت دلچسپ ہو رہی ہے. لیکن یہ بدل جاتا ہے وہاں میں یہاں کیا کر سکتے ہیں دوسری چیزوں کے، اور بنانے کے خطرے میں مکمل طور پر بینکر اس، یہاں اس میں محسوس میری میری ویب صفحے کے جسم، میں مضحکہ خیز کچھ کر سکتے ہیں BG یا پس منظر کا رنگ کی طرح. 

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

اور حقیقت میں، یہ سب نہیں ہے اپنے ویب کے برعکس ہے کہ بہت ایک انڈر گریجویٹ، کے طور پر صفحے جس میں تلاش کرنے کے لئے کے ارد گرد Googling شروع میرے پرانے ویب سائٹ کے گزشتہ ورژنز. یہ بہت برا تھا. اصل میں، میں پتہ چلا صرف کلاس سے پہلے ایک. لیکن وہاں بھی بدتر ہے. یہ بظاہر تھا میری واپس 1996 میں ہوم پیج. بظاہر میں نے سوچا تھا لوگوں کو ان کے نام سے پوچھنا مناسب وہ سے پہلے اصل میں میری ویب صفحے کو دیکھنے. 

اس وقت میں ان سے ظاہر ہوتا ہے شاید پاگل کچھ،. میں اگلے وقت کے لئے زیادہ کھودنے گا. لیکن اب کے لئے، چلو ڈیزائن کا تھوڑا سا غور کریں. ہم سٹائل کے بارے میں بات کی ہے. اس صفحہ اس طرح اب تک اور میں نے لکھا ہے سب سے زیادہ سب کچھ stylistically خوبصورت صاف ہے. لیکن ڈیزائن کے بارے میں کیا؟ ویسے، فالتوپن کے ایک بہت کچھ ہے میں یہاں کیا کر رہا ہوں کیا میں. 

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

یہ زیادہ سے زیادہ باہر کر دیتا ہے طرح C میں ہم کہاں فیکٹر شروع کر سکتے ہیں ہیڈر فائلوں میں کچھ کوڈ، تو ہم ایچ ٹی ایم ایل میں بھی ایسا ہی کر سکتے ہیں. مندرجہ ذیل کے طور پر اور اس کی طرف ایک قدم ہے. اس ورژن، CSS1.html ہے کہ نوٹس عین مطابق ایک ہی ویب صفحے ساخت. تو میں نے ایک پوری چڑھانے مل گیا ہے قابل divs کی، لیکن اس وقت، میں نے چادر سے چھٹکارا مل گیا آپ دیکھیں گے کے طور div کی. 

اور میں نے ان تین divs کے دیا ہے سب سے اوپر، مشرق، اور نیچے، منفرد شناخت. اس کی وجہ سے کی طرف سے، اچھا ہے ان ڈویژنوں دے صفحے منفرد شناخت کی، میں کہیں اور ان حوالہ کر سکتے ہیں. کہاں؟ ویسے، مجھے سکرال. اور اس طرح اب تک، کسی بھی وقت ہم نے دیکھا ہے ایک ویب کے صفحے کے سر پر، کیا ہے ہم میں پڑا ہے صرف ٹیگ ایک ویب کے صفحے کے سر؟ ایک چھوٹا سا زور. صرف عنوان اب تک. لیکن یہ بدل جاتا ہے وہاں چند دوسری چیزوں آپ، میں وہاں سے ایک ڈال کر سکتے ہیں جو اس ایک سٹائل ٹیگ کہا جاتا ہے. تو ایک لمحے پہلے، ہم نے دیکھا ایک سٹائل کا وصف میں. ایک سٹائل ٹیگ بدل جاتا ہے وہاں. اس کے اندر سے تعلق رکھتا ہے ایک ویب کے صفحے کے سربراہ. اور اب میں کیا کر رہا ہوں محسوس. میں نے اس کے اندر ہے سٹائل کے ٹیگ مندرجہ ذیل. میں لفظی لائن 20 پر ذکر کر رہا ہوں میں stylize کرنا چاہتے ہیں کہ ایک ٹیگ کا نام. 

پھر میں نے کھلی گھوبگھرالی تسمہ ہے اور گھوبگھرالی تسمہ بند. ، سی روح میں تو اسی طرح کی لیکن ایک بار پھر، یہ ایک تقریب نہیں ہے، یہاں صرف ایک syntactic تفصیل ہے. اور پھر کورس کے، میں کہہ رہا ہوں براؤزر، ارے براؤزر، صفحے کے پورے جسم بنانے مرکز کے ایک متن سیدھ ہے. اور پھر اس کے بعد کہہ رہا ہے. ارے براؤزر، آپ کو ایک ایچ ٹی ایم ایل دیکھیں تو صفحہ میں عنصر یا ٹیگ کہ ، سب سے اوپر کی ایک منفرد شناخت ہے تو ہیش کی علامت یہاں صرف کا مطلب ہے کہ سب سے اوپر کے منفرد خیال، آگے بڑھو اور اس کا فونٹ سائز بنانے کے 36 اور اس فونٹ کے وزن کو بولڈ. 

ارے براؤزر، جن ایک عنصر شناختی نمبر 24 پکسلز بنانے، وسط میں ہے. اور ہے براؤزر، آپ کو دیکھ کر تو ایک سب سے نیچے کے خیال، یہ 12 پکسلز بنانے. آخر میں اثر بالکل سیم. میں سی ایس ایس 1 میں جائیں تو، صفحہ ہی لگ رہا ہے. لیکن ہم کی طرف ایک قدم ہو ایک قدرے بہتر ڈیزائن. اب مجھے CSS2 کرنے کے لئے یہاں واپس جانے دو اور میں نے کیا ہے اور کیا دیکھنے کے. 

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

یہ ایچ ٹی ایم ایل میں طریقہ ہے براؤزر ارے کہنا، کے مندرجات جاؤ فائل css2.css بلایا. تعلقات، مجھ سے، یہ ایک سٹائل شیٹ ہے کہ ہے. اور بے شک، کہ کیا ہے میں سے ایک جھرن کاری سٹائل شیٹس ذرائع میں ایس کی. یہ ایک سٹائل شیٹ ہے. اس پر مشتمل صرف ٹیکسٹ فائل ہے جائیداد کی ایک پوری چڑھانے. سٹائل کی ایک پوری چڑھانے ہے آپ ایک ایسے صفحے پر لاگو کرنا چاہتے ہیں. 

اور اس طرح یہ بظاہر ہے ایک دوسری فائل کا حوالہ دیتے ہوئے. اور میں اس، CSS2.css کھول تو، تمام میں نے کیا ہے کہ محسوس کریں کاپی اور پیسٹ ہے سب اس فائل میں اس کے. اور اب، آپ کو کبھی نہیں یہاں تک کہ اگر پہلے یہ چیزیں کوڈت، صرف کے ساتھ غور لوکک انجینئرنگ ٹوپی پر، کیوں یہ ایک ہے شاید بہتر ڈیزائن؟ ان سی ایس ایس خصوصیات باہر فیکٹرنگ، ان کے اپنے فائل میں ڈال. اگرچہ ہم اس حل مسئلہ کی طرح پانچ منٹ پہلے بہت پہلے ورژن میں. 

ہم بہتر نہیں ہے صفحہ stylistically، یہ صرف بہتر ہے کچھ معنوں میں ڈیزائن. تم نے کیوں سوچا؟ جی ہاں. زیادہ لچک دار کے لئے کس طرح؟ جی ہاں. آپ کو جانا چاہتے ہیں تو واپس اور چیزوں کو تبدیل، اب، آپ کو ایک جگہ ہے جہاں آپ چیزوں کو تبدیل کر سکتے ہیں. اور حقیقت میں، کچھ کے لئے طرح مسئلہ، سات سیٹ ہم ایک عمل درآمد کریں گے جہاں اسٹاک ٹریڈنگ کی ویب سائٹ، کہ ایک حاصل کرنے کے لئے جا رہا ہے صفحات کے پورے گچرچھی. اور یہ واقعی میں ہو گا پریشان آپ فیصلہ کرتے ہیں تو، HM، مجھے سچ میں کرنا چاہتے ہیں، 24 پکسلز پسند نہیں کرتے 28 پکسلز یا تھوڑا سا بڑا ہونا. اور پھر ایک کرنا پڑے کو تلاش کرنے اور تبدیل عالمی یا آپ کی ویب سائٹ کی فائلوں کی سب کو کھولنے صرف اصل میں ایک قیمت کو تبدیل کرنے. ان شیلیوں باہر فیکٹرنگ کی طرف سے ایک مرکزی جگہ میں، اب آپ ایک ٹیکسٹ فائل کھول سکتے ہیں کسی بھی پروگرام میں CS50IDE میں، ، اسے تبدیل اسے بچانے کے، اور کیا. تم ان پروپیگنڈے ہے ہر جگہ تبدیلی. اور یہ کہ ایک ہی ہو گا ایک نقطہ H فائل میں کے طور پر اچھی طرح سے. تو کوئی سوال اس طرح اب تک اس نحو پر؟ ٹھیک ہے، تو ہم نے سب کچھ ایسا لگتا ہے کیا اصل میں سوائے بالا روابط پر عمل درآمد. اور تو آگے بڑھو اور اس کے کیا. مجھے آگے بڑھو اور یہاں ایک نئی فائل بنانے کے. میں نے اسے فون کرنے جا رہا ہوں link.html، آج کے کوڈ میں ڈال دیا. 

اور میں کھلی کرنے جا رہا ہوں بریکٹ دستاویز قسم HTML. ایک طرف، اس چیز کے طور پر سب سے، اس دستاویز کی قسم اعلان، یہ عجیب ہے کہ صرف ایک ہی ہے فجائیہ نقطہ کے ساتھ. آپ کو صرف وہاں ایسا کرنے کے لئے ہے اور یہ ہم ایچ ٹی ایم ایل ورژن 5 استعمال کر رہے ہیں کا مطلب ہے. کے پرانے ورژن زبان بہت زیادہ تھا آپ کی ضرورت ہے ڈور ڈال کرنے کے لئے. تو یہاں لنک نامی ایک مثال ہے. 

میں یہاں اپنے ویب کے صفحے کے ایک جسم کی ضرورت ہے. اور یہاں میں، ایک href برابر کی HTTP://www.disney.com کہنے دو اور میرا پسندیدہ ویب سائٹ، ہم کہیں گے. ٹھیک ہے، تو ایک بہت معصوم، صارف دوستانہ صفحہ. اب میں اپنے ڈائریکٹری میں جاتے ہیں یہاں لسٹنگ اور link.html کو کھولنے، ہم ہائپر متن ہے. 

اور یقینا، یہ کہاں ہے HTTP میں H سے آتا ہے. ہایپر ٹیکسٹ ٹرانسفر پروٹوکول ٹیکسٹ منتقلی کے بارے میں ہے کہ دیگر وسائل پر بالا روابط ہے. اور یقینا، یہاں، واقف ہے ریٹرو تو، نیلے لنک پر کلک کیا ہے کہ، اصل Disney.com مجھ سے کی قیادت کریں گے. اب، اوہ، کہ جلد ہی باہر آ رہا ہے. ٹھیک ہے، تو اب کیا کچھ اس کے مضمرات سے؟ 

اور واضح طور سے، دنیا کے شروع ہوتا ہے ایک چھوٹا سا زیادہ واقف حاصل کرنے کے اور یہ بھی ایک چھوٹا سا scarier کے لیکن یہ بھی ایک چھوٹا سا زیادہ آپ کو شروع کرنے میں ایک بار خود دفاع ان چیزوں کو سمجھنے کے لئے. مشکلات، تم میں سے بعض، تم جاؤ تو ہیں اپنے Gmail سپیم فولڈر کے ذریعے یا اس سے بھی آپ کے ان باکس، آپ کو شاید ہے ای میل کے کچھ قسم کی ہو اس کو تبدیل کرنے کے لئے آپ پوچھ رہا آپ پاس ورڈ شاید یا شاید تصدیق آپ پے پال کی اسناد یا whatnot. 

اور حقیقت میں، آپ کو موصول ہوئی ہے ہو سکتا ہے یہاں کلک کریں کی طرح کا کہنا ہے کہ کچھ آپ پے پال پاس ورڈ دوبارہ ترتیب دینے کی. اور اب، اگر، نوٹس اس Disney.com نہیں ہے لیکن طرح badplace.com اور ، دوبارہ لوڈ کریں یاد رکھیں کہ یہاں متن جو کچھ کہہ سکتے ہیں. اور حقیقت میں، یہ صرف الفاظ. کیوں میں نے اصل میں سپر بدنیتی پر مبنی نہ ہو اور http://www.paypal.com کہنا. 

آپ پے پال کی ری سیٹ یہاں کلک کریں پاس ورڈ اور اب دوبارہ لوڈ. یہ درست، خوبصورت جائز لگ رہا ہے؟ میں پر کلک نہیں کریں گے، مطلب صرف اس کا کہنا ہے کہ ایک ای میل. لیکن وجود میں ائی یہاں نوٹس. یہ www.paypal.com کا کہنا ہے کہ، اور حقیقت میں، ایک منٹ رکو، ہم آپ چاہتے ہیں جانتے ہیں کہ حفاظت کے لئے کی. تو اب، www.paypal.com HTTPS پر جانا، لیکن تم سے پہلے یہ کیا کبھی نہیں کیا ہے تو، کی عادت میں حاصل کرتے ہیں یہاں تھوڑا روابط پر ہوور. اور یہ دیکھنے کے لئے مشکل ہے وہاں کی سکرین پر، اور یہ یہاں نہیں ہے کہ تمام آسان ہے. لیکن جس طرح یہاں نیچے میں چھوٹی سی کونے اصل براؤزر کرتا ہے ہم جا رہے ہیں کہ آپ کو بتا بجائے Paypal.com کے badplace.com کرنے. اب، ہم کہاں اس کے ساتھ جا رہے ہیں؟ ہم آج کیا ہے تمام مثالیں، ہم مشکل کوڈت اور دستی طور پر باہر ٹائپ ہے. ویب ناقابل یقین حد تک ہے پر uninteresting جب آپ کو مشکل اس مواد تو اپنے ویب صفحات کوڈ جامد اور کبھی نہیں تبدیل کر رہا ہے. کے کورس، ہمارے تمام پسندیدہ ویب سائٹس آج، یہ Gmail یا ٹویٹر یا چاہے فیس بک یا دوسروں کی کسی بھی تعداد متحرک ہیں. وہ میں تبدیل کر رہے ہیں صارف کی ان پٹ کے جواب صرف گوگل کے تلاش کے نتائج. 

اور اس نے بدھ کے روز، ہم کیا ہے ہم HTML اور CSS تعارف چھوڑ ہم لے اور ہمارے پیچھے اب ہم اس لئے حاصل کی جاچکی یہ جانتے ہیں اور ہم کو متعارف کرانے ایک نئی پروگرامنگ زبان کی طرح ہے جس بلایا پی ایچ پی، سی، ہمیں دینے کے لئے کی جا رہی ہے اصل پروگرام پیدا کرنے کی طاقت خود اس کی پیداوار پیدا. اس صورت میں، ہم استعمال کریں گے پی ایچ پی کو متحرک طور پر پیدا کرنے کے لئے ویب اس نئی زبان استعمال کرتے ہوئے صفحات. بدھ کے روز اس پر تو زیادہ. پھر آپ دیکھیں. 

[موسیقی بجانے]