[عزف الموسيقى] 

DAVID J مالان: هذا هو CS50 و هذه هي بداية الأسبوع 7. لذلك نرحب مرة. وتذكرون أن في مشكلة تعيين أربعة، كان هناك قليلا من مطاردة زبال بالنسبة لبعض الجوائز القيمة حيث بعد استرداد صور الموظفين سواء هنا أو في نيو هافن، كنت تحدى لإيجاد أكبر عدد ممكن من هؤلاء العلماء الكمبيوتر كما يمكن لكم. ونحن قد حصلت على العموم مجموعة من الطلبات. اعتقدت أن حصة قليلة معكم اليوم. 

وسنقوم بنشر كل من هذه على الانترنت. ولكن على وجه الخصوص، أردت أن ألفت انتباهكم to-- بئر واحدة، وكان سام في عدد غير قليل منهم مما عموما مثل هذا. ولكن يبدو أنه اعتبارا من هذا الصباح، والفائز كان اسمه شخص معين مع كين 24 من الموظفين القبض على الكاميرا أو عدد قليل من أكثر عندما كنت تأخذ في حساب الموظفين متعددة في الصور. الصورة هنا هو كين المقبل لمريم في نيو هافن. 

الآن، كين، على الرغم من تحول من هو قليلا من حالة الزاوية وهذا ما لم يحدث حتى الآن من قبل. اتضح أنه لم يحدث بالنسبة لي لوضع التفاصيل الدقيقة في مشكلة مجموعة الأربعة التي تقول ان الموظفين غير مؤهل للحصول على الجوائز الرائعة لكين هو، بطبيعة الحال، واحدة من المصورين على موظفينا. الآن، مع أن قال، وقال انه كتب لي في البداية أن أقول الرجاء عدم نشر هذه الصور على الانترنت. وأعتقد أن في جزء كبير لأن معظم من الصور أن هذا المصور استغرق النظر شيئا قليلا من هذا القبيل. وما شابه ذلك. 

ولكن كين أود لي أن أؤكد لكم انه هو مصور جيد جدا، انه المهنية، ويأخذ الصور التي ليست ضبابية، التي هي أفضل في التركيز، وانه أخذ عدد غير قليل من الموظفين الخاصة بنا. ولكن بدلا من الاعتراف فقط كين، ما كنا نظن أننا سوف تفعل وتذهب من خلال قائمة الطلاب الفعلي الذي قدم. واتضح أن لانس مع 15 صور اعتبارا من صباح اليوم وكان الفائز لدينا. 

والصورة هنا هو لانس مع كولتون، مع Skaz، مع نفسي، ومع سام. ولكن بعد ذلك اتضح أنه اعتبارا من 11:46، وذلك منذ قليلا، عدت إلى البريد الإلكتروني الخاص بي، ووجدت أن كان لدينا حتى الآن أكثر واحد تقديم من قبل طالب يدعى بوني وقال الذين البريد الإلكتروني هذا فقط. لن أكذب، أنا القيام بذلك أثناء الحصة. وانتقل بعد ذلك إلى نعلق فقط 14 صورة، واحدة خجولة من لانس 15. 

ولكن في صور بوني، فإنه يتحول من هم أعضاء هيئة متعددة، وسام من بينها، وذلك ما كنا نظن أننا سوف القيام به هو الاعتراف كل من هذه. وذلك بالإضافة إلى الحصول على دروببوإكس الفضاء أن كل من شارك يتلقى، وسوف هذين القسمين أيضا تلقي لطيفة الغداء تلبي لهم وقسمهم تتزاوج الأسبوع المقبل. وهكذا سوف تسمع منا، لانس وبوني، حول ذلك. تهاني كبيرة جدا لهم. الآن، أولئك منكم الذين سوف مثل الغداء أعم نعلم أن تناول طعام الغداء CS50 في كامبريدج ونيو هافن هذا الجمعة. انتقل إلى موقع ويب مائل RSVP CS50 ل. والآن كلمة عن الحلقات الدراسية. أكثر curricularly. لذلك نحن نقترب من نقطة الفصل الدراسي حيث يجب أن تبدأ التفكير في المشاريع النهائية. في واقع الأمر، في قليلا، وسوف ما يسمى تكون المقترحات قبل المستحقة. وتهدف المقترحات ذلك مسبقا ل أثر تكون منخفضة جدا، وحقا مجرد فرصة لل لك أن يؤلف مذكرة قصيرة زميل التدريس لإفهام له أو لها ما كنت أفكر لك قد ترغب في القيام به لمشروع النهائي الخاص بك. 

الآن، العديد من الطلاب في نهاية المطاف القيام الشبكة العالمية القائمة على المشاريع النهائية. وبطبيعة الحال، نحن فقط الأسبوع الماضي الآن في هذا وأبعد من الغوص في برمجة الويب. لذلك لا داعي للقلق إذا كنت ليس لديهم أي فكرة عن كيفية كنت ستبني الأفكار التي قد يكون لديك في عقلك. هذا هو في الحقيقة مجرد وظيفة يجبر لتحصل على التفكير والتحدث مع TF الخاص حول هذا الموضوع. ولكن لمساعدتك في ذلك، و مع المشاريع النهائية في نهاية المطاف، نعلم أن CS50 لديها تقليد من تقدم الحلقات الدراسية. 

وهذه هي اختيارية، على أيدي، أو محاضرة على أساس الفرص لمعرفة المزيد حول الموضوعات التي والتبعية قليلا إلى ملعب ل المنهج، ولكن مع ذلك رائعة مواد لدفع المشاريع النهائية. وحتى هذه لائحة هذا الموظفين CS50 هنا في نيو هيفن قد حان حتى مع ل هذا العام عن دائرة الرقابة الداخلية البرمجة، الروبوت البرمجة وتطوير اللعبة، وعناقيد المزيد من الأدوات واللغات والتقنيات. 

حتى تبقى العين على موقع CS50 ل. وفي غضون ذلك، إذا كنت ترغب في تسجيل اهتمامك في أي من هذه، انتقل إلى CS50 ومائل السجل. وسوف نقوم بعد ذلك متابعة بالنسبة ل أيام ومواعيد الرحلات والمواقع وسوف everything-- معظم كل شيء يكون المتدفقة وتتوفر أيضا على الطلب بعد إذا كنت لا يمكن أن تجعل فعلا. ذلك دون مزيد من اللغط، ونحن توقفت آخر مرة مع GET. 

وكان هذا مثل الرسالة التي كان داخل المغلف الظاهري، أذكر، التي مرت علينا من جهاز التوجيه جهاز التوجيه ل جهاز التوجيه بين متصفح الإنترنت وشبكة الخادم. وبدا أن الرسالة شيئا قليلا من هذا القبيل. كانت هذه هي الرسالة أكثر الغامضة التي كان في الواقع داخل مغلف وكتب على قطعة من الورق الذي السطر الأول يقول حرفيا، والحصول على مائل. 

ومثلما شيك التعقل، ماذا مائل دلالة؟ ماذا يعني عندما مائل يطلب موقع على الانترنت؟ يمكنك أن تطلب في كل وقت. معظم أي وقت قمت بزيارة الموقع، فإنك لا تكتب الواقع في اسم الملف. ربما كنت مجرد الذهاب إلى Facebook.com، أدخل، gmail.com، أو ما شابه ذلك. وماذا تمثل مائل؟ ملف ما؟ ، أو ما الصفحة على وجه التحديد؟ 

مؤشر، نعم. حتى الصفحة الافتراضية. حتى إذا لم تقم بتحديد ملف اسم ونحن سوف تبدأ في رؤية، كنت في الواقع مجرد طلب تعطيني الصفحة الافتراضية الفيسبوك أو تعطيني البريد الوارد أو إعطاء لي الصفحة الافتراضية من الأخبار على موقع CNN أو ما شابه ذلك. وخادم ثم يستجيب ل هذه الرسالة بشيء مثل هذا، تقول نعم، وأنا الكلام HTTP الإصدار 1.1. 

200، وهو الوضع التعليمات البرمجية التي نحن البشر نادرا نرى أي وقت مضى لأنه جيد. لأنه يعني موافق، وطلب وكان في استقبال والتعامل معها بشكل صحيح. ونوع المحتوى على ما يبدو في الرد هو في كثير من الأحيان، ولكن ليس دائما، والنص. وعلى وجه التحديد، HTML. وهذا في الواقع حيث أننا ننظر اليوم. 

وذلك في الواقع، انا ذاهب للذهاب قدما وفتح المتصفح. انا ذاهب الى استخدام كروم، يمكنك استخدام أكثر من أي متصفح في الأسابيع المقبلة. عادة نوصي كروم لأنه لا سيما جيدة لمطوري البرمجيات. انها حصلت على الكثير من المدمج في الأدوات التي تجعل من السهل لتطوير ليس فقط HTML و CSS، أشياء سنبدأ الحديث عنه اليوم، ولكن أيضا لغات أخرى أيضا. 

وانا ذاهب الى المضي قدما والذهاب to-- انا ذاهب الى نقرة أو حق التحكم انقر في أي مكان على صفحة ويب. وانا ذاهب للذهاب الى فحص العنصر. وانا ذاهب الى قرص بلدي الشاشة فقط قليلا هنا. اسمحوا لي أن نقل هذا إلى أسفل. لذلك هذا هو ما يسمى المفتش كروم. لذلك هذا هو مثل التصحيح أداة صلب كروم. 

كل من لديك هذا بالفعل إذا كنت قد تم باستخدام الكروم. ويسمح لك أن ترى ما يجري تحت غطاء محرك السيارة من بعض الصفحات على شبكة الإنترنت. لذلك دعونا نلقي الواقع ننظر إلى هذا على النحو التالي. كان لديه وسيلة المزيد من الميزات ونحن نهتم اليوم. ولكن هناك علامات التبويب هذه أكثر من هنا. عناصر الشبكة، مصادر، الجدول الزمني، وبعض الأشياء الأخرى. انا ذاهب الى الضغط على شبكة لحظة. 

وانها قليلا الساحق للوهلة الأولى هنا. ولكن ما أنا ذاهب الى القيام به هو ترك لي تبسيط ذلك قليلا. انا ذاهب الى تشغيل تسجيل ضوء بحيث انها الأحمر. وانا ذاهب الى القول حفاظ على السجل. وهذا هو قليلا شيء فكنت أحسب مع مرور الوقت أن يحدث لإنقاذ كل ما يحدث في المتصفح. والآن انا ذاهب للذهاب لhttp://facebook.com. 

في الواقع، دعونا نفعل شبكة الاتصالات العالمية لحسن التدبير، خفض. أدخل. لذلك URL أن العديد من كنت قد زار. والآن على شبكة الإنترنت الفيسبوك ل الصفحة تأتي في الأعلى. ثم مجموعة كاملة من الاشياء حلقت به في القاع. في واقع الأمر، اتضح أن عند زيارة Facebook.com، كنت لا مجرد جعل طلب HTTP واحد، اتضح أن الذهاب إلى Facebook.com يرسل 41 من تلك المظاريف، مع كل طلب الحصول على الخاصة، كما هو مبين، ولو من وراء الشاشة هنا، في الجزء السفلي من الشاشة، فإنه يشير إلى أن، في الواقع، بلدي جعل المتصفح 41 الطلبات. 

وبشكل إجمالي، أنها نقلت 861 كيلو واستغرق لسبب ما يصل الى ثماني ثوان لتحميل كل ذلك. بحيث فعلا غريبة بعض الشيء هذا الموقع الفيسبوك من شأنه أن يأخذ ذلك منذ فترة طويلة، ولكن فليكن في هذه الحالة. الآن، كل هذا لا يهمني حقا حول ما عدا العلوي الطلب. لذلك دعونا نذهب إلى هذا الحق واحد هنا واسمحوا لي أن تصغير لمجرد لحظة. 

واسمحوا لي أن التكبير في هذا الشأن. ذلك ما فعلته في اليسار على الرغم من هناك الكثير مما يجري على أكثر من هنا ولقد أبرزت Facebook.com ثم لاحظت أنني التمرير لأسفل، التمرير لأسفل، التمرير لأسفل، لطلب رؤوس. وسترى أن كروم يظهر لي أساسا محتويات الداخلية الطلب الذي أدليت به. انها ليست تنسيق في غاية نفسها الطريق، ولكن لاحظت هناك ذكر ليحصل، تلاحظ هناك ذكر للمضيف، Facebook.com، المسار، أو مائل، وهو ملف طلبت. 

ثم إذا كنت انتقل عمل نسخة احتياطية، وسوف نقوم في الواقع نرى أن ما عاد الفيسبوك بالنسبة لي هو كل من هذه الرؤوس. حتى داخل ذلك الظرف الظاهري هي في الواقع الكثير من أزواج قيمة المفتاح. كلمة واحدة، والقولون، ثم قيمة. كلمة واحدة، والقولون، وقيمة. وتسمى هذه الرؤوس. وهناك طريقة مزيد من التفاصيل من هنا نحن نهتم فعلا عن الحق الآن. 

ولكن هذا هو الثاني ل آخر واحد الى هناك، لاحظ أن الخادم Facebook.com، و وقال في الواقع هنا يأتي بعض HTML النص. لذلك كل هذا هو القول أنه عند طلب شبكة الإنترنت الصفحة من مستعرض ل الخادم، ويستجيب هذا الخادم مع مغلف من تلقاء نفسها داخل وهو النص. وبعبارة أخرى، HTML. لغة توصيف النص التشعبي. وهي لغة أخرى أن نقدم اليوم أن البشر أو أجهزة الكمبيوتر توليد من أجل تنفيذ صفحات الويب. 

على وجه التحديد، دعونا ننظر في هذا الأمر. انا ذاهب الى العودة الآن لموقع الفيسبوك ل. وانا ذاهب الى مجرد السيطرة نقرة أو فوق الحق وانقر على عرض المصدر ل. وحتى لو كنت لا تستخدم كروم، IE يمكن أن تفعل هذا، فايرفوكس ويمكن القيام بذلك، رحلات السفاري ويمكن القيام بذلك، على الرغم من أن القائمة خيارات قد تبدو مختلفة قليلا. وهذا هو HTML أن مارك و وقد كتبت الشركة في الفيسبوك. 

وبشكل جماعي، هذه اللغة هنا تطبق الأزرق والصفحة البيضاء الذي رأيناه قبل لحظة. الآن، وهذا هو قليلا الساحق. ولكن إذا نظرنا حتى في أعلى اليسار، ونحن سنبدأ في رؤية بعض الأنماط. يبدو أن هناك الكثير هذه فتح قوس الزاوية ثم هناك هذا HTML الكلمات الرئيسية. وهنا فتح أخرى قوس الزاوية والرأس. 

هنا هو، إذا كنا انتقل لأسفل ونزولا وهبوطا، وأنا الذهاب الى المضي قدما ومحاولة للبحث عن شيء ما. هناك طريقة أكثر على اليمين هنا هو هيئة قوس مفتوح. ونذكر من الماضي الوقت الذي اقترحنا أن صفحة الويب أبسط أن الإنسان يمكنه أن يكتب قد تبدو شيئا قليلا من هذا القبيل. فتح علامة HTML، رئيس المفتوح العلامة، علامة العنوان مفتوحة، ثم لقب مغلقة، رئيس مغلقة، مفتوحة العلامة الجسم، وبعض النصوص، أغلق الجسم، HTML مغلقة. 

ولكن وقفة هنا لمجرد لحظة. هذا الرمز، حتى لو كنت قد لم تكتب من قبل ولكن ما زلت لا أفهم تماما ما يحدث، تبدو جيدة. الحق، انها نظيفة جدا. انها لطيفة جدا أسلوبيا. وهناك الكثير من المسافة البادئة والمساحة البيضاء. في الفيسبوك ليست كذلك. ذلك هو السبب في الفيسبوك كثيرا أسوأ مما كنت في كتابة HTML؟ على ما يبدو. 

الحق، وهذا هو مثل واحد من أصل خمسة لأسلوب. هناك سبب مقنع بالنسبة لهم لخفض هذه الزوايا. كل الحق، لذلك هم لا يريدون جعل من الأسهل بالنسبة لك لقراءته. حتى في بعض المعنى، انهم التشويش عليه، نوعا من الهرولة ذلك على الأقل من الناحية الجمالية لذلك أنه من الصعب على ماي سبيس للذهاب وراوغ بها زيارة وHTML لذلك. اتضح أنه مع برامج رغم ذلك، بما في ذلك كروم، يمكننا تنظيف هذا بسهولة فائقة. حتى انها ليست تماما أن كسبب. ماذا قد يكون السبب. نعم. نعم، بيانات التكاليف مساحة بيضاء. ماذا تعني؟ نعم بالضبط. إذا كنت أصاب مفتاح الجدولة الكثير أو شريط الفضاء، والنظر في الآثار المترتبة عليها. لذلك كل مفتاح على لوحة المفاتيح هو [غير مسموع] ممثلة بايت واحد. 

لذلك نفترض أن الأقسام أو أي من المشروعات الإنمائية في هذه الأيام يضرب على مفتاح المسافة مرة واحدة فقط في هذه الصفحة HTML التي يمثل موقع الفيسبوك ل. والفيسبوك لديها الكثير المستخدمين في هذه الأيام. لذلك نفترض أن موقع الفيسبوك ل يزوره مليار شخص اليوم. وشخص في الفيسبوك له ضرب شريط الفضاء مرة واحدة فقط. 

حتى بايت إضافية واحدة، مليار الطلبات، وكم من البيانات الفيسبوك نقل عبر الإنترنت لأن أحدهم ضرب المسافة على له أو لها لوحة المفاتيح؟ A مليار بايت أو غيغا بايت واحد من يتم إرسال البيانات من خوادم الفيسبوك للناس في جميع أنحاء العالم من دون سبب وجيه. الآن، وهذا الفضاء واحدة فقط. 

تخيل لو أننا فعلا تنظيف هذا الشيء حتى وبادئة ذلك، وأضاف الكثير من المساحة البيضاء و أحرف الجدولة والمسافات، كنت في نهاية المطاف غيغابايت الإنفاق، إن لم يكن تيرا بايت أكثر من الفضاء. وهكذا مشتركة عظمى في العالم الفعلي لتطوير الشبكة هو صغر التعليمات البرمجية. وسنرى في نهاية المطاف كيف يمكن القيام بذلك. 

ولكن اليوم، سنبدأ كتابة التعليمات البرمجية وهذا في الواقع قراءة من قبلنا البشر. كما تبين، رغم ذلك، إذا كنت أعود لهذه الأداة في كروم فحص العنصر، في السابق، كنا على علامة التبويب الشبكة. اتضح أنه إذا كنت تذهب إلى التبويب عناصر، ما تراه في الواقع وكروم المطبوعة جدا نسخة من نفس تلك HTML. لذلك قمنا deobfuscated ذلك. لذلك فمن غير مؤهل لجهاز كمبيوتر. والآن يمكنك فعلا انقر حولها وتبدأ لمعرفة التسلسل الهرمي الذي هو صفحة ويب. لذلك دعونا نفعل هذا الواقع. انا ذاهب الى المضي قدما وفتح على بلدي ماك برنامج يسمى تحرير النص. وأذكر أن هذا هو مجرد برنامج نص السوبر بسيط. نوافذ ديه NOTEPAD.EXE. وانا ذاهب الى المحاضر الحرفية اكتب ما يلي. وثيقة نوع HTML، قوس مفتوح HTML، أغلق قوس HTML، لدينا رئيس للصفحة هنا، نهاية رأس الصفحة هنا، سوف يكون العنوان مثل، مرحبا العالم. 

ثم إلى هنا، ونحن بحاجة الجسم من صفحة الويب. مغلق الجسم. ثم هنا، مرحبا العالم. حسنا. ولذا فإننا قد كتبت صفحة على شبكة الإنترنت بسرعة فائقة. أنا ذاهب لإنقاذ بأنها hello.html على سطح المكتب. بلدي ماك سيقدم شكوى، التفكير في أن، انتظر لحظة، هذا هو ملف نصي، والقيام تريد أن نسميها. TXT؟ ولكن لا، أريد استخدام نقطة HTML. 

ثم ما هو جميل لو فقط انقر نقرا مزدوجا فوق هذا الملف، hello.html، وهنا بلدي صفحة الويب. للأسف، أنا الشخص الوحيد في العالم الذين يمكن زيارة هذه الصفحة الآن. لأن حيث أنها لا تعيش على ما يبدو؟ انها على بلدي ماك، أليس كذلك؟ الذي لا طائل منه. مثل أي شخص في هذه الغرفة ناهيك على شبكة الانترنت في الواقع يمكن أن زيارة تلك الصفحة. حتى اليوم، ونحن بحاجة ل إدخال عنصر آخر. 

وللقيام بذلك، وانا ذاهب ل المضي قدما وفتح سحابة 9. حتى سحابة 9 هي بالطبع سحابة service-- استنادا CS50 IDE-- التي لديها كل مساحات العمل لدينا تشغيل في مكان ما على شبكة الانترنت. وهذا يعني أن جميع ملفاتنا يمكن الوصول إليها علنا ​​بالفعل. لذلك دعونا نمضي قدما ونفعل ذلك. انا ذاهب الى المضي قدما و إنشاء ملف جديد NCS50IDE. انا ذاهب لحفظه كما كان من قبل كما hello.html وانقر حفظ. والآن فقط لتوفير الوقت، وانا ذاهب المضي قدما ونسخ لصق هذا الرمز بدلا من إعادة كتابتها. وحفظه. وحتى الآن لدي ملف يسمى hello.html. ولكن كيف يمكنني في الواقع فتحه كصفحة ويب؟ حسنا، اتضح المدمج في لCS50 IDE ليس فقط مترجم مثل رنة والمصحح مثل GDB و باقات من البرامج الأخرى، هناك في الواقع العضوية الكاملة خادم الويب تشغيل في غضون CS50 IDE. 

كل واحد منكم، وهذا هو القول، لدينا خادم الويب الخاص بك. وخادم الويب هو مجرد قطعة من البرامج التي تهدف في الحياة هو لخدمة ما يصل صفحات الويب. للاستماع لطلبات من المتصفحات و الرد مع القليل المغلفات الافتراضية داخل وهو المحتوى الذي كتبته. حتى ملقم ويب هذا غير حر فعلا والمفتوحة المصدر. حيث المصدر المفتوح يعني فقط البرامج التي شخص آخر لديه مكتوب ان كل واحد منا يمكن نرى في الواقع وتنزيل وحتى تغيير شفرة المصدر. وانه دعا أباتشي. 

وأوضحنا ذلك أسهل قليلا ل استخدام في CS50IDE عن طريق استدعاء اباتشي 50. بحيث يمكن في الواقع فهم ما يلي. انا ذاهب الى القول اباتشي 50 البداية. ثم أنا فقط أريد أن أقول نقطة. ونحن نرى بعض إلى حد ما رسالة غامضة قائلا وضع أباتشي ثيقة [؟ مجموعة؟] إلى المنزل، أوبونتو، أيا كان ذلك، خفض مساحة العمل. بدءا خادم الويب اباتشي 2 بنجاح. 

حتى قصة قصيرة طويلة، وأنا دفعت فقط على زر وتحولت على خادم الويب الذي هو الآن الاستماع على الانترنت على منفذ TCP 80 في عنوان محدد. ويقول هنا، و سيؤدي ذلك إلى تغيير مقرها على اسم المستخدم والعوامل الأخرى الخاصة بك، ولكن لاحظ الآن إذا كنت فوق هذا، IDE50 نقطة jharvard وذلك و لذلك، لاحظ أن كل هذا الوقت لالماضية أسابيع، قد يكون لديك لاحظت أن اسم المستخدم الخاص بك مضمن في اليد اليمنى العليا زاوية CS50IDE. 

والتي كانت في الواقع كل هذه توقيت العنوان الذي يمكنك زيارة جميع الملفات الخاصة بك عبر الإنترنت. حتى الآن، لم يهم ذلك، لأنه في C، بشكل عام تريد تسيير الأمور في محطة، وليس على شبكة الإنترنت. ولكن اليوم، ونحن نبدأ كتابة التعليمات البرمجية على شبكة الإنترنت أننا لا نريد يمكن الوصول إليها في عناوين المواقع العامة. فما انا ذاهب الى القيام به هو الضغط على هذا URL. 

وتلاحظ أن أرى إلى حد ما مؤشر القبيح، سرد دليل، ولكن ما يقفز في ملف وربما كنت؟ Hello.html. هذا لأنني المحفوظة الملف في مساحة العمل الخاصة بي. وما قلت أباتشي خادم الويب هو أن ننظر في الدليل مساحة العمل داود. والسماح لأي شخص في العالم يرى تلك الملفات. 

وبالفعل، لو كنت الآن انقر على hello.html، أرى في هذا التبويب بالضبط هذا الملف. لاحظ الآن، سحابة القيام 9 ل شيء مفيد قليلا بالنسبة لنا. ضمن IDE CS50، لاحظ هناك فجأة شريط العنوان. هذا هو لأنه حتى وإن نحن باستخدام كروم لزيارة CS50IDE، داخل CS50IDE هو بمفرده نسخة من متصفح الإنترنت في الوقت الحالي. وذلك بدلا من تعقيد الامور على هذا النحو، انا ذاهب الى المضي قدما ومجرد نسخ هذا URL. انا ذاهب الى المضي قدما وفقط فتح بلدي نافذة Chrome. لذلك ليس هناك السحر هنا، لا CS50IDE. أنا ذاهب لمجرد لصق حرفيا بلدي J هارفارد URL وهاهنا. وفويلا، وأنا الآن، و من الناحية النظرية، الجميع على شبكة الانترنت، وإذا كنت قد تكوين الأذونات بشكل مناسب، يمكن زيارة هذا الملف. وحتى الآن، إذا قلت hello.html، فويلا، هناك هي صفحة الويب الخاصة بي مخيب بشكل لا يصدق. لذلك دعونا نفعل شيك التعقل سريع. لأن كل ذلك هو مجموعة المفاهيمي تصل. ولقد الواقع ليست حقا أنت تعلم كيفية كتابة HTML في حد ذاته. حتى الآن أي أسئلة بالتالي على ما حدث للتو؟ نعم فعلا. لا CS50 تملك هذه الصفحات على شبكة الإنترنت؟ بأي معنى؟ سؤال جيد. حتى في CS50 يملك CS50.io. لقد اشترى بالفعل أن اسم المجال. وحسب طبيعة يا رفاق تسجيل الدخول إلى CS50IDE، يمكنك الحصول على كل ما يسمى فرعي. 

حتى IDE50-مالان، أو IDE50-Rob.CS50.io، هذا هو عنوان فريد الخاص بك في غضون اسم النطاق لدينا. حتى لأغراض الدورة، لديك عنوان الفريدة الخاصة بك. ولكن لدينا تبسيط الأشياء شراء نطاق المستوى العلوي، CS50 نقطة I / O ثم الجميع هو داخل ذلك، إذا جاز التعبير. وسوف نعود لذلك في بضعة أسابيع على الأرجح، خصوصا في المشروع النهائي الوقت، عندما بعضكم قد ترغب في الحصول على أسماء النطاقات الخاصة بك. انها في الواقع نسبيا مباشرة. حسنا. لذلك دعونا نفعل هذا الآن. انا ذاهب الى العودة الى CS50IDE، حيث ملفي الآن، hello.html، ليس كل ما مثيرة للاهتمام. أود أن تفعل شيئا أجمل قليلا من ذلك. لذلك أنا ذاهب لتفعل شيئا من هذا القبيل. اسمحوا لي أن paragraphs.html مفتوحة. لذلك هذا هو ملف كتبت في وقت مبكر. في الجزء العلوي منه، مثل دائما، لدينا التعليقات. ولكن في HTML، تعليقات تبدو مختلفة قليلا. في السطر الثالث وخط 14، ل رؤية بناء الجملة من أجل بدء تعليق ووضع حد للتعليق. 

ولكن أيا من الأشياء في بين المسائل وظيفيا. انها مجرد مذكرة ل الإنسان ما يحدث هنا. وتماما كما التعقل سريعة تحقق، وإذا كنت انتقل لأسفل، ما هو جديد واضح العلامة التي قمنا بعرض؟ علامات حتى الآن رأيناه مفتوحة قوس HTML، رئيس، والعنوان، والجسم. ولكن ما هو جديد من الواضح الآن؟ 

نعم، لذلك ص. العلامة ص أو علامة الفقرة. وبعد ذلك فقط اقترضت بعض الافتراضي النص اللاتيني لتشكل الفقرات بلدي. لأن ما أردت أن إظهار هي الطريقة التي قد تمثل الفقرات من النص في HTML. وذلك ما بدأ يحدث هنا هو أن هناك بالفعل نمط تتطور. واسمحوا لي أن نمضي قدما ونفعل ذلك. اسمحوا لي أولا من طراز أباتشي. وأنا أريد أن أقول أن تبدأ نفسها مرة أخرى داخل المصدر اليوم سبعة م الدليل. لدرجة أنني الحصول على كل شيء. 

والآن، إذا أعود إلى قائمة دليل هذا، تلاحظ أرى كل ملف من اليوم. وسترى في القادم مجموعة المشكلة، وسوف نقوم يعطيك تعليمات للقيام بذلك بالضبط. إذا قمت بفتح paragraphs.html، وهذا قد كما ننظر جيدا مثل لغة البرمجة لك إذا كنت لا يتكلمون أو قراءة اللاتينية. ولكن هذا هو الفقرات الثلاث فقط النص الذي تم ترميزه في HTML. 

وتلاحظ الفقرة فواصل بينهما. لأنه تبين، وحتى لو كنت قد تميل إلى القيام بذلك، في حين أنه في العالم الحقيقي، إذا كنت ترغب في وضع خط فواصل بين الأشياء، كنت قد بكل بساطة تفعل هذا، وضرب حفظ. والآن، إذا كنت تحميل هنا، لاحظ أن كل ما يطمس فقط معا في النقطة واحد فقط من النص. لأن HTML هو نوع من لغة البكم. 

ومن المفترض أن يتم استخدامها في مثل هذه هذه الطريقة التي سوف المتصفح فقط به صراحة ما كنت أقول أن تفعله. لذلك إذا كنت لا أقول ذلك تعطيني فقرة جديدة كنت لن نرى فقرة جديدة. في واقع الأمر، ما يسير على متصفح للقيام هو حتى لو كنت هاهنا، دعنا نقول مرارا وتكرارا ومرة أخرى، والانتقال بهذه الطريقة النص أسفل على الشاشة ثم قم بحفظ ثم تحميل، والمتصفح سوف أن ينهار كل ذلك المساحة البيضاء إلى مجرد واحدة، بيضاء واضحة. حسنا. لذلك هذا هو علامة الفقرة. وذلك ما هو نمط وهذا ما وضع هنا؟ حسنا، يبدو أن هذا هو الحال الذي HTML هو كل شيء بدءا علامة وتنتهي علامة. وما هو علامة؟ حسنا، انها مجرد قطعة من بناء الجملة. فتح قوس، كلمة رئيسية، قوس مغلقة، هو علامة. أو بدء العلامة. وبعد ذلك عندما كنت يتم التعبير عن نفسك، كما هو الحال في الانتهاء من ذلك مع الفقرة، يمكنك القيام بذلك في الكلام عكس ذلك. ولكن العكس ليس إلى الوراء تماما. 

يمكنك ببساطة بادئة نفس العلامة اسم بخط مائل إلى الأمام من هذا القبيل. حسنا. لذلك ليس كل ما مثيرة. في واقع الأمر، نحن لا يجعل على شبكة الإنترنت كل ذلك أكثر إثارة للاهتمام. ماذا لو كنت تريد أن تجعل أشياء أكبر وجريئة؟ هكذا اتضح أن هنا مثالا في headings.html، حيث في جسدي، لقد حصلت على علامة H1، H2، H3، أربعة، خمسة، أو ستة، وكلها يبدو غامضة جدا. ولكن إذا ذهبت فتح هذا سبيل المثال، دعونا نلقي نظرة. Headings.html. 

حتى المتصفحات افتراضيا يمكن أن تعطيك نص هذا هو كبيرة وجريئة من أحجام متباينة. H1 هو كبير. H6 هو أصغر ثم كل شيء آخر بينهما. بحيث مثيرة للاهتمام ولكن لا يزال لا حقا على شبكة الإنترنت وأنا أعلم. ماذا لو أردنا أن لدي ما يشبه القائمة. . حتى هنا قائمة ذات تعداد نقطي ثلاثة منازل في جامعة هارفارد. 

كيف يمكنك أن تفعل هذا؟ حسنا، نلقي نظرة على list.html. وهنا، نرى قليلا من funkiness ولكن دعونا نتأمل ما يحدث. ذلك يعتمد على ما كنت قد رأيت للتو، UL لتقف على قائمة غير مرتبة. قائمة غير مرتبة فقط يعني النقطية. ليس هناك أرقام. هناك أيضا شيء يسمى القائمة، وهو OL في العلامة المطلوبة. ثم LI، عنصر قائمة هو كل ما يعني. 

ولذا فإنه تلقائيا أرقام كل شيء بالنسبة لك. ولكن مرة أخرى، كل من بلدي المسافة البادئة والمساحة البيضاء هو فقط من أجلي. المتصفح لا يحدث فعلا على الرعاية. حتى على الرغم من أنك لا تستطيع القيام بذلك، لمجرد أن يكون واضحا، يجب أن لا الرغم من سيظل المتصفح تكون قادرة على فهمه على ما يرام. أنا ضرب تحديث في بلدي متصفح، أنا النقر تحديث وأي تغيير يحدث لأن المتصفح لا يزال تفعل بالضبط ما أقول أن تفعله. 

حسنا. لذلك هذا هو كل نص فقط. الآن دعونا نفعل شيئا أكثر إثارة للاهتمام. انا ذاهب الى المضي قدما و استعارة بعض من هذه HTML. انا ذاهب الى المضي قدما و إنشاء ملف جديد هنا. ونحن سوف نسمي هذا rick.html. لدينا نحو غير متناسب شيء كان دعا لفة ريك في هذا فئة هذا العام، وأنا لا أعرف، لقد حدث ما حدث عضويا. 

والآن انها حصلت خارج نطاق السيطرة. لذلك أنا ذاهب لمجرد الذهاب معها. وإذا ذهبت إلى Google الصور وريك آستلي. إذا كنت لا تعرف ماذا نفعل هذا، فقط تقرأ على ويكيبيديا. في كل مرة كنت قد النقر على الرابط، شخص ما كان يضحك في مكان ما. واسمحوا لي ان اذهب هناك ahead-- نذهب، دعونا مشاهدة هذه الصورة. 

حتى هنا لدينا صورة في صور Google. ودعونا نفترض أن هذا هو في كل مكان معقول على شبكة الانترنت. لذلك أنا ذاهب لنفترض انه موافق بالنسبة لي لوضع هذا الواقع إلى صفحة الويب الخاصة بي. انا ذاهب الى المضي قدما ونسخ URL الصورة. والآن إذا ذهبت إلى السحاب 9، دعونا نرى ما يمكنني القيام به هنا. حتى هنا هو مجرد صفحة على شبكة الإنترنت. هذا هو ريك آستلي، هاها، انا ذاهب الى العودة الآن لمتصفحي، تحميل، ومثيرة للاهتمام. 

أين هو ريك؟ لذلك اسمحوا لي أن نرى ما حدث. في الواقع، انا ذاهب الى التظاهر وكأنني لم أفعل ذلك. (غير مسموع) وضعه هنا. سنعود إلى أنه في لحظة. حتى هنا rick.html. ولهذا لا ريك آستلي. لذلك تبين ما في وسعنا في الواقع إضافة له هنا. هذا هو ريك آستلي. انا ذاهب الى القول تعطيني صورة التي المصدر هو URL لقد نسختها التي على ما يبدو غير سعيد شيء ميلاده أو غيرها. 

والآن أنا ذاهب ل إغلاق علامة من هذا القبيل. لذلك هذا هو التفاف السوبر الطويل. ولكن لاحظ أن كل ما قمت به هو صورة قوس مفتوح، مصدر سمة من هذا. وانها URL طويل حقا. وفي النهاية، لاحظ هذا. مائل لماذا فعلت قوس الزاوية بدلا من، مثل كل علامة أخرى، وجود قوس مفتوح، IMG، أغلقت قوس؟ مجرد إلقاء تخمين حتى لو كنت ليس لديهم الألفة على الإطلاق مع HTML من قبل. 

لذلك هو كيف يغلق الأمر، ولكن لماذا أليس من الحقيقة البديهية بمعنى أن تفعل شيئا أكثر من ذلك بقليل مطول مثل صورة وثيقة؟ نعم. نعم. فقط لغويا، وليس هناك إحساس بدءا صورة وتنتهي صورة، انها إما هناك أو أنه ليس كذلك. لذلك لا معنى لترك فجوة لأي شيء آخر داخل صورة. انك لا تستطيع أن تفعل ذلك. وذلك بناء الجملة سيكون عموما فقط للقيام مائل داخل العلامة مفتوحة أو علامة البداية ثم ضرب حفظ. 

حتى لو كنت الآن تحميل هذا الملف الآن لقد حصلت على ويب جيد الصفحة الطبخ هنا. ونستطيع بالتأكيد يؤذون الناس فعلا بدلا من ذلك عن طريق دمج مثل وصلة يوتيوب. في واقع الأمر، في أي وقت كنت قد ذهبت من أي وقت مضى على يوتيوب، واسمحوا لي في الواقع عن طريق الخطأ ريك لفة نفسي هنا. لذلك ريك لفة. لذلك ريك roll-- انا ذاهب للذهاب هنا. 

[عزف الموسيقى] 

OK، شخص واحد يحب ذلك. هكذا تلاحظ كل هذا الوقت، إذا كنت اضغط على الرابط حصة، وكنت بالطبع الحصول على URL التي يمكنك فعلا تضمينها في رسالة بريد إلكتروني أو صورة الطب الشرعي أو في مشكلة تعيين أو في شريحة. والآن، إذا كنت بدلا من ذلك النقر على تضمين، لاحظت أن كل هذا الوقت، وهذه الاشياء لم يكن هناك. انا ذاهب الى المضي قدما ونسخ هذا. 

وذلك فقط يمكننا أن نرى ذلك على نحو أفضل، وأنا الذهاب إلى صقه في محرر النص الخاص بي. لاحظ أن هذا ما وقد يوتيوب أقول لك. في كل مرة تقوم بزيارة فيديو يوتيوب، إذا كنت تريد تضمين الفيديو على جهاز صفحة على شبكة الإنترنت، وذلك ببساطة انتزاع هذا. لذلك هذا هو آخر دعا العلامة HTML وIFRAME. أو في إطار الخط. بحيث يبدو أيضا أكثر من ذلك بقليل مجمع من كل الآخرين. هكذا اتضح أن الصورة العلامة وعلى ما يبدو علامة IFRAME اتخاذ ما يسمى الصفات. 

وهذا هو آخر قطعة من بناء الجملة في HTML. بالإضافة إلى العلامة اسم، وفتح قوس اسم العلامة، يمكنك التحكم في السلوك من العلامة من خلال وجود مجموعة كاملة من السمة يساوي قيمة. السمة يساوي قيمة. وذلك على سبيل المثال، يوتيوب يقول لنا إذا كنت ترغب في عرض هذا الفيديو أن تكون 420 بكسل وارتفاع أن تكون 315 بكسل، وهذا كيف يمكن التعبير عن ذلك في HTML. 

مصدر الفيديو هو ذاهب ليكون ذلك URL يوتيوب طويل وبعد ذلك بعض الأشياء الأخرى مثل الحدود الإطار هو صفر، بحيث ربما يعني هناك لا حدود حول الشيء. سماح كامل الشاشة على الأرجح يعني أن المستخدم يمكن النقر على زر و في الواقع كاملة شاشة الفيديو. حتى لو كنت حقا تريد أن تكون الإعجاب هنا في ريك نقطة HTML، بدلا من استخدام علامة صورة، واسمحوا لي بحذف هذا، بدلا من لصق هذا. وتحميل الآن. والآن ها نحن مرة أخرى. كل الحق، وهذا يكفي. كل الحق في ذلك وسأحاول ليس من الصعب أن تفعل ذلك مرة أخرى. فما هي بعض من الوجبات السريعة هنا؟ لذلك HTML، والقبيح مثل هذه الصفحات على شبكة الإنترنت هي، هو في الواقع بسيط جدا. انها ليست لغة برمجة. ليس لديها وظائف. لم يكن لديك الحلقات. أنه ليس لديه الشروط. كل ما لديها هو عشرات علامات مختلفة، كل منها لديه صفر أو أكثر الصفات. في واقع الأمر، ما هي متعة حول HTML والبدء في يغوص هو أنه قابل للتعليم الذاتي جدا. 

كل ما يتطلبه الأمر هو فهم من الإطار العام للHTML. ما هو علامة، ما هو السمة، كيف كنت في الواقع تكوين صفحة على شبكة الإنترنت كما يلي. وكل شيء آخر هو في الحقيقة نتيجة من يبحث حتى في اشارة على الانترنت أو غوغلينغ كيفية القيام ببعض تقنية أو كما رأينا، النظر في مصدر الفيسبوك ل رمز، تبحث في الموقع الذي ترغب في انها شفرة المصدر و فهم كيف يمكن للمطورين هناك في الواقع وضع الامور. 

حتى نتمكن من القيام الصور كذلك. في واقع الأمر، فعلنا ذلك قبل لحظة. اسمحوا لي أن أذهب إلى الأمام وتظهر فقط لك. وإليك بعض التعليمات البرمجية. إذا كنت تريد من أي وقت مضى لرؤية القط غاضب. لذلك تلاحظ أن استطيع لها علامة صورة هنا. ولقد حصلت على تعليق فوقه. أنا عندي بديل النص للمعاقين. شخص حتى من هو باستخدام شاشة القارئ لأسباب البصر يمكن فعلا ثم بهم قارئ الشاشة ويقول القط غاضب. لأنه إذا لم يتمكنوا رؤية الصورة، فإنها يمكن على الأقل أن يكون جهاز الكمبيوتر الخاص بهم نقول لهم لفظيا ما هو عليه. ومصدر هذا الملف هو cat.jpeg. حتى في الواقع، إذا أردت حقا أن الحصول على ذكية، ما كان يمكن أن يكون done-- اتعهد بعدم الذهاب الى ريك آستلي، لذلك أنا ذاهب إلى google لقطة بدلا من ذلك. وإذا ذهبت إلى صور Google هنا، ونحن سوف نفترض أن هذه هي صورة لقطتي. 

لنفترض أن لدي السيطرة النقر أو النقر على الحق في ذلك، عن طريق الخطأ زاحف. وcat.jpeg انا ذاهب لحفظ على سطح المكتب. اسمحوا لي الآن أن أعود إلى سحابة 9. لاحظ أن هنا، يمكنني الذهاب لتحميل الملفات المحلية. وإذا كنت الاستيلاء على هذه ملف، cat.jpeg، لاحظ أستطيع أن اسحبه و تسقطها في سحابة 9 وانها سوف يصيح في وجهي هنا. 

لأننا بالفعل منحك ملف cat.jpeg، ولكن من السهل سوبر ل الاستيلاء على الصورة التي قمت مأخوذة من الفيسبوك أو فليكر أو ما شابه ذلك واسحب الواقع وأسقطه في سحابة 9 ثم جعله جزء من الشخصية الخاصة بك موقع ويب أو مشكلة حطم سبعة أو ثمانية كما سنرى قريبا. ثم عند أخيرا زيارة هذا القط، على افتراض أنني تحميلها في نفس القط، كان إشعار هكذا- يضرب التي رائعتين. 

ما كنت تراه هو شيء مثل هذا الوجه هنا. حتى الملفات التي قمت إشارة داخل صفحة ويب يمكن أن يكون محليا في بلدانكم حساب أو بعيد على بعض الخادم الآخر كما هو الحال بالنسبة لريك الصورة ASTLEY منذ قليلا. فأين ما else-- يمكننا أن نفعل هنا؟ لذلك دعونا نلقي نظرة على ما يلي. كنت أعرف ما نوع من بارد؟ 

لقد كنا حتى الآن مما يجعل صفحات الويب ثابتة جدا. أريد أن التوابل الامور على النحو التالي. أريد أن أجعل محرك البحث الخاص. وذلك لجعل محرك بحث، دعونا المضي قدما والبدء في القيام بذلك. انا ذاهب الى المضي قدما وخلق دعا ملف جديد search.html. ولقد prefabed الإصدارات على الانترنت. يصيح. لا صقها في إطار المحطة الطرفية. إصدارات الجاهزة على الانترنت. وانا ذاهب لبدء النحو التالي. حتى هنا بداية دعا ملف search.html. انا ذاهب لحفظه في الدليل المصدر اليوم. انا ذاهب لاستدعاء هذا البحث. في الواقع، اننا سنحقق ذلك أفضل. CS50 البحث وفعلا العلامة التجارية هو. والآن، انا ذاهب الى القول شيء من هذا القبيل H1 CS50 البحث. ثم إلى هنا، H2 قريبا. وفقط من أجل التذكير، وH1 H2 يعني ما التوالي؟ 

نعم، كبيرة جدا وجريئة، و ليست كبيرة كما، ولكن لا يزال جريئة. حتى لو كنت حفظ هذا ويذهب أكثر من هنا، دعونا نرى search.html الملف. كل الحق، وهذا واحد غير right-- (غير مسموع). تعليق. ديفيد هو الخلط. أوه، انها هناك. ديفيد احمق. حسنا. لذلك هناك هو عليه. لذلك البحث CS50 قريبا. وحتى الآن، دعونا توليف ما فعلناه الأسبوع الماضي. 

حيث تحدثنا عن الميكانيكا مستوى أقل من HTTP. وهذه الأفكار الجديدة من HTML، الذي هو مجرد هذه اللغة الترميزية حيث كنت أقول متصفح بالضبط ما يجب القيام به وتنفيذ محرك البحث الخاصة بنا. وذلك بدلا من مجرد قائلا قريبا، وأنا ذاهب ليعرض شيء يسمى علامة النموذج. وفي هذا النموذج، وانا ذاهب ل لدينا شيء من هذا القبيل حقل الإدخال. 

واسم هذا الإدخال الميدان، انا ذاهب الى نسميها Q. ونوع هذا المجال المدخلات انا ذاهب الى القول هو مجرد "النص". وحقل النص، كما سنقوم ترى، هو مربع النص فقط. وحتى لا يحس هنا ل أي شيء داخل منه في هذه المرحلة. وهكذا أنا ببساطة الذهاب لإغلاق علامة مع أن مائل الحق في العلامة نفسها. ثم انا ذاهب الى يكون مدخل واحد آخر. نوع الإدخال يساوي تقديم. ثم انا ذاهب الى إغلاق هذا واحد أيضا. 

والآن انا ذاهب للذهاب إلى هنا. وبالفعل نرى، وإن كان قبيحا جدا، لقد حصلت على بدايات بلدي صفحة البحث الخاصة هنا. في الواقع، اسمحوا لي في محاولة ل تنظيف هذا قليلا. وتبين أن على إدخال هنا، وأنا يمكن أن يكون سمة أخرى دعا نائب. وأنا قد رأيت شيئا مثل الكلمات الرئيسية، أو بشكل أكثر تحديدا، الاستعلام عن س. 

وتلاحظ، والآن، ولدي هذا النوع من النص الرمادي كما أن يختفي بمجرد أن تبدأ في الكتابة، ولكن من المحتمل أن يكون شيئا كنت قد رأيت في صفحات الويب الأخرى. أنا لا أحب حقا على زر إرسال. لذلك أنا ذاهب فعلا لإعطاء زر تقديم قيمة البحث. والآن، إذا كنت تحميل، لاحظ أن زر بلدي يصبح اسمه البحث. كما تعلمون، أنا لا حقا مثل الشعار هنا. حتى مولد جوجل الخط. 

أريد أن التوابل هذا الأمر أبعد من ذلك. البحث CS50 ذلك. اسمحوا لي أن إنشاء شعار بلدي. أن تبدو لطيفة. وحتى الآن اسمحوا لي أن حفظ هذا as-- هيا. أين هو ذاهب؟ هناك. حسنا. فقده. حفظ باسم. متصفحات غبية. الوقوف من قبل، ونحن في طريقنا ل إصلاح هذا مرة واحدة وإلى الأبد. هناك نذهب. حسنا. آسف. يوم عطلة. الآن هذا هو غير تقليدي. خروج كامل الشاشة. حسنا. 

الآن، مثل وضعها الطبيعي شخص، حفظ الصورة باسم. Logo.gif. الآن انا ذاهب للذهاب الى CS50IDE و أنا ذاهب لمجرد انتزاع الشعار، انا ذاهب الى جرها الى بلدي مصدر سبعة دليل، الملف موجود بالفعل، وأنا موافق على ذلك. لذلك أنا ذاهب لتجاوز ذلك لأنني بالفعل كان عليه. والآن كيف يمكنني التخلص من هذا؟ 

دعونا نمضي قدما هنا والقيام مصدر الصورة يساوي logo.gif. إغلاق هذا. حفظ. والآن إذا ذهبت إلى بحثي الصفحة، والآن انها تبحث جيدة. كل الحق، لذلك لم فعل أي شيء مفيد جدا. في الواقع، اسمحوا لي أن أحاول البحث لقطة ونرى ما سيحدث. القطط. عليك اللعنة. أنها لا تعمل فقط على ما يبدو. فما هي قطعة رئيسية هذا هو مفقود هنا؟ 

الحق، حتى لو كنت لا تعرف أي HTML، لقد بدأت علامات الاستمارة الهاتف ولقد قلت ذلك كيفية الحصول على المدخلات، أعطني مربع النص وزر إرسال، ما قطعة على ما يبدو في عداد المفقودين؟ لنفترض أننا نريد أن يحصل في الواقع هذا شيء يعمل بشكل صحيح. ماذا علينا أن نفعل؟ لدينا حاجة لتنفيذ النهاية الخلفية قاعدة البيانات أو محرك البحث نفسه، وهذا ما سيستغرق الكثير من الوقت كله، وبصراحة. 

حتى أن نتذكر ما فعلناه في المرة السابقة. لذلك إذا كنت تبحث عن شيء ما على جوجل وكنت قد مقدما إيقاف، أذكر، البحث الفوري. لذلك اسمحوا لي أن أنتقل خارج ذلك أن هذا الواقع يتصرف مثل متصفح المدرسة السن، إذا أنا الآن ابحث عن شيء مثل القطط، أذكر ما يبدو URL مثل. انها خفي جدا. ولكن جزءا لا يتجزأ من هناك، أذكر، هو البحث مائل. علامة استفهام ف يساوي القطط. 

والتي يبدو أن تعطيني مجموعة كاملة من نتائج البحث. حتى تعرف ما أنا ذاهب الى القيام به؟ انا ذاهب الى الاقتراض جوجل لدقيقة واحدة فقط. انا ذاهب للذهاب أكثر هنا وانا ذاهب الى القول أن هذا يشكل العمل أو المقصد، إذا جاز التعبير، يجب أن يكون حرفيا جوجل. وطريقة أردت لاستخدام سيكون الحصول عليها. 

فما هو العمل؟ يدعى عمل بغرابة، ولكن هذا يعني فقط وهو ذاهب للتعامل مع عمل هذا النموذج؟ عند النقر فوق بحث، حيث يجب أن تذهب النتيجة؟ وإذا كنت الآن نعود إلى مستواي هنا وتحميل صفحات الويب الخاصة بي والآن ابحث عن شيء مثل الكلب، لاحظ الآن لقد أعادت جوجل تنفيذها. الصحيح؟ 

إذا كنت ترغب في البحث عن شيء آخر، وأنها تعمل ليست مجرد الكلاب، كما أنها تعمل للقطط. كما أنها تعمل لCS50. وموافق، وهذا هو فقط تحت يلمينج، أليس كذلك؟ كل الحق، لكنه يعمل فعلا. ذلك ما تم بالفعل يحدث؟ حتى لقد علمت متصفحي، وذلك باستخدام HTML، لاتخاذ مدخلات من المستخدم والواقع أن ترسل المدخلات إلى ملقم بعيد باستخدام HTTP. 

ولأن متصفحي يفهم HTTP، فإنه في الواقع بناء URL بحيث أن ما أنا في نهاية المطاف أكثر في متصفحي، لاحظ ما يحدث عندما بحثت عن الكلب. إذا كنت انقر فوق بحث، لاحظ أن تغيير URL كما كنت أنوي لgoogle.com/search~~V الاستعلام يساوي الكلب. وهذا لأن النموذج يدري، لأن الأسلوب هو الحصول عليها، لمجرد إلحاقها إلى أن URL هناك. 

الآن، هذه صفحات الويب لا تزال قبيحة. لذلك دعونا أعرض واحدة أخرى قطعة من جملة ما اذا كنا نستطيع اليوم. وهذا شيء معروف كما أوراق الأنماط المتتالية. لذلك اسمحوا لي أن نلقي نظرة على هذا المثال هنا ونرى إذا كان لنا أن نستنتج ما يجري. هذا هو CSS0.html. وهذا هو المكان أشياء الحصول على القبيح قليلا. لأن للأسف، في عالم الويب، HTML وحدها لا تستطيع أن تفعل كل شيء. وحتى إذا كنت تريد أسلب صفحة الويب الخاصة بك، كنت فعلا بحاجة إلى التركيز على جماليات بطريقة مختلفة. حتى هنا، لا بد لي جسد الويب الخاص بي الصفحة الداخل والتي هي شعبة كبيرة. وشعبة يعني فقط تقسيم. لذلك مثل فقرة كنها لا تملك نفس دلالات فقرة من النص. 

هذا يعني فقط لل متصفح، ويأتي هنا منطقة مستطيلة كبيرة من الويب الخاص بي الصفحة، أريد أن التعامل معها بشكل خاص. الآن، خط 21 هو المكان الذي يبدأ شعبة. وتأخذ مجرد تخمين. ما هو تأثير خط 21 على باقي محتويات الصفحة؟ تركز عليه. هذا كل شيء. لذلك نحن لم نر وسيلة ل تركز في الواقع على النص. 

في الواقع، محرك بحثي، على عكس جوجل الفعلية، كان كل ما يبرره لأكثر من اليسار. وحتى الآن في خط 21، أقوله، مهلا المتصفح، وخلق تقسيم الصفحة. فقط أعطني كبير، مستطيل غير مرئي. هذه هي الطريقة التي أريد أن نفكر في صفحة الويب. ثم أسلب على النحو التالي. داخل تلك الاقتباسات، الآن، هي لغة ثانية أن قدمنا ​​اليوم ودعا أوراق الأنماط المتتالية. لحسن الحظ، فهو أيضا لا لغة البرمجة، حتى انها محدودة جدا في بناء الجملة ولكن أيضا محدودة جدا في وظائفه في حين HTML هو كل شيء ترميز البيانات من صفحة ويب وهيكل صفحة الويب. CSS بشكل عام حول الميل الأخير، وعلم الجمال، الحصول على حجم ولون و التنسيب المناسب تماما في صفحة ويب. وبالفعل، تم تشكيلها مع أزواج قيمة المفتاح. 

خاصية مثل هذا، نص محاذاة، متبوعا بنقطتين، تليها قيمة تلك الملكية، وهو في هذه الحالة هو المركز. والآن نلاحظ لك يمكن تداخل هذه الأمور. إذا أردت كل شيء في ذلك لقد أبرزت أن تركز، لهذا السبب لدي خط 21 و على الخط المقابل 31. ولكن لنفترض الآن أريد أن أقول جون جامعة هارفارد، مرحبا بكم في صفحتي الرئيسية. 

رمز حقوق النشر جون هارفارد. ونفترض أنني أريد أول تلك الخطوط لتكون كبيرة جدا. 36 بكسل. ذلك أن حجم لائق. وأردت وزنه إلى التحلي بالجرأة. ولكن بعد أقل من ذلك، أريد نص أصغر. ودون ذلك، أريد النص حتى أصغر. آسف. اليوم يشعر وكأنه يوم عطلة. 

وحتى الآن، ماذا أفعل للتعبير عن هذا؟ هنا في السطر 22 هو جزءا لا يتجزأ من شعبة أو شعبة متداخلة، اذا صح التعبير. لديها أيضا سمة نمط الخاصة بها. I تحديد حجم الخط 36. I تحديد وزن الخط جريئة. إلى هنا، أنا فقط تحديد 24 بكسل. وأخيرا، في خط 28، وتحديد 12. لذلك مثلما شيك التعقل سريعة ونتيجة لقراءة هذا الإنسان، الكلمات التي تظهر على الشاشة ل الذهاب فعلا أن تكون جريئة؟ الذي خطوط جريئة فعلا؟ 

فقط جون هارفارد. الصحيح؟ لمجرد كخط 22 يقول مهلا متصفح، وهنا تقسيم الصفحة. جعله حجم الخط 36 نقطة. جعل وزن الخط الغامق. بمجرد الوصول إلى العلامة نهاية المقابلة أو علامة مغلقة على خط 24، وهذا يعني، يا المتصفح، يتوقف عن فعل كل ما هو تقومون به. وإشعار أن تكون واضحة، على الرغم من خط 22 لديه كل هذه الصفات مثل نمط، عند إغلاق علامة في خط 24، كنت أذكر اسم العلامة فقط. 

كنت لا تكرار النمط كلمة أو كل ما يدور في داخل تلك العملات. وحتى لو كنت ننظر إلى هذا الآن في متصفحي، دعونا نلقي نظرة على النتيجة النهائية. دعني اذهب خلال هذا الملف، وهو CSS 0. وانها لا تزال سهل جدا، ولكن الحصول على اهتمام كبير. ولكن اتضح هناك ل أمور أخرى يمكنني القيام به هنا، وتحت طائلة اتخاذ هذا البشعة تماما، نلاحظ هنا أنه في بلدي الجسم من صفحات الويب الخاصة بي، أستطيع أن أفعل شيئا مضحكا مثل حرس الحدود أو لون الخلفية. 

وسريعة، ما هو اللون المفضل لديك؟ الأخضر سمعت. حسنا. وحتى الآن، إذا أنا ضربت تحديث الآن، لدينا صفحة على شبكة الإنترنت الخضراء. كل الحق، لذلك هذا ليس سيئا. والآن، إذا كنت تريد أن تجعل هذا حقا بارد، وأنا يمكن أن تجعل من لون النص الخاص بي حتى الأحمر. لذلك دعونا نرى ما يبدو هذا مثل. الآن انها تبحث جيدة. وإلى هنا، إذا كنت حقا تريد الفوضى مع شخص أو إذا كنت تريد أن تكون واحد من هؤلاء الناس الذين يحاول خداعك زيارة على شبكة الإنترنت صفحة لأنها قد خدعت جوجل في التفكير هناك مجموعة كاملة الكلمات الرئيسية like-- دعونا نرى، تحميل. حيث لم تذهب؟ وهناك منا. حسنا. لذلك أنا أقول هذا بصفتي جانبا، وسوف نقوم الحديث عن هذه الاشياء في غضون أسابيع قليلة عندما نتحدث عن الأمن، إذا كنت فعلا باقات كلها تضمين ل الكلمات الرئيسية في صفحة على شبكة الإنترنت، حتى لو لم تكن واضحة ل الإنسان، شخص مثل جوجل، وبطبيعة الحال، لا تزال تجد هذا الواقع. كل الحق، لذلك هذا هو جميلة البشعة بسرعة كبيرة. 

في واقع الأمر، فإنه ليس كل شيء أن كثيرا على عكس بلدي على شبكة الإنترنت الصفحة كلامتخرجة، التي بدأت غوغلينغ حول العثور على الإصدارات السابقة من المواقع بلادي القديمة. كان سيئا جدا. في الواقع، لم أجد واحدة فقط قبل فئة. ولكن هناك ما هو أسوأ من هناك. هذا كان على ما يبدو لي الصفحة الرئيسية مرة أخرى في عام 1996. على ما يبدو اعتقد انها كانت مناسبة لنطلب من الناس اسمهم قبل أن يتمكنوا من نرى في الواقع بلدي صفحة الويب. 

ثم أريته شيء غبي، على الأرجح. أنا حفر أكثر في المرة القادمة. لكنه الآن، دعونا تنظر قليلا من التصميم. لقد تحدثنا عن أسلوب. وهذه الصفحة حتى الآن، و معظم كل شيء لقد كتب غير نظيفة جدا أسلوبيا. ولكن ماذا عن التصميم؟ حسنا، هناك الكثير من التكرار في ما قمت به هنا. 

لقد ذكر كلمة اللون في بضعة أماكن. لقد ذكر حجم الخط في بضع الأماكن وجريئة في بضعة أماكن. وبشكل أساسي، وأنا شاركت الاختلاط لغتين. لقد حصلت HTML مع بلدي العلامات وبلدي سمات ثم فجأة، بين نقلت ولدي اللغة الثانية اليوم دعا CSS، والتي مرة أخرى، هو مجرد هذه أزواج قيمة المفتاح أو هذه الخصائص مفصولة نقطتين. 

اتضح أن الكثير كما هو الحال في C حيث نحن يمكن أن تبدأ لعامل خارج بعض التعليمات البرمجية في ملفات رأس، لذلك يمكننا أن نفعل نفس الشيء في HTML. وخطوة نحو ذلك هي على النحو التالي. لاحظ أن هذا الإصدار، هو CSS1.html هيكليا صفحة الويب بالضبط نفس. حتى لقد حصلت على مجموعة كاملة من divs، لكن هذه المرة، لقد حصلت على التخلص من المجمع شعبة كما سترى. 

ولقد منحت تلك divs ثلاثة العليا والمتوسطة، وأسفل، معرفات فريدة من نوعها. هذا هو لطيف، لأنه من خلال إعطاء هذه الانقسامات الصفحة معرفات فريدة من نوعها، يمكنني الرجوع لهم في أماكن أخرى. الى اين؟ حسنا، اسمحوا لي أن انتقل لأعلى. وحتى الآن، في أي وقت قمنا نظرت على رأس صفحة على شبكة الإنترنت، ما هو العلامة الوحيدة لدينا في رئيس لصفحة ويب؟ A بصوت أعلى قليلا. مجرد لقب حتى الآن. ولكن اتضح هناك ل بضعة أشياء أخرى يمكنك وضعه في هناك، واحدة من الذي يسمى علامة الاسلوب. حتى قبل لحظة، ونحن ننظر في سمة الاسلوب. تبين هناك علامة الاسلوب. وهو ينتمي داخل رئيس صفحة على شبكة الإنترنت. والآن تلاحظ ما أفعله. لدي داخل هذا العلامة أسلوب التالية. أنا بالذكر حرفيا على خط 20 ل اسم العلامة التي أريد أن أسلب. 

ثم لدي متعرج مفتوحة وأغلق متعرج. على غرار ذلك في الروح إلى C، ولكن مرة أخرى، هذه ليست وظيفة، هذا هو مجرد تفصيل النحوي هنا. وبعد ذلك بالطبع، أنا أقول متصفح، مهلا المتصفح، جعل الجسم كله من صفحة لديهم محاذاة النص من المركز. ثم هذا يقول ما يلي. مهلا المتصفح، إذا كنت ترى HTML العنصر أو علامة في الصفحة التي لديه معرف فريد من أعلى، لذلك الرمز تجزئة هنا يعني فقط فكرة فريدة من نوعها من أعلى، والمضي قدما وجعل حجم الخط ل36 والوزن الخط في جريئة. 

مهلا المتصفح، هذا العنصر الذي لا الرقم هو المتوسط، وجعلها 24 بكسل. ومهلا المتصفح، إذا كنت ترى فكرة أسفل، وجعلها 12 بكسل. تأثير في النهاية هو بالضبط سام. إذا ذهبت إلى CSS 1، الصفحة تبدو هي نفسها. لكننا خطوة نحو تصميم أفضل قليلا. اسمحوا لي الآن أن أعود هنا إلى CSS2 ونرى ماذا فعلت. 

الآن الصفحة هي حقا، حقا نظيفة. في الحقيقة، أنا يمكن أن تناسب جميع محتويات على الصفحة هنا. ولكن ما علامة جديدة لديها I قدم، من الواضح؟ حلقة الوصل. وانها ليست أفضل اسم للعلامة، لأنها ليست وصلة بالمعنى ونحن نعلم ذلك، ولكن هذا يعني ارتباط في بعض الملفات الأخرى. هذا هو نوع من مثل تشمل حاد في C. 

هذه هي الطريقة HTML أقول يا المتصفح، يذهب للحصول على محتويات يسمى ملف css2.css. العلاقة، بالنسبة لي، غير أنه ورقة الاسلوب. والواقع، وهذا ما واحدة من وS في أوراق الأنماط المتتالية الوسائل. هذا هو ورقة الاسلوب. انها مجرد ملف نصي يحتوي على مجموعة كاملة من الممتلكات. انها مجموعة كاملة من أساليب التي تريد تطبيقها على صفحة. 

وحتى هذا على ما يبدو في اشارة الى الملف الثاني. وإذا كان لي أن فتح، CSS2.css، لاحظت أن كل ما قمت به هو نسخ ولصق كل هذا إلى هذا الملف. والآن، حتى لو كنت أبدا ترميز هذه الاشياء من قبل، مجرد النظر مع قبعة الهندسة المثل ، لماذا هو هذا تصميم أفضل ربما؟ العوملة من هذه الخصائص CSS، وضعها في ملف والخاصة. على الرغم من أننا حل هذه قبل مشكلة مثل خمس دقائق في النسخة الأولى. 

لقد تؤد إلى تحسن أسلوبيا الصفحة، هذا هو مجرد أفضل التصميم في بعض معانيها. لماذا تعتقد؟ نعم. أكثر مرونة كيف؟ نعم. حتى إذا كنت تريد أن تذهب العودة وتغيير الأشياء، الآن، لديك مكان واحد حيث يمكنك تغيير الأشياء. في واقع الأمر، عن شيء مثل مشكلة تعيين سبعة، حيث سنقوم تنفيذ الأسهم موقع تداول، هذا ما ستكون لدينا مجموعة كاملة من الصفحات. وسيكون حقا مزعج إذا قررت، جلالة، أنا لا أحب حقا 24 بكسل، أريد أن يكون 28 بكسل أو أكبر قليلا. ومن ثم يجب أن تفعل العالمي ايجاد واستبدال أو فتح كافة الملفات موقع الويب الخاص بك ببساطة لتغيير الواقع قيمة واحدة. من قبل العوملة من هذه الأنماط في مكان مركزي واحد، يمكنك الآن فتح ملف نصي واحد في CS50IDE في أي برنامج، تغييره، حفظه، والقيام به. لقد نشر تلك التغييرات في كل مكان. والتي من شأنها أن تكون هي نفسها في ملف نقطة ح كذلك. لذلك أي أسئلة بالتالي الآن على هذا النحو؟ كل الحق، لذلك قمنا فعلت كل شيء على ما يبدو إلا فعلا تنفيذ الارتباطات التشعبية. وذلك دعونا نمضي قدما ونفعل ذلك. اسمحوا لي أن المضي قدما في إنشاء ملف جديد هنا. انا ذاهب الى نسميها link.html، وطرح في التعليمات البرمجية اليوم. 

وانا ذاهب للقيام مفتوحة قوس نوع وثيقة HTML. بوصفها جانبا، وهذا الشيء في أعلى، وهذا النوع إعلان وثيقة، انها واحدة فقط وهذا غريب مع علامة تعجب. لديك فقط للقيام بذلك هناك، و يعني أننا نستخدم HTML الإصدار 5. الإصدارات القديمة من كانت لغة لفترة أطول السلاسل التي كنت في حاجة إلى وضع هناك. حتى هنا هو مثال يسمى الارتباط. 

أحتاج إلى الجسم من صفحة الويب الخاص بي هنا. وهنا، على قدم المساواة HREF دعنا نقول HTTP://www.disney.com وموقعي المفضل، فإننا سوف أقول. كل الحق، لذلك جدا حميدة، صفحة المستخدم ودية. إذا كنت انتقل الآن إلى دليل بلدي قائمة هنا وفتح link.html، لدينا النصوص التشعبية. 

وبالفعل، هذا هو المكان وH في HTTP يأتي من. بروتوكول نقل النص التشعبي هو حول نقل النص التي لديها ارتباطات تشعبية إلى الموارد الأخرى. والواقع، وهنا هو ما هو مألوف، إذا الرجعية، الرابط أنه إذا النقر عليها، يهديني فعلا لDisney.com. الآن، يا، الذي سيأتي قريبا. كل الحق، وحتى الآن، ما هي بعض الآثار المترتبة على ذلك؟ 

وبصراحة، يبدأ العالم للحصول على أكثر من ذلك بقليل مألوفة وأيضا قليلا ترويعا ولكن أيضا أكثر قليلا النفس الدفاع عنه بمجرد البدء لفهم هذه الأمور. وذلك لأن احتمالات، البعض منكم، وإذا ذهبت من خلال مجلد البريد المزعج Gmail الخاص بك أو حتى البريد الوارد الخاص بك، ربما كنت قد حصلت على بعض النوع من البريد الالكتروني وهذا ما يطلب منك تغيير الخاص بك كلمة ربما أو ربما تحقق أوراق اعتماد باي بال أو غيرها. 

في واقع الأمر، قد تلقوا شيء أن يقول مثل اضغط هنا لإعادة تعيين كلمة المرور الخاصة بك باي بال. والآن، لاحظ، إذا هذا ليس Disney.com ولكن مثل badplace.com و تحميل، لاحظ أن النص هنا يمكن أن نقول أي شيء على الإطلاق. في واقع الأمر، وهذا هو مجرد كلمات. لماذا لا أنا فعلا تكون فائقة الخبيثة ويقول http://www.paypal.com. 

انقر هنا إعادة تعيين باي بال الخاص بك كلمة المرور و تحميل الآن. هذا يبدو مشروعا جدا، أليس كذلك؟ أعني، أنا لن انقر على رسالة بالبريد الالكتروني ان يقول هذا فقط. ولكن لاحظ الانقسام هنا. تقول www.paypal.com، في واقع الأمر، انتظر لحظة، ونحن نعلم أن كنت تريد ليالي للأمن. وحتى الآن، ذهبت إلى www.paypal.com HTTPS، ولكن إذا كنت قد فعلت هذا لم يحدث من قبل، لا تحصل في العادة من تحوم حول الروابط قليلا هنا. وأنه من الصعب أن نرى على الشاشة هناك، وانها ليست كل ما أسهل هنا. ولكن الطريق إلى هنا في في زاوية صغيرة صغيرة لا متصفح الواقع اقول لكم اننا ذاهبون لbadplace.com بدلا من Paypal.com. الآن، أين نحن ذاهبون مع هذا؟ كل الأمثلة التي قمنا بها اليوم، لقد الثابت ترميز وكتابتها يدويا. على شبكة الإنترنت هو لا يصدق رتيبا عند الصعب رمز صفحات الويب الخاصة بك بحيث المحتوى هو ثابت وأبدا تغيير. بالطبع، كل من لدينا مواقع الويب المفضلة اليوم، سواء كان بريد جوجل أو تويتر أو الفيسبوك أو أي عدد آخر دينامية. انهم تغيير في استجابة إلى إدخال المستخدم تماما مثل نتائج بحث Google. 

وذلك يوم الأربعاء، ما نقوم به هو نترك HTML و CSS مقدمة وراءنا ونحن نأخذ من المسلم به أن لدينا الآن أعلم أنه ونحن نقدم لغة برمجة جديدة دعا PHP، الذي أحب C، وسيعطينا القدرة على خلق الواقع برامج هي نفسها إخراجا. في هذه الحالة، فإننا سوف تستخدم PHP لتوليد حيوي على شبكة الإنترنت الصفحات باستخدام هذه اللغة الجديدة. أكثر من ذلك على أن يوم الاربعاء. اراك لاحقا. 

[عزف الموسيقى]