[संगीत बजाना] 

डेविड जे मालन: इस CS50 है और इस सप्ताह के 7 की शुरुआत है। तो वापस स्वागत करते हैं। और अगर आप याद कर सकते हैं समस्या में, चार सेट एक मेहतर शिकार का एक सा नहीं थी कुछ शानदार पुरस्कार जिससे के लिए आप की तस्वीरें ठीक बाद दोनों यहाँ और न्यू हेवेन में कर्मचारियों, आप में से कई के रूप में पता लगाने के लिए चुनौती दी थी तुम सकता है के रूप में उन कंप्यूटर वैज्ञानिकों। और हम एक पूरे मिल गया है प्रस्तुतियाँ का गुच्छा। मैं कुछ हिस्सा लगा आज यहाँ तुम्हारे साथ। 

और हम ऑनलाइन इनमें से सभी पोस्ट करेंगे। लेकिन विशेष रूप से, मैं चाहता था अच्छी तरह से एक है- आपका ध्यान आकर्षित, सैम उनमें से काफी कुछ में था आम तौर पर इस तरह प्रस्तुत। लेकिन इसके बारे में के रूप में प्रतीत होता है कि आज सुबह, विजेता एक निश्चित किसी के साथ केन नामित किया गया था कर्मचारियों की 24 कैमरे पर कब्जा कर लिया आप में रखना जब अधिक या कुछ चित्रों में कई कर्मचारियों के खाते। यहाँ चित्र अगले केन है न्यू हेवन में मरियम के लिए। 

अब, केन, हालांकि, बदल जाता है बाहर एक कोने मामले का एक सा है कि अभी तक पहले नहीं हुआ है। ऐसा लगता है कि नहीं होती थी कि पता चला है मेरे लिए समस्या में ठीक प्रिंट डाल करने के लिए कर्मचारियों का कहना है कि कि चार सेट शानदार पुरस्कार के लिए अयोग्य केन की, ज़ाहिर है, एक है क्योंकि हमारे कर्मचारियों पर फोटोग्राफरों। अब, उस के साथ कहा, वह मूल रूप से कहने के लिए मुझे लिखा था ऑनलाइन इन तस्वीरों को पोस्ट नहीं करें। मैं बड़े हिस्से में लगता है तस्वीरों में से सबसे अधिक है क्योंकि इस फोटोग्राफर नज़र लिया कि इस तरह एक छोटे से कुछ। और जैसे। 

लेकिन केन मुझे आपको आश्वस्त करना चाहते हैं वह एक बहुत अच्छे फोटोग्राफर है कि, उन्होंने कहा कि वह एक पेशेवर लेता है धुंधली नहीं हैं कि फोटो, ध्यान में बेहतर कर रहे हैं, और कहा कि वह हमारे अपने कर्मचारियों के लिए काफी कुछ ले लिया। बल्कि केवल से स्वीकार करते हैं हम हम क्या सोचा था क्या केन, की सूची के माध्यम से जाना जाता है, प्रस्तुत हैं, जो वास्तविक छात्रों। और इसके साथ कि लांस पता चला है आज सुबह के रूप में 15 तस्वीरें हमारे विजेता रहा था। 

और, लांस कोल्टन के साथ है यहाँ चित्र खुद के साथ SKAZ, और सैम के साथ साथ। लेकिन तब यह पता चला है कि के रूप में 11:46, बस थोड़ा सा पहले तो, मैं अपने ईमेल में वापस चला गया और पाया हम अभी तक एक और प्रस्तुत करने के लिए किया था कि बोनी नाम के एक छात्र द्वारा जिसका ईमेल केवल यह बात कही। झूठ नहीं जा रहा है, मैं कर रहा हूँ कक्षा के दौरान यह कर। और फिर बस को संलग्न करने के लिए रवाना 14 तस्वीरें, लांस के 15 की शर्मीली है। 

लेकिन बोनी की तस्वीरों में, यह बदल जाता है बाहर कई स्टाफ के सदस्यों, सैम थे उन के बीच में है, तो हम क्या सोचा क्या होगा इन दोनों को स्वीकार करते है। तो ड्रॉपबॉक्स हो रही है के अलावा अंतरिक्ष कि भाग लेने वाले हर प्राप्त करता है, इन दो वर्गों को भी होगा उनके लिए एक अच्छा catered दोपहर के भोजन प्राप्त करते हैं और उनके अनुभाग यह आने वाले सप्ताह साथियों। और तो आप हम से सुना होगा, उस बारे में लांस और बोनी,। उन्हें इतनी बड़ी बधाई। अब, आप उन लोगों के लिए जो होगा दोपहर के भोजन की तरह अधिक आम तौर पर कैम्ब्रिज में है कि CS50 दोपहर के भोजन जानते और न्यू हेवन इस शुक्रवार है। CS50 की वेबसाइट स्लेश RSVP के लिए जाओ। और अब सेमिनार पर एक शब्द भी नहीं। अधिक curricularly। इसलिए हम पास आ रहे हैं सेमेस्टर के बिंदु आप कहाँ शुरू करना चाहिए अंतिम परियोजनाओं के बारे में सोच रही है। और वास्तव में, बस थोड़ा सा में, विल पूर्व के प्रस्तावों के कारण हो तथाकथित। इसलिए पूर्व के प्रस्तावों के लिए होती हैं होना बहुत कम प्रभाव है और वास्तव में बस के लिए एक अवसर आप एक छोटे नोट रचना करने के लिए अपने शिक्षण साथी अवगत कराया उसे या उसके आप क्या सोच रहे हैं अपने अंतिम परियोजना के लिए क्या करना चाहते हो सकता है। 

अब, कई छात्रों के अंत तक कर रहा वेब अंतिम परियोजनाओं आधारित है। और हां, हम सिर्फ रहे हैं इस में अब पिछले सप्ताह और वेब प्रोग्रामिंग में गोताखोरी से परे। तो अगर आप चिंता करने की नहीं बिल्कुल पता नहीं कैसे है आप विचारों का निर्माण होता है कि आप अपने मन में हो सकता है। यह वास्तव में सिर्फ एक मजबूर कर समारोह है आप सोच रहे हैं और बात कर पाने की इसके बारे में अपने TF के साथ। लेकिन उस के साथ मदद के लिए, और अंततः अंतिम परियोजनाओं के साथ, CS50 एक परंपरा है कि पता के सेमिनार की पेशकश की। 

और इन हाथों, पर, वैकल्पिक हैं या अवसरों पर आधारित व्याख्यान कर रहे हैं कि विषयों के बारे में अधिक जानने के लिए पाठ्यक्रम के लिए एक छोटे से सहायक पाठ्यक्रम, लेकिन फिर भी अद्भुत सामग्री अंतिम परियोजनाओं ड्राइव करने के लिए। और इसलिए इस होने वाली सूची में है यहां न्यू हेवन में CS50 स्टाफ के लिए साथ आए हैं आईओएस के बारे में इस साल प्रोग्रामिंग, एंड्रॉयड प्रोग्रामिंग, खेल के विकास, अधिक उपकरणों की और गुच्छों और भाषाओं और तकनीक। 

तो CS50 की वेबसाइट पर नजर रखने के लिए। और इस बीच में, आप करना चाहते हैं तो इनमें से किसी में आपकी रुचि के रजिस्टर, CS50 के स्लेश रजिस्टर करने के लिए जाना। और हम तो के रूप में पालन करेंगे दिन और उड़ान समय और स्थानों और सब कुछ के सबसे सब कुछ होगा होना स्ट्रीम और मांग पर भी उपलब्ध आप वास्तव में इसे बनाने के लिए नहीं कर सकते हैं के बाद। तो आगे की हलचल के बिना, हम मिल के साथ पिछली बार से दूर छोड़ दिया। 

और यह था कि संदेश की तरह था आभासी लिफाफे के अंदर, याद करते हैं, हम करने के लिए रूटर के लिए रूटर से पारित कर दिया है कि एक वेब ब्राउज़र और एक वेब के बीच रूटर सर्वर। और उस संदेश देखा एक इस तरह छोटे से कुछ। यह और अधिक रहस्यमय संदेश था कि एक लिफाफे के अंदर वास्तव में था जिसका कागज के एक टुकड़े पर लिखा पहली पंक्ति सचमुच, स्लेश मिल कहते हैं। 

और सिर्फ एक मानसिक स्वास्थ्य की जांच के रूप में, स्लेश क्या निरूपित किया? स्लैश जब इसका क्या मतलब है एक वेबसाइट का अनुरोध? आप यह सब समय का अनुरोध। सबसे अधिक किसी भी समय आप किसी वेबसाइट पर, आप वास्तव में एक फ़ाइल के नाम में टाइप न करें। आपको शायद यह सिर्फ Facebook.com के लिए जाना , gmail.com, या जैसे दर्ज करें। और स्लेश क्या दर्शाता है? क्या फ़ाइल? विशेष रूप से या फिर क्या पृष्ठ? 

सूचकांक, हाँ। डिफ़ॉल्ट पृष्ठ तो। आप एक फ़ाइल निर्दिष्ट नहीं है तो हम देखना शुरू करेंगे के रूप में नाम है, आप वास्तव में सिर्फ अनुरोध कर रहे हैं मुझे फेसबुक का मूलभूत पेज देना या मुझे मेरे इनबॉक्स दे या देना मुझे खबर के तयशुदा पेज सीएनएन की वेबसाइट या पसंद पर। और एक सर्वर तो करने के लिए जवाब कुछ के साथ कि संदेश इस तरह, मैं, हाँ कह रही HTTP संस्करण 1.1 बोलते हैं। 

एक स्थिति है जो 200, हम शायद ही कभी है कि मनुष्य कोड यह अच्छा है क्योंकि कभी देखते हैं। यह ठीक है, अनुरोध, क्योंकि इसका मतलब प्राप्त हुआ है और ठीक से संभाला था। और सामग्री प्रकार जाहिरा तौर पर जवाब में अक्सर, लेकिन हमेशा नहीं, पाठ है। और विशेष रूप से, एचटीएमएल। और कहा कि वास्तव में है जहां हम आज देखो। 

तो वास्तव में, मैं जा रहा हूँ आगे और एक ब्राउज़र खुला। मैं क्रोम का उपयोग करने के लिए जा रहा हूँ, आप उपयोग कर सकते हैं सप्ताह में किसी भी ब्राउज़र सबसे आने के लिए। हम आम तौर पर क्रोम की सिफारिश यह विशेष रूप से है, क्योंकि सॉफ्टवेयर डेवलपर्स के लिए अच्छा है। में निर्मित की यह एक बहुत मिल गया है इसे आसान बनाने के उपकरण है कि एचटीएमएल और सीएसएस न केवल विकसित करने के लिए, हम आज के बारे में बात कर शुरू करेंगे बातें, बल्कि अन्य भाषाओं के रूप में अच्छी तरह से। 

और मुझे आगे जाना है और है-- जाने के लिए जा रहा हूँ मैं क्लिक करें या सही नियंत्रण करने के लिए जा रहा हूँ एक वेब पेज पर कहीं भी क्लिक करें। और मैं निरीक्षण तत्व पर जाने के लिए जा रहा हूँ। और मैं tweak करने के लिए जा रहा हूँ मेरी यहाँ स्क्रीन सिर्फ एक छोटा सा। मुझे नीचे करने के लिए इस चलते हैं। तो यह क्या कहा जाता है क्रोम के इंस्पेक्टर। तो यह एक डिबगिंग की तरह है उपकरण क्रोम में बनाया गया। 

तुम सब पहले से ही इस राशि आप क्रोम का उपयोग किया गया है। और यह आप क्या हो रहा है यह देखने के लिए अनुमति देता है कुछ वेब पेज के हुड के नीचे। तो चलो वास्तव में एक ले चलो इस प्रकार के रूप में इसे देखो। यह तरीका अधिक सुविधाएँ है और हम आज के बारे में परवाह है। लेकिन यहाँ पर इन टैब नहीं है। तत्वों, नेटवर्क, सूत्रों का कहना है, समय, और कुछ अन्य सामान। मैं पर क्लिक करने के लिए जा रहा हूँ एक पल के लिए नेटवर्क। 

और यह थोड़ा भारी है यहां पहली नज़र में। लेकिन मैं क्या करने जा रहा हूँ जाने है मुझे यह थोड़ा आसान बनाने में। मैं चालू करने के लिए जा रहा हूँ यह लाल है, इसलिए है कि प्रकाश की रिकॉर्डिंग। और मुझे लॉग बनाए रखने के कहने जा रहा हूँ। और यह सिर्फ एक छोटा सा है बात यह है कि मुझे पता लगा समय के साथ उन का उद्धार करने जा रहा है ब्राउज़र में होता है कि सब कुछ। और अब मैं जा रहा हूँ http://facebook.com करने के लिए। 

वास्तव में, के लिए www करते हैं अच्छे उपाय के लिए, स्लेश। दर्ज करें। की तो एक यूआरएल है कि कई आप का दौरा हो सकता है। और अब फेसबुक के वेब पेज के शीर्ष पर आता है। और फिर एक पूरी गुच्छा सामान तल पर से उड़ान भरी। और वास्तव में, यह पता चला है कि आप Facebook.com पर जाते हैं, तुम सिर्फ एक HTTP अनुरोध नहीं बना रहे हैं यह Facebook.com जा रहा है कि पता चला , उन लिफाफों का 41 भेजता अपनी खुद की मिल अनुरोध के साथ प्रत्येक, परदे के पीछे हालांकि, संकेत के रूप में यहाँ, स्क्रीन के नीचे, यह वास्तव में, इंगित करता है कि मेरी ब्राउज़र 41 अनुरोध किया। 

और कुल में, यह 861 का तबादला किलोबाइट और यह किसी कारण के लिए ले लिया के रूप में कई के रूप में आठ सेकंड है कि सभी को डाउनलोड करने के लिए। तो यह है कि वास्तव में थोड़ा अजीब है फेसबुक की साइट है कि ले जाएगा लंबे समय है, लेकिन इस मामले में तो यह हो सकता है। अब, यह सब मैं वास्तव में परवाह नहीं है सर्वोच्च अनुरोध को छोड़कर बारे में। तो चलो यह एक सही यहाँ के लिए चलते हैं और मुझे बस एक पल के लिए बाहर ज़ूम। 

और मुझे इस पर ज़ूम करते हैं। मैं भले ही छोड़ दिया पर किया है तो क्या हुआ यहाँ पर चल रहा एक बहुत कुछ है मैं प्रकाश डाला है है Facebook.com और उसके बाद मैं नीचे स्क्रॉल कर रहा हूँ कि नोटिस नीचे स्क्रॉल नीचे स्क्रॉल, हेडर अनुरोध करने के लिए। और अगर आप क्रोम दिखा रहा है कि देखेंगे मुझे अनिवार्य रूप से आंतरिक सामग्री अनुरोध की मैं बनाया है। यह बहुत ही में स्वरूपण नहीं है जिस तरह से, लेकिन मिल का जिक्र नहीं है नोटिस, , मेजबान का जिक्र नहीं है नोटिस Facebook.com, पथ, या स्लैश, जो मैं अनुरोध फाइल है। 

और फिर मैं स्क्रॉल यदि का बैक अप, हम वास्तव में हूँ देखना फेसबुक लौटे क्या कि मेरे लिए इन हेडर के सभी है। कि आभासी लिफाफे के अंदर तो वास्तव में महत्वपूर्ण मूल्य जोड़े की एक बहुत हैं। एक शब्द, एक पेट के लिए, और फिर एक मूल्य। एक शब्द, एक पेट, और एक मूल्य। ये कहा जाता हेडर हैं। और वैसे भी अधिक विस्तार से यहाँ है हम वास्तव में अभी बारे में परवाह है। 

लेकिन इस से पीछे नहीं है वहाँ नीचे पिछले एक है, नोटिस, Facebook.com के सर्वर है कि, वास्तव में यहां कहा कि कुछ पाठ एचटीएमएल आता है। तो यह सब कहने के लिए है यदि आप एक वेब अनुरोध करते हैं कि एक करने के लिए एक ब्राउज़र से पेज सर्वर, उस सर्वर से प्रतिक्रिया अपनी खुद की एक लिफाफा के साथ जो के अंदर पाठ है। दूसरे शब्दों में, एचटीएमएल। हाइपर टेक्स्ट मार्कअप लैंग्वेज। जो एक और भाषा है हम आज से शुरू होने वाले मनुष्य या कंप्यूटर उत्पन्न कि आदेश में वेब पृष्ठों को लागू करने के लिए। 

विशेष रूप से, चलो इस पर नजर डालते हैं। अब मैं वापस जाने के लिए जा रहा हूँ फेसबुक की वेबसाइट पर। और मैं जा रहा हूँ बस नियंत्रण क्लिक करें या ठीक क्लिक करें और देखें पृष्ठ स्रोत पर क्लिक करें। और अगर आप क्रोम का उपयोग नहीं करते हैं, तो भी यानी यह, फ़ायरफ़ॉक्स यह कर सकते हैं कर सकते हैं, सफारी भी मेनू हालांकि ऐसा करने के लिए कर सकते हैं विकल्पों के एक छोटे से अलग लग सकता है। और इस HTML है कि मार्क और फेसबुक पर कंपनी के लिए लिखा है। 

और सामूहिक रूप से, इस भाषा यहाँ करने के लिए नीले और सफेद रंग पेज को लागू करता है कि हम एक पल पहले देखा था। अब, यह थोड़ा भारी है। हम ऊपर छोड़ दिया पर देखो लेकिन, अगर हम कर रहे हैं कुछ पैटर्न देखने के लिए शुरू करने के लिए जा रहा है। वहाँ एक बहुत ऐसा लगता है इन खुले कोण ब्रैकेट की और फिर इस कीवर्ड एचटीएमएल नहीं है। यहाँ एक और खुला है कोण ब्रैकेट और सिर। 

हम नीचे स्क्रॉल यहाँ, अगर है और नीचे और नीचे, मैं कर रहा हूँ आगे बढ़ो और कोशिश करने जा रहा कुछ के लिए खोज करने के लिए। वहाँ के रास्ते पर सही पर यहां खुले ब्रैकेट निकाय है। और पिछले से याद करते हैं हम प्रस्तावित उस समय सरल वेब पेज है कि एक मानव लिख सकता है कि इस तरह एक छोटे से कुछ लग सकता है। ओपन एचटीएमएल टैग, खुले सिर टैग, खुले शीर्षक टैग, फिर बंद शीर्षक, बंद सिर पर, खुले शरीर टैग, कुछ पाठ, शरीर को बंद कर दिया बंद एचटीएमएल। 

लेकिन बस एक पल के लिए यहां एक ठहराव। इस कोड, आप भले ही आपने इससे पहले यह कभी नहीं लिखा लेकिन अभी भी काफी समझ में नहीं आता क्या हो रहा है, बहुत अच्छा लग रहा है। ठीक है, यह बहुत साफ है। यह बहुत stylistically के लिए अच्छा है। खरोज और सफेद अंतरिक्ष के एक बहुत। फेसबुक के लिए नहीं है। तो क्यों फेसबुक इतना है एचटीएमएल लिखने में मैं से भी बदतर? जाहिरा। 

ठीक है, यह एक तरह है शैली को पांच में से। एक सम्मोहक कारण नहीं है उनके लिए इन कोनों में कटौती करने के लिए। ठीक है, तो वे नहीं करना चाहते हैं यह आसान के लिए आप इसे पढ़ने के लिए के लिए बनाते हैं। तो कुछ समझ में, वे कर रहे हैं यह obfuscating, की तरह यह पांव मार कम से कम सौंदर्यबोध की दृष्टि से इतने यह माइस्पेस के लिए कठिन है कि जाओ और चीर करने के लिए उनकी मुखपृष्ठ और इसके लिए एचटीएमएल। यह प्रोग्राम के साथ पता चला है कि क्रोम सहित, हालांकि, हम सुपर आसानी से यह साफ कर सकते हैं। तो यह कारण के रूप में काफी नहीं है कि है। और क्या कारण हो सकता है। हाँ। हाँ, सफेद अंतरिक्ष लागत डेटा। आपका क्या अर्थ है? हां, ठीक यही। आप टैब कुंजी एक बहुत या मारा अंतरिक्ष बार निहितार्थ पर विचार करें। तो अपने कीबोर्ड पर हर महत्वपूर्ण एक है [अश्राव्य] एक बाइट के रूप में प्रतिनिधित्व किया। 

ऐसा लगता है कि मार्क या devs के किसी भी इन दिनों बस एक बार SPACEBAR हिट इस HTML पेज में है कि फेसबुक के होमपेज का प्रतिनिधित्व करता है। और फेसबुक एक बहुत कुछ है उपयोगकर्ताओं की इन दिनों। ऐसा लगता है कि फेसबुक के होमपेज आज एक अरब लोगों द्वारा दौरा किया है। और फेसबुक पर किसी को है सिर्फ एक बार अंतरिक्ष बार मारा। 

तो एक अतिरिक्त बाइट, एक अरब से अनुरोध, कितना अधिक डेटा फेसबुक है इंटरनेट पर स्थानांतरित किसी को मारा क्योंकि अपने या अपने कीबोर्ड पर SPACEBAR? एक अरब बाइट्स, या के एक गीगाबाइट डेटा फेसबुक के सर्वर से भेजा जा रहा है आसपास के लोगों के लिए कोई अच्छा कारण के लिए दुनिया। अब, यह सिर्फ एक जगह है। 

हम वास्तव में इस को साफ करता है, तो कल्पना कीजिए बात यह है कि ऊपर और यह इंडेंट और कहा कि सफेद अंतरिक्ष के एक बहुत कुछ है और टैब वर्ण और रिक्त स्थान, आप खर्च गीगाबाइट खत्म होता है, नहीं तो टेरा बाइट्स अंतरिक्ष के अधिक। और में तो सुपर आम वेब विकास की वास्तविक दुनिया अपने कोड छोटा करने के लिए है। और हम अंत में देखेंगे आप यह कर सकते हैं कि कैसे। 

लेकिन आज, हम कोड लिखने शुरू करेंगे कि हमें मनुष्य द्वारा वास्तव में पठनीय है। तुम वापस जाने के लिए अगर यह, हालांकि, पता चला है क्रोम में इस उपकरण के लिए, निरीक्षण तत्व इससे पहले, हम नेटवर्क टैब पर थे। यह आप पर जाना है, तो पता चला है कि आप वास्तव में क्या देखते तत्वों टैब, क्रोम बहुत मुद्रित किया जाता है कि एक ही HTML के संस्करण। इसलिए हम यह deobfuscated गए हैं। तो यह एक कंप्यूटर के लिए कोई मुकाबला नहीं है। और अब आप वास्तव में कर सकते हैं चारों ओर क्लिक करें और शुरू एक वेब पेज है कि पदानुक्रम देखने के लिए। तो चलो वास्तव में यह करते हैं। मुझे आगे जाना है और पर खोलने के लिए जा रहा हूँ अपने मैक पाठ संपादित एक कार्यक्रम में कहा। और यह सिर्फ है कि याद एक सुपर सरल पाठ कार्यक्रम। विंडोज Notepad.exe है। और मैं शब्दशः करने के लिए जा रहा हूँ निम्नलिखित टाइप करें। डॉक्टर प्रकार एचटीएमएल, खुले ब्रैकेट एचटीएमएल, ब्रैकेट एचटीएमएल बंद कर दिया हम यहाँ पेज के सिर है यहां पेज के सिर के अंत में, एक शीर्षक, हैलो दुनिया की तरह हो जाएगा। 

और फिर यहाँ नीचे, हम की जरूरत है वेब पेज के शरीर। बंद शरीर। और फिर यहाँ से, हैलो दुनिया। ठीक है। इसलिए हम एक सुपर फास्ट वेब पेज में लिखा है। मैं के रूप में इसे बचाने के लिए जा रहा हूँ अपने डेस्कटॉप पर hello.html। मेरे मैक, शिकायत करने जा रहा यह सोच कर कि, एक मिनट रुको, यह एक पाठ फ़ाइल है, करना आप इसे .txt कॉल करना चाहते हैं? लेकिन नहीं, मैं डॉट HTML का उपयोग करना चाहते हैं। 

मैं और फिर अगर अच्छा क्या हो रहा है सिर्फ इस फाइल को डबल क्लिक करें, hello.html, यहाँ अपने वेब पेज है। दुर्भाग्य से, मैं कर रहा हूँ दुनिया में केवल एक ही व्यक्ति अभी जो इस पेज पर जा सकते हैं। जहां यह स्पष्ट तौर पर रहते है, क्योंकि? यह अपने मैक पर है, है ना? कौन सी बेकार है। इस कमरे में कोई नहीं की तरह इंटरनेट पर अकेले जाने वास्तव में उस पृष्ठ पर जा सकते हैं। तो आज, हम करने की जरूरत है एक और तत्व का परिचय। 

और ऐसा करने के लिए, मैं करने जा रहा हूँ आगे बढ़ो और क्लाउड 9 ऊपर खुला। तो बादल 9 पाठ्यक्रम एक का है बादल आधारित service-- CS50 IDE-- कि हमारे कार्यस्थानों की गई है कहीं न कहीं इंटरनेट पर चल रहा है। और कहा कि हमारी फाइलों की है कि सभी का अर्थ पहले से ही सार्वजनिक रूप से सुलभ हैं। तो चलो आगे जाना है और यह करते हैं। मैं आगे जाने के लिए जा रहा हूँ और एक नई फ़ाइल NCS50IDE पैदा करते हैं। मैं पहले की तरह इसे बचाने के लिए जा रहा हूँ और hello.html रूप में बचाने के लिए क्लिक करें। और अब सिर्फ समय को बचाने के लिए, मैं जा रहा हूँ इस कोड को पेस्ट आगे जाना है और कॉपी करने के लिए बजाय इसे फिर से लिखें। और इसे बचाने के। और इसलिए अब मैं एक है फ़ाइल hello.html बुलाया। लेकिन यह कैसे वास्तव में मुझे क्या करना है एक वेब पेज के रूप में इसे खोलने? खैर, यह CS50 के लिए बनाया पता चला है आईडीई बजना की तरह केवल एक संकलक नहीं है और GDB तरह एक डिबगर और अन्य कार्यक्रमों के गुच्छों, एक संपूर्ण वास्तव में नहीं है CS50 आईडीई के भीतर चल रहे वेब सर्वर। 

आप सब के सब, कि कहने के लिए है, अपने स्वयं के वेब सर्वर है। और एक वेब सर्वर सिर्फ एक टुकड़ा है जिसका उद्देश्य जीवन में सॉफ्टवेयर की वेब पृष्ठों की सेवा के लिए है। ब्राउज़र के अनुरोध के लिए और सुनने के लिए थोड़ा आभासी लिफाफे के साथ जवाब अंदर जो की है मैंने लिखा है कि सामग्री। इसलिए इस वेब सर्वर है वास्तव में स्वतंत्र और खुला स्रोत। जहां खुले स्रोत बस का अर्थ किसी और की है कि सॉफ्टवेयर लिखा है हम सब कर सकते हैं कि वास्तव में देख सकते हैं और यहां तक ​​कि डाउनलोड करने और स्रोत कोड बदल जाते हैं। और यह अपाचे कहा जाता है। 

और हम करने के लिए यह थोड़ा आसान बनाया है अपाचे 50 यह फोन करके CS50IDE में इस्तेमाल करते हैं। यह वास्तव में कर सकते हैं ताकि निम्नलिखित समझते हैं। मैं अपाचे 50 प्रारंभ कहने जा रहा हूँ। और फिर मैं सिर्फ डॉट कहने जा रहा हूँ। और हम कुछ कुछ हद तक देखना कह रहस्यमय संदेश अपाचे दस्तावेज़ [स्थापना? समूह?] घर के लिए, Ubuntu, जो कुछ भी है, कार्यक्षेत्र स्लेश। शुरू वेब सर्वर सफलतापूर्वक अपाचे 2। 

तो लंबी कहानी को कम, मैं बस एक बटन धक्का दिया है और अब है, जो एक वेब सर्वर पर दिया टीसीपी पोर्ट पर इंटरनेट पर सुन एक विशिष्ट पते पर 80। और यह यहाँ कहते हैं, और इस आधार पर बदल जाएगा अपने यूज़रनेम और अन्य कारकों पर, मैं इस पर क्लिक करते हैं, लेकिन, अब नोटिस IDE50 डॉट jharvard और तो और इसलिए, सूचना सभी कि इस बार पिछले कई के लिए सप्ताह, तुम हो सकता है अपने खुद के उपयोगकर्ता नाम देखा कि ऊपर दाहिने हाथ में अंतर्निहित है CS50IDE के कोने। 

और कहा कि वास्तव में कर दिया गया है यह सब पता समय जिसके आप कर सकते हैं पर वेब के माध्यम से आपकी फ़ाइलों के सभी जाएं। अब तक, यह मायने रखता नहीं किया गया है, सी में, क्योंकि आप आम तौर पर एक में चल बातें करना चाहते हैं टर्मिनल, नहीं वेब पर। लेकिन आज, हम शुरू वेब आधारित लेखन कोड हम चाहते हैं कि सार्वजनिक यूआरएल पर सुलभ। तो क्या मैं करने जा रहा हूँ ऐसा इस यूआरएल पर क्लिक करें है। 

और मैं एक काफी देखना है कि नोटिस बदसूरत सूचकांक, एक निर्देशिका लिस्टिंग, लेकिन क्या फ़ाइल शायद तुम पर बाहर कूदता है? Hello.html। मैं बच ऐसा इसलिए है क्योंकि मेरे कार्यक्षेत्र में फ़ाइल। और मैं अपाचे वेब सर्वर बता दिया है क्या दाऊद के कार्यक्षेत्र निर्देशिका में लग जाता है। और किसी को जाने दुनिया उन फाइलों को देखते हैं। 

और वास्तव में, मैं अब अगर hello.html पर क्लिक करें मैं वास्तव में इस टैब कि फ़ाइल में देखते हैं। अब 9 बादल की ओर से हुआ, नोटिस हमारे लिए एक छोटी सी उपयोगी कुछ। CS50 आईडीई के भीतर, वहाँ नोटिस अचानक एक पता पट्टी। हम कर रहे हैं, भले ही ऐसा इसलिए है क्योंकि CS50IDE यात्रा करने के लिए क्रोम का उपयोग कर, CS50IDE के अंदर अपने आप ही है अभी एक वेब ब्राउज़र के संस्करण। और तो बजाय जैसे चीजों को मुश्किल, मैं आगे जाने के लिए जा रहा हूँ और सिर्फ इस यूआरएल को कॉपी। मैं आगे और बस जाने के लिए जा रहा हूँ मेरे अपने क्रोम विंडो खोलें। यहाँ तो कोई जादू, कोई CS50IDE नहीं है। मैं सिर्फ शाब्दिक पेस्ट करने के लिए जा रहा हूँ मेरी जम्मू हार्वर्ड यूआरएल और हिट दर्ज करें। और देखा, अब मैं और सिद्धांत रूप में, हर कोई इंटरनेट पर, मैं विन्यस्त किया है, तो उचित रूप से अनुमतियाँ, इस फ़ाइल का दौरा कर सकते हैं। और अब तो मैंने कहा, यदि hello.html, देखा, वहाँ मेरी अविश्वसनीय रूप से underwhelming वेब पेज है। तो चलो एक त्वरित मानसिक स्वास्थ्य की जांच करते हैं। कि क्योंकि सारी वैचारिक सेट अप है। और हम वास्तव में वास्तव में नहीं है कैसे एचटीएमएल से प्रति लिखने के लिए आपको सिखाया। कोई प्रश्न इस प्रकार अब तक अभी क्या हुआ है पर? हाँ। CS50 इन वेब पृष्ठों के मालिक है? किस तरीके से? अच्छा प्रश्न। तो CS50 के CS50.io. का मालिक हम वास्तव में है कि डोमेन नाम खरीदा है। और तुम लोग की प्रकृति के द्वारा CS50IDE में प्रवेश करने, आप सभी को एक उपडोमेन क्या कहा जाता है मिलता है। 

तो मालन IDE50-, या IDE50-Rob.CS50.io, कि भीतर अपनी विशिष्ट पता है हमारे डोमेन नाम। पाठ्यक्रम के उद्देश्यों के लिए तो, आप अपने खुद के अनूठे पता है। लेकिन हम द्वारा चीजों को सरल बनाया गया है, शीर्ष स्तर के डोमेन खरीदने, CS50 डॉट मैं / हे और फिर बाकी सब है उस के अंदर, तो बात करो। और हम उस के लिए वापस आ गया हूँ शायद कुछ हफ़्ते में, विशेष रूप से अंतिम परियोजना पर आप का समय है, जब कुछ अपने खुद के डोमेन नाम पाने के लिए चाहते हो सकता है। यह अपेक्षाकृत वास्तव में है सीधी। ठीक है। तो चलो अब यह करते हैं। मैं में वापस जाने के लिए जा रहा हूँ CS50IDE, जहां मेरी फाइल अब ठीक है, hello.html, यह सब दिलचस्प नहीं है। मैं कुछ करने के लिए करना चाहते हैं उस से भी एक छोटे से अच्छे। इसलिए मैं इस तरह से कुछ करने के लिए जा रहा हूँ। खुले paragraphs.html मुझे जाने दो। तो यह है कि मैं अग्रिम में लिखा एक फाइल है। यह के शीर्ष पर, जैसे हमेशा की तरह, हम टिप्पणी है। लेकिन HTML में, टिप्पणियाँ एक छोटे से अलग लग रही है। लाइन तीन और लाइन 14 पर, आप एक टिप्पणी शुरू के लिए सिंटैक्स देखें और एक टिप्पणी खत्म होता है। 

लेकिन इनमें से कोई भी में कार्यात्मक मामलों के बीच। यह एक करने के लिए सिर्फ एक नोट है यहाँ पर क्या हो रहा है मानव। और सिर्फ एक त्वरित विवेक के रूप में मैं नीचे स्क्रॉल चेक, अगर, स्पष्ट नया क्या है हम शुरू की है कि टैग? अब तक हमने देखा है इस प्रकार टैग खुले हैं ब्रैकेट एचटीएमएल, सिर, शीर्षक, और शरीर। लेकिन अब जाहिर है, नया क्या है? 

हाँ, तो पी। पी टैग या पैरा टैग। और फिर मैं सिर्फ कुछ मूलभूत उधार लैटिन पाठ मेरी पैराग्राफ का गठन करने के लिए। मैं चाहता था क्योंकि प्रदर्शन कैसे तुम हो सकता है HTML में पाठ के पैराग्राफ प्रतिनिधित्व करते हैं। और तो क्या ऐसा करने के लिए शुरू हो रहा है यहां पहले से ही है कि वहाँ है एक पैटर्न का विकास। और मुझे आगे जाना है और यह करते हैं। मुझे पहली बार अपाचे बंद कर देते हैं। और मैं खुद को शुरू करने के लिए यह बताने जा रहा हूँ फिर आज के स्रोत सात के अंदर एम निर्देशिका। तो यह है कि मैं सब कुछ करने के लिए उपयोग किया है। 

और अब, मैं करने के लिए वापस जाना है इस निर्देशिका लिस्टिंग, मैं आज से हर फाइल को देखने के नोटिस। और तुम में देखेंगे अगले समस्या सेट, हम करेंगे आप निर्देश दे वास्तव में यह करने के लिए। मैं paragraphs.html खोलते हैं, तो यह हो सकता है के रूप में अच्छी तरह से एक प्रोग्रामिंग भाषा की तरह लग रहे आप के लिए आप बात या लैटिन पढ़ा नहीं है। लेकिन यह सिर्फ तीन पैराग्राफ है पाठ की है कि एचटीएमएल में चिह्नित कर रहे हैं। 

और पैरा नोटिस उन दोनों के बीच टूट जाता है। यह पता चला है क्योंकि और भले ही आप यह करने के लिए इच्छुक हो सकते हैं, असली दुनिया में, जबकि आप लाइन डाल करना चाहते हैं बातों के बीच टूट जाता है, तुम हो सकता है काफी बस इस करते हैं और बचाने के लिए मारा। और अब, मैं यहाँ फिर से लोड है, तो नोटिस सब कुछ है कि सिर्फ एक साथ blurs पाठ का सिर्फ एक ही बूँद में। एचटीएमएल एक मूक भाषा की तरह है क्योंकि। 

यह ऐसे में इस्तेमाल के लिए होती है एक तरह से ब्राउज़र ही होगा कि स्पष्ट रूप से आप क्या करने के लिए यह बताओ क्या करना है। आप यह नहीं बताया है तो अगर मुझे एक नया पैरा दे, आप एक नया पैरा देखने के लिए नहीं जा रहे हैं। और वास्तव में, क्या ब्राउज़र करने जा रहा है Enter दबाने भले ही है, चलो फिर से और फिर हम कहते हैं और फिर, यह पाठ तरह से आगे बढ़ फिर स्क्रीन पर और नीचे बचा और फिर ब्राउज़र जा रहा है, फिर से लोड कि सफेद अंतरिक्ष के सभी पतन के लिए सिर्फ एक ही, दिखाई खाली स्थान में। ठीक है। तो यह है कि पैरा टैग है। और तो पैटर्न क्या है यहाँ है कि विकसित कर रहा है? खैर, यह मामला प्रतीत हो रहा है कि एचटीएमएल सब एक टैग शुरू करने के बारे में है और एक टैग समाप्त। और एक टैग क्या है? खैर, यह वाक्य रचना का सिर्फ एक हिस्सा है। ओपन वर्ग, एक कीवर्ड, बंद ब्रैकेट, एक टैग है। या टैग शुरू करते हैं। और फिर जब तुम अपने आप को व्यक्त किया है, के रूप में आप पैरा साथ कर रहे हैं, आप विपरीत बात करने के लिए ऐसा करते हैं। लेकिन विपरीत काफी पीछे की ओर नहीं है। 

आप बस एक ही टैग का उपसर्ग इस तरह आगे स्लैश के साथ नाम। ठीक है। इतना सब है कि आकर्षक नहीं। और वास्तव में, हम नहीं कर रहे हैं वेब है कि सभी को और अधिक दिलचस्प। क्या मैं बनाना चाहते हैं बड़ा और बोल्ड बातें? तो यह यहाँ एक उदाहरण है कि पता चला है headings.html में, जहां मेरे शरीर में, मैं एक H1 टैग, H2, H3 मिल गया है चार, पांच या छह, जो सभी के लिए बहुत रहस्यमय लग रहे हैं। लेकिन मैं इस खोलने जाना है उदाहरण के लिए, एक नजर डालते हैं। Headings.html। 

डिफ़ॉल्ट रूप से ब्राउज़रों दे सकते हैं तो आप पाठ कि बड़े और असमान आकार के बोल्ड है। एच 1 बड़ा है। H6 तो छोटे और है बीच में सब कुछ। तो यह है कि अभी भी दिलचस्प है लेकिन है नहीं, वास्तव में मैं जानता हूँ कि वेब। क्या हम करना चाहते हैं तो मेरे पास है एक सूची की तरह कुछ। । तो यहाँ की एक बुलेटेड सूची है हार्वर्ड के घरों की तीन। 

यदि आप ऐसा करने के बारे में कैसे चले गए? खैर, list.html पर एक नज़र रखना। और यहाँ, हम एक देखना funkiness का थोड़ा सा लेकिन क्या हो रहा है पर विचार करते हैं। तो तुम सिर्फ देखा है, उसके आधार पर, उल unordered सूची के लिए खड़ा है। Unordered सूची सिर्फ बुलेट का मतलब है। कोई संख्या नहीं है। वहाँ भी कुछ एक को बुलाया टैग पर एक राजभाषा है सूची है, जो आदेश दिया। तब लाइट, सूची आइटम इसका मतलब यह सब है। 

और तो यह स्वचालित रूप से आप के लिए संख्या है सब कुछ। लेकिन मेरे खरोज की फिर से, सब और सफेद की जगह सिर्फ मेरे कारण है। ब्राउज़र नहीं है वास्तव में देखभाल करने के लिए जा रहा है। तो भले ही आप नहीं कर सका यही नहीं, अभी स्पष्ट होना करने के लिए करते हैं, आप भले ही नहीं करना चाहिए ब्राउज़र अभी भी होगा बस ठीक यह समझने में सक्षम हो। मैं में पुनः लोड मार रहा हूँ मेरी ब्राउज़र, मैं पुनः लोड क्लिक कर रहा हूँ और कोई परिवर्तन नहीं हो रहा है अभी भी ब्राउज़र क्योंकि मुझे क्या करना है यह बताने के लिए कि क्या वास्तव में कर रही है। 

ठीक है। तो क्या यह सब सिर्फ पाठ है। अब हम और अधिक दिलचस्प कुछ करते हैं। मैं आगे जाने के लिए जा रहा हूँ और इस HTML से कुछ उधार ले। मैं आगे जाने के लिए जा रहा हूँ और यहां एक नई फ़ाइल बनाएँ। और हम इस rick.html फोन करता हूँ। हम अधिकतर राशि खेतों में कुछ इस में एक रिक रोल बुलाया वर्ग इस साल, मैं नहीं जानता, यह सिर्फ बवाल हुआ। 

और अब यह नियंत्रण से बाहर हो गया है। तो मैं बस के साथ जाने के लिए जा रहा हूँ। और मैं गूगल के लिए जाना है छवियाँ और रिक एस्ले। हम क्या तुम जानते हो क्यों नहीं करते हैं यह सिर्फ विकिपीडिया पर पढ़ें। आप इस लिंक पर क्लिक किया है हर बार, किसी को कहीं हँस कर दिया गया है। और मुझे ahead-- वहाँ जाने दिया हम की इस छवि को देखने के चलो, चले जाते हैं। 

तो यहाँ हम एक है गूगल छवियाँ में छवि। और चलो यह है कि कल्पना करते हैं यथोचित हर जगह इंटरनेट पर। इसलिए मुझे लगता है कि यह मेरे लिए ठीक है मान जा रहा हूँ वास्तव में मेरे वेब पेज में इस डाल करने के लिए। मैं आगे जाने के लिए जा रहा हूँ और छवि यूआरएल को कॉपी। और अब मैं बादल को वापस जाने के लिए अगर 9, चलो मैं यहाँ क्या कर सकते हैं देखते हैं। यहाँ तो बस एक वेब पेज है। इस Haha, रिक एस्ले है, अब मैं वापस जाने के लिए जा रहा हूँ अपने ब्राउज़र को पुनः लोड, और दिलचस्प है। 

रिक कहां है? तो मुझे क्या हुआ है देखते हैं। असल में, मैं जा रहा हूँ मैं ऐसा नहीं था कि जैसे नाटक। [अश्राव्य] यहाँ में डाल दिया। हम एक पल में वापस करने के लिए आया हूँ। तो यहाँ rick.html है। तो यह है कि रिक एस्ले नहीं है। यह पता चला है तो हम कर सकते हैं वास्तव में यहाँ में उसे जोड़ें। इस रिक एस्ले है। मैं मेरे जिसका एक छवि दे कहने जा रहा हूँ स्रोत मैं सिर्फ नकल यूआरएल है, जो जाहिरा तौर पर एक खुश है जन्मदिन कुछ या अन्य। 

और अब मैं जा रहा हूँ इस तरह के टैग को बंद करें। तो इस सुपर लंबे लपेटकर है। लेकिन मैं यह सब किया है कि नोटिस खुले ब्रैकेट की छवि किया है, इस की एक विशेषता के साथ स्रोत। और यह एक बहुत लंबे समय तक कड़ी है। और अंत में, इस पर ध्यान दिया। क्यों मैंने किया है स्लेश कोणीय कोष्ठक बजाय, हर दूसरे टैग की तरह, एक खुला ब्रैकेट होने, आइएमजी, ब्रैकेट बंद कर दिया? बस, भले ही आप एक अनुमान ले कोई परिचित जो भी है HTML के साथ पहले। 

तो यह इसे बंद कर देता है आदेश है, लेकिन क्यों यह वास्तव में सहज नहीं है भावना एक छोटे से अधिक कुछ करने के लिए बंद छवि की तरह वर्बोस? हाँ। हाँ। बस शब्दार्थ, का कोई मतलब नहीं है एक छवि शुरू करने और एक छवि समाप्त, यह या तो वहाँ या यह नहीं है। तो यह एक अंतराल छोड़ने के लिए मतलब नहीं है एक छवि के अंदर कुछ और के लिए। तुम बस ऐसा नहीं कर सकते। और तो वाक्य रचना आम तौर पर सिर्फ होगा अंदर आगे स्लेश करने के लिए खुले टैग या शुरू टैग की और फिर सेव मारा। 

तो अगर मैं अब इस फाइल को फिर से लोड मैं यहाँ एक अच्छा वेब पेज खाना पकाने मिल गया है। और हम निश्चित रूप से कर सकता है वास्तव में लोगों को परेशान बजाय embedding द्वारा एक यूट्यूब लिंक की तरह। और वास्तव में, किसी भी समय यदि आप कभी भी, यूट्यूब के लिए चले गए और गलती से वास्तव में मुझे दो रिक अपने आप को यहाँ रोल। तो रिक रोल। तो रिक मैं यहां जाने के लिए जा रहा हूँ roll--। 

[संगीत बजाना] 

ठीक है, कि एक व्यक्ति को पसंद किया। तो, यह सब समय के नोटिस अगर आप जाहिर है, आप शेयर लिंक क्लिक करें यूआरएल मिलता है कि आप वास्तव में कर सकते हैं एक ईमेल या एक फोरेंसिक छवि में एम्बेड या एक समस्या में सेट या एक स्लाइड में। और अब, मैं बजाय ट्वीट पर क्लिक करते हैं, सूचना है कि यह सब समय, इस सामान कर दिया गया है। मुझे आगे जाना है और इस कॉपी करने के लिए जा रहा हूँ। 

और अभी तो हम मैं कर रहा हूँ, यह बेहतर देख सकते हैं मेरे पाठ संपादक में पेस्ट करने के लिए जा रहा है। इस सूचना है कि क्या यूट्यूब तुम्हें बता दी गई है। आप एक यात्रा हर समय यूट्यूब वीडियो, अगर आप पर वीडियो एम्बेड करना चाहते हैं अपने वेब पेज, बस इस हड़पने। तो यह अभी तक एक है एचटीएमएल टैग एक iframe बुलाया। या लाइन फ्रेम में एक। तो यह भी एक छोटे से अधिक लग रहा है सभी दूसरों की तुलना में जटिल। तो यह छवि पता चला है कि टैग और जाहिरा तौर पर iframe टैग कहा जाता गुण हैं क्या ले। 

और यह एक और है एचटीएमएल में वाक्य रचना का टुकड़ा। टैग के अलावा नाम, खुले ब्रैकेट टैग नाम, आप टैग के व्यवहार को नियंत्रित कर सकते हैं विशेषता की एक पूरी गुच्छा होने से मूल्य के बराबर होती है। विशेषता मान के बराबर होती है। और तो उदाहरण के लिए, यूट्यूब हमें कह रही है आप इस वीडियो की चौड़ाई चाहते हैं 420 पिक्सल और ऊंचाई होने के लिए 315 पिक्सल होने के लिए, कि कैसे आप HTML में व्यक्त करते हैं। 

वीडियो का स्रोत रहा है लंबे समय है कि यूट्यूब यूआरएल होने के लिए और फिर कुछ अन्य सामान , फ्रेम सीमा शून्य है की तरह इतना है कि शायद नहीं है इसका मतलब बात यह है कि आसपास कोई सीमा। शायद पूर्ण स्क्रीन की अनुमति दें उपयोगकर्ता का मतलब है कि एक बटन क्लिक कर सकते हैं और वास्तव में पूर्ण स्क्रीन वीडियो। मैं वास्तव में होना चाहते हैं, तो रिक डॉट एचटीएमएल में यहां प्रभावशाली, छवि टैग का उपयोग करने के बजाय, चलो मुझे लगता है कि हटाना, बजाय इस पेस्ट। और अब फिर से लोड। और अब यहाँ हम फिर जाओ। ठीक है, यह काफी है। सभी अधिकार मैं कोशिश करेंगे, ताकि कठिन है कि फिर से ऐसा करने के लिए नहीं। तो यहाँ takeaways में से कुछ क्या हैं? इन वेब पृष्ठों के रूप में तो एचटीएमएल, के रूप में बदसूरत कर रहे हैं, वास्तव में बहुत सरल है। यह एक प्रोग्रामिंग भाषा नहीं है। यह कार्य नहीं है। यह छोरों के पास नहीं है। यह परिस्थितियों के पास नहीं है। यह सभी के दर्जनों है अलग टैग, जिनमें से प्रत्येक का शून्य या अधिक गुण है। और वास्तव में, आनन्द के बारे में क्या हो रहा है एचटीएमएल आप में गोता लगाने के लिए शुरू के रूप में यह बहुत आत्म मेहनती है कि है। 

सभी इसे लेता है एक समझ है HTML के सामान्य रूपरेखा की। एक टैग है क्या, एक विशेषता क्या है, आप वास्तव में एक वेब पेज को विन्यस्त कि कैसे निम्नलिखित नुसार। और बाकी सब वास्तव में परिणाम है की एक ऑनलाइन संदर्भ में देख या कुछ कैसे करना है googling तकनीक या कि हमने देखा है, फेसबुक के स्रोत पर देख कोड, एक वेबसाइट पर देख रहे हैं आप इसे कम से पसंद है कि स्रोत कोड है और समझ और कैसे वहाँ डेवलपर्स वास्तव में चीजें बाहर रखी। 

इसलिए हम के रूप में अच्छी तरह से छवियों कर सकते हैं। और वास्तव में, हम एक पल पहले ऐसा किया था। मुझे आगे जाना है और तुम सिर्फ दिखाते हैं। यहाँ कुछ नमूना कोड है। क्या आपने कभी क्रोधी बिल्ली देखना चाहते हैं। तो मैं कर सकता हूँ कि नोटिस यहां एक छवि टैग है। और मुझे लगता है कि यह ऊपर एक टिप्पणी मिल गया है। मैं एक विकल्प मिल गया है पहुँच के लिए पाठ। एक स्क्रीन का उपयोग कौन है तो किसी को दृष्टि के कारणों के लिए पाठक वास्तव में तो हो सकता है उनकी स्क्रीन रीडर क्रोधी बिल्ली का कहना है। यदि वे नहीं कर सकते क्योंकि छवि देखते हैं, वे कम से कम अपने कंप्यूटर हो सकता है यह है मौखिक रूप से उन्हें बताओ कि क्या। और उस फ़ाइल के स्रोत cat.jpeg है। तो वास्तव में, मैं वास्तव में करना चाहता था मैं कर सकता था क्या, चालाक हो done-- मैं तो, रिक एस्ले पर जाने के लिए वादा नहीं मैं बजाय एक बिल्ली के लिए गूगल के लिए जा रहा हूँ। और मैं गूगल छवियाँ के लिए जाना है यहाँ, और हम मान लेंगे कि यह मेरी बिल्ली की एक तस्वीर है। 

मैं नियंत्रण क्लिक किया है कि मान लीजिए या सही गलती से, इस पर क्लिक किया खौफनाक। और cat.jpeg मैं जा रहा हूँ अपने डेस्कटॉप पर बचाने के लिए। मुझे अब क्लाउड 9 के लिए वापस जाओ। , जो कि यहाँ मैं कर सकते हैं नोटिस स्थानीय फ़ाइलों को अपलोड करने के लिए जाना। और मैं इस हड़पने यदि फ़ाइल, cat.jpeg, नोटिस मैं इसे खींच सकते हैं कि और बादल 9 में ड्रॉप और यह मुझे यहाँ पर चिल्लाना जा रहा है। 

हम पहले से ही है, क्योंकि आप एक cat.jpeg फ़ाइल दिया, लेकिन यह करने के लिए सुपर आसान है आप है कि एक तस्वीर हड़पने फेसबुक से लिया फ़्लिकर या पसंद या और वास्तव में खींचें और ड्रॉप उसके बाद क्लाउड 9 में है और इसे बनाने अपनी खुद की निजी का हिस्सा वेबसाइट या समस्या हम जल्द ही देखेंगे के रूप में सात या आठ निर्धारित किया है। और फिर जब आप अंत में है कि बिल्ली का दौरा, मुझे लगता है कि एक ही बिल्ली डाउनलोड किया, यह सोचते हैं कि that-- नोटिस आराध्य था। 

क्या आपको देखना होगा है यहाँ इस चेहरे की तरह कुछ। फ़ाइलों को इतना है कि आप एक वेब पेज के भीतर संदर्भ या तो अपने स्वयं के स्थानीय हो सकता है कुछ अन्य सर्वर पर खाते या दूरदराज रिक के मामले में एक छोटा सा पहले एस्ले तस्वीर। तो कहाँ क्या else-- नहीं तो हम यहाँ क्या कर सकते हैं? तो चलो निम्नलिखित पर एक नजर डालते हैं। आप की तरह क्या अच्छा है यह पता है? 

हम इस प्रकार अब तक कर रहा है बहुत स्थिर वेब पृष्ठों की है। मैं इस प्रकार के रूप मसाला बातें करना चाहते हैं। मैं अपने स्वयं के खोज इंजन बनाना चाहते हैं। तो चलो, एक खोज इंजन बनाने के लिए आगे जाकर यह शुरू कर रही है। मुझे आगे जाना है और बनाने के लिए जा रहा हूँ एक नई फ़ाइल search.html बुलाया। और हम ऑनलाइन संस्करणों prefabed है। वूप्स। अपने टर्मिनल विंडो में पेस्ट न करें। ऑनलाइन पूर्वनिर्मित संस्करणों। और मैं इस प्रकार के रूप में शुरू करने जा रहा हूँ। तो यहाँ की शुरुआत है एक फ़ाइल search.html बुलाया। मैं इसे बचाने के लिए जा रहा हूँ आज के स्रोत निर्देशिका। मैं इस खोज को फोन करने के लिए जा रहा हूँ। असल में, हम इसे बेहतर बना देंगे। CS50 खोजें और वास्तव में यह ब्रांड। और अब, मैं कहने जा रहा हूँ एच 1 CS50 खोज की तरह कुछ और। और फिर यहाँ नीचे, एच ​​2 जल्द ही आ रहा है। और बस, एच 1 संक्षिप्त करने के लिए और एच 2 क्या क्रमशः मतलब है? 

हाँ, इतना बड़ा और बोल्ड, और के रूप में बड़ा है, लेकिन अभी भी बोल्ड नहीं। इसलिए मैं इस बचाने के लिए और यहाँ पर जाना है, फाइल search.html देखते हैं। ठीक है, और यह एक [अश्राव्य] right-- है। समर्थन करना। डेविड उलझन में है। ओह, यह सही नहीं है। डेविड एक मूर्ख है। ठीक। तो यह है। तो CS50 खोज जल्द ही आ रहा है। तो अब, चलो synthesize जाने हम पिछले हफ्ते क्या किया। 

हम इस बारे में बात कहाँ HTTP के निचले स्तर यांत्रिकी। और इन नए विचारों एचटीएमएल, की जो बस है इस मार्कअप भाषा जहां आप वास्तव में क्या करने के लिए एक ब्राउज़र बताओ और हमारे अपने खोज इंजन को लागू करने। तो बजाय सिर्फ जल्द ही आ रहा कि मैं कर रहा हूँ शुरू करने जा रहा कुछ एक रूप टैग बुलाया। और इस रूप में, मैं जा रहा हूँ एक इनपुट क्षेत्र की तरह कुछ है। 

और इस इनपुट के नाम क्षेत्र में, मैं यह कॉल करने के लिए जा रहा हूँ प्र और इस इनपुट क्षेत्र के प्रकार मैं कहने जा रहा हूँ बस "पाठ" है। एक पाठ क्षेत्र और, के रूप में हम करेंगे देखते हैं, सिर्फ एक पाठ बॉक्स है। और तो यह है की यहाँ भावना नहीं है इस बिंदु पर इसके अंदर कुछ भी। और इसलिए मैं बस जा रहा हूँ उस के साथ टैग को बंद करने के लिए आगे टैग अपने आप में सही स्लेश। और फिर मैं जा रहा हूँ एक अन्य इनपुट है। इनपुट प्रकार प्रस्तुत बराबर होती है। और फिर मैं जा रहा हूँ इस एक बहुत करीब है। 

और अब मैं यहाँ वापस जाने के लिए जा रहा हूँ। और पहले से ही हम देखते हैं, बहुत बदसूरत यद्यपि, मैं की शुरुआत मिला यहाँ अपने स्वयं के खोज पेज। वास्तव में, मुझे की कोशिश करते हैं एक छोटा सा यह साफ। यह पर पता चला है कि यहां इनपुट, मैं हो सकता है प्लेसहोल्डर नामक एक और विशेषता। और मैं कीवर्ड की तरह कुछ देख सकते हैं, या अधिक विशेष रूप से, क्यू के लिए क्वेरी। 

और अब, मुझे लगता है, नोटिस ग्रे पाठ के इस तरह के उस के रूप में गायब हो जाता है जल्द ही मैं टाइपिंग शुरू के रूप में, लेकिन यह शायद कुछ है आप अन्य वेब पृष्ठों में देखा है। मैं वास्तव में सबमिट बटन पसंद नहीं है। इसलिए मैं वास्तव में देने जा रहा हूँ बटन खोज का एक मूल्य जमा करें। मैं फिर से लोड करता है, तो और अब, कि नोटिस मेरे बटन खोज नामित हो जाता है। तुम्हें पता है मैं वास्तव में नहीं है, पता है यहाँ के लोगो की तरह। तो गूगल फ़ॉन्ट जनरेटर। 

मैं आगे इस मसाला करने के लिए चाहते हैं। तो CS50 खोज। मुझे अपने ही लोगो पैदा करते हैं। यह अच्छा लग रहा है। तो अब मुझे इस पर आने as-- बचाने के लिए करते। ये कहां जा रहा है? क्या आप वहां मौजूद हैं. ठीक। इसे छोड़ दिया। के रूप रक्षित करें। बेवकूफ ब्राउज़रों। द्वारा खड़े हो जाओ, हम करने जा रहे हैं इस बार और सभी के लिए तय कर लो। हम वहाँ चलें। ठीक है। माफ़ कीजिए। छुट्टी का दिन। अब इस कायरता है। पूर्ण स्क्रीन से बाहर निकलें। ठीक है। 

अब, एक सामान्य की तरह व्यक्ति के रूप में छवि को बचाने के। Logo.gif। अब मैं CS50IDE और में जाने के लिए जा रहा हूँ मैं बस लोगो को हड़पने के लिए जा रहा हूँ, मैं में खींचें करने के लिए जा रहा हूँ मेरे स्रोत सात निर्देशिका, फ़ाइल पहले मैं उस के साथ ठीक हूँ, मौजूद है। तो मैं इसे ओवरराइड करने के लिए जा रहा हूँ मैं पहले से ही यह किया था। और अब मैं यह कैसे से छुटकारा मिलता है? 

चलो यहाँ से आगे जाने के लिए और करते हैं छवि स्रोत logo.gif बराबर होती है। इसे बंद करो। बचाओ। और अब मैं अपनी खोज को वापस जाने के लिए अगर पेज, अब यह बहुत अच्छा लग रहा है। ठीक है, यह नहीं है तो काफी उपयोगी कुछ भी किया। वास्तव में, मुझे खोज करने की कोशिश करते हैं और एक बिल्ली के लिए देखो क्या होता है। बिल्लियों। लानत है। यह सिर्फ जाहिरा तौर पर काम नहीं करता। इसलिए महत्वपूर्ण टुकड़ा क्या है लगता है कि यहाँ याद आ रही है? 

ठीक है, आप किसी भी HTML पता नहीं है, भले ही मैं फोन फार्म अंकन शुरू कर दिया है और मुझे लगता है कि जानकारी प्राप्त करने के लिए कैसे यह बता दिया है मुझे एक टेक्स्ट बॉक्स देने के लिए और एक बटन सबमिट करें, जाहिरा तौर पर क्या टुकड़ा याद आ रही है? हम वास्तव में प्राप्त करना चाहते हैं सही ढंग से काम कर रहे हैं इस बात को। हमें क्या करना होगा? हम वापस अंत को लागू करने के लिए एक की जरूरत है डेटाबेस या खोज इंजन ही है, और कहा कि एक ले जा रहा है स्पष्ट रूप से समय की बहुत सारी,। 

इसलिए हम पिछली बार क्या किया। तो अगर आप गूगल पर कुछ के लिए खोज करता है, तो और यदि आप पहले से बंद कर दिया है याद है, त्वरित खोज। तो मुझे लगता है कि बंद बारी इतना है कि यह वास्तव में एक पुराने स्कूल ब्राउज़र की तरह बर्ताव करता है, अब मैं बिल्लियों की तरह कुछ के लिए खोज करते हैं, यूआरएल की तरह लग रहा है क्या याद करते हैं। यह बहुत गुप्त है। लेकिन वहाँ में एम्बेडेड, याद है, स्लेश खोज है। प्रश्न चिह्न क्यू बिल्लियों के बराबर होती है। 

और कहा कि मुझे देने के लिए प्रतीत होता है खोज परिणामों की एक पूरी गुच्छा। तो तुम मुझे क्या करने जा रहा हूँ पता है क्या? मैं उधार लेने के लिए जा रहा हूँ बस एक मिनट के लिए गूगल। मैं ऊपर जाने के लिए जा रहा हूँ यहाँ और मैं कहने जा रहा हूँ इस कार्रवाई है कि रूपों या गंतव्य, तो बात है, सचमुच गूगल होना चाहिए। और विधि मैं चाहता था उपयोग करने के लिए प्राप्त होने जा रहा है। 

तो कार्रवाई क्या है? कार्रवाई अजीब तरह से, के नाम पर है लेकिन लगता है कि बस का अर्थ कौन संभालने जा रहा है इस फार्म की कार्रवाई? मैं खोज, जहां पर क्लिक करते हैं परिणाम जाना चाहिए? और अब मैं अपने फार्म के लिए वापस जाना है यहाँ और मेरे वेब पेज को फिर से लोड और अब कुछ के लिए खोज कुत्ते की तरह, अब नोटिस मैं गूगल कार्यान्वित कर रहे है। है ना? 

मैं कुछ के लिए खोज करना चाहते हैं वरना, यह न सिर्फ कुत्तों के लिए काम करता है, यह भी बिल्लियों के लिए काम करता है। यह भी CS50 के लिए काम करता है। और ठीक है, यह सिर्फ है विराट के तहत, यह नहीं है? ठीक है, लेकिन यह वास्तव में काम करता है। तो वास्तव में क्या चल रहा है? इसलिए मैं का उपयोग कर, अपने ब्राउज़र सिखाया है एचटीएमएल, उपयोगकर्ता से इनपुट लेने के लिए और वास्तव में है कि इनपुट भेजने एक दूरस्थ सर्वर से HTTP का उपयोग। 

और अपने ब्राउज़र क्योंकि HTTP, यह वास्तव में समझता है क्या इतना है कि यूआरएल का निर्माण मैं अपने ब्राउज़र में खत्म हो गया अंत क्या होता है नोटिस जब मैं कुत्ते के लिए खोज की। मैं खोजें क्लिक करते हैं, कि नोटिस मैं के रूप में करना यूआरएल में परिवर्तन क्वेरी कुत्ते के बराबर होती है google.com/search करने के लिए। और कहा कि प्रपत्र क्योंकि है विधि मिलता है, क्योंकि जानता है, बस वहाँ है कि यूआरएल को संलग्न करने के लिए। 

अब, इन वेब पृष्ठों अभी भी बदसूरत हैं। तो चलो एक अन्य परिचय वाक्य रचना का टुकड़ा हम आज कर सकते हैं। और यह जाना कुछ है व्यापक स्टाइल शीट के रूप में। इसलिए मुझ पर एक नजर डालते हैं यहाँ इस उदाहरण करें और देखें हम पर क्या हो रहा है उसका अनुमान लगा सकते हैं। इस CSS0.html है। और इस जहां चीजें है एक छोटे बदसूरत मिलता है। , दुर्भाग्य से, क्योंकि वेब की दुनिया में, एचटीएमएल अकेले सब कुछ नहीं कर सकते। और इसलिए यदि आप चाहते हैं अपने वेब पेज stylize आप वास्तव में पर ध्यान केंद्रित करने की जरूरत है एक अलग तरह से सौंदर्यशास्त्र। यहाँ तो, मैं अपने वेब का शरीर है जो के अंदर पेज एक बड़ा div है। और एक div सिर्फ विभाजन का मतलब है। तो यह एक पैरा लेकिन यह पसंद है एक ही अर्थ विज्ञान के पास नहीं है पाठ के एक पैरा की। 

यह सिर्फ करने के लिए इसका मतलब है ब्राउज़र, यहाँ आता है अपने वेब का एक बड़ा आयताकार क्षेत्र पेज, मैं विशेष रूप से इसे संभाल करने के लिए चाहते हैं। कि div शुरू होता है जहां अब, लाइन 21 है। और सिर्फ एक अनुमान ले। पर लाइन 21 का प्रभाव क्या है पेज की सामग्री के बाकी? यह केंद्रीभूत। बस इतना ही। इसलिए हम एक तरह से नहीं देखा है वास्तव में पाठ केंद्रित। 

वास्तव में, मेरी खोज इंजन, वास्तविक गूगल के विपरीत, सभी बाईं ओर से अधिक उचित था। और अब तो लाइन 21 में, मैं अरे, कह रहा हूँ ब्राउज़र, पेज का एक प्रभाग पैदा करते हैं। बस मुझे एक बड़ा, अदृश्य आयत दे। यही कारण है कि मैं चाहता हूँ कि कैसे है वेब पेज के बारे में सोचते हैं। इस प्रकार के रूप और फिर यह stylize। उन उद्धरण के अंदर, अब, एक दूसरी भाषा है हम आज पेश कि कहा जाता व्यापक स्टाइल शीट। शुक्र है, यह भी नहीं है एक प्रोग्रामिंग भाषा, तो यह बहुत ही अपने वाक्य रचना में ही सीमित है लेकिन यह भी बहुत अपनी कार्यक्षमता में सीमित एचटीएमएल जबकि सब के बारे में एक वेब पेज के डेटा को अंकन और एक वेब पेज की संरचना। सीएसएस के बारे में आम तौर पर है पिछले मील, सौंदर्यशास्त्र, आकार और रंग और हो रही है एक वेब पेज में बिल्कुल सही स्थान। और वास्तव में, यह बनाई है कुंजी मान जोड़े के साथ। 

यह, पाठ की तरह एक संपत्ति एक बृहदान्त्र के बाद, संरेखित, इस बात का मूल्य द्वारा पीछा इस मामले में केंद्र संपत्ति है, जो। और अब तुम नोटिस घोंसला इन बातों से कर सकते हैं। मुझे लगता है कि हर चीज में चाहता था मैं केन्द्रित करने पर प्रकाश डाला है यही कारण है कि मैं लाइन 21 है और इसी लाइन पर 31। लेकिन अब लगता है कि जॉन कहना चाहता हूँ हार्वर्ड, मेरे घर पृष्ठ पर आपका स्वागत है। 

कॉपीराइट प्रतीक जॉन हार्वर्ड। और मुझे लगता है की पहली चाहता हूँ उन पंक्तियों बहुत बड़ा होने के लिए। 36 पिक्सल। तो यह है कि एक सभ्य आकार है। और मैं बोल्ड होने के लिए अपने वजन चाहता था। लेकिन तब है कि नीचे, मैं छोटे पाठ चाहते हैं। और कहा कि नीचे, मैं चाहता हूँ यहां तक ​​कि छोटे पाठ। माफ़ कीजिए। आज बंद एक दिन की तरह लगता है। 

तो अब, मैं इस व्यक्त करने के लिए क्या कर रहा हूँ? यहाँ लाइन 22 पर एक एम्बेडेड है div या नेस्टेड div, अगर तुम जाएगा। यह भी अपनी खुद की शैली टैग है। मैं 36 का एक फ़ॉन्ट आकार निर्दिष्ट करें। मैं बोल्ड का एक फ़ॉन्ट वजन निर्दिष्ट करें। यहाँ नीचे, मैं केवल 24 पिक्सल निर्दिष्ट करें। और अंत में, लाइन 28 में, मैं 12 निर्दिष्ट करें। तो बस एक त्वरित मानसिक स्वास्थ्य की जांच के रूप में और एक मानव इस पढ़ने के रूप में, स्क्रीन पर जो शब्द हैं वास्तव में बोल्ड होने के लिए जा रहे हैं? जो लाइनों वास्तव में बोल्ड कर रहे हैं? 

बस जॉन हार्वर्ड। है ना? लाइन 22 हे कहते हैं बस के रूप में है, क्योंकि ब्राउज़र, पृष्ठ यहाँ का एक प्रभाग है। यह फ़ॉन्ट आकार 36 बिंदु बना। फ़ॉन्ट वजन बोल्ड बनाओ। जैसे ही आप तक पहुंच के रूप में इसी अंत टैग या लाइन 24 पर बंद टैग, इसका मतलब है कि, हे ब्राउज़र, यह आप क्या कर रहे है जो कुछ भी कर बंद करो। और नोटिस, भले ही स्पष्ट होना लाइन 22 इन विशेषताओं के सभी है शैली की तरह, जब आप 24 लाइन में टैग को बंद, आप केवल टैग के नाम का उल्लेख। 

आप शब्द शैली को दोहराना नहीं है या उन उद्धरण के अंदर कुछ भी है कि। और अब मैं इसे देखो यदि हां अपने ब्राउज़र में, चलो ले चलो एक अंतिम परिणाम पर नजर डालें। मुझे जाने दो आगे सीएसएस 0 है जो इस फ़ाइल में करने के लिए। और यह बहुत सादा अब भी है लेकिन बहुत दिलचस्प हो रही है। लेकिन यह वहाँ है पता चला है मैं यहाँ क्या कर सकते हैं, अन्य बातों के, और बनाने का जोखिम पर पूरी तरह से घृणित इस, यहां कि में नोटिस मेरी अपने वेब पेज के शरीर, मैं अजीब कुछ कर सकते हैं बीजी या पृष्ठभूमि रंग की तरह। 

और जल्दी, अपने पसंदीदा रंग क्या है? ग्रीन मैंने सुना है। ठीक है। तो अब, मैं अब पुनः लोड मारा, हम एक हरे रंग की वेब पेज है। ठीक है, तो यह बुरा नहीं है। और अब, मैं यह करना चाहते हैं तो वास्तव में शांत, मैं अपने पाठ का रंग बना सकते हैं यहां तक ​​कि लाल। तो चलो इस तरह दिखता है क्या देखते हैं। अब यह बहुत अच्छा लग रहा है। और नीचे यहाँ, अगर आप वास्तव में किसी के साथ गड़बड़ करने के लिए करना चाहते हैं या आप होना चाहते हैं उन लोगों में से एक हैं, जो एक वेब का दौरा करने में चाल की कोशिश करता है पेज वे गूगल धोखा दिया है क्योंकि सोच में एक पूरी गुच्छा है कुंजी शब्दों चलो देखते हैं like-- की, पुनः लोड। वह कहाँ चला गया? और हमें इसे वहाँ। ठीक है। मैं एक अलग रूप में यह कहते तो, हम करेंगे कुछ ही हफ्तों में इस सामान के बारे में बात करते हैं हम के बारे में बात करते हैं सुरक्षा, अगर आप वास्तव में ट्वीट पूरे गुच्छों एक वेब पेज में खोजशब्दों, वे एक को दिखाई नहीं कर रहे हैं, भले ही गूगल की तरह मानव, किसी को, ज़ाहिर है, अभी भी वास्तव में इस पा सकते हैं। ठीक है, तो लगता है कि बहुत है बहुत जल्दी घृणित। 

और वास्तव में, यह सब नहीं है अपने खुद के वेब के विपरीत है कि ज्यादा एक स्नातक, के रूप में पृष्ठ जो मैं पता लगाने के लिए चारों ओर googling शुरू कर दिया मेरे पुराने वेबसाइटों के पिछले संस्करणों। यह बहुत बुरा था। वास्तव में, मैं मिला सिर्फ कक्षा एक से पहले। लेकिन वहाँ बाहर बदतर नहीं है। यह जाहिरा तौर पर था मेरी 1996 में वापस घर पृष्ठ। जाहिर है मैंने सोचा था लोगों को अपने नाम पूछने के लिए उचित वे सकता से पहले वास्तव में मेरे वेब पेज देखने के लिए। 

और फिर मैं उन्हें पता चला शायद बेवकूफ कुछ। मैं अगली बार के लिए अधिक मिलूँगा। लेकिन अब के लिए, चलो डिजाइन का एक सा विचार करें। हम शैली के बारे में बात की है। और इस पृष्ठ इस प्रकार अब तक और मैंने लिखा है सबसे सब कुछ शैलीगत बहुत साफ है। लेकिन डिजाइन के बारे में क्या? खैर, अतिरेक का एक बहुत कुछ है मैं यहाँ क्या कर रहा हूँ में। 

मैं शब्द का उल्लेख किया है स्थानों के एक जोड़े में रंग। मैं के एक जोड़े में फ़ॉन्ट आकार का उल्लेख किया है स्थानों के एक जोड़े में स्थानों और बोल्ड। और मौलिक रूप से, मैं सह हूँ दो भाषाओं mingling। मैं अपने टैग और साथ HTML मिल गया है मेरा जिम्मेदार बताते हैं और फिर अचानक, उद्धरण के बीच, मेरे पास है दूसरी भाषा आज फिर से, बस इन है, जो कहा जाता सीएसएस, महत्वपूर्ण मूल्य जोड़े या इन गुणों कॉलन से अलग कर दिया। 

ऐसा लगता है कि ज्यादा पता चला है जैसे सी में जहां हम बाहर कारक करने के लिए शुरू कर सकते हैं हेडर फाइल में कुछ कोड, इसलिए हम एचटीएमएल में ही कर सकते हैं। इस प्रकार के रूप और उस की ओर एक कदम है। इस संस्करण CSS1.html है कि नोटिस ठीक उसी वेब पेज संरचनात्मक रूप से। तो मैं एक पूरी गुच्छा मिल गया है divs की, लेकिन इस बार, मैं आवरण से छुटकारा मिल गया जैसा कि आप देखेंगे डिव। 

और मैं उन तीन divs दिया है ऊपर, मध्य, और नीचे, अद्वितीय आईडी। इस वजह से अच्छा है, उन डिवीजनों दे रही है पेज एकमात्र पहचान, मैं उन्हें कहीं संदर्भित कर सकते हैं। कहाँ हैं? खैर, मुझे ऊपर स्क्रॉल करते हैं। और इस प्रकार अब तक, किसी भी समय हम देखा है एक वेब पेज के सिर पर, क्या है हम में लिया है ही टैग एक वेब पेज के सिर? थोड़ा जोर से। बस शीर्षक अब तक। लेकिन यह वहाँ है पता चला है कुछ अन्य बातें आप में वहाँ की एक डाल सकते हैं जो इसे एक शैली टैग कहा जाता है। तो एक पल पहले, हम देखा एक शैली विशेषता पर। एक शैली टैग वहाँ पता चला है। इसके अंदर अंतर्गत आता है एक वेब पेज के प्रमुख के। और अब मैं क्या कर रहा हूँ नोटिस। मैं इस के अंदर है शैली टैग निम्नलिखित। मैं सचमुच लाइन 20 पर उल्लेख कर रहा हूँ मैं stylize करना चाहते हैं कि एक टैग का नाम है। 

तब मैं खुले घुंघराले ब्रेस है और घुंघराले ब्रेस बंद हुआ। , सी भावना में तो समान है लेकिन फिर, यह एक समारोह में नहीं है, यहाँ यह सिर्फ एक वाक्यात्मक विस्तार है। और फिर निश्चित रूप से, मैं कह रहा हूँ ब्राउज़र, हे ब्राउज़र, पेज के पूरे शरीर को बनाने केंद्र के एक पाठ संरेखण है। और फिर इस निम्नलिखित कह रहा है। अरे ब्राउज़र, आप एक HTML देखते हैं तो पेज में तत्व या टैग कि , शीर्ष की एक अद्वितीय पहचानकर्ता है इसलिए हैश प्रतीक यहाँ बस का अर्थ शीर्ष की अद्वितीय विचार, आगे बढ़ो और उसके फ़ॉन्ट आकार बनाने के 36 और उसके फ़ॉन्ट वजन बोल्ड। 

अरे ब्राउज़र, जिसका एक तत्व आईडी यह 24 पिक्सल बनाने, मध्य है। और हे ब्राउज़र, यदि आप देखते हैं एक नीचे का विचार है, यह 12 पिक्सल बनाते हैं। अंत में प्रभाव बिल्कुल सैम है। मैं सीएसएस 1 में जाना है, पेज एक ही लग रहा है। लेकिन हम की ओर एक कदम हो एक से थोड़ा बेहतर डिजाइन। मुझे अब सीएसएस 2 करने के लिए यहाँ वापस जाओ और मैंने किया है और क्या देखते हैं। 

अब पेज वास्तव में, वास्तव में साफ है। वास्तव में, मैं के सभी फिट कर सकते हैं यहां एक पेज पर सामग्री। लेकिन क्या नया टैग मेरे पास है जाहिर है, शुरू की? लिंक। और यह एक टैग के लिए सबसे अच्छा नाम नहीं है यह समझ में एक लिंक नहीं है, क्योंकि हम यह जानते हैं, लेकिन इसका मतलब यह है कि कुछ अन्य फ़ाइल में एक लिंक। इस तेज सी में शामिल की तरह की तरह है 

इस HTML में जिस तरह से है ब्राउज़र अरे कहना है, की सामग्री को मिल जाना फ़ाइल css2.css बुलाया। रिश्ते, मेरे लिए, यह एक शैली पत्रक है कि है। और वास्तव में, कि क्या में से एक व्यापक स्टाइल शीट साधन में एस। यह एक शैली पत्रक है। यह युक्त सिर्फ पाठ फ़ाइल है संपत्ति की एक पूरी गुच्छा। यह शैलियों की एक पूरी गुच्छा है आप एक पृष्ठ के लिए लागू करना चाहते हैं। 

और इसलिए इस जाहिरा तौर पर है एक दूसरी फाइल का जिक्र है। और मुझे लगता है कि, CSS2.css खुला है, सब मैंने किया है कि नोटिस कॉपी और सभी पेस्ट है इस फाइल में इस बात का। और अब, आप कभी नहीं किया है इससे पहले इस सामान कोडित, बस के साथ विचार लौकिक इंजीनियरिंग टोपी पर, क्यों यह एक है शायद बेहतर डिजाइन? उन सीएसएस संपत्तियों बाहर फैक्टरिंग, अपने स्वयं के फ़ाइल में डाल। भले ही हम इस हल समस्या की तरह पांच मिनट पहले बहुत पहले संस्करण में। 

हम सुधार नहीं किया है पेज Stylistically, यह सिर्फ बेहतर है कुछ समझ में डिजाइन। आपको क्या लगता है? हाँ। अधिक लचीला कैसे? हाँ। आप जाना चाहते हैं, तो पीठ और चीजों को बदलने, अब, आप एक जगह है जहां आप चीजों को बदल सकते हैं। और वास्तव में, कुछ के लिए जैसे समस्या, सात सेट हम एक को लागू करेंगे जहां शेयर ट्रेडिंग वेबसाइट, कि एक किया जा रहा है पृष्ठों की पूरी गुच्छा। और यह सच होगा कष्टप्रद आप निर्णय लेते हैं, एचएम, मैं वास्तव में मैं चाहता हूँ, 24 पिक्सल पसंद नहीं है यह 28 पिक्सल या थोड़ा बड़ा होने के लिए। और फिर एक को करना है खोजने के लिए और की जगह वैश्विक या अपनी वेबसाइट की फ़ाइलों के सभी के लिए खुला बस वास्तव में एक मूल्य बदलने के लिए। इन शैलियों बाहर फैक्टरिंग द्वारा एक केंद्रीय स्थान में, आप अब एक पाठ फ़ाइल खोल सकते हैं किसी भी कार्यक्रम में CS50IDE में, इसे बदलने के लिए इसे बचाने, और किया। आप उन लोगों में प्रचारित किया है हर जगह बदलता है। और कहा कि एक ही होगा एक डॉट ज फ़ाइल में के रूप में अच्छी तरह से। इसलिए किसी भी प्रश्न इस प्रकार अब तक इस वाक्य रचना पर? ठीक है, तो हम है सब कुछ ऐसा लगता है किया वास्तव में छोड़कर हाइपरलिंक को लागू करने। और तो आगे बढ़ते हैं और यह करते हैं। मुझे आगे चलते हैं और यहां एक नई फ़ाइल बनाएँ। मैं यह कॉल करने के लिए जा रहा हूँ link.html, आज के कोड में डाल दिया है। 

और मैं खुले क्या करने जा रहा हूँ ब्रैकेट डॉक्टर प्रकार एचटीएमएल। पर एक तरफ, इस बात के रूप में शीर्ष, इस डॉक्टर प्रकार घोषणा, यह अजीब है कि केवल एक ही है विस्मयबोधक चिन्ह के साथ। तुम सिर्फ वहाँ यह करना है और यह हम एचटीएमएल 5 संस्करण का उपयोग कर रहे हैं इसका मतलब है। के पुराने संस्करण भाषा बहुत लंबे समय तक था आप की जरूरत है कि तार कर रख दिया। तो यहाँ लिंक नामक एक उदाहरण है। 

मैं यहाँ अपने वेब पेज की एक संस्था की जरूरत है। और यहाँ में, एक href बराबरी के HTTP://www.disney.com हम कहते हैं और मेरा पसंदीदा वेबसाइट, हम कह देंगे। ठीक है, तो एक बहुत अहानिकर, उपयोगकर्ता के अनुकूल पृष्ठ। अब मैं अपने निर्देशिका में जाओ यहां लिस्टिंग और link.html को खोलने, हम हाइपर टेक्स्ट है। 

और वास्तव में, यह कहाँ है HTTP में एच से आता है। हाइपरटेक्स्ट ट्रांसफ़र प्रोटोकॉल पाठ में परिवर्तित करने के बारे में है कि अन्य संसाधनों के हाइपरलिंक है। और वास्तव में, यहाँ, परिचित है रेट्रो, तो नीले लिंक पर क्लिक किया है कि अगर, वास्तव में Disney.com के लिए मुझे का नेतृत्व करेंगे। अब, ओह, कि जल्द ही बाहर आ रहा है। ठीक है, तो अब क्या कर रहे हैं कुछ इस के निहितार्थ की? 

और सच में, दुनिया से शुरू होता है एक छोटे से अधिक परिचित पाने के लिए और यह भी एक छोटे डरावना लेकिन यह भी एक छोटे से अधिक एक बार आप शुरू सफ़ाई स्व इन बातों को समझने के लिए। बाधाओं, आप में से कुछ, अगर तुम जाओ हैं क्योंकि अपने जीमेल स्पैम फोल्डर के माध्यम से या यहाँ तक आपके इनबॉक्स, तो आप शायद है ईमेल किसी तरह का हो गया कि बदलने के लिए आप पूछ रहा है अपने पासवर्ड सकता है या शायद सत्यापित करें अपने पेपैल साख या whatnot। 

और वास्तव में, आपको प्राप्त हो सकता है यहाँ क्लिक करें की तरह कहते हैं कि कुछ अपने पेपैल पासवर्ड रीसेट करने के लिए। और अब, यदि नोटिस इस Disney.com नहीं है लेकिन जैसे badplace.com और पुनः लोड ध्यान दें कि यहां पाठ जो भी कुछ भी कह सकते हैं। और वास्तव में, यह सिर्फ शब्द है। क्यों मैं वास्तव में सुपर दुर्भावनापूर्ण न हो और http://www.paypal.com कहते हैं। 

अपने पेपैल रीसेट यहां क्लिक करें पासवर्ड और अब फिर से लोड। यह ठीक है, बहुत वैध लग रहा है? मैं मैं पर क्लिक नहीं होगा, मतलब सिर्फ यह कहते हैं कि एक ईमेल। लेकिन यहाँ विरोधाभास पर ध्यान दिया। यह www.paypal.com कहते हैं, और वास्तव में, एक मिनट रुको, हम चाहते हैं कि पता है सुरक्षा के लिए एस। तो अब, www.paypal.com HTTPS के लिए जाना है, लेकिन इससे पहले कि आप यह कभी नहीं किया गया है, की आदत में मिलता है यहां छोटी सी लिंक पर मँडरा। और यह देखना मुश्किल है वहाँ स्क्रीन पर, और यह यहाँ नहीं है कि सब आसान है। लेकिन जिस तरह से यहाँ नीचे में छोटे छोटे कोने वास्तव में ब्राउज़र करता है हम जा रहे हैं कि तुम बताओ बजाय Paypal.com की badplace.com करने के लिए। अब, जहां हम इस के साथ जा रहे हैं? हम आज किया है सब उदाहरण हैं, हम कड़ी मेहनत से कोडित और मैन्युअल बाहर टाइप किया है। वेब अविश्वसनीय है शुष्क जब आप मुश्किल उस सामग्री को तो अपने वेब पेज Code स्थिर और कभी नहीं बदल रहा है। बेशक, हमारे सभी पसंदीदा वेबसाइटों आज यह जीमेल या ट्विटर या है कि क्या फेसबुक या दूसरों के किसी भी नंबर गतिशील हैं। वे में बदल रहे हैं उपयोगकर्ता इनपुट के जवाब बस गूगल खोज परिणामों की तरह। 

और तो बुधवार को, हम क्या है हम एचटीएमएल और सीएसएस परिचय छोड़ हम लेते हैं और हमारे पीछे अब हम उस के लिए दी यह जानते हैं और हम परिचय एक नई प्रोग्रामिंग भाषा पसंद है, जो कहा जाता है, पीएचपी, सी, हमें देने के लिए जा रहा है वास्तव में कार्यक्रम बनाने के लिए बिजली खुद को कि उत्पादन उत्पन्न करते हैं। इस मामले में, हम का उपयोग होगा पीएचपी गतिशील वेब उत्पन्न करने के लिए इस नई भाषा का उपयोग कर पृष्ठों। बुधवार को उस पर इतना अधिक। तब आप देखना। 

[संगीत बजाना]