[عزف الموسيقى] DAVID J مالان: حسنا، مرحبا بكم إلى الوراء. هذا هو CS50. هذا هو نهاية الأسبوع السبعة. وانها نهاية ذلك زبال مطاردة من مشكلة تعيين أربعة التي قد تذكر. بعد تعافيه من جميع تلك صور JPEG من الموظفين، كنت قد تحدى، إذا كنت ترغب، لتصوير نفسك مع أكبر عدد ممكن من هؤلاء الناس ما تستطيع. وصلنا في مجمله مجموعة من المذكرات على مدى الأسابيع القليلة الماضية، في الواقع، عدد قليل جدا الحق قبل الظهر اليوم، والبعض منها هي تلك هنا، اشتعلت هنا in-- يبدو like-- أننبرغ قاعة في ساعات العمل، واحدة هنا لويل في البيت مع نيك. هنا هو رامون الوقوع على الهاتف. كان هذا في مأدبة غداء CS50. كان هذا جيسون Skyping مع زميل أكثر إبداعا، الذي اتصل به بهذه الطريقة. نحن لا نعرف ما هو هذا. [ضحك] DAVID J مالان: ولكن أن يستحق جيجابايت. هنا هو تشانغ، الذي ركض حرفيا قبالة المرحلة لتجنب تصويرهم واحد اليوم، ولكن ألقي القبض عليه في نهاية المطاف. هنا هو نيك. هنا هو نيك. هنا هو نيك. وهنا أليسون بنسبة الحقول. وZamyla حتى وجد في مسابقة رقص. ولذا فإننا سوف تذهب من خلال هذه الصور ومعرفة الذي قدم أكثر أقرب، ومكافأة الجائزة الرائعة واحد، كما وعد في المواصفات. وسنقوم أيضا متابعة حول المساحة التي كان متورطا. زوجان من announcements-- الغداء حتى هو، مرة أخرى، يوم الجمعة في 1:15 AM. إذا كنت ترغب في الانضمام إلينا، أجبني في ذلك URL هنا. جيسون يظهر مرة أخرى هنا من واحد الأقسام بضع سنوات إلى الوراء، وهذا ما حدث أن يسقط على هالوين. وبالفعل، كان يرتدي زي اليقطين تلك السنة بالذات. إذا كنت مشاهدة هذا القسم له من 2011 مقطع ثمانية، إذا كنت غريبة، في CS50.tv، وأعتقد أن كان هذا العام الذي وكان له مضخة الهواء تعمل. إذا كنت ثم مشاهدة قسم مماثل في عام 2012، سترى هذه جيسون قلصت كثيرا، منذ الدعوى لم تعد تعمل، الذي لا يبعد سوى القول يوم الجمعة، إذا كنت أحب لنحت اليقطين مع Daven وغابي وغيرها، أجبني إلى رؤساء في عنوان cs50.harvard.edu. ما تعد به متعة كبيرة. Daven، يقال لنا، ومنحوتة اليقطينة كل حياته. جبرائيل من البرازيل لديها أبدا منحوتة من اليقطين لجميع القديسين. حتى يكون هناك معهم كما انه يتعلم. الندوات وmeanwhile-- لذلك عليك أن تتعلم قريبا ما هي توقعاتنا ل المشروع النهائي، والتي في جوهرها سوف تختزل ل تصميم وتنفيذ أكثر من أي مشروع من تهم لك، وإن كان رهنا بموافقة والتوجيه من زميل التدريس الخاص. نحو نهاية فصل دراسي، ونحن نقدم عددا الحلقات الدراسية والتي هي دروس اختيارية بقيادة زملاء التدريس وهارفارد الموظفين والأصدقاء من جميع أنحاء بالطبع الحرم الجامعي، في مختلف الموضوعات التي هي عرضية ل المنهج الأساسي بالطبع ل ولكن مع ذلك منطبقا، والمرح، و تختلف عن المشاريع النهائية المحتملة. على سبيل المثال، أولا، إذا كنت ترغب للتسجيل، توجه إلى هذا العنوان هناك. وهذه هي تشكيلة ل ندوات هذا العام وحده. ولكن ندرك لدينا العشرات من حلقات من السنوات الماضية، وكلها ترتبط في القائمة الندوات الخيار من موقع الدورة على. حتى إذا كنت تفكر في تجاوز منطقة الراحة الخاصة بك أو التقاط بعض المهارات الجديدة، على سبيل المثال، البرمجة فون التطبيقات مع سويفت، وهي لغة جديدة من أبل أو الهدف جيم أو أندرويد أو تطبيقات البرمجة [؟ جديلة؟] المصابيح الكهربائية، أو أي من المواضيع هنا وأكثر، والاختيار المناسب من صفحة التسجيل. هكذا بدأنا واختتمت يوم الاثنين مع النظر إلى HTTP. حتى HTTP refresher-- سريع، بروتوكول نقل النص التشعبي. ولكن ماذا يعني ذلك حقا؟ ماذا يعني ذلك حقا؟ هو أن اليد؟ وأنا أعلم أنك كنت مجرد الخدش رأسك. ولكنك تريد أن تقترح ما هو HTTP؟ الجمهور: كيف أجهزة الكمبيوتر التواصل مع (غير مسموع). DAVID J مالان: فاتني الجزء الأخير. كيفية اتصال أجهزة الكمبيوتر with-- خوادم الإنترنت: الجمهور. DAVID J مالان: Good-- مع الإنترنت خوادم، وعلى وجه التحديد، خوادم الويب. لأن الاستدعاء، وهناك مجموعة من خدمات على الانترنت، وبعضها ربما كنت تستخدم يوميا بين دردشة ورسالة، والدردشة، وشبكة الإنترنت، والبريد الإلكتروني، و وما شابه ذلك. وHTTP هو مجرد بروتوكول متصفحات الويب الكلام عند الاتصال مع خوادم الويب، والعكس بالعكس. والتناظرية في العالم البشري قد يكون، أنا أمد يدي لزعزعة بعض البعض البشري وانه أو انها وتقر من خلال توسيع له أو لها اليد أيضا. ذلك أن مجرد بروتوكول، مجموعة من الاتفاقيات. وبالفعل ما هي تلك الاتفاقيات؟ حسنا، انها مجرد الدمامل وصولا الى إرسال رسائل ذهابا وإيابا، ونحن مبين هنا. وهناك بضعة طرق في والتي من الممكن أن ترسل هذه الرسائل. وربما كان الأكثر ومن المعروف شيوعا مثل GET. وسنرى تباين لهذا قبل فترة طويلة. ولكن طلب GET من مستعرض إلى خادم يبدو تماما مثل هذا. انها مجموعة من النص أنه يضع داخل مظروف الظاهري. على السطح الخارجي للأن الظرف تقطع قطع زوجين من التفاصيل. ما يجب أن يذهب على المغلف، إذا جاز التعبير، من أجل الحصول على مثل هذا الطلب هذا مني لخادم الويب؟ نعم. الجمهور: عنوان IP الخاص بك. DAVID J مالان: عنوان IP الخاص بي في الحقل، إذا جاز التعبير، وبطبيعة الحال، عنوان IP المستلم. ولكن في حالة وجود حزمة على شبكة الإنترنت، نحتاج بشيء من التفصيل انها ليست كافية فقط ل إرسال مغلف إلى ملقم، لأنه قد يكون هذا الخادم الاستماع لأنواع مختلفة من حركة المرور على الإنترنت. لذلك ماذا نحتاج إلى جانب IP المستلم؟ نعم؟ الجمهور: هل من برنامج التعاون الفني؟ DAVID J مالان: جيد. TCP-- الجمهور: العناوين. DAVID J مالان: عنوان، أو منفذ، كما يطلق عليه. وثيق، ولكن رقم منفذ TCP. وهناك مجموعة من هؤلاء. ولكن من المؤكد أن معظم مألوفة ينبغي في نهاية المطاف يكون 80، والذي هو الافتراضي واحدة تستخدم لحركة المرور على الشبكة. ومألوفة أخرى واحد قريبا سيكون 443، الذي يستخدم لتأمين الويب حركة المرور، وعناوين المواقع التي تبدأ ب https. لذلك هذا هو ما يدور داخل ذلك الظرف. والحصول على / فقط يعني، وإعطاء لي صفحة الويب الافتراضية. تعطيني جذر الصعب القيادة على أن خادم الويب. ونأمل، وشبكة الإنترنت الخادم سترد، OK ورقم 200، الذي هو مجرد اتفاقية القول، نعم، كل هو في الواقع موافق. وهنا الصفحة. نوع صفحة ويب سوف يكون النص، ولكن بشكل أكثر تحديدا، HTML، ونحن على وشك الغوص مرة أخرى في. ونقطة نقطة نقطة فقط الوسائل، وهنا هو HTML. وذلك حيث أننا تلتقط القصة اليوم، الكتابة فعلا HTML، لغة توصيف النص التشعبي، والذي هي اللغة التي تتم كتابة صفحات الويب. انها ليست لغة برمجة. لا يوجد وظائف أو حلقات أو شروط. انها لغة الترميز، كذلك نرى مرة أخرى اليوم، التي تسمح لك بتحديد كيفية هيكلة وأسلب جماليا صفحة على شبكة الإنترنت. لذلك كان هذا واحد والصفحة الوحيدة التي يمكننا حقا نظرت، إذا لفترة وجيزة يوم الاثنين. ولاحظ عدد قليل الخصائص البارزة. هناك الكثير من الزاوية المفتوحة قوس وإغلاق قوس الزاوية. في تلك الزاوية بين بين قوسين هي الكلمات. ونحن في طريقنا للبدء داعيا تلك الكلمات العلامات. رئيس قوس مفتوح حتى ورئيس قوس مغلق هي علامات المفتوحة والمغلقة، أو علامات البداية والنهاية على التوالي، عنصر HTML، ونحن سوف يطلق عليه، دعا رئيس. وتنطبق نفس المصطلحات لجسم في HTML وهكذا دواليك. وما هو الجميل هو HTML-- والواقع، سنقوم يقضون وقتا قليلا رهيب على ذلك، لأنك في الغالب مجرد معرفة ما هي الميزات له عند فعلا مشكلة ملموسة لsolve-- ستجد أن المتصفح هو غبية جدا. انها مجرد الذهاب الى do-- لا تختلف وcomputer-- ما كنت أقول أن تفعله. وحتى عندما يكون لديك مفتوحة قوس HTML في أعلى جدا هناك، والتي في جوهرها فقط يعني، مهلا، المتصفح، هنا يأتي صفحة ويب مكتوب بلغة HTML. عندما ترى قوس مفتوح الرأس، وهذا يعني فقط، مهلا، ومتصفح، وهنا يأتي الرأس، أو والعلوي جزء من صفحة الويب الخاصة بي. عندما يرى قوس مغلق الرأس، وهذا يعني فقط، مهلا، هذا كل شيء على الرأس. الاستعداد لشيء آخر. وشيء آخر هو على ما يبدو سيكون الجسم. وعندما لم يكن لديك بطاقة، مثل لديك فقط مرحبا، فاصلة، العالم، أن مجرد سيكون النص الخام التي يتم عرضه في نهاية المطاف في الشاشة. الآن، ستلاحظ أيضا المسافة البادئة هنا. ربما يمكنك استنتاج كيف نقوم stylizing ذلك. في كل مرة أقوم بفتح علامة، إذا جاز التعبير، وأنا بمحاذاة أطراف. وفي كل مرة أغمض علامة، وأنا من الامم المتحدة والمسافة البادئة، مماثلة في الروح إلى الأقواس المعقوفة. وأبعد من ذلك، انا من النوع استخدام رأيي. لاحظ أن لم أكن عناء ضرب يدخل داخل تلك علامة العنوان. لماذا؟ حسنا، أنا فقط قررت بدا و أنظف قليلا بالنسبة لي، والإنسان، ليست مجرد عناء القيام بذلك. ذلك مرة أخرى، هناك بعض الحكم يدعو فقط كما يوجد في C أو أي لغة. لكن لاحظ أيضا أن هذه المسافة البادئة يفسح المجال لنموذج عقلي، عدم الإفراط تعقيد ذلك. ولكن شجرة، أليس كذلك؟ إذا كنت تعتقد أن لشبكة الإنترنت صفحة، وكتب على ما يبدو مثل هذا، كما يجري بادئة طيف بهذه الطريقة، يمكن ان يخطر لك تقريبا من قوس مفتوح HTML علامة قوس مغلقة وبترسيم جذر عقدة، شجرة العائلة عقدة النمط في النمط من الأشجار ونحن ننظر في يوم الجمعة الماضي. والواقع، لدينا على حق هنا ما سنقوم استدعاء DOM، D-O-M، وثيقة نموذج كائن، وهي طريقة أخرى للقول شجرة تمثل ذلك HTML. وتلاحظ أن لديه HTML، فإننا سوف أقول، مثل شجرة عائلة، طفلان. على اليسار هو الرأس. على اليمين هو الجسم. ومثلما الفكر ممارسة الطائش، الرأس، وبطبيعة الحال، لديه عدد الأطفال وفقا لهذا الهيكل؟ حتى واحد فقط، title-- وهذا هو السبب لدينا السهم الذهاب من الرأس إلى اللقب. لذلك كما لو أن الشخص في كانت شجرة العائلة ذرية واحدة فقط. ثم لقب نفسه يمكن أن يقال لإنجاب طفل أيضا. نذكر بأن HTML لها مرحبا، فاصلة، العالم تحته. ولقد لفت ببساطة داخل البيضاوي بدلا من المستطيل فقط لنقل غويا أنه على الرغم من انها عقدة في شجرة، إذا جاز التعبير، انها نوع من اختلافا جذريا. انها ليست علامة. أو أكثر بشكل صحيح، انها ليست عنصرا. انها مجرد عقدة النص، اذا صح التعبير. ولكن هذه هي تماما الاتفاقيات الإنسان التعسفية. هذا هو الآن فقط طريقتي في تمثل ما سوف أكون باعتبارها مجموع استدعاء الوثيقة. وبوصفها جانبا، والشيء في السوبر أعلى الزاوية اليسرى، قوس مفتوح تعجب ثيقة نوع HTML، وهذا يبدو وكأنه علامة، ولكن هذا هو الحال الزاوية غبية حيث هذا هو فقط هناك، نسخ ولصق للإشارة المتصفحات هذا هو نسخة HTML 5. العالم يحتفظ تغيير ما يجب أن يكون السطر الأول من التعليمات البرمجية في الصفحة. هذا يعني فقط الإصدار 5. لذلك لا ليس تماما تبدو مثل الآخرين. كل الحق، حتى مع أن قال: عليك أن نقدر الآن هذا إلى حد ما هذا الغباء حصلت على وشم شخص. [ضحك] DAVID J مالان: حسنا، والآن دعونا فعلا الغوص إلى القيام بشيء مع هذا. عليك أن تتذكر أن آخر مرة أنا فتحت الأجهزة CS50 وكما فعلت شيئا البساطة الانفتاح جي إديت. وأنا بحفظ الملف حتى على بلدي desktop-- مكان special-- كما hello.html. لذلك اسمحوا لي أن تفعل ذلك again-- hello.html أدخل. والآن في هذا الملف، وانا ذاهب ل المضي قدما وتكرار ما كنا فقط saw-- ثيقة نوع HTML ثم انا ذاهب الى القيام HTML قوس قوس مفتوح مغلق. ثم انا ذاهب الى استباقي فتح وإغلاق علامة. لماذا؟ فقط حتى لا ننسى في وقت لاحق. انها ممارسة جيدة فقط، مثل افتتاح وإغلاق الأقواس المعقوفة في كل مرة. ثم ما جاء بعد ذلك؟ يمكنك التفكير في الوشم. الجمهور: الرأس. DAVID J مالان: الرأس. ثم هنا، وأنا كان العنوان، على ما أعتقد. وكان عنوان تعسفا، مرحبا، عنوان وثيق العالم. ثم إلى هنا، الجسم، ل course-- ثم نغلق العلامة الجسم. وبعد ذلك فقط بوفرة إلى حد ما، كان لي نفس الشيء هنا في الأسفل. لذلك أزعم أن هذا هو صفحة ويب. هذا هو الشيء الذي يمكن أن يعيش الآن على شبكة الإنترنت، على الرغم من وبطبيعة الحال، انها حرفيا الذين يعيشون على سطح المكتب الآن. ولكن في الواقع، إذا كنت التقليل جي إديت، سوف ترى على مكتبي الرمز الخاص به. على الرغم من هذا الجهاز، هل يمكن القيام بذلك على نظام التشغيل Mac OS بدون برنامج TextEdit أو نوافذ مع المفكرة حتى. وإذا كنت المضي قدما وانقر مرتين حتى أن وselect-- جيدا، دعنا يتم تحديد ذلك ل الكروم ليس فتح. دعونا نمضي قدما وفتح كروم. ثم نفذ الأوامر يا لمفتوحا وانتقل إلى سطح المكتب وفتح هذا الملف. هذه هي الطريقة التي يفسر متصفح HTML، الأعلى إلى الأسفل، من اليسار إلى اليمين. مهلا، هنا متصفح HTML. وهنا الرأس. وهنا العنوان. وهنا الجسم. وبالفعل، هذه هي الطريقة ذلك أن يجعل صفحة الويب. لكن لاحظ عنوان URL. لا أحد منكم يمكن سحب ما يصل هذا تحديدا صفحة على أجهزة الكمبيوتر المحمول الخاص بك الآن، حتى داخل الخاص بك الأجهزة عبر هذا العنوان، لأن ملف: // يشير انها فعلا في نظام الملفات الخاص بي، والقرص الصلب بلدي، ليس لك. لذلك هذا ليس كل ما مفيد. دعونا الآن التحرك نحو باستخدام ملقم ويب الفعلي. واتضح من الأجهزة CS50 هو أكثر من مجرد بيئة حيث يمكنك كتابة التعليمات البرمجية C و ترجمة وتشغيله وكأنك لم تفعل. كما أنه قد تم تكوينها من قبل الموظفين لتمثيل نموذجي على شبكة الإنترنت خادم على شبكة الإنترنت، واحد التي قد تدفع ل أو واحدة هذا في ما يسمى السحابة. وانها تعمل معيار حر مفتوح المصدر برنامج، على سبيل المثال، شيء دعا أباتشي، والتي هي ربما لا يزال الأكثر شعبية على شبكة الإنترنت برنامج الخادم في العالم إن الآلاف من المواقع تستخدم اليوم. وأيضا لديها حتى البرمجيات مثل الخلية، وهو خادم قاعدة البيانات أننا سنصل في النهاية إلى، الذي لا يبعد سوى القول يمكنني بدء علاج الأجهزة بلدي كخادم متكامل أنني لا تدفع في مكان آخر. أنه يعيش فقط على جهاز الكمبيوتر المحمول الخاص ل أغراض التنمية والراحة. لذلك دعونا نمضي قدما و الاستفادة من هذا. انا ذاهب الى المضي قدما و فتح نافذة الصالة. وانا ذاهب الى المضي قدما و move-- في الواقع، أولا أنا الذهاب للانتقال إلى سطح المكتب. إذا كنت تفعل ليرة سورية، هناك hello.html. وانا ذاهب الى الذهاب وقبل البدء في استخدام دليل جديد قمنا لم تستخدم من قبل اليوم. hello.html-- انا ذاهب الى التحرك ل../vhosts لhosts-- الظاهري أكثر على ذلك في future-- ثم في دليل يسمى المضيف المحلي، وهو الاسم الذي يطلق على ما يقرب من أي جهاز كمبيوتر، سواء كان جهاز ماكنتوش، وأجهزة الكمبيوتر، أو كمبيوتر لينكس، ومن ثم على وجه التحديد إلى دليل على أننا، الموظفين خلقت بالفعل بالنسبة لك عندما قمت بتحميل الأجهزة يسمى جمهور. وكما يوحي اسمها، أي شيء أنا وضعت في هذا المجلد، من الناحية النظرية، ستكون الآن الجمهور، على الأقل إلى الناس الذين لديهم مباشرة اتصال إلى جهاز الكمبيوتر الخاص بي. وحتى الآن اسمحوا لي أن تمضي قدما و قيام مؤتمر نزع السلاح إلى هذا الدليل نفسه حتى أستطيع أن أرى ما يجري ونوع ليرة سورية. وبالفعل، وهذا هو الشيء الوحيد هناك. أزعم الآن أن لأنني وضعت هذا ملف hello.html داخل دليل ودعا الجمهور من داخل دليل دعا المضيف المحلي داخل دليل دعا vhosts، التي بفضل الموظفين CS50 تم تهيئتها قبل أن يكون جذر خادم الويب الخاص بك، يمكنني الآن نأمل القيام بذلك. انا ذاهب لفتح علامة تبويب جديدة. وانا ذاهب للذهاب ليس إلى الملف: //. انا ذاهب الى الاستخدام الفعلي HTTP / المضيف المحلي، الذي مرة أخرى، هو الاسم المستعار لخدمة بلدي. ثم انا ذاهب الى الذهاب الى ما اسم ملف، لمجرد أن يكون واضحا؟ حيث هذه القصة ربما ذاهب؟ hello.html. لذلك وبعبارة أخرى، أريد أن الآن هذا هو جهاز الكمبيوتر الخاص بي، يا الأجهزة الخاصة، كما لو انها خادم الفعلي. وLOCALHOST كنية لها. ولكن اعتقد من المضيف المحلي كما مثل Facebook.com google.com، أيا كان. انها مجرد اسمي المحلي. ومن ثم المباراة النهائية أريده هو في الجذر من القرص الصلب، إذا جاز التعبير، أو جذر خادم الويب، إرجو مائلة للأمام ثم اسم الملف hello.html. اسمحوا لي تصغير وهاهنا. وبالفعل، هناك الآن صفحة الويب الخاصة بي. حتى انها مختلفة قليلا. وانها مثلما مخيب. هذه هي النسخة القديمة. اسمحوا لي أن يتقلص الخط الخلفي. هذا هو القديم. هذا هو الجديد. ولكن ما يحدث في الأساس الآن هو أن HTTP يتم استخدامه. دعونا جعل هذا قليلا أكثر وضوحا أو، اذا صح التعبير، قليلا أكثر تعقيدا. اسمحوا لي أن انتقل إلى أسفل اليمين الزاوية يد الأجهزة بلدي. وتلاحظ أن جميع هذه الوقت، كان هناك عددا. هذا هو عنوان فريد من الأجهزة CS50 الخاص بك. انها عنوان الخاص، كما ضمنية من قبل 172.16، وهو ما يعني فقط أنت فقط جسديا يمكن الوصول إلى خادم الويب هذا. وجدار ناري كل شيء و محمية بشكل جيد من الراحة من العالم بسبب هذا التصدي. والآن نلاحظ على الرغم اذا ذهبت الى هذا العنوان، وليس في الأجهزة الخاصة بي، ولكن في ماك OS-- سأشارك أن أعود إلى هنا. هذا هو بلدي ماك الآن. والآن انا ذاهب لفتح هذا الإصدار من كروم هنا. وانا ذاهب للذهاب إلى http: //172.16.25 / وأنسى rest-- 133. لذلك أنا ذاهب لزيارة بلدي من ماك إن عنوان IP /hello.html أدخل. والآن أرى من وجهة نظري ماك أن بلدي الأجهزة CS50، الذي هو عنوان IP هو أن العدد، تتصرف في الواقع مثل الخادم على شبكة الانترنت على شبكة الإنترنت. لم يكن لديك لطيفة سهلة ل تذكر اسم مثل Facebook.com، لكنها باستخدام HTTP على ما يبدو، على الرغم من كروم هو نوع من تبسيط العالم بالنسبة لنا ولكن لا يظهر لنا HTTP. ولكن هذا هو الواقع بالضبط. الكروم هو مجرد توفير بعض المفاتيح هذه الأيام. وهذا ما نراه الآن. ذلك أن كل شيء على ما يرام وجيدة. ولكن من صفحة مخيب جدا. اسمحوا لي أن أذهب في وتفعل شيئا مختلفة قليلا الآن. لذلك اسمحوا لي أن أعود إلى جي إديت. وبدلا من الترحيب، العالم، دعونا نضع صورة. وأنا ادعى من before-- اسمحوا لي ان اذهب في بلدي دليل الجمهور المضيف المحلي. واسمحوا لي أن تمضي قدما ونسخ مجموعة كاملة من الملفات من اليوم من مجلد دروببوإكس بلدي إلى هنا. الآن إذا كنت اكتب ليرة سورية، والبحث في كل هذه الملفات التي كنت وزعتها موقع بالطبع في وقت مبكر من اليوم، واحد منها لا يزال hello.html. حتى أن هناك واحد. وأذكر هذا واحد سخيف من الماضي cat.jpg time--. لذلك اسمحوا لي في محاولة لتضمين cat.jpg داخل صفحة الويب الخاصة بي. انا ذاهب الى المضي قدما والقيام cat.jpg، حفظ. اسمحوا لي أن أعود إلى كروم. واسمحوا لي أن التكبير في الخط وتحميل الآن. عفوا، أين أضع هذا؟ Standby-- لا يزال لدي القديم نسخة مفتوحة من بلدي سطح المكتب. لذلك اسمحوا لي ان اذهب الى بلدي عشقتك يا المضيف المحلي، يا جمهور، وhello.html. وحتى الآن اسمحوا لي أن تمضي قدما و يقول cat.jpg داخل الجسم حيث أريد لها أن تكون عرض وإعادة تحميل. بالطبع، هذا ليس صحيحا. لذلك أنا بحاجة لتخبر المتصفح قليلا أكثر عمدا ما أريد القيام به. ببساطة كتابة الاسم من الواضح أنه لا يكفي. لذلك أذكر أنه كان هناك آخر العلامة، الصورة، IMG قصيرة. ذلك لأن البشر فقط لا أحب الكلمات نوع كاملة. ومن ثم يمكننا القيام به مصدر = "cat.jpg". والآن انا ذاهب الى القيام به شيء واحد مختلف هنا. على الرغم من كل علامات لدينا حتى الآن كانت هذه فكرة تبدأ علامة وعلامة نهاية، هذا لا يجعل حقا شعور لصورة، أليس كذلك؟ صورة إما هناك أو لم يكن هناك. وهكذا فقد حان البشر حتى مع أبسط الاتفاقية. عندما يكون لديك علامة من شأنهما تبدأ وتنتهي في نفس time-- يمكن أن يكون فارغا، لذلك لspeak-- فقط وضع مائل إلى الأمام داخل علامة في النهاية. والآن اسمحوا لي أن أعود إلى متصفحي. ضرب تحديث اللعنة، ما هو الخطأ. ربما كنت قد رأيت هذا في بعض الأحيان على شبكة الإنترنت، حتى لو انه لم يكن خطأك. انها خطأ خادم الإنترنت. ما قصائد هذا يبدو للإشارة إلى؟ انها مكسورة. هذا هو المكان الذي تنتمي إليه الصورة. نعم؟ الجمهور: لكنه لا الحصول على الصورة. DAVID J مالان: لا الحصول على الصورة. ذلك، أو أسوأ من ذلك، ربما بل لا وجود لها. دعونا نرى ما اذا كنا لا يمكن تشخيص ذلك. أذكر آخر مرة من أنه إذا في كروم، في الجهاز، أو حتى على جهاز Mac أو PC، تذهب إلى القائمة المطور والذهاب إلى أدوات المطور الخيار، والتي ربما كنت قد لا تستخدم كثيرا أو من أي وقت مضى. وإذا ذهبت إلى اتصالات شبكة وإعادة تحميل الصفحة، دعونا ننظر في الواقع في HTTP الطلبات التي يتم إجراؤها. يبدو hello.html غير في الواقع موافق، وبالتالي 200. لكن cat.jpg هو 403. لذلك ليست 404. ربما يوجد ملف. 403 يعني ممنوع. لذلك هذا هو مربكة قليلا. انا ذاهب الى العودة لنافذتي المحطة. اسمحوا لي في التكبير هنا. واسمحوا لي أن تفعل ليرة سورية. هناك تلك الملفات نفسها. الآن اسمحوا لي أن تفعل LS-L، التي قمت ربما استخدمت من قبل للنظر في ملف أحجام ربما أو الطوابع الزمنية. ونحن نرى مجموعة كاملة من معلومات الساحقة. ولكن لاحظت وجود بعض التفاصيل. وهنا في هذا hello.html صف هنا وهنا cat.jpg. وانها مجرد كونه الأجهزة سهل الاستخدام من خلال تسليط الضوء على JPEG في مثل هذا الأرجواني. ولكن ماذا يختلف بجانب حجم الملف واسم الملف؟ الجمهور: [غير مسموع]. DAVID J مالان: نعم، هناك اثنين من أكثر R في أكثر من هنا. لاحظ ما hello.html قد يحدث. هكذا اتضح أن اسم هذا دليل الجمهور هو المهم. أي شيء في هذا الدليل ومن المفترض أن يكون الجمهور. ولكنها ليست كافية فقط لإسقاط الملفات في هناك. تحتاج أيضا إلى تغيير وضع الملفات، تغيير أذونات الملف استباقي لا يكون الإعداد الافتراضي، وهو أن فقط أستطيع أن أقرأ والكتابة، وأنا كونه المالك. أريد من الجميع أن العالم كله أن تكون قادرا على قراءة الملف الخاص بي، إذا جاز التعبير. قراءة يعني مجرد مشاهدته. والواقع، كما سترى في المشكلة ضبط سبعة، وهذا ما تعنيه هذه آر. السماح متوسط ​​هذين آر الجميع آخر في العالم قراءته أيضا، خصوصا ان انها في هذا الدليل. حتى أبسط طريقة لإصلاح هذا هو الذهاب إلى بلدي موجه والقيام شمود للتغيير وضع ثم القيام + R، تماما، الجميع، كل شيء، بالإضافة إلى R للقراءة، ثم أدخل cat.jpg. لا شيء يبدو أن يحدث، والذي عادة ما يعني هذا شيء جيد. حتى LS-L again-- الآن دعونا ننظر في cat.jpg. وهذا الإذن يبدو أن تغيرت. بوصفها جانبا، إذا قمت بإجراء خطأ وأنت، على سبيل المثال، أدلى به للتو your-- أنا لا know-- المقال علنا الوصول إليها عن طريق الصدفة، يمكنك أن تفعل العكس، شمود-R. رغم بصراحة، فإنه لا ينبغي تكون في الدليل العام على أي حال إذا كان هذا هو القلق. حتى الآن دعونا نعود ل بلدي المتصفح وإعادة تحميل. وانا ذاهب الى انقر ويذكر غوستبوسترس رمز لمسح هذا الجزء من الشاشة حتى نتمكن من معرفة طلبات جديدة. وبالفعل، وهنا القط Grump من قبل. ولكن الأهم من ذلك، من الناحية الفنية، هناك العدد 200، التي يعني وصلنا هو موافق. كل الحق، لذلك هذا كل شيء بخير وجيدة. لكننا لا يجعل أفضل المواقع، ولا نحن ذاهبون لمحاولة من الصعب جدا ل جعل راقيا من المواقع اليوم. ولكن دعونا على الأقل نفعل شيئا دراية فائقة قبل قعقعة من بضع علامات أخرى. لذلك أفترض أنني لا أريد مجرد القط هنا. لنفترض أنا فعلا أريد هذا القط لربط شيء. أنا ربما، على سبيل المثال تفعل شيئا من هذا القبيل. وعن مرساة أ href ل فرط equals-- المرجعية ودعونا فقط أن تفعل شيئا مثل www.google.com قريبة أقتبس قوس وثيق. والآن البحث عن القطط. وثيقة مرساة العلامة. لذلك هذا لديه نوع واحد فقط التفاصيل من جديد تماما. العلامة بالطبع هو مختلف. انها اسم لمرساة إشارة HREF أو فرط. ولكن الأهم من ذلك، هناك هذه الميزة النحوية هنا. هذا ما سنبدأ الدعوة لا علامة، ولكن سمة. وسمة هي شيء بتعديل السلوك للعلامة. وهذه السمة، أ href، الوسائل تعديل سلوك هذا مرساة بحيث عند النقر فوقه، فإنه يذهب إلى هذا الرابط هنا. وبالطبع، هذا العنوان هو جوجل. وفي الوقت نفسه، ما هو هذا النص هنا ستكون؟ حسنا، هذا سيكون ما الإنسان في الواقع يرى مثل المسطر رابط، بهذه البساطة. لذلك دعونا نحاول ذلك. اسمحوا لي حفظه. ما زلت في hello.html. ولكن في الإصدارات على شبكة الإنترنت، سترى أسماء الملفات الفعلية أننا معدة سلفا. اسمحوا لي المضي قدما وإعادة تحميل. والآن انها جدا الصفحة مخيب يزال. ولكن إذا كنت تحوم فوق there-- وانها صغيرة قليلا، but-- تستطيع أن ترى في الجزء السفلي الزاوية اليسرى من الشاشة، انها تسير بالفعل إلى google.com. وإذا كنت فوق هذا، وسوف خفقت لي الطريق إلى جوجل الفعلية. لكن لاحظ هنا فرصة لل استغلال، تماما كما جانبا. وسوف نعود إلى الآخر قضايا الأمن قبل فترة طويلة. لأنه لا يوجد هذا الانقسام بين أين تذهب وما تقول، هل يمكن أن تفعل شيئا مثل this-- http://www.google.com. حسنا، والآن إذا كنت تحميل بعد حفظ هذه الصفحة، يبدو انا ذاهب للذهاب إلى Google. ولكن ليس هناك سبب أنا يجب أن أذهب إلى Google، أليس كذلك؟ أنا يمكن أن تذهب في الواقع إلى شيء من هذا القبيل badguy.com، إعادة تحميل الصفحة أكثر من هنا. والإخطار، فإنه لا تزال تبدو مثل جوجل. وإلا إذا أنا شارب ما يكفي لتحوم فوق هنا أرى انها حتى الذهاب الى الذهاب إلى موقع مختلف. حتى إذا كنت قد حصلت من أي وقت مضى رسالة بالبريد الالكتروني، خصوصا واحد من باي بال، أو على ما يبدو من باي بال نطلب منك تسجيل الدخول إلى حسابك، وهذا هذا هو السبب يجب عليك أبدا من أي وقت مضى فوق الارتباطات في البريد الإلكتروني، بصراحة، أي الروابط في رسائل البريد الإلكتروني. إذا كنت تعرف لديك الفعلي المال في باي بال أو بنك من أمريكا أو الإخلاص أو أي الموقع، واكتب يدويا في. لأن ننظر كم هو سهل ل خداع شخص ما في تقديم ما يشبه الارتباط. ولكن في الواقع ما في وسعها الذهاب إلى أي مكان على الاطلاق. وهناك أكبر بكثير تهديدات من هذا. في الواقع، وهذا هو قليلا من الظل الآن، ولكن واحدة من أفضل منها رأيتها ومنذ ذلك الحين تم إغلاقها، هو شخص قاد الناس علي: حتى هذا يمكن القول، انقر هنا لتسجيل الدخول الى حسابك الحساب، حساب مصرفي. وكان هذا البنك من الغرب. لذلك شخص اشترى هذا. وانها أسهل قليلا لنرى في خط أحادي متباعدة التكبير في على جهاز عرض 30 قدما. ولكن عندما يكون الخط صغير في البريد الإلكتروني التي كنت تتلقى، هذا يبدو وكأنه bankofthewest.com، لا bankofthevvest.com، وكان شخص ما دفعت 10 دولارا الى شراء. ثم هذا قادهم إلى ما يعادلها من بعض المواقع السيئة. وسترى too-- في الواقع يمكننا القيام به this-- إذا ذهبت إلى الموقع الفعلي، bankofthewest.com، مرة أخرى، أذكر من آخر مرة أنه إذا كان هذا هو صفحة ويب و كنت غريبة عن كيفية عمله، أنت بالتأكيد يمكن أن تذهب إلى أدوات المطورين كروم. ويمكنك ان ترى كل من تنسيق HTML لطيف هناك. ولكن أكثر لهذه النقطة، كنت cam-- دعونا إغلاق this-- يمكنك الذهاب إلى عرض مطور عرض المصدر. لماذا لا يمكنني نسخ فقط كل ذلك وبعد ذلك يمكنك الذهاب الى بلدي قليلا نافذة جي إديت وهنا جعل صفحة الويب الخاصة بي. حفظ هذا في hello.html. وربما هذا هو الذهاب الى كسر، لأنها ليست بهذه السهولة عادة. ولكن الآن إذا كنت إعادة تحميل الصفحة الخاصة بي على بلدي CS50 الأجهزة وتحديث ضرب، موافق، وكسر بعض الاشياء. ولكن أنا قريب جدا إلى وجود موقعي المصرفية الخاصة، أليس كذلك؟ كل هذا HTML-- [ضحك] DAVID J مالان:-و لم actually-- ولك أعرف أن هناك شخص ما هناك الذين ان الواقع فوق هذه الروابط أيضا. بكل وضوح، وكسر بعض الاشياء. ولكن هذا سوف يؤدي بنا إلى مناقشة، غير ضروري في الوقت الراهن، على ما CSS، أوراق الأنماط المتتالية، هي، وكيف كنت في الواقع تحميل ملفات HTML أخرى وJPEG الملفات ملفات GIF التي الموقع قد تستخدم. ولكن كل ذلك هو محقق. ولكنه يغلي في الواقع إلى هذه الاستدلال بسيطة جدا. حتى الآن دعونا فقط المقشود من خلال بضعة أمثلة أخرى من HTML فقط لإعطائك الإحساس ما الذي يمكنك فعله. على سبيل المثال، وهذا هو list.html. لنفترض أنني أردت لجعل صفحة الويب مع قائمة من المنازل في رباعية. وأود أن استخدام علامة UL للغير مرتبة القائمة ثم عنصر القائمة الطفل وأعاد ثم over-- أو قائمة، rather-- المنازل في السؤال. وإذا قمت بفتح هذا الأمر، دعونا نفعل هذا. دعونا نذهب لا hello.html، ولكن لlist.html. اللعنة. كيف يمكنني تصحيح هذا؟ انها نفس القضية كما كان من قبل، أليس كذلك؟ لذلك اسمحوا لي أن تفعل oops-- chmod-- شمود + R من list.html. والآن اذا عدت لمتصفحي وانقر على تحديث، ومن هناك. حتى إذا كنت تريد من أي وقت مضى لجعل قائمة ذات تعداد نقطي، يمكنك أن تفعل ذلك. إذا كنت تريد أن تكون فائقة الهوى وجعل قائمة مرتبة، وليس قائمة غير مرتبة، لتغيير تلك رأ، إعادة تحميل الصفحة، و الآن المتصفح سوف يبلغ عدد لانها لكم. ماذا يمكننا أن نفعل؟ حسنا، وزوجين من بالآخرين إذا كنت قد حصلت على فقرات طويلة من text-- على سبيل المثال، بعض النص اللاتيني مثل this-- وتريد في فقرات منفصلة، صفحة مفتوحة، ص الوثيق للعلامة الفقرة. وتفعل ذلك مرارا وتكرارا. وإذا كنت الآن فتح هذا الملف، paragraphs.html، حسنا، هذا هو الحصول على مزعج. حتى الآن دعونا فقط العودة إلى بلدي موجه، شمود A + نجم ص ص .html-- لطيفة بطاقة البرية قليلا إذا جاز التعبير. ينبغي أن إصلاح كافة هذه المشاكل بالنسبة لي. دعونا إعادة تحميل. هناك ثلاث فقرات. والآن دعونا نمضي قدما وفتح الآخر. كيف حول الطاولة؟ ستلاحظ تبدو الطاولة أكثر من ذلك بقليل معقدة. ولكن من نفس idea-- علامة مفتوحة، علامة مفتوحة، مفتوحة، مفتوحة، مفتوحة، وثيقة علامة، علامة مفتوحة. وهذه يحدث على الوقوف ل الجدول الذي على ما يبدو الحدود ستكون سماكة 1-- أيا كان هذا الصف means-- الجدول، الجدول البيانات، مما يعني خلية. وإذا أعود إلى متصفحي هنا واذهب إلى table.html، يمكنك ان ترى شيئا مثل هذا، البشعة. لكننا سنصل إلى نقطة حيث يمكننا فعلا جعل الأمور أجمل من ذلك. لذلك اسمحوا لي أن تنص في الوقت الراهن. هناك باقات من أكثر العلامات. وHTML هي رائعة لالتقاط لأنه، بصراحة، كل ما عليك القيام به وننظر إلى صفحات الويب الحالية التي كنت معتادا. وكنت مثل، أوه، هذه هي الطريقة فعلوا هذا من الناحية الجمالية. أو يمكنك البحث عن أي الانترنت مورد لكيفية عمل HTML، وسترى أن هناك المفردات كاملة من العلامات الأخرى. ولكن مع هذا النموذج العقلي البسيط وحده أن أي علامة تقريبا فتح قد تكون مغلقة، انها حقا لا يكفي أن يعلم نفسه HTML يفهم بعد هذه الأفكار الأساسية من الأكواد والصفات و-formedness جيدا التي تحدثنا عنها، إغلاق أي شيء أننا قد فتح بحيث أننا لا نخلط بين المتصفح. لذلك دعونا الآن اتخاذ هذا على مستوى أكثر إثارة للاهتمام عن طريق الذهاب إلى الفعلية. ودعنا نذهب إلى بلدي ماك هنا، إلى google.com. والآن دعونا notice-- نفعل هذا. أنا غونغ للذهاب الى الإعدادات، إعدادات البحث. أريد أن أوقف هذه اللحظة مزعج النتائج الشيء حيث فورا يبدأ الاستجابة لكتابتك. دعونا نفعل هذه المدرسة القديمة جدا ونحن نرى في الواقع ما يحدث. لذلك أنا ذاهب لإنقاذ بلدي إعدادات جوجل هنا. والآن notice-- أنا ذاهب ل بحث عن شيء مثل القطط. وانها لا تزال تفعل السيارات كاملة هنا، ولكن على أساس الأشياء وكتابة الناس في الماضي. لكن لاحظ ما الذي سيحدث. في عنوان الموقع في الوقت الحالي هذا، مجرد google.com. وتقنيا، انها مائل. جوجل مجرد إنقاذ الطابع و لا يظهر لنا ذلك. فهي تبين لنا HTTPS، فقط أن تكون فائقة مطمئنة بأننا في صفحة آمنة أو مشفرة. لذلك اسمحوا لي المضي قدما والبحث عن القطط. الآن هذا حصل فعلا الساحق بسرعة. نظرة على طول هذا URL. ولكن تبين أن معظم هذه الاشياء في عنوان الموقع هو في الواقع غير مجدية جدا. انا ذاهب لبدء حذف أشياء لا أفهم. أرى القطط. أنا أفهم القطط. أنا لا أعرف لماذا القطط هناك مرة أخرى. أنا حقا لا أعرف ما هذا الهراء. لذلك أنا ذاهب لمجرد إبقاء تسليط الضوء على وحذف الاشياء إنني لا أفهم، تقطير URL في هذا فقط. الآن اسمحوا لي أن الحصول على الدخول مرة أخرى. يبدو أن جوجل لا يزال يعمل. وذلك لسبب ما، فإنها تقوم بإضافة الكثير من الاشياء لافتراضيا URL الخاصة بهم. ولكنها ليست المطلوبة بدقة. فما هي لطيفة حول هذا الموضوع؟ حسنا، اسمحوا لي أن تمضي قدما و فتح المفتش كروم. هناك الاختصار الفأر الصغير لذلك. انتقل إلى علامة التبويب الشبكة. والآن اسمحوا لي أن تحميل هذه الصفحة مرة أخرى. وأنا عقد التحول. بوصفها جانبا، متصفحات تميل إلى تخزين أو حفظ المعلومات فقط من أجل الكفاءة و. ولكن عادة، وعقد التحول و إعادة سيجبر كل شيء لنبدأ من البداية. وهذا ما أريد القيام به هنا. وتلاحظ كل هذه الصفوف التي ظهرت فقط. اتضح أنه في أي ويب معينة الصفحة، قد يكون هناك ملف واحد فقط involved-- hello.html-- أو هناك قد يكون 52، كما في هذه الحالة. عندما أزور google.com، على ما يبدو، متصفحي تنطلق 52 طلبات HTTP منفصلة. لماذا هذا؟ حسنا، ننظر إلى ما هو داخل من هذا أعلى صفحة الويب يصل. ليس هناك نص فقط، ولكن هناك صورا حقيقية من القطط إلى اليمين. هناك شعار الملونة هنا في اليسار. هناك كل هذه الرموز للميكروفون وهكذا دواليك. هناك الكثير من القطع، بناء كتل، وقطع الصفر، إذا صح التعبير، لصفحة الويب هذه. وما يقوم به المتصفح على الحصول على الملف الأول جدا، والتي هذا الصف هو هنا، هو الأساس بالتكرار عبر الجزء العلوي HTML إلى الأسفل، من اليسار إلى اليمين، وتبحث عن أشياء مثل علامات الصورة أو العلامات الأخرى التي يتم الإشارة إلى ملفات أخرى و عندما يراهم، يذهب ويجلب لهم عبر HTTP، كلها قابلة للحياة استعارة المغلف، ثم يعرضها في الموقع المناسب في صفحة الويب. لكن لاحظ هنا إذا كنت تركز على أول رمي القطط، والبحث، تلاحظ أنه، في الواقع انها تستخدم HTTP 1.1. ولسوء الحظ، وجوجل الكروم الآن في الإصدار 39 هو نوع من الأشياء تخفيف لهجة و لا يظهر لنا رؤوس الفعلية. ولكن ما تم ارساله بالفعل هو الطلب لعدم خفض، ولكن / بحث؟ ف = القطط. الآن، لماذا هو مهم؟ حسنا، انا ذاهب الى استنتاج من هذا أنه إذا جوجل يدعم الاستفسارات من هذا النموذج، لماذا لا أستطيع تنفيذ بحثي الخاص محرك للCS50، ولكن مجرد واجهة نهاية، مجرد واجهة المستخدم الرسومية. وسنقوم الاستعانة بمصادر خارجية النهاية الخلفية، نتائج البحث الفعلي لجوجل. فكيف يمكنني أن أفعل هذا؟ حسنا، اسمحوا لي أن انتقل إلى جي إديت أكثر من هنا. واسمحوا لي أن تمضي قدما وفتح يصل، دعنا نقول، ملف جديد. وانا ذاهب لإنقاذ هذا مؤقتا عن البحث، 0.html. ثم في نهاية المطاف، وسوف نقوم بسرعة إلى الأمام إلى واحد قبل أنا على استعداد. وانا ذاهب الى سوط بسرعة نوع الوثيقة أتش تي أم أل HTML قوس مفتوح وثيق HTML قوس. ثم انا ذاهب للقيام رئيس رئيس الوثيق عنوان مفتوح CS50 بحث بدلا من البحث جوجل. إلى هنا أنا ذاهب لديك الجسم، والجسم إلى هنا وثيق. والآن أنا بحاجة CS50 البحث. وفعلا، دعونا بناء هذا تدريجيا. انا ذاهب الى المضي قدما وإغلاق هذا و وضع فعلا في الدليل العام بلدي. حتى تعطيني لحظة واحدة فقط. البحث 0.html---أنا ذاهب ل استدعاء زمنيا أنه search.html. انا ذاهب الى شمود عليه search.html + ص. والآن انا ذاهب لفتحه. كل الحق، حتى أنه كان سريع. لكن الهدف كان ببساطة ان يوصلنا الى نقطة وجود هذا النص ملف يسمى search.html. لذلك ليس كثيرا أن ننظر بعد. في الواقع، إذا ذهبت لمتصفحي، و الذهاب إلى search.html، هذا كل ما هو عليه. ولكن هل تعرف لماذا؟ أنا يمكن أن تكون مربي الحيوانات قليلا. قرأت في كتاب أن هناك علامة العنوان دعت H1. وانا ذاهب الى المضي قدما و استخدام هذا H1 H1 مفتوحة وثيق. إعادة تحميل الصفحة. والآن حان أكبر وأكثر جرأة، ليس كل ما مثيرة للاهتمام، إلا أنها على الأقل هيكليا أكثر إثارة للاهتمام. ولكن الآن اسمحوا لي أن أعرض علامة أخرى. اتضح هناك علامة النموذج. واسمحوا لي أن إغلاق هذه العلامة. واتضح وجود ل علامة الإدخال الذي لديه سمة يسمى النوع الذي هو نوع بيانات الحقل، اذا صح التعبير. وستكون من نوع النص. وقيمتها تسير أن تكون CS50 البحث. وثيقة العلامة. وهناك ستكون أي فكرة فتح وإغلاق مع به منفصلة. اسمحوا لي أن أعود إلى هنا و نرى ما يحدث، تحميل. الحصول مثيرة للاهتمام. يبدو أنه من حقل النص. وفعلا، لم أكن أريد لوضع قيمة هناك حتى الان. اسمحوا لي أن أعود هنا وفعلا الحصول على التخلص من هذه القيمة ليبقيه بسيط. بدلا من قيمة، ما أردت لإعطاء هذا الشيء كان اسما. وأنا لا أعرف ما هو عليه، ولذا فإنني سوف أعود إلى ذلك. ولكن أقل من ذلك، أريد للقيام نوع المدخلات = تقدم. وسوف تكون هذه القيمة CS50 البحث. وسنرى لماذا أنا انتقل القيمة إلى هذا. عندما كنت تحميل، ويبدو لي أن لديهم الآن بدايات بحثي الخاص المحرك، سوبر البشعة، رغم بصراحة، انها ل لا رمي بكثير من ما الصفحة الافتراضية جوجل يبدو. إذا ذهبت هنا الآن، ويمكنني أن اكتب في القطط ونأمل انقر بحث. ولكن أنا لم تفعل تماما بعد، لأنني لم تنفذ، من الواضح، وقاعدة بيانات. أنا لم زحف و على شبكة الإنترنت للحصول على نتائج البحث. لذلك أنا بحاجة إلى أن الاستعانة بمصادر خارجية لجوجل. فكيف أفعل ذلك؟ حسنا، أولا وقبل كل شيء تحتاج إلى إضافة والعمل نسبتها الى بلدي شكل العلامة التي هو http://www.google.com/search. وأنا أعلم أن فقط من وجود يستدل من خلال النظر عن كثب في اجتماعهم في URL. والآن تأخذ تخمين. ما ينبغي هذا المجال النص على الارجح أن يطلق عليه، استنادا إلى حيث جئنا من قبل؟ الجمهور:؟ س. DAVID J مالان:؟ س. ونحن لا نحتاج في الواقع السؤال بمناسبة اتضح، بل هو في الواقع ف ذلك، ف لربما عن طريق الاستعلام افتراضيا، فقط لأن هذا ما اري وسيرجي خرجت منذ سنوات. وحتى الآن اسمحوا لي أن تحميل هذه الصفحة. لا يبدو كل ما مختلفة. ولكن الآن مشاهدة ما يحدث. إذا كنت اكتب في القطط وانقر CS50 بحث وترك، تلاحظ أحصل على نقله بعيدا إلى Google الفعلية. الآن، وجوجل يجري قليلا مزعج في أنهم إلحاق معلمة إضافية، اذا صح التعبير، إلى URL. هذا كل ما يحدث تلقائيا على الجانب جوجل. الجزء المهم هو أن يبدو لي لقد ولدت هذا الطلب هنا. وبالفعل، وهذا ما يحدث. عندما يكون لديك HTML التي يشبه هذا، وهذا هو نوع من تدوين مطوري الويب لقوله، والمضي قدما في إنشاء نموذج هذا عندما يكون تقديمه، انها سوف تذهب الى هذا الرابط. وعندما قدمت URL قيم أشياء مثل س، لا تذهب فقط لهذا URL. في الواقع، انتقل إلى السؤال علامة ثم س = القطط. إلحاق المعلمة، المعلمة HTTP من هذا القبيل. ومجرد أن تكون فائقة الدقة، ما يجري الاستدلال here-- ولكن سأكون أكثر explicit-- هو أن طريقة أريد استخدام هو الحصول عليها، بدلا من شيء من هذا القبيل آخر، والتي سنرى في نهاية المطاف. هكذا وباختصار، ببساطة عن طريق التفاهم وHTML باستخدام بعض العلامات بسيطة إلى حد ما، يمكننا الآن البدء في إنشاء منطقتنا المستخدم الأمامية واجهة مع البحث المحرك وراء ذلك. لكن هذا بالطبع هو بشع جدا. لذلك اسمحوا لي فتح فعليا حتى نسخة أفضل قليلا. هذا هو واحد أنا أعد التقدم الذي لديه بعض التعليقات. ولكن سترى بأنني صوغه كثيرا جدا عليه. لذلك هذا هو متاح بالفعل على الانترنت. وأنا لم يحدث استباقي الذهاب إلى https فقط ليبقيه بسيط. والآن دعونا فتح التكرار التالي من هذا. هو الإصدار 1 بدلا من 0. ما يقفز في لكم وقليلا مختلفة في هذا المثال؟ الجمهور: [غير مسموع]. نعم، يوجد هذا المركز محاذاة النص. هذا غريب قليلا هنا. ولكن هذا هو الواقع الجديد. وربما تخمين ما سيحدث. اذا ذهبت الى متصفحي الآن وزيارة-1.html البحث، انها تقريبا نفس الشيء. بل انها خطوة أقرب إلى يجري قليلا أكثر جميلة. انها لا تزال القبيح، ولكن أجمل من ذلك لقد تركزت كل شيء الآن على الأقل. هكذا اتضح أن ما أنا باستخدام ولغة أخرى تسمى تماما CSS، أوراق الأنماط المتتالية. وCSS، بصراحة، هو نوع من، في رأيي الشخصي، لغة تصميم بوحشية. وهو أمر مزعج جدا أن نتذكر كل التفاصيل المختلفة. ولكن ما stylizes و في جميع أنحاء العالم على شبكة الإنترنت اليوم بأكمله. أنا شخص بالإهانة. حسنا. لذلك دعونا نعود ونرى هنا كيف أننا فعلا باستخدام هذا. وكما تبين، على الأقل انها في الواقع لغة بسيطة جدا. انها مجرد أزواج قيمة المفتاح والممتلكات والقيم والممتلكات والقيم. في الواقع، وهنا هي واحدة هذه الممتلكات وقيمة. ببساطة باستخدام أسلوب السمة على بلدي علامة الجسم ويعطيها قيمة كلمة القولون وكلمة أخرى، أو خاصية وقيمة، أنا يمكن أن يؤثر على جماليات من صفحة الويب، لا بالضرورة الهيكل بعد، لكن جماليات ذلك. وفقط من خلال غوغلينغ حولها، وأنا أدرك أن ورقة CSS، الأنماط المتتالية، يدعم خاصية تسمى مواءمة النصوص، التي يمكن قيمة أن اليسار واليمين، أو الوسط، على سبيل المثال. حتى الآن عندما كنت تحميل هذه الصفحة، ما لم يحصل وكانت صفحة تركز، ولكن لا يزال قبيحة جدا. دعونا نمضي قدما وفتح يصل الإصدار 2 من البحث. والآن تلاحظ لقد فعلت أكثر من ذلك بقليل. لاحظ أن هنا داخل الرأس العلامة، يمكن أن يكون هناك أكثر من عنوان. في الواقع، هناك علامة النمط. وهذا هو المكان الذي تحصل عليه فقط يذكر فوضوي أحيانا رؤية CSS. لاحظ أن ويبدو لي أن لديك شيء التي تبدو مختلفة جدا من الناحية الهيكلية. ولكن هنا هو اسم العلامة أريد أن منسق. وهنا لدينا الأصدقاء القدامى مجعد الأقواس ومتعرج المغلقة. ثم هنا هو أن الممتلكات وقيمتها. إذا كنت تحميل هذا الملف، search2.html، والنتيجة النهائية هي متطابقة. بل انها خطوة نحو تصميم أفضل. من قبل العوملة من هذه CSS، لقد ليس مختلطة مع بلدي HTML. والواقع، كما سنرى، لم أستطع إعادة استخدام هذه الخصائص والقيم. إذا أردت أن تجعل عناقيد أجزاء من صفحة الويب الخاصة بي تركزت، أنا لم يكن لديك لكتابة النمط = محاذاة النص وسط كل مكان. أنا يمكن وضعها في مكان واحد ربما ترغب في أعلى. ولكن حتى هذا ليس أفضل تصميم. في الواقع، واحدة من الأشياء التي ستعرف كما يمكنك قضاء المزيد والمزيد من الوقت مع برمجة الويب هي أن أكثر ما يمكن modularize أشياء وأشياء عامل خارج مثل ملفات .H دعونا عامل الاشياء، أحب helpers.c دعونا عامل الامور قبل بضعة psets. وبالمثل، ربما نحن نريد لتحقيق ذلك. لذلك نلاحظ في الإصدار ثلاثة من search.html لدي تنظيف رأس هذه الصفحة وضعت للتو في هذا، علامة الارتباط، والتي خلافا للاسم، لا تعطيك ارتباط تشعبي. يربط إلى ملف آخر عن طريق وأ href قيمتها في هذه الحالة، هو البحث، 3.css حتى وأنا أدرك أننا ذاهبون بسرعة. ولكن كل ما أفعله هو نوع تحريك الأشياء حولها. اسمحوا لي أن فتح بحث-3.css. ومن هناك، لا شيء حقا لذلك. أنا مجرد نسخ ولصق قبل أن تتحول إلى الجديد ملف، مثل الكثير الذي يؤخذ الاشياء إلى ملفات أخرى من قبل. وresult-- underwhelming-- تماما سوف يكون بالضبط نفس الشيء. ولكننا نسير toward-- لا، انها ليست. أوه، أنا أعرف لماذا. لذلك يبدو أن يكون خطأ. وأنه في بعض معانيها. ولكن اسمحوا لي أن فتح علامة التبويب شبكة بلدي. اسمحوا لي أن إعادة تحميل الصفحة. آه، لماذا هو CSS لا يتم تطبيقه؟ أيضا، الملف المغلق، وبالمثل، لتكون قابلة للقراءة العالم، إذا جاز التعبير. وذلك أيضا ممنوع حاليا. لذلك اسمحوا لي أن تفعل شمود + R نجم نقطة CSS-- whoops-- نحن CSS نقطة هو مجرد ملحق الملف لملفات CSS. والآن اسمحوا لي أن أعود إلى بلدي المتصفح وإعادة تحميل. موافق، أفضل قليلا. الآن اسمحوا لي أن تفعل شيء واحد آخر. بحثا-4.html. لدي النسخة التي فكرت فقط كان الطريق برودة، وإن كان بطريقة أكثر تعقيدا. دعونا ننظر في النتيجة أولا. إغلاق هذا أن يعطينا مساحة أكبر. تغيير هذا للبحث-4، أدخل. والآن يتم تقسيم مجموعة من الأشياء. انا ذاهب الى العودة إلى دليل بلدي هنا. والآن أنا ذاهب لمجرد القيام وشمود ل+ R على الملف-- لأنني أعلم أنه دعا exists-- logo.gif، وهو الصورة. وإعادة تحميل الآن. وwow-- حتى الآن أنا قريبا جدا، وبصراحة، لمثل النسخة 1999 من جوجل، و بصراحة، نسخة 2014 من جوجل، أليس كذلك؟ لذلك يجري الآن على موقعه على الانترنت، في النهاية، إذا كنت تبحث عن القطط. والواقع هو. ولكن ماذا أفعل بشكل مختلف في هذا الإصدار 4؟ لذلك نحن لن أتطرق كثيرا على ذلك هنا. سترى في هذه المشكلة مجموعة السبع في نهاية المطاف. لكن لاحظ فعلت بعض الأشياء. أنا أدخلت شعبة العلامة، وهو تقسيم، تشبه في روح لعلامة الفقرة. ولكن التقسيم هو مجرد مثل، وهنا منطقة غير مرئية مستطيلة من الشاشة. دعونا إعطائها فريدة من نوعها معرف، تذييل، فقط حتى نتمكن من الحديث عن انها في منطقتنا HTML في مكان آخر. هنا هو شعبة أخرى من الصفحة ID الذي سيكون المحتوى. انها لمحتوى الصفحة. وهنا هو رأس الصفحة. وبعبارة أخرى، لقد أساسا أنا في HTML عقليا عرض صفحة الويب هذه كما ثلاثة مكونات، رأس هنا في هذا المستطيل غير مرئية، المحتوى في الوسط، ثم تذييل أسفل أدناه، حتى على الرغم من أننا لا نرى تلك الأشياء. لأنني أريد أن في رأسي ل الصفحة هنا، أو في ملف المغلق، يمكنني استخدام هذا النحو. رأس ليس علامة. انها معرف حتى يتحول إلى أنه من خلال القيام #header، أستطيع الآن تطبيق واحد أو أكثر عقارات للرأس. أستطيع أن أفعل نفس المضمون، الشيء نفسه بالنسبة المحتوى هنا. هكذا على سبيل المثال، في تذييل، إشعار كل هذه الخصائص أنا مضيفا. وأنا أعلم أنها موجودة فقط عن طريق القراءة حتى على وثائق CSS. حجم الخط ستكون smaller-- وحتى بعض حجم الخط النسبي. الوزن ستكون جريئة. Margin-- كم بكسل حول it-- 20 بكسل. وانها سوف تكون محورها. ولكن الآن، تبدو الصفحة من هذا القبيل. إذا لم أكن مسرور نسخة حقي هناك، أنا يمكن أن تفعل شيئا مثل اللون الأحمر. وبعد ذلك يمكن أن ينقذ هذا، تحميل، والآن لقد منمنمة تذييل. لذلك هذا هو مجرد ملمحا الى السلطة ما يمكنك القيام به في صفحة ويب لتغيير الامور. وحتى أكثر برودة من ذلك، إذا كنت تريد لكزة حولها مع المواقع الفعلية، لا يمكنك تغييرها بشكل دائم. ولكن إذا كنت فتح المفتش الكروم مرة أخرى وأنا لا أذهب إلى الجانب الأيسر هنا، مما يدل HTML الفيسبوك و ولكن يظهر على اليمين الجانب كل من CSS لها، يمكنك إما و تغيير الامور على الطاير. لذلك اسمحوا لي أن نمضي قدما ونفعل ذلك. اسمحوا لي أن تمضي قدما والسيطرة انقر على هذه الكلمة العشوائية هنا، التوقيع، ثم انقر فوق فحص العنصر. الكروم يقفز مريح جدا ل العلامة H1 التي تستخدم الفيسبوك. ونلاحظ هنا الفيسبوك لديه نوع من بتكاسل الثابت ترميز حجم الخط كخاصية هنا. ذلك الشيء هو بارد على الرغم أنه إذا أنا فعلا ذهبت هنا ونقول، أوه، الفيسبوك، أنا لا أحب أن 64 بكسل، يمكننا الآن تغيير الفيسبوك. بالطبع، نحن فقط تغييره بالنسبة لي شخصيا في الوقت الراهن. ولكن هذا هو مجرد أداة في مجموعة من الأدوات لدينا هذا ما سوف تسمح لنا لقرص وأيضا معرفة وتشخيص قضايا في صفحات الويب الخاصة بنا. وبالمثل يمكن أن نذهب أكثر من هنا، وهو نفس الشيء. إذا كنت تريد حقا أن تحصل على الهوى، و يعني، الآن يمكنك حقا يتحور الصفحة وتفعل أشياء مجنونة. فلماذا كل هذا مفيد؟ حسنا، في نهاية المطاف، ونحن ذاهب الى تريد أن تكون القدرة على إنشاء صفحات الويب التي ومدفوعا لدينا نهايات الخلفية الخاصة، ليس فقط عن طريق غوغل و الاستعانة بمصادر خارجية النهاية الخلفية هناك. نريد فعلا قيمة، على سبيل المثال، عمل محرك بحثنا ل السمة للذهاب ليس لشخص آخر، ولكن لشيء من هذا القبيل search.php، حيث search.php على الخادم الخاص بنا، ليس على شخص آخر. وذلك للوصول إلى هناك، ونحن في الواقع تحتاج إلى إدخال لغة جديدة. لذلك قمنا بدا بالفعل في واحدة جديدة اللغة هنا، أو اثنين حقا، HTML وCSS. لكنها في الحقيقة مجرد اللغات الهيكلية والجمالية. انهم لا البرمجة اللغات في حد ذاتها. وهذا حول بقدر رسمية مرة ونحن سوف تنفق عليهم. لأننا سوف نبدأ الآن الانتقال إلى PHP. حتى PHP هو فعلي لغة البرمجة. انها لغة البرمجة بمعنى أنه من المفترض أن تكون أخف وزنا من شيء من هذا القبيل C. وانها لغة تفسيرها، وهو ما يعني أنها ليست جمعها. لذلك باختصار، ماذا يعني ذلك عندما استخدمنا لغة مثل C وكان علينا أن ترجمة عليه؟ ماذا يعني ل تجميع C الشفرة المصدرية؟ الجمهور: [غير مسموع]. DAVID J مالان: قل ذلك مرة أخرى؟ الجمهور: [غير مسموع]. DAVID J مالان: الكمال. فإنه يحولها إلى ثنائي. فإنه يحولها إلى أصفار ومنها من الإنجليزية مثل شفرة المصدر الفعلي. ومن ثم يمكننا فعلا تشغيل تلك الاصفار منها و قبل تمريرها من خلال وحدة المعالجة المركزية عن طريق النقر المزدوج على أيقونة أو تشغيل الأوامر. PHP و Python و Ruby وبيرل وجافا سكريبت وعناقيد من الآخر يتم تفسير اللغات لغات، وهو ما يعني كنت لا تجمع لهم. بدلا من ذلك، كنت إطعامهم كمدخل ل دعا برنامج مترجم. وأن مترجم، الذي كتب شخص آخر، يقرأ شفرة المصدر الخاصة بك أعلى إلى أسفل، من اليسار إلى اليمين وتفسر فقط تلك الخطوط وتفعل ما تقوله. لذا إذا واجهتك الخط الذي يقول الطباعة، فإنه لا يتم تحويل بالضرورة الطباعة إلى الأصفار المقابلة ومنها. انها مجرد مثل هذا مترجم واذا كان الشرط الكبيرة التي تقول، إذا تعليمات مبرمج هو الطباعة، ثم القيام بما يلي. لذلك يفسر أنها مجرد بواسطة نوع من المنطق من خلال ما كنت أقول أن تفعله. وPHP هي واحدة من هذه اللغات. وقبل سنوات تم تصميم PHP على وجه التحديد لبرمجة الويب. وكان في البداية قذرة جدا اللغة فوضوي. وبالفعل، هناك ضخمة كمية سيئة كود PHP هناك. لكن اللغة نفسها قد نضجت على مر السنين، لدرجة أن الآن حان في الواقع الخطوة التالية رائعة تربويا من C لأنه مرتق حتى تتعرف على كل شيء كنت قد رأيت فقط في الأسابيع القليلة الماضية. الفرق الأولي احدة سنرى وليس هناك وظيفة رئيسية بعد الآن. عند بدء كتابة التعليمات البرمجية، انها مجرد الذهاب الى الحصول على تنفيذها مهما كانت، كما سنرى في لحظة. وفي الوقت نفسه، وهنا ما متغير يشبه في PHP. الأمر مختلف قليلا، لكن بالكاد فقط. في PHP، ليس هناك كتابة قوية. هناك الكتابة الأسبوع، الذي يعني أن هناك فقط هي أنواع البيانات مثل الجمل والأرقام وغيرها من الامور. ولكنك لا تهتم بتحديد ما هي عليه الآن. PHP أرقام بها بالنسبة لك. الدولار هو مجرد قرار ان الشعب PHP جعلت سنوات قبل ذلك أن أي متغير في PHP يبدأ فقط مع علامة الدولار. انها في الواقع نوع من المفيد في هذا كان يقفز في لكم أكثر من ذلك بقليل. ولكن بعد ذلك، وهذا هو شرط في PHP. ما هو مختلف في مقابل C؟ خداع question-- شيء، الذي هو في الواقع لطيف حقا. التعبيرات المنطقية في PHP-- نفسه. تعبيرات منطقية مع ومقابل أو، ومفاتيح، حلقات، حلقات، loops-- موافق، هذا هو واحد مختلف. هكذا اتضح هناك زوجين من الميزات الأخرى في PHP. واحد منهم هو في الواقع هذا، وهو مناسب بشكل رائع. إذا $ الأرقام هي مجموعة التي قمت أعلن مسبقا في البرنامج، لديك هذه نزوة لكل بناء بدلا من أن تفعل كل ذلك مزعج لي يساوي 0، أنا هو أقل من ذلك، [؟ أنا + +؟]، لكل الأرقام كرقم، حيث كل هذه القيم هي مجرد علامة الدولار متغير، وهذا الأخير يمكن ان يخطر لك كما I. هل يمكن أن نسميها أي شيء تريده. دعوت ذلك العدد. هذا هو الذهاب الى تكرار عبر مجموعة تسمى الأرقام. وعلى كل التكرار، انها الذهاب لتحديث تلقائيا للك رقم علامة الدولار متغير حتى يتسنى لك باستمرار الحصول على المتغير الذي تريد دون الحاجة إلى القيام بأي قوس مربع التدوين أو الفهرسة في صفيف. أبعد من ذلك، ونحن لدينا حتى أشياء مثل المصفوفات، التي تبدو تقريبا نفس الشيء، إلا أنه من الشائع جدا، كما سنقوم ترى، سواء في PHP و JavaScript إلى ما قبل تهيئة مجموعة باستخدام الأقواس المربعة. C يستخدم الأقواس المعقوفة. حتى انها مختلفة قليلا، على الرغم من لم نستخدم حقا أن خدعة من ذلك بكثير. ولكن حتى أكثر بقوة، PHP لديه صفائف النقابي، وهي طريقة الهوى لقول الجداول التجزئة. في الواقع، إذا كنت تريد أن تعلن تجزئة الجدول في PHP، خلافا لما حدث في C-- كم الأسطر من التعليمات البرمجية أنها لم تتخذ ل في الواقع تنفيذ جدول تجزئة في C؟ أو كم عدد الأسطر من التعليمات البرمجية غير ذلك مع الأخذ في تنفيذ جدول تجزئة في C؟ لذلك فمن المحتمل كثيرا، أليس كذلك؟ انها بضع عشرات، وربما 100 أو 200. انها غير بديهي. أو أنها على وشك أن تكون، و سترى قريبا، غير بديهي لتنفيذ جدول تجزئة [غير مسموع] وأيضا المحاولة. ولكن في PHP-- وبصراحة، أنا ربما لا ينبغي أن أقول لكم هذا حتى Monday-- في PHP، إذا كنت ترغب في الجدول، وفعلت. هذا هو تجزئة table-- ذلك مع سطر واحد من التعليمات البرمجية. و وهناك الكثير من اللغات يفعل ذلك. نلهو مع PSET خمسة. لذلك الكثير من اللغات تفعل هذا. أنها تعطيك هذه التجريدات أن الآخرين، المبرمجين الآخرين، وقد خلق لكم بحيث يمكنك الوقوف على أكتافهم والبدء في استخدام الأفكار التي هي السوبر مقنعة، مثل الجداول التجزئة والأشجار ويحاول. ولكن لم يكن لديك بالضرورة ل تنفيذ تلك الأشياء بنفسك. وذلك في نهاية المطاف، ما نحن ذاهبون الى استخدام PHP ل ويحتمل أن تكون كتابة برامج من ما يسمى سطر الأوامر. نحن يمكن إعادة كل برنامج نحن قد كتبت هذا الفصل الدراسي حتى الآن، ربما باستثناء اندلاع الذي يستخدم SPL، وهي تخص C في الوقت الراهن. ولكن كل مشكلة أخرى مجموعة، بالتأكيد ماريو وقيصر وVigenere و [؟ الكراك؟] وما بعده، فإننا يمكن إعادة تنفيذ في PHP، و ربما أكثر من ذلك بقليل بسهولة. ولكن ما نحن ذاهبون في نهاية المطاف لاستخدام PHP لبرمجة الويب هي. ونحن في طريقنا لتقديم المقبل الأسبوع نموذجا العقلي، نموذج يسمى MVC، تحكم عرض نموذج، وإذا كنت قد فعلت البرمجة قبل أو في بيثون روبي أو أي مكان آخر، كنت يمكن أن نعرف من هذا الفريق مع و القضبان وجانغو، وما شابه ذلك. ولكن إذا كنت جديدا على هذا أيضا، وسترى أن هذا هو الواقع الطبيعي جدا تمديد التعميل وهذا النوع من التصميم من التعليمات البرمجية التي قمنا تم القيام في C. ونحن في طريقنا إلى الآن تطبيق بعض من هذه الدروس لPHP حتى أنه في نهاية المطاف، نحن تنفيذ المواقع الخاصة بنا. وإذا كنت من النوع فتن أو عن دهشتها أننا في طريقنا للقيام كل ذلك بسرعة، ندرك أن كل تقريبا الفصل الدراسي، ما يقرب من 90٪ الطلاب CS50، بما فيها تلك الذين لم يسبق لهم مبرمجة من قبل، في نهاية المطاف جعل المشاريع النهائية التي تقوم على برمجة الويب. وهكذا سترى أن العوائد هي عالية في الأسابيع المقبلة. ولذا فإننا سوف نرى لك ثم يوم الاثنين. رئيس 1: والآن، ديب الأفكار قبل Daven فارنهام. الجداول التجزئة. [ضحك]