>> [संगीत खेल]
डेविड जे Malan: सब ठीक है, वापस स्वागत करते हैं.
इस CS50 है.
इस सप्ताह सात का अंत है.
और यह कि मेहतर का अंत है समस्या से शिकार चार सेट
यदि आपको याद हो सकता है.
के सभी उबरने के बाद कर्मचारियों की उन JPEGs,
यदि आप चाहते हैं आप, चुनौती दी थी के रूप में कई के साथ खुद को तस्वीर
आप कर सकते हैं उन लोगों की.
हम प्रस्तुतियाँ की एक पूरी गुच्छा मिला पिछले कुछ हफ्तों में,
दरअसल, काफी कुछ सही दोपहर से पहले आज, जिनमें से कुछ, यहां उन हैं
Annenberg like-- दिखता in-- यहां पकड़ा यहां कार्यालय समय पर हॉल, एक
निक के साथ लोवेल हाउस में.
यहाँ रेमन फोन पर पकड़ा जा रहा है.
यह एक CS50 दोपहर के भोजन पर था.
इस जेसन के साथ Skyping था एक और अधिक रचनात्मक सहपाठी,
जो उसे इस तरह से फोन किया था.
हम यह क्या था पता नहीं है.
>> [हँसी]
>> डेविड जे Malan: लेकिन कि एक गीगाबाइट लायक है.
यहाँ चांग, ​​कौन है सचमुच मंच से भागा
एक फोटो खिंचवाने जा रहा से बचने के लिए दिन, लेकिन अंत में पकड़ा गया था.
यहाँ निक है.
और यहाँ एलिसन नीचे क्षेत्रों से है.
और Zamyla भी नहीं मिला एक बॉलरूम प्रतियोगिता में.
इसलिए हम के माध्यम से जाना जाएगा इन तस्वीरों, यह पता लगाने
जो प्रस्तुत सबसे जल्द से जल्द, और इनाम
एक शानदार पुरस्कार के रूप में कल्पना में वादा किया था.
और हम भी बारे में ऊपर का पालन करेंगे शामिल किया गया था कि अंतरिक्ष.
>> Announcements-- तो दोपहर के भोजन के एक जोड़े , फिर से, 1:15 पर इस शुक्रवार है.
आप हमारे साथ शामिल करना चाहते हैं, यहां कि यूआरएल पर RSVP.
जेसन एक से यहां फिर से प्रकट होता है साल के वर्गों के एक जोड़े
पीठ, जो हुआ हैलोवीन पर गिर करने के लिए.
और वास्तव में, वह एक के रूप में तैयार उस विशेष वर्ष कद्दू.
आप इस खंड घड़ी उसकी 2011 खंड की
आठ, आप उत्सुक हैं, CS50.tv में, मुझे लगता है कि
इस वर्ष था जिसमें उसकी हवा पंप काम कर रहा था.
>> आप तो घड़ी 2012 में भी इसी खंड,
आप बहुत पिचकाकर इस जेसन देखेंगे सूट नहीं रह कार्य के बाद से,
जो सिर्फ कहने के लिए है इस शुक्रवार, आप चाहते हैं
दावेन साथ एक कद्दू उत्कीर्ण पसंद और Gabe और दूसरों को, सिर को RSVP
cs50.harvard.edu पते पर.
यह बहुत मजेदार होने का वादा.
दावेन, हम से कहा, खुदी हुई है रहे हैं अपने जीवन के सभी कद्दू.
ब्राजील से गेब्रियल कभी नहीं किया है हैलोवीन के लिए एक कद्दू खुदी हुई.
वह सीखता है तो जैसा कि उनके साथ वहाँ हो.
>> सेमिनार, meanwhile-- तो आप जल्दी ही सीख जाओगे
के बारे में क्या हमारी उम्मीदों के लिए कर रहे हैं अंतिम परियोजना, जो अनिवार्य रूप से
को लेकर ही होगा डिजाइन और कार्यान्वयन
ब्याज की किसी भी परियोजना के लिए सबसे अनुमोदन के अधीन यद्यपि आप,
और अपने शिक्षण साथी से मार्गदर्शन.
के अंत की ओर सेमेस्टर, हम एक नंबर का परिचय
वैकल्पिक कक्षाएं हैं जो सेमिनार, की शिक्षण साथियों और हार्वर्ड के नेतृत्व में
स्टाफ, भर में पाठ्यक्रम के दोस्तों से विभिन्न विषयों पर परिसर, कि
के लिए स्पर्शरेखा हैं पाठ्यक्रम के अंतर्निहित पाठ्यक्रम
लेकिन फिर भी लागू हो, मज़ा, और संभावित अंतिम परियोजनाओं के लिए अलग.
>> उदाहरण के लिए, सबसे पहले, यदि आप चाहते हैं वहाँ कि यूआरएल के लिए, सिर रजिस्टर करने के लिए.
और इस के लिए लाइनअप है अकेले इस साल के सेमिनार.
लेकिन हम में से दर्जनों एहसास पिछले कुछ वर्षों से सेमिनार, जो सभी के लिए
सेमिनार मेनू में जुड़े हुए हैं पाठ्यक्रम की वेबसाइट का विकल्प.
आप के बारे में सोच रहे हैं तो अगर अपनी सुविधा क्षेत्र के बाहर जा रहा
या कुछ नए कौशल उठा, उदाहरण के लिए, iPhone प्रोग्रामिंग
स्विफ्ट, एक नई भाषा के साथ क्षुधा एप्पल या उद्देश्य सी से
या एंड्रॉयड क्षुधा या प्रोग्रामिंग [? क्यू?] प्रकाश बल्ब, या विषयों के किसी भी
यहाँ और अधिक होने के कारण जांच पंजीकरण पेज बाहर.
>> इसलिए हम शुरू हुआ और पर यह निष्कर्ष निकाला एचटीटीपी को देख के साथ सोमवार.
तो जल्दी refresher-- एचटीटीपी, हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल.
लेकिन यह है कि वास्तव में क्या मतलब है?
कि वास्तव में क्या मतलब है?
कि एक हाथ है?
मैं तुम सिर्फ अपने सिर scratching रहे हैं.
लेकिन आप HTTP क्या है प्रस्ताव करना चाहते हैं?
>> दर्शक: कैसे कंप्यूटर [अश्राव्य] के साथ संवाद.
डेविड जे Malan: मैं पिछले भाग याद किया.
कंप्यूटर with-- कैसे संवाद
>> दर्शक: इंटरनेट सर्वर.
डेविड जे Malan: इंटरनेट के साथ Good-- सर्वर, और विशेष रूप से, वेब सर्वर.
याद क्योंकि, का एक गुच्छा है इंटरनेट पर सेवाओं, जिनमें से कुछ
आप चैट के बीच दैनिक शायद का उपयोग और संदेश, चैट, और वेब, और ईमेल,
और पसंद है.
और HTTP बस है प्रोटोकॉल वेब ब्राउज़रों कि
साथ संवाद स्थापित करने के लिए जब बोलने वेब सर्वर, और इसके विपरीत.
और में एनालॉग इंसानों की दुनिया, हो सकता है
मैं कुछ हिला मेरे हाथ का विस्तार अन्य मानव और वह
विस्तार से मानता है उसके हाथ के रूप में अच्छी तरह से.
इसलिए कि सिर्फ एक प्रोटोकॉल है, सम्मेलनों का एक सेट.
>> और उन सम्मेलनों वास्तव में क्या कर रहे हैं?
खैर, यह सिर्फ करने के लिए नीचे फोड़े आगे और पीछे संदेश भेजने,
हम यहाँ दर्शाया के रूप में.
और तरीके के एक जोड़े में नहीं है जो आप इन संदेशों को भेज सकते हैं.
और शायद सबसे आम मिल के रूप में जाना जाता है.
और हम एक विपरीत देखेंगे इस के लिए लंबे समय से पहले.
>> लेकिन एक ब्राउज़र से एक अनुरोध प्राप्त सर्वर से सिर्फ इस तरह दिखता है.
यह कहते हैं कि पाठ का एक गुच्छा है एक आभासी लिफाफे के अंदर.
उस लिफाफे के बाहर विवरण के एक जोड़े के टुकड़े जाना.
क्या पर जाने की जरूरत है लिफाफा, तो बात है,
जैसे एक अनुरोध प्राप्त करने के लिए एक वेब सर्वर से मुझसे यह?
हाँ.
>> दर्शक: आपका आईपी पता.
>> डेविड जे Malan: मेरे आईपी पता से क्षेत्र में, तो बात है,
और जाहिर है, प्राप्तकर्ता का आईपी पता.
लेकिन एक वेब पैकेट के मामले में, हम थोड़ा और विस्तार की जरूरत
यह सिर्फ करने के लिए पर्याप्त नहीं है एक सर्वर से एक लिफाफा भेजना,
सर्वर है कि हो सकता है क्योंकि विभिन्न प्रकार के लिए सुन
इंटरनेट यातायात की.
तो और क्या हम क्या ज़रूरत है प्राप्तकर्ता का आईपी के अलावा?
हाँ?
>> दर्शक: यह टीसीपी है?
डेविड जे Malan: अच्छा.
TCP--
>> दर्शक: पता.
>> डेविड जे Malan: पता, या यह कहा जाता है बंदरगाह, के रूप में.
बंद, लेकिन एक टीसीपी पोर्ट नंबर.
और इनमें से एक गुच्छा है.
लेकिन निश्चित रूप से सबसे परिचित होना चाहिए अंततः
डिफ़ॉल्ट है, जो 80 हो एक वेब यातायात के लिए प्रयोग किया जाता है.
और एक अन्य परिचित एक जल्द ही 443 हो जाएगा
जो सुरक्षित वेब के लिए प्रयोग किया जाता है यातायात, https के साथ शुरू है कि यूआरएल.
>> तो यह क्या जाता है उस लिफाफे के अंदर.
और मिल / बस, दे मतलब मुझे डिफ़ॉल्ट वेब पेज.
मुझे मुश्किल की जड़ दे दो कि वेब सर्वर पर ड्राइव.
और उम्मीद है, वेब ठीक है, के साथ जवाब देंगे सर्वर
बस है जो और संख्या 200, सभी, हाँ, एक कहावत सम्मेलन
वास्तव में ठीक है.
यहाँ पेज है.
वेब पेज के प्रकार के लिए जा रहा है पाठ हो, लेकिन और अधिक विशेष रूप से, एचटीएमएल,
जो हम वापस में गोता लगाने वाले हैं.
और डॉट डॉट सिर्फ डॉट इसका मतलब है, यहाँ एचटीएमएल है.
और कहा कि जहां हम आज कहानी उठाओ,
वास्तव में, एचटीएमएल लेखन हाइपरटेक्स्ट मार्कअप लैंग्वेज, जो
भाषा है जिसमें वेब पृष्ठों को लिखा जाता है.
यह एक प्रोग्रामिंग भाषा नहीं है.
कोई कार्य कर रहा है या छोरों या स्थितियों.
यह एक मार्कअप भाषा है, साथ ही आज फिर से देखना,
कि आप निर्दिष्ट करने के लिए अनुमति देता है संरचना और stylize कैसे करें
सौंदर्य की दृष्टि से एक वेब पेज.
>> तो यह एक था और केवल पेज हम वास्तव में
संक्षेप में अगर सोमवार को, देखा.
और कुछ नोटिस मुख्य विशेषताओं.
खुले कोण का एक बहुत कुछ है ब्रैकेट और करीब कोण ब्रैकेट.
उन कोण के बीच में कोष्ठक शब्द हैं.
और हम शुरू करने जा रहे हैं उन शब्दों टैग बुला.
इतना खुला ब्रैकेट सिर और बंद ब्रैकेट सिर
खुले और बंद टैग कर रहे हैं, या आरंभ और अंत टैग
क्रमशः, एक HTML तत्व की, हम यह फोन करता हूँ के रूप में, सिर बुलाया.
और उसी शब्दजाल लागू होता है एचटीएमएल में और इसके आगे के शरीर को.
>> और क्या अच्छा है HTML-- और वास्तव में, हम करेंगे
इस पर बहुत कम समय खर्च करते हैं, आप ज्यादातर सिर्फ यह पता लगाने हूँ क्योंकि
क्या यह सुविधाएँ जब आप है वास्तव में एक ठोस समस्या है
आप पाएंगे कि solve-- को एक ब्राउज़र सुंदर गूंगा है.
यह सिर्फ विपरीत नहीं do-- जा रहा है एक तुम्हें क्या करना है यह बताना क्या computer--.
और तो आप खुला है जब ऊपर से ही ब्रैकेट एचटीएमएल
वहाँ, कि अनिवार्य रूप बस का अर्थ है, हे, ब्राउज़र,
यहाँ HTML में लिखा एक वेब पेज आता है.
>> यह खुला ब्रैकेट देखता है बस का अर्थ है कि सिर,
अरे, ब्राउज़र, यहां सिर आता है, या अपने वेब पेज के सर्वोच्च भाग.
यह एक बंद ब्रैकेट देखता है सिर्फ अरे, इसका मतलब है कि सिर,
कि सिर के लिए है.
कुछ और के लिए अतिरिक्त.
और सब कुछ है कि जाहिरा तौर पर शरीर में होने जा रहा.
और तुम एक टैग की तरह नहीं है जब आप, सिर्फ हैलो, अल्पविराम, दुनिया है
कि सिर्फ कच्चे पाठ होने जा रहा है कि अंततः स्क्रीन में प्रदर्शित किया जाता है.
>> अब, आप भी नोटिस देंगे यहाँ खरोज.
आप शायद अनुमान कर सकते हैं कैसे हम यह stylizing रहे हैं.
मैं एक टैग खुला हर बार, तो बात है, मैं इंडेंट.
और हर बार मैं बंद एक टैग, मैं संयुक्त राष्ट्र मांगपत्र,
घुंघराले ब्रेसिज़ के लिए भावना में समान.
और उस पार, मैं तरह कर रहा हूँ मेरे निर्णय का उपयोग कर की.
मैं मार जहमत नहीं उठाई कि नोटिस कि शीर्षक टैग के अंदर प्रविष्ट करें.
क्यों?
खैर, मैं सिर्फ यह एक देखा का फैसला मेरे लिए थोड़ा क्लीनर, मानव,
बस कर परेशान नहीं करने के लिए.
तो फिर, वहाँ कुछ न्याय सिर्फ कॉल
जैसे सी या किसी भी भाषा में नहीं है.
>> लेकिन बहुत नोटिस इस खरोज कि एक मानसिक मॉडल को उधार देता है,
नहीं यह जटिल करने के लिए ऊपर.
लेकिन एक पेड़, है ना?
आप एक वेब की सोचते हैं पेज, जाहिरा तौर पर लिखा
इस तरह, के रूप में अच्छी तरह से, कि जिस तरह से इंडेंट
आप लगभग खुला ब्रैकेट के बारे में सोच सकते हैं एचटीएमएल बंद ब्रैकेट टैग Demarcating है
एक नोड के रूट, एक परिवार के पेड़ पेड़ों की शैली में शैली नोड
हम पिछले शुक्रवार को देखा.
>> और वास्तव में, हम यहीं पर है हम एक डोम, डी-ओ-एम, दस्तावेज़ फोन करता हूँ क्या
ऑब्जेक्ट मॉडल, कह का एक अच्छा तरीका कि एचटीएमएल का प्रतिनिधित्व करता है कि एक पेड़.
और HTML है कि नोटिस, हम कहते हैं, एक परिवार के पेड़, दो बच्चों की तरह.
बाईं तरफ सिर है.
सही पर शरीर है.
>> और सिर्फ एक नासमझ सोचा व्यायाम के रूप में, सिर, ज़ाहिर है, कितने बच्चों की है
इस संरचना के हिसाब से?
तो बस एक, title-- हमारे पास यही कारण है कि
खिताब के लिए सिर से जा तीर.
तो उस में उस व्यक्ति के रूप में यद्यपि है परिवार के पेड़ सिर्फ एक वंश था.
और फिर शीर्षक ही कर सकते हैं भी एक बच्चे के लिए कहा जा सकता है.
>> एचटीएमएल था कि स्मरण करो हैलो, अल्पविराम, यह नीचे दुनिया.
और मैं सिर्फ एक के भीतर इसे तैयार किया है बजाय एक आयत का अंडाकार बस
कि भले ही शब्दार्थ संप्रेषित करने के लिए यह तो बात है, पेड़ में एक नोड है,
यह की तरह मौलिक अलग है.
यह एक टैग नहीं है.
या अधिक उचित रूप से, यह एक तत्व नहीं है.
अगर तुम जाएगा यह सिर्फ एक पाठ नोड है.
लेकिन ये पूरी तरह से कर रहे हैं मनमाने ढंग से मानव सम्मेलनों.
इस के बस अब मेरा तरीका है एक समग्र रूप में क्या मैं हूँ का प्रतिनिधित्व
दस्तावेज़ कहते हैं.
>> और एक तरफ, बात के रूप में सुपर शीर्ष बाएँ हाथ के कोने,
खुला ब्रैकेट विस्मयादिबोधक बिंदु डॉक्टर प्रकार एचटीएमएल, यह एक टैग की तरह लग रहा है
लेकिन यह बेवकूफ कोने मामला जहां है कि अभी वहाँ, कॉपी और चिपकाया है
ब्राउज़र इंगित करने के लिए इस HTML संस्करण 5 है.
दुनिया क्या बदलता रहता है एक पेज में कोड की पहली पंक्ति होना चाहिए.
यह सिर्फ 5 संस्करण का मतलब है.
तो यह काफी नहीं करता दूसरों की तरह दिखेगा.
>> उस के साथ तो सब ठीक है, आप अब की सराहना करता हूँ, कहा
यह काफी इस बेवकूफ टैटू किसी को मिला है.
>> [हँसी]
>> डेविड जे Malan: सब ठीक है, और अब वास्तव में डुबकी चलो
इस के साथ कुछ करने में.
आपको लगता है कि पिछली बार याद करेंगे मैं CS50 उपकरण खोला
और मैं के रूप में कुछ किया खोलने एडिट के रूप में सरल.
और मैं भी पर फ़ाइल को बचाया मेरे desktop-- कहीं नहीं special--
hello.html के रूप में.
>> तो मुझे लगता है कि again-- hello.html दर्ज करें.
और अब इस फाइल में, मैं जा रहा हूँ आगे बढ़ो और दोहराने क्या हम बस
saw-- डॉक्टर प्रकार HTML तो मैं करने जा रहा हूँ खुला ब्रैकेट HTML बंद ब्रैकेट नहीं है.
और फिर मैं preemptively करने जा रहा हूँ खोलने और टैग को बंद करें.
क्यों?
अभी तो मैं बाद में भूल नहीं है.
इसे खोलने की तरह, सिर्फ अच्छा अभ्यास है और सभी को एक बार घुंघराले ब्रेसिज़ बंद.
>> और फिर आगे क्या आया?
आप टैटू के बारे में सोच सकते हैं.
>> दर्शक: सिर.
>> डेविड जे Malan: सिर.
और फिर यहाँ में, मैं शीर्षक था, मुझे लगता है.
और शीर्षक, मनमाने ढंग से किया गया था हैलो, दुनिया के करीब शीर्षक.
और फिर यहाँ नीचे, शरीर, की course-- तो हम शरीर टैग को बंद करें.
और फिर सिर्फ कुछ हद तक प्रचुरता से, मैं यहाँ नीचे एक ही बात थी.
>> इसलिए मुझे लगता है कि यह एक वेब पेज है कि दावा करते हैं.
यह कुछ ऐसा है कि अब वेब पर रह सकता है,
यहां तक ​​कि पाठ्यक्रम की है, हालांकि, यह सचमुच है अभी मेरे डेस्कटॉप पर रह रहे हैं.
लेकिन वास्तव में, मैं एडिट को कम करते हैं, मैं अपने डेस्कटॉप अपने आइकन पर देखेंगे.
इस उपकरण है, भले ही आप मैक ओएस पर यह कर सकता है
TextEdit बिना या यहां तक ​​कि नोटपैड के साथ Windows.
>> और मुझे आगे जाना है और डबल क्लिक करें कि भी, और select-- ठीक है, चलो चलो
वजह यह है कि चयन नहीं क्रोम नहीं खोल रहा है.
के आगे जाना है और क्रोम खोलते हैं.
और उसके बाद कमांड-ओ ओपन के लिए करते हैं और अपने डेस्कटॉप पर नेविगेट
और उस फ़ाइल को खोलने.
एक ब्राउज़र की व्याख्या कैसे है कि एचटीएमएल, नीचे से ऊपर, सही करने के लिए छोड़ दिया है.
अरे, ब्राउज़र यहाँ एचटीएमएल है.
यहाँ सिर है.
यहाँ शीर्षक है.
यहाँ शरीर है.
और वास्तव में, यह कैसे है यह उस वेब पेज प्रदान करता है.
>> लेकिन यूआरएल नोटिस.
आप में से कोई भी इस विशिष्ट ऊपर खींच सकता है अभी अपने लैपटॉप पर पेज,
यहां तक ​​की अपने अंदर कि यूआरएल के माध्यम से उपकरण,
फ़ाइल क्योंकि: // यह वास्तव में इंगित करता है मेरी फाइल सिस्टम पर, मेरे हार्ड ड्राइव,
तुम्हारा नहीं.
तो यह है कि सभी उपयोगी नहीं है.
>> चलो अब की ओर चलते हैं एक वास्तविक वेब सर्वर का उपयोग.
और यह CS50 उपकरण पता चला है सिर्फ एक पर्यावरण जहां से भी अधिक है
आप सी कोड लिखने और संकलन कर सकते हैं तुम क्या कर रहा हूँ की तरह है और इसे चलाते हैं.
यह भी द्वारा विन्यस्त किया गया है कर्मचारियों को एक ठेठ वेब प्रतिनिधित्व करने के लिए
इंटरनेट पर है कि सर्वर, आप के लिए भुगतान कर सकते हैं कि एक
तथाकथित बादल में है कि या एक.
>> और यह चल रहा है मानक मुक्त खुला स्रोत
सॉफ्टवेयर, उदाहरण के लिए, कुछ शायद जो कहा जाता है, अपाचे,
अभी भी सबसे लोकप्रिय वेब दुनिया में सर्वर सॉफ्टवेयर
वेबसाइटों के हजारों आज का उपयोग करें.
और यह भी भी है MySQL की तरह सॉफ्टवेयर,
जो एक डाटाबेस सर्वर है हम अंततः को मिलेगा कि,
जो सिर्फ कहने के लिए है मैं इलाज शुरू कर सकते हैं
एक संपूर्ण सर्वर के रूप में मेरे उपकरण कि मैं कहीं और के लिए भुगतान नहीं कर रहा हूँ.
यह बस के लिए अपना खुद का लैपटॉप पर रहता है विकास और सुविधा प्रयोजनों.
>> तो चलो आगे चलते हैं और इस का लाभ ले.
मैं आगे जाने के लिए जा रहा हूँ और एक टर्मिनल विंडो खोलने के.
और मैं आगे जाने के लिए जा रहा हूँ और पहले मैं कर रहा हूँ, वास्तव में move--
अपने डेस्कटॉप के लिए नेविगेट करने के लिए जा रहा है.
मैं रास करते हैं, hello.html है.
और मैं जा रहा हूँ आगे और का उपयोग शुरू
हम है एक नया निर्देशिका आज से पहले इस्तेमाल नहीं किया.
>> hello.html-- मैं स्थानांतरित करने के लिए जा रहा हूँ आभासी hosts-- के लिए ../vhosts को
फिर future-- और में उस पर और अधिक स्थानीय होस्ट नामक एक निर्देशिका में,
लगभग करने के लिए दिया उपनाम जो है किसी भी कंप्यूटर, यह एक मैक, पीसी, चाहे
लिनक्स कंप्यूटर, और उसके बाद या विशेष रूप से एक निर्देशिका में है कि हम,
स्टाफ पहले से ही आप के लिए जब बनाया तुम्हें बुलाया उपकरण डाउनलोड
जनता.
और अपने नाम, कुछ भी पता चलता है के रूप में मैं सिद्धांत रूप में, इस फ़ोल्डर में डाल
अब होने जा रहा है सार्वजनिक, कम से कम लोगों को
एक सीधा है जो अपने कंप्यूटर के लिए कनेक्शन.
>> तो अब मुझे आगे चलते हैं और कि एक ही निर्देशिका के लिए सीडी करना
तो मैं क्या देख सकते हैं चल रहा है और प्रकार रास.
और वास्तव में, कि है वहाँ में ही बात.
मैं अब मैं इस डाल दिया है क्योंकि दावा है कि एक निर्देशिका के अंदर hello.html फाइल
एक निर्देशिका की जनता के अंदर बुलाया एक निर्देशिका के अंदर बुलाया स्थानीय होस्ट
कहा जाता vhosts, जो CS50 स्टाफ को धन्यवाद
होने के लिए पूर्व विन्यस्त किया गया है अपने वेब सर्वर के रूट,
मैं अब उम्मीद है कि यह कर सकते हैं.
>> मैं एक नया टैब खोलने के लिए जा रहा हूँ.
//: और मैं फाइल करने के लिए नहीं जा रहा हूँ.
मैं वास्तविक उपयोग करने के लिए जा रहा हूँ HTTP / स्थानीय होस्ट, जो
फिर, उपनाम है अपने खुद के सर्वर के लिए.
और फिर मैं करने जा रहा हूँ क्या नाम फाइल, अभी स्पष्ट होना करने के लिए?
इस कहानी शायद कहाँ जा रहा है?
hello.html.
>> दूसरे शब्दों में, मैं अब इस करना चाहते हैं मेरे अपने कंप्यूटर, अपने ही उपकरण है,
यह एक वास्तविक सर्वर है के रूप में यद्यपि.
अपने उपनाम लोकलहोस्ट है.
लेकिन स्थानीय होस्ट के बारे में सोच की तरह के रूप में Facebook.com google.com, जो भी हो.
यह सिर्फ मेरे स्थानीय नाम है.
और फिर मैं चाहता हूँ फाइनल में है हार्ड ड्राइव की जड़ है, तो बात करने के लिए
या वेब सर्वर के रूट, तो आगे स्लैश फलस्वरूप और
फ़ाइल नाम hello.html.
>> मुझे बाहर ज़ूम और हिट दर्ज करते हैं.
और वास्तव में, अब अपने वेब पेज है.
इसलिए यह थोड़ा अलग है.
और यह सिर्फ underwhelming के रूप में है.
इस पुराने संस्करण है.
मुझे वापस फ़ॉन्ट हटना करते हैं.
यह पुराना है.
यह नया है.
लेकिन मौलिक क्या हो रहा है अब एचटीटीपी इस्तेमाल किया जा रहा है.
>> चलो इस एक छोटे से अधिक स्पष्ट या करते हैं, एक छोटे से अधिक जटिल, अगर तुम जाएगा.
मुझे नीचे सही करने के लिए जाओ मेरे उपकरण के हाथ कोने.
और यह सब उस नोटिस समय, एक नंबर दिया गया है.
यही विशिष्ट पता है अपने CS50 उपकरण की.
यह एक निजी पता है 172.16 से गर्भित के रूप में,
जो अभी केवल आप शारीरिक रूप से मतलब है इस वेब सर्वर का उपयोग कर सकते हैं.
सब कुछ firewalled है और अच्छी तरह से आराम से संरक्षित
इस वजह से दुनिया के संबोधित.
>> मैं करने के लिए जाना है और अब हालांकि नोटिस नहीं मेरे उपकरण में इस पते,
लेकिन मैक OS-- में मैं जा रहा हूँ यहाँ पर वापस जाने के लिए.
यह अब अपने मैक है.
और अब मैं खोलने के लिए जा रहा हूँ यहाँ क्रोम के इस संस्करण.
और मैं http के लिए जा रहा हूँ: //172.16.25 / और मैं rest-- 133 भूलना.
>> इसलिए मैं अपने मैक से यात्रा करने के लिए जा रहा हूँ कि आईपी पता दर्ज /hello.html.
और अब मैं अपने मैक से देखना मेरे CS50 उपकरण है, कि कौन है
आईपी ​​पता है कि संख्या, वास्तव में व्यवहार कर रही है
इंटरनेट पर एक वेब सर्वर की तरह.
यह एक अच्छा आसान नहीं है Facebook.com जैसे नाम याद है,
लेकिन यह HTTP इस्तेमाल कर रहा है जाहिर है, भले ही क्रोम
एक तरह से दुनिया सरलीकृत कर रहा है हमारे लिए लेकिन HTTP हमें दिखा नहीं.
लेकिन यह वास्तव में ठीक है कि.
क्रोम सिर्फ कुछ बचत है इन दिनों keystrokes.
और कहा कि अब हम देखते हैं क्या है.
>> तो यह है कि सब ठीक है और अच्छा है.
लेकिन यह एक बहुत underwhelming पेज है.
मुझ में जाने के लिए और कुछ करने दो अब एक छोटे से अलग.
तो मुझे एडिट करने के लिए वापस जाने दिया.
और बदले नमस्ते की, दुनिया, की एक छवि डाल दिया.
और मैं मुझे जाने दो before-- से दावा किया मेरे स्थानीय होस्ट निर्देशिका जनता में.
और मुझे आगे जाना है और एक कॉपी करते हैं आज से फाइल की पूरी गुच्छा
मेरे ड्रॉपबॉक्स फोल्डर से यहाँ पर.
>> मैं लोकसभा टाइप अब, अगर देखो इन सभी फाइलों पर
मैं द्वारा वितरित किया है कि आज के अग्रिम में पाठ्यक्रम की वेबसाइट,
जिनमें से एक अभी भी hello.html है.
इसलिए कि वहाँ एक है.
और यह मूर्खतापूर्ण एक याद पिछले time-- cat.jpg से.
तो मुझे एम्बेड करने के लिए कोशिश करते हैं अपने वेब पेज के अंदर cat.jpg.
>> मैं आगे जाने के लिए जा रहा हूँ और, cat.jpg कर बचाने के लिए.
मुझे क्रोम के लिए वापस जाओ.
और मुझ में ज़ूम फ़ॉन्ट और अब पुनः लोड.
ओह, मैं इस जहां रखा है?
Standby-- मैं अभी भी पुरानी है अपने डेस्कटॉप खुला से संस्करण.
तो मेरा, मुझे मेरे vhost में चलते हैं स्थानीय होस्ट, मेरी जनता, और hello.html.
तो अब मुझे आगे चलते हैं और शरीर के अंदर cat.jpg कहना
मैं चाहता हूँ कि जहां यह होना प्रदर्शित और पुनः लोड.
बेशक, यह सही नहीं है.
>> तो मैं ब्राउज़र एक छोटे से बताने की जरूरत अधिक जानबूझ मैं यह क्या करना चाहते हैं.
बस नाम है टाइपिंग जाहिर है पर्याप्त नहीं.
तो एक और वहाँ था कि याद टैग, छवि, कम करने के लिए आईएमजी.
वह सिर्फ इंसानों क्योंकि है प्रकार पूर्ण शब्द पसंद नहीं है.
और फिर हम = "cat.jpg" स्रोत कर सकते हैं.
>> और अब मैं क्या करने जा रहा हूँ यहाँ एक बात अलग.
यहां तक ​​की सब के बावजूद हमारे टैग इस प्रकार दूर है
एक की इस धारणा थी शुरू टैग और एक अंत टैग,
कि वास्तव में नहीं कर सकता है एक छवि के लिए समझ, सही?
एक छवि या तो वहाँ है या नहीं है.
और इसलिए मनुष्य के लिए आए हैं एक सरल सम्मेलन के साथ.
आप एक टैग है जब कि कर सकते हैं दोनों शुरू करने और एक ही time-- पर खत्म
यह तो सिर्फ speak-- करने, खाली किया जा सकता है टैग के अंदर आगे स्लैश डाल
बहुत अंत में.
अब मुझे अपने ब्राउज़र को वापस जाने दिया.
पुनः लोड अरे नहीं, कुछ गलत है मारो.
आप शायद यह देखा है कभी कभी वेब पर,
भले ही यह आपकी गलती नहीं किया गया है.
यह वेब सर्वर की गलती है.
क्या odes यह इंगित करने के लिए लग रहे हो?
यह टूट गया है.
छवि अंतर्गत आता है कि जहां.
हाँ?
>> दर्शक: लेकिन यह नहीं है छवि का उपयोग किया है.
>> डेविड जे Malan: यह नहीं करता छवि का उपयोग किया है.
यही है, या और भी बदतर है, शायद यह भी मौजूद नहीं है.
हम उस का निदान नहीं कर सकते हैं देखते हैं.
पिछली बार से याद करते हैं कि क्रोम में, उपकरण में,
या यहां तक ​​कि अपने मैक या पीसी पर, आप डेवलपर मेनू में जाना
और डेवलपर उपकरण के लिए जाना विकल्प, शायद आपने जो
बहुत ज्यादा नहीं या कभी इस्तेमाल किया.
और मैं नेटवर्क के लिए जाना और पृष्ठ पुनः लोड,
वास्तव एचटीटीपी को देखो किए जा रहे हैं कि अनुरोधों.
>> Hello.html है ऐसा लगता है वास्तव में ठीक है, इसलिए 200.
लेकिन cat.jpg एक 403 है.
तो यह एक 404 नहीं है.
फ़ाइल शायद मौजूद है.
403 मना मतलब है.
तो यह थोड़ा भ्रमित है.
मैं वापस जाने के लिए जा रहा हूँ मेरे टर्मिनल विंडो के लिए.
मुझे यहाँ जूम इन करते हैं.
और मुझे एक रास करते हैं.
उन्हीं फाइलों है.
>> अब मुझे एक LS-एल करते हैं, आप शायद है जो
फ़ाइल को देखने के लिए पहले प्रयोग किया आकार हो सकता है या timestamps.
और हम की एक पूरी गुच्छा देखना भारी जानकारी.
लेकिन कुछ विवरण नोटिस.
यहाँ hello.html इस में है यहां पंक्ति और यहाँ cat.jpg है.
और यह जा रहा है बस उपकरण है जेपीईजी की हाइलाइटिंग द्वारा अनुकूल उपयोगकर्ता
इस तरह बैंगनी में.
लेकिन और क्या बगल में अलग है फ़ाइल आकार और फ़ाइल नाम?
>> दर्शक: [अश्राव्य].
डेविड जे Malan: हाँ, वहाँ है के यहाँ पर दो और आर.
Hello.html पर जा रहा है क्या सूचना है.
इसलिए इसे का नाम पता चला है कि इस निर्देशिका सार्वजनिक महत्वपूर्ण है.
इस निर्देशिका में कुछ भी जनता के लिए होती है.
लेकिन यह पर्याप्त नहीं है बस वहाँ में फ़ाइलों को छोड़ करने के लिए.
आप भी बदलने की जरूरत है फ़ाइलों के मोड,
की अनुमतियाँ परिवर्तित फ़ाइल लगातार नहीं करने के लिए
डिफ़ॉल्ट सेटिंग हो, जो केवल मैं पढ़ सकता है
और मैं मालिक जा रहा है, यह लिखना.
मैं पूरी दुनिया को हर कोई करना चाहते हैं तो बात है, मेरी फाइल पढ़ने में सक्षम हो.
बस यह देखने का मतलब है पढ़ें.
>> और वास्तव में, के रूप में आप समस्या में देखेंगे सात सेट, कि क्या इन अनुसंधान के मतलब है.
इन दो आर मतलब हर कोई जाने बाकी दुनिया में भी, इसे पढ़ें
विशेष रूप से अब है कि यह इस निर्देशिका में है.
तो यह तय करने के लिए सबसे आसान तरीका है मेरे शीघ्र करने के लिए जा सकते हैं और बदलाव के लिए chmod करना
मोड और फिर, कुल मिलाकर, एक + आर करना हर कोई, पढ़ने के लिए सभी, प्लस आर,
और फिर cat.jpg दर्ज करें.
कुछ नहीं, होने लगता है जो आम तौर पर एक अच्छी बात का मतलब है.
अब again-- तो रास-एल के cat.jpg को देखो.
और इस अनुमति बदल गए लगते हैं.
एक अलग रूप में, आप अगर एक गलती और आप, उदाहरण के लिए,
बस मैं निबंध know-- नहीं है your-- बनाया सार्वजनिक रूप से दुर्घटना से सुलभ,
आप विपरीत कर सकते हैं, एक-आर हमें.
स्पष्ट रूप से हालांकि, यह नहीं होना चाहिए सार्वजनिक निर्देशिका में होना
वैसे भी चिंता यह है कि अगर.
>> तो अब के लिए वापस जाओ मेरे ब्राउज़र और पुनः लोड करें.
और मैं क्लिक करने के लिए जा रहा हूँ थोड़ा Ghostbusters
प्रतीक का वह हिस्सा खाली करने के लिए स्क्रीन तो हम नया अनुरोध देख सकते हैं.
और वास्तव में, यहाँ है पहले से grump बिल्ली.
लेकिन अधिक महत्वपूर्ण बात, तकनीकी रूप से, वहाँ है
संख्या 200, जो हम इसे ठीक मिला मतलब है.
सब ठीक है, इतना कि ठीक है और अच्छा सब है.
लेकिन हम नहीं बना रहे हैं वेबसाइटों के सर्वश्रेष्ठ,
और न ही हम भी मुश्किल करने के लिए प्रयास करने के लिए जा रहे हैं वेबसाइटों के fanciest आज बनाते हैं.
लेकिन कम से कम कुछ करते हैं तेजस्वी पहले सुपर परिचित
कुछ अन्य टैग से दूर.
तो मैं बस यहाँ एक बिल्ली नहीं करना चाहता हूँ.
मैं वास्तव में यह चाहते हैं कि मान लीजिए बिल्ली कुछ करने के लिए लिंक करने के लिए.
>> मैं हो सकता है, उदाहरण के लिए कुछ इस तरह करते हैं.
के लिए लंगर href के लिए एक हाइपर संदर्भ equals--
और चलो बस कुछ करते हैं www.google.com करीब तरह
बंद कोष्ठक में बोली.
और अब बिल्लियों के लिए खोज.
बंद लंगर टैग.
तो यह केवल एक ही प्रकार का है के मौलिक नए विस्तार.
पाठ्यक्रम के टैग, अलग है.
यह लंगर के लिए नाम एक है href या हाइपर संदर्भ.
>> लेकिन अधिक महत्वपूर्ण बात, वहाँ यहाँ इस वाक्य सुविधा.
यह हम बुला शुरू करेंगे क्या है नहीं एक टैग, लेकिन एक विशेषता.
और एक विशेषता कुछ है कि एक टैग के व्यवहार को संशोधित.
और यह विशेषता, href, साधन इस लंगर के व्यवहार को संशोधित
, इसे क्लिक किया है ताकि जब यह यहां इस यूआरएल को जाता है.
और हां, कि यूआरएल गूगल है.
>> इस बीच, क्या यह है होने जा रहा यहां पाठ?
वैसे, यह होने जा रहा है क्या मानव वास्तव में
रेखांकित के रूप में देखता है लिंक, कि जैसे ही आसान.
तो चलो इस कोशिश करते हैं.
मुझे इसे बचाने के लिए करते हैं.
मैं hello.html में अब भी हूँ.
लेकिन ऑनलाइन संस्करणों में, आप देखेंगे हम वास्तविक फ़ाइल नाम पहले से तैयार है.
मुझे आगे जाना है और फिर से लोड करते हैं.
और अब यह एक बहुत है अभी underwhelming पेज.
लेकिन मैं पर जाएँ अगर there-- और यह एक छोटे से छोटा है
but-- आप नीचे देख सकते हैं अपनी स्क्रीन के बाएँ हाथ के कोने,
यह वास्तव में google.com जा रहा है.
मैं उस पर क्लिक करें और अगर यह होगा मुझे वास्तविक गूगल के लिए रास्ता अलग निर्धारित करें.
>> लेकिन एक अवसर के लिए यहाँ नोटिस बस एक अलग रूप में शोषण,.
और हम दूसरे के लिए वापस आ गया हूँ लंबे समय से पहले सुरक्षा के मुद्दे हैं.
इस विरोधाभास है क्योंकि वहाँ तुम जाओ और तुम क्या कहते हैं जहां के बीच,
आप ऐसा कुछ कर सकता this-- http://www.google.com.
ठीक है, और अब मैं फिर से लोड अगर उस पेज को सहेजने के बाद,
मैं गूगल पर जाने के लिए जा रहा हूँ की तरह यह लग रहा है.
लेकिन कोई कारण नहीं है कि मैं ठीक है, गूगल के पास जाना है?
मैं वास्तव में ऐसा कुछ करने के लिए जा सकते हैं badguy.com, यहाँ पर पृष्ठ पुनः लोड.
और नोटिस, यह अभी भी गूगल की तरह लग रहा है.
और मैं तेज हूँ केवल अगर यहां पर जाएँ करने के लिए पर्याप्त
मैं यह भी जा रहा है देखते हैं एक अलग स्थान पर जाना.
>> आप कभी भी मिल गया है तो अगर एक ईमेल, विशेष रूप से
पेपैल से एक, या प्रतीत होता है पेपैल से
आप पूछ में लॉग इन करने के लिए अपने खाते में, इस
यही कारण है कि आप कभी नहीं करना चाहिए कभी ईमेल में लिंक पर क्लिक करें
स्पष्ट रूप से, ईमेल में किसी भी लिंक.
यदि आप जानते हैं कि आप वास्तविक है पेपैल या बैंक में पैसे
अमेरिका या फिडेलिटी या किसी की वेबसाइट मैन्युअल में यह टाइप करें.
यह कितना आसान लग रही है क्योंकि पेश में किसी को क्या चाल
एक कड़ी की तरह लग रहा है.
लेकिन यह वास्तव में कर सकता है बिल्कुल कहीं भी जाओ.
>> और कहीं ज्यादा नहीं है इस से खतरों.
वास्तव में, यह एक सा है एक स्पर्श की अब, लेकिन एक
सबसे अच्छा लोगों में से मैं कभी भी देखा जो बाद बंद कर दिया गया है
किसी के नेतृत्व में लोगों को है इस कह सकते हैं तो to--,
पर लॉग इन करने के लिए यहाँ क्लिक करें अपने खाते, एक बैंक खाता.
और यह पश्चिम के बैंक था.
>> इसलिए किसी को इस खरीदा.
और यह देखने के लिए थोड़ा आसान है एक मोनो स्थान दिया फ़ॉन्ट में यह तेजी से बढ़ी
एक 30 फुट प्रोजेक्टर पर में.
लेकिन यह छोटा सा फ़ॉन्ट एक में है जब आप प्राप्त कर रहे हैं कि ईमेल,
इस bankofthewest.com की तरह दिखता है, नहीं bankofthevvest.com,
जो किसी को खरीदने पर 10 डॉलर का भुगतान किया था.
और फिर इस के लिए उन्हें नेतृत्व कुछ बुरा वेबसाइट के बराबर.
>> और अगर आप वास्तव में हम क्या कर सकते too-- देखेंगे मैं वास्तविक वेबसाइट पर जाकर अगर this--,
bankofthewest.com, फिर से, पिछली बार से याद
यह अपने वेब पेज है कि अगर और आप यह कैसे काम करता है के रूप में उत्सुक हो
आप निश्चित रूप से लिए जा सकते हैं क्रोम के डेवलपर उपकरण.
और आप सब देख सकते हैं एचटीएमएल अच्छी तरह से वहाँ प्रारूपित.
>> लेकिन मुद्दे पर, आप के करीबी जाने cam--
आप देखना जा सकते this-- डेवलपर स्रोत देखें.
क्यों मैं सिर्फ नकल नहीं है कि सब के सब और फिर मैं
मेरी छोटी एडिट खिड़की में जा सकते हैं यहाँ और अपने खुद के वेब पेज बनाने.
Hello.html में इस बचाओ.
और शायद यह तोड़ने जा रही है यह आमतौर पर यह आसान नहीं है क्योंकि.
लेकिन मैं पर मेरे अपने पृष्ठ को फिर से लोड अब अगर , CS50 उपकरण और हिट पुनः लोड अपना खुद का
ठीक है, कुछ सामान तोड़ दिया.
लेकिन मैं होने के बहुत करीब हूँ अपना खुद का बैंकिंग वेबसाइट, है ना?
इस सब के सब HTML--
>> [हँसी]
>> डेविड जे Malan: --I actually-- और आप नहीं किया
किसी को वहाँ से बाहर है जो जानते हैं वास्तव में भी इन लिंक पर क्लिक करेंगे.
तो जाहिर है, कुछ सामान तोड़ दिया.
लेकिन यह है कि नेतृत्व करने के लिए जा रहा है एक चर्चा में हमें,
अनावश्यक रूप से सही अब, के रूप में क्या सीएसएस, व्यापक स्टाइल शीट्स, कर रहे हैं
और कैसे आप वास्तव में अन्य HTML फ़ाइलों को डाउनलोड
और जेपीईजी फ़ाइलें GIF फ़ाइलें कि वेबसाइट का उपयोग किया जा सकता है.
लेकिन उस के सभी accomplishable है.
लेकिन यह सच करने के लिए नीचे फोड़े ये बहुत सरल heuristics.
>> तो अब सिर्फ एक के माध्यम से हवा में घूमना दें एचटीएमएल के अन्य उदाहरण की जोड़ी
बस आपको एक भाव देने के लिए आप और क्या कर सकते की.
उदाहरण के लिए, इस list.html है.
मैं एक वेब पेज बनाना चाहते थे मान लीजिए ट्रैक्टर में घरों की एक सूची के साथ.
मैं unordered के लिए उल टैग का उपयोग हो सकता है सूची और फिर सूची आइटम बच्चे
और फिर, over-- या सूची से पुनरावृति प्रश्न में घरों rather--.
>> मैं इस खोलो और अगर, चलो यह करते हैं.
के hello.html के लिए नहीं चलते हैं, लेकिन list.html लिए.
लानत है.
मैं यह कैसे तय करते हैं?
यह ठीक है, पहले की तरह ही मुद्दा है?
तो मुझे chmod-- oops-- करते हैं chmod A + list.html के आर.
और अब मैं अपने ब्राउज़र को वापस जाने के लिए अगर और पुनः लोड क्लिक करें, वहाँ यह है.
तो तुम कभी बनाना चाहता है एक बुलेटेड सूची, तुम ऐसा कर सकते हैं.
आप सुपर फैंसी होना और बनाना चाहते हैं एक आदेश दिया सूची, नहीं एक unordered सूची,
, राजभाषा को उन बदलने पृष्ठ को फिर से लोड, और अब ब्राउज़र आप के लिए यह संख्या होगी.
>> हम और क्या कर सकते हैं?
खैर, others-- की एक जोड़ी अगर आप text-- के लंबे पैराग्राफ मिल गया है
उदाहरण के लिए, कुछ This-- की तरह लैटिन पाठ
और आप अलग पैराग्राफ में यह चाहते हैं, खुला पी, पैरा टैग के लिए करीब पी.
और फिर और फिर इसे करते हैं.
और मैं अब इस फाइल को खोलने अगर, paragraphs.html, ठीक है, यह
गुस्सा आ रहा है.
तो अब चलो बस को वापस जाने दिया मेरे शीघ्र, एक + आर आर सितारा chmod .html--
एक अच्छा सा वाइल्ड कार्ड तो बात करो.
यह सब ठीक करना चाहिए मेरे लिए इन समस्याओं.
के फिर से लोड करते हैं.
तीन पैराग्राफ है.
>> और अब आगे चलते हैं और एक दूसरे के ऊपर खुला.
कैसे टेबल के बारे में?
आप तालिका लग रहा है पर ध्यान देंगे एक छोटे से अधिक जटिल.
लेकिन यह एक ही idea-- है खुला टैग, खुला टैग,
खुला, खुला, खुला, करीब टैग, खुला टैग.
और इन के लिए खड़े हो जिसका सीमा मेज, जाहिरा तौर पर है
एक मोटाई होने जा रहा 1-- जो कुछ भी कि means-- तालिका पंक्ति, टेबल
एक सेल का मतलब है जो डेटा,.
और मैं अपने ब्राउज़र को वापस जाने के लिए अगर यहाँ और table.html में जाना है,
तुम कुछ देख सकते हैं इस तरह, घृणित.
लेकिन हम बात करने के लिए मिल जाएगा जहां हम वास्तव में कर सकते हैं
उस से भी बातें सुंदर बनाते हैं.
>> तो मुझे अब के लिए निर्धारित करते हैं.
अधिक टैग की गुच्छों है.
और एचटीएमएल लेने के लिए बहुत बढ़िया है क्योंकि, सच में, तुम सब करने की ज़रूरत है
मौजूदा वेब पृष्ठों पर देखने के लिए है जिसके साथ आप परिचित हैं.
और तुम ओह, कि कैसे है, पसंद कर रहे हैं वे सौंदर्य की दृष्टि से ऐसा किया.
>> या फिर आप किसी भी ऑनलाइन देख सकते हैं एचटीएमएल कैसे काम करता है के रूप में संसाधन,
और आप एक है कि वहाँ देखेंगे अन्य टैग की सारी शब्दावली.
लेकिन साधारण मानसिक मॉडल के साथ अकेले कि आप को खोलने के लगभग किसी भी टैग
वास्तव में, यह बंद हो गया है अपने आप को पढ़ाने के लिए पर्याप्त होता है
एचटीएमएल के बाद समझ में टैग की इन बुनियादी विचारों
गुण और अच्छी तरह से formedness और हम के बारे में बात की है कि,
हम खोल सकता है कि बंद करने के लिए कुछ भी इतना है कि हम एक ब्राउज़र को भ्रमित नहीं है.
तो चलो अब इस लेते हैं एक और अधिक दिलचस्प स्तर
वास्तविक करने के लिए जा रहा द्वारा.
और चलो मेरे मैक के लिए चलते हैं यहाँ, google.com पर.
और अब notice-- चलो यह करते हैं.
मैं करने के लिए जाने के लिए घंटा रहा हूँ सेटिंग्स, खोज सेटिंग.
मैं इस कष्टप्रद तत्काल बंद करना चाहते हैं परिणामों बात जहां इसे तुरंत
अपनी टाइपिंग का जवाब देने के लिए शुरू होता है.
तो इस पुराने स्कूल करते हैं हम वास्तव में क्या हो रहा है देखते हैं.
>> तो मैं बचाने के लिए जा रहा हूँ मेरे यहां गूगल सेटिंग्स.
और अब मैं जा रहा हूँ notice-- बिल्लियों की तरह कुछ के लिए खोज.
और यह अभी भी ऑटो कर रहा है यहाँ पूरा, लेकिन बातों पर आधारित
लोग अतीत में टाइप किया है.
लेकिन ऐसा करने के लिए क्या हो रहा है पर ध्यान दिया.
>> पल में URL में यह वह जगह है, सिर्फ google.com.
और तकनीकी रूप से, यह स्लैश है.
गूगल सिर्फ एक चरित्र बचत है और हमें दिखा रहा है कि नहीं.
वे सिर्फ हमें https दिखा रहे हैं हम कर रहे हैं कि सुपर आश्वस्त होने के लिए
एक सुरक्षित या एन्क्रिप्टेड पेज पर.
>> तो मुझे आगे जाना है और बिल्लियों के लिए खोज करते हैं.
अब यह सच मिला जल्दी से भारी.
इस URL की लंबाई को देखो.
लेकिन यह पता चला है इस सामान की सबसे कि यूआरएल में वास्तव में बहुत बेकार है.
मैं हटाने शुरू करने जा रहा हूँ मुझे समझ नहीं आता बातें.
मैं बिल्लियों देखते हैं.
मैं बिल्लियों को समझते हैं.
बिल्लियों फिर वहाँ क्यों कर रहे हैं मुझे नहीं पता.
मैं सच में नहीं पता यह बकवास है क्या.
इसलिए मैं सिर्फ रखने के लिए जा रहा हूँ पर प्रकाश डाला और सामान को हटाने
कि मुझे समझ नहीं आता, अभी इस मामले में यूआरएल distilling.
>> अब मुझे फिर से दर्ज हो जाओ.
गूगल अभी भी काम करता है ऐसा लगता है.
इसलिए किसी कारण के लिए, वे एक जोड़ रहे हैं उनके यूआरएल द्वारा डिफ़ॉल्ट के लिए सामान की बहुत.
लेकिन यह सख्ती की आवश्यकता नहीं है.
इसलिए इस बारे में अच्छा क्या है?
खैर, मुझे आगे चलते हैं और क्रोम के इंस्पेक्टर खुला.
इसके लिए एक छोटे से माउस शॉर्टकट नहीं है.
>> नेटवर्क टैब पर जाएं.
और अब मुझे फिर से लोड करते हैं इस पृष्ठ पर एक बार फिर.
और मैं शिफ्ट पकड़ रहा हूँ.
एक तरफ, ब्राउज़रों के रूप में कैश या बचाने के लिए करते हैं
बस दक्षता की खातिर जानकारी.
लेकिन आम तौर पर, पकड़े शिफ्ट और सब कुछ के लिए मजबूर करेंगे reloading
उसे शुरू से करने के लिए.
और कहा कि मैं यहाँ क्या करना चाहते है.
>> और इन सभी को नोटिस सिर्फ दिखाई दिया कि पंक्तियाँ.
यह किसी भी वेब में पता चला है कि पेज, सिर्फ एक फाइल हो सकता है
involved-- hello.html-- या वहाँ इस मामले में के रूप में, 52 हो सकता है.
मैं जब यात्रा google.com, जाहिर है, अपने ब्राउज़र
52 अलग HTTP अनुरोध बंद kicks.
ऐसा क्यों?
>> खैर, अंदर क्या है पर देखने के लिए इस वेब पेज के ऊपर शीर्ष की.
केवल पाठ नहीं है, लेकिन वास्तविक छवियों वहाँ
सही करने के लिए बिल्लियों की.
एक रंगीन लोगो छोड़ दिया पर यहाँ नहीं है.
इन माउस के सभी नहीं है एक माइक्रोफोन के लिए और बहुत आगे है.
टुकड़े का एक बहुत निर्माण, वहाँ ब्लॉक, खरोंच टुकड़े, अगर तुम जाएगा,
इस वेब पेज के लिए.
और ब्राउज़र क्या पर कर रही है बहुत पहले फाइल हो रही है, जो
यहाँ इस पंक्ति, यह अनिवार्य है एचटीएमएल शीर्ष पर पुनरावृति
नीचे करने के लिए, के लिए देख रहे हैं, सही करने के लिए छोड़ दिया छवि टैग या अन्य टैग की तरह बातें
कि अन्य फ़ाइलों उल्लेख कर रहे हैं और यह उन्हें देखता है, चला जाता है और उन्हें fetches
HTTP के द्वारा, व्यवहार्य पूरे लिफाफा रूपक,
और फिर में उन्हें प्रदर्शित करता है वेब पेज में उचित स्थान.
>> मैं पर ध्यान केंद्रित लेकिन अगर यहां नोटिस पहली फेंक, खोज बिल्लियों,
वास्तव में यह HTTP 1.1 का उपयोग कर रहा है, उस पर ध्यान दिया.
और दुर्भाग्य से, गूगल अब सही संस्करण 39 में क्रोम
है नीचे dumbing चीजों की तरह और हमें वास्तविक हेडर दिखा नहीं.
लेकिन क्या वास्तव में भेजा गया था एक अनुरोध है स्लेश नहीं लिए, लेकिन / खोज? क्ष = बिल्लियों.
>> अब, क्यों कि महत्वपूर्ण है?
खैर, मैं अनुमान करने जा रहा हूँ इस से कि अगर आप गूगल
इस फार्म, क्यों की जिज्ञासाओं का समर्थन करता है मैं अपने ही खोज को लागू नहीं
CS50 के लिए इंजन, लेकिन अभी सामने अंत में, बस ग्राफिकल यूजर इंटरफेस.
और हम वापस अंत आउटसोर्स करेंगे, वास्तविक खोज गूगल के लिए यह परिणाम है.
>> तो मैं ऐसा कैसे कर सकते हैं?
खैर, मुझे यहाँ पर एडिट में चलते हैं.
और मुझे आगे जाना है और खुला ऊपर, कहते एक नई फाइल करते हैं.
और मैं इस बचाने के लिए जा रहा हूँ अस्थायी रूप से खोज-0.html के रूप में.
और फिर अंत में, हम तेजी से हूँ आगे मैं एक पूर्व तैयार किया.
>> और मैं जा रहा हूँ जल्दी से डॉक्टर प्रकार कोड़ा
HTML खुला ब्रैकेट HTML करीब ब्रैकेट HTML.
तब मैं सिर क्या करने जा रहा हूँ करीब सिर ओपन खिताब CS50
बजाय गूगल खोज की खोज.
यहाँ नीचे मैं जा रहा हूँ शरीर, यहाँ नीचे करीब शरीर.
और अब मैं CS50 खोज की जरूरत है.
और वास्तव में, चलो संवर्द्धित इस निर्माण.
मुझे आगे जाना है और यह बंद करने के लिए जा रहा हूँ वास्तव में मेरे सार्वजनिक निर्देशिका में डाल दिया.
तो मुझे सिर्फ एक पल दे.
मैं जा रहा हूँ खोज-0.html-- अस्थायी search.html कहते हैं.
मैं इसे एक + आर search.html chmod करने जा रहा हूँ.
और अब मैं इसे खोलने के लिए जा रहा हूँ.
सब ठीक है, कि जल्दी थी इसलिए.
लेकिन लक्ष्य को आसानी से था बात करने के लिए हमें प्राप्त करने के लिए
इस पाठ होने के कहा जाता search.html फ़ाइल.
अभी तक को देखने के लिए इतना नहीं.
दरअसल, मैं अपने ब्राउज़र के लिए जाना है, और अगर कि यह सब है, search.html के पास जाओ.
लेकिन क्या आप जानते हैं?
मैं एक छोटे से शौक़ीन हो सकता है.
मैं यह है कि वहाँ एक किताब में पढ़ा एक शीर्षक टैग H1 बुलाया.
और मैं आगे जाने के लिए जा रहा हूँ और कि खुले H1 और करीब H1 का उपयोग करें.
पृष्ठ पुनः लोड करें.
और अब यह बड़ा और बिंदास है नहीं सभी दिलचस्प है कि,
लेकिन कम से कम यह संरचनात्मक रूप अधिक दिलचस्प.
लेकिन अब मुझे एक और टैग परिचय.
एक फार्म टैग वहाँ बाहर बदल जाता है.
और मुझे उस टैग को बंद करते हैं.
और यह वहाँ का पता चला है एक इनपुट टैग कि
प्रकार कहा जाता है एक विशेषता है, जो क्षेत्र के डेटा प्रकार है,
अगर तुम जाएगा.
और प्रकार पाठ का होने जा रहा है.
और इसकी कीमत जा रहा है CS50 खोज हो.
बंद टैग.
और की कोई धारणा होने जा रहा है खोलने और अलग टैग के साथ बंद.
>> मुझे यहाँ पर वापस जाओ और चल रहा पुनः लोड है क्या देखते हैं.
दिलचस्प हो रही.
यह एक पाठ क्षेत्र है ऐसा लगता है.
और वास्तव में, मैं नहीं चाहता था अभी तक वहाँ एक मूल्य डालने के लिए.
मुझे यहाँ वापस जाने के लिए और वास्तव में मिलता है इसे सरल रखने के लिए इस मान से छुटकारा.
इसके बजाय एक मूल्य की, मैं क्या चाहता था इस बात को देने के लिए एक नाम था.
और मैं यह क्या है पता नहीं है इसलिए मुझे लगता है कि वापस आ जाएगा.
>> लेकिन वह नीचे, मैं चाहता हूँ इनपुट प्रकार क्या करना = सबमिट करें.
और यह मान CS50 खोज हो जाएगा.
और हम मैं क्यों देखेंगे इस के लिए मूल्य चले गए.
मैं फिर से लोड करते हैं, मैं अब नहीं है लगता है मेरी खुद की खोज की शुरुआत
इंजन, सुपर घृणित, स्पष्ट है, हालांकि, यह है
से नहीं एक दूर फेंक क्या गूगल के डिफ़ॉल्ट पेज की तरह लग रहा है.
>> मैं अब यहाँ जाओ, मैं में टाइप कर सकते हैं बिल्लियों और उम्मीद है कि खोज पर क्लिक करें.
लेकिन मैं काफी, अभी तक नहीं कर रहा हूँ मैं लागू नहीं किया है, क्योंकि
जाहिर है, एक डेटाबेस.
मैं क्रॉल नहीं किया है खोज परिणामों के लिए वेब.
इसलिए मैं गूगल के लिए कि आउटसोर्स करने की जरूरत है.
तो कैसे मैं यह क्या करते हो?
>> सब मैं की खैर, सबसे पहले जोड़ने के लिए और कार्रवाई करने की जरूरत है
मेरी फार्म टैग करने के लिए विशेषता है कि http://www.google.com/search है.
और मुझे पता है कि केवल होने से बारीकी से देखने से inferred
उनके यूआरएल पर.
और अब एक अनुमान ले.
क्या करना चाहिए इस पाठ क्षेत्र शायद हम आए थे, जहां पर आधारित, कहा जा
पहले से?
>> दर्शकों: क्यू.
>> डेविड जे Malan: क्यू.
और हम वास्तव में सवाल की जरूरत नहीं है यह पता चला है, लेकिन क्यू वास्तव में यह है निशान,
क्वेरी शायद द्वारा लिए क्यू डिफ़ॉल्ट, कि बस, क्योंकि
क्या लैरी और सेर्गेई साल पहले के साथ आया था.
तो अब मुझे इस पेज को फिर से लोड करते हैं.
यह सब है कि अलग नहीं लगती.
लेकिन अब देखो क्या होता है.
>> मैं बिल्लियों और क्लिक में टाइप करें खोज और चलते CS50,
मैं whisked पाने नोटिस दूर वास्तविक गूगल को.
अब, गूगल के एक छोटे से किया जा रहा है वे कर रहे हैं कि में कष्टप्रद
एक अतिरिक्त पैरामीटर जोड़कर, आप यूआरएल के लिए, अगर.
यह सब हो रहा है स्वचालित रूप से Google पक्ष पर.
>> महत्वपूर्ण हिस्सा है कि मैं लगता है यहाँ इस अनुरोध को उत्पन्न किया है.
और वास्तव में, कि क्या होता है.
आप HTML है जब कि यह इस तरह दिखता है
वेब डेवलपर्स अंकन की तरह है कह के लिए, आगे जाकर एक फार्म बनाने
यह प्रस्तुत है जब कि, यह इस यूआरएल पर जाने के लिए जा रहा है.
और यूआरएल प्रदान की गई है जब क्यू जैसी चीजों के लिए मूल्यों,
सिर्फ इस URL पर मत जाओ.
दरअसल, सवाल करने के लिए जाना मार्क और फिर क्यू = बिल्लियों.
पैरामीटर जोड़ें, उस तरह एचटीटीपी पैरामीटर.
>> और बस, सुपर सटीक होना क्या here-- inferred किया जा रहा है
लेकिन मैं और अधिक explicit-- है हो जाएगा कि मैं का उपयोग करना चाहते विधि
बजाय तरह कुछ की, है मिल हम अंत में देखेंगे जो पद,.
संक्षेप में, बस समझ से तो एचटीएमएल और कुछ काफी सरल टैग का उपयोग कर,
अब हम बनाने के लिए शुरू कर सकते हैं हमारे अपने सामने अंत उपयोगकर्ता
एक खोज के साथ इंटरफेस इसके पीछे इंजन.
>> लेकिन यह निश्चित रूप से, बहुत भयंकर है.
तो मुझे वास्तव में खोल दें एक थोड़ा बेहतर संस्करण.
यह मैं में तैयार एक है कि कुछ टिप्पणी की है अग्रिम.
लेकिन आपको लगता है कि मैं देख रहा हूँ यह बहुत सुंदर निर्मित.
तो यह पहले से ही ऑनलाइन उपलब्ध है.
और मैं preemptively हुआ बस इसे सरल रखने के लिए https के लिए जाना.
>> और अब का एक खोल दें इस के अगले चलना.
संस्करण 1 के बजाय 0 है.
क्या रूप में थोड़ा तुम पर बाहर कूदता इस उदाहरण में अलग है?
>> दर्शक: [अश्राव्य].
>> हाँ, यह पाठ संरेखित केंद्र है.
यह यहां थोड़ा अजीब है.
लेकिन यह वास्तव में नया है.
और शायद होने जा रहा है लगता है क्या.
मैं अब अपने ब्राउज़र में जाओ और, खोज-1.html जाएँ
यह लगभग एक ही बात है.
लेकिन यह करने के लिए एक कदम और करीब है अधिक सुंदर एक छोटे से किया जा रहा है.
यह अभी भी बदसूरत है, लेकिन उस में सुंदर कम से कम अब सब कुछ केन्द्रित है.
>> तो यह है कि मैं क्या कर रहा हूँ कि पता चला है एक और भाषा पूरी तरह कहा जाता है
सीएसएस, व्यापक स्टाइल शीट्स.
और सीएसएस, सच में, प्रकार है की, मेरी निजी राय में,
एक atrociously बनाया गया भाषा.
यह याद रखना बहुत गुस्सा आ रहा है सभी विभिन्न विवरण.
लेकिन यह stylizes क्या है पूरी दुनिया भर में वेब आज.
मैं किसी को नाराज.
ठीक है.
तो चलो यहाँ वापस जा सकते हैं और देखते हैं कैसे हम वास्तव में यह प्रयोग कर रहे हैं.
और यह कम से कम यह पता चला है, वास्तव में एक बहुत सरल भाषा.
यह सिर्फ महत्वपूर्ण मूल्य जोड़े, गुण है और मूल्यों, गुण और मूल्यों.
दरअसल, यहां एक है ऐसी संपत्ति और मूल्य.
>> बस शैली का उपयोग करके मेरे शरीर टैग पर गुण
और यह एक का एक मूल्य दे रही है शब्द कोलोन और एक और शब्द,
या एक संपत्ति और एक मूल्य, मैं सौंदर्यशास्त्र को प्रभावित कर सकते हैं
वेब पेज, नहीं की जरूरी अभी तक संरचना,
लेकिन इसके बारे में सौंदर्यशास्त्र.
और बस के चारों ओर Googling द्वारा, मैं एहसास कि सीएसएस, व्यापक स्टाइल शीट्स,
कहा जाता है एक संपत्ति का समर्थन करता है जिसका मूल्य पाठ के अनुरूप कर सकते हैं
उदाहरण के लिए, सही या केन्द्र नहीं छोड़ा जा सकता.
>> तो अब मैं फिर से लोड जब इस पन्ने, मैं क्या मिला
एक केंद्रित पेज था, लेकिन अभी भी बहुत बदसूरत.
आगे जाने के लिए और खोल दें खोज के 2 संस्करण ऊपर.
और अब मैं एक छोटे से अधिक किया है नोटिस.
सिर के अंदर यहां कि ऊपर नोटिस टैग, शीर्षक से अधिक हो सकता है.
वास्तव में, एक शैली टैग है.
यह सिर्फ एक हो जाता है और ये कहाँ है कभी कभी थोड़ा गन्दा देखकर सीएसएस.
>> मैं कुछ है लगता है कि सूचना कि संरचनात्मक रूप बहुत अलग दिखता है.
लेकिन यहाँ का नाम है मैं चाहता हूँ टैग शैली के लिए.
यहाँ हमारे पुराने दोस्तों घुंघराले हैं ब्रेसिज़ और बंद घुंघराले ब्रेस.
और फिर यहाँ यह है कि संपत्ति और इसकी कीमत.
>> मैं इस फाइल लोड, search2.html, अंतिम परिणाम समान है.
लेकिन यह बेहतर डिजाइन की ओर एक कदम है.
इस सीएसएस बाहर फैक्टरिंग से, मैं मेरे HTML के साथ यह मिश्रित नहीं.
हम देखेंगे के रूप में और वास्तव में, मैं कर सकता इन गुणों और मूल्यों को पुन: उपयोग.
मैं के गुच्छों बनाने के लिए चाहते थे अपने वेब पेज के कुछ हिस्सों केंद्रित,
मैं शैली = text-align टाइप करने की जरूरत नहीं है सभी जगह केंद्र.
मैं एक ही स्थान में रख सकते हैं शायद, शीर्ष पर पसंद है.
>> लेकिन फिर भी यह सबसे अच्छा डिजाइन नहीं है.
वास्तव में, चीजों में से एक तुम सीख जाओगे आप के साथ अधिक से अधिक समय बिताने के रूप में
वेब प्रोग्रामिंग कि अधिक आप यह कर सकते है बाहर बातें और कारक बातें modularize
ज फ़ाइलों की तरह, हमें कारक सामान बाहर जाने हमें कारक बातें बाहर जाने helpers.c पसंद
कुछ psets पहले.
इसी तरह, हम कर सकते हैं इस लक्ष्य को हासिल करना चाहते हैं.
>> इसलिए संस्करण में नोटिस search.html की तीन मैं
सिर के ऊपर साफ पेज और बस डाल
इस में, एक कड़ी टैग, जो नाम के विपरीत,
आप एक हाइपरलिंक देना नहीं है.
यह के माध्यम से एक और फाइल करने के लिए लिंक जिसका मूल्य इस मामले में एक href,
खोज-3.css है
इसलिए मुझे लगता है कि हम जल्दी जा रहे हैं एहसास.
लेकिन मैं क्या कर रहा हूँ सभी प्रकार है के आसपास बातें चलती.
मुझे खुला खोज-3.css करते हैं.
यह करने के लिए वास्तव में, कुछ भी नहीं है.
मैं सिर्फ नकल और एक नया में चिपकाया हम बाहर सामान सकारात्मक असर बहुत पसंद है, फाइल
पहले अन्य फाइलों में.
और result-- पूरी तरह से underwhelming--
बिल्कुल वैसा ही होने जा रहा है.
लेकिन हम toward-- जा रहे हैं नहीं, ऐसा नहीं है.
ओह, मुझे पता है क्यों.
>> तो यह एक बग प्रतीत हो रहा है.
और यह कुछ अर्थों में है.
लेकिन मुझे अपने नेटवर्क टैब खोल दें.
मुझे पृष्ठ को फिर से लोड करते हैं.
आह, क्यों सीएसएस नहीं लागू किया जा रहा है?
खैर, सीएसएस फ़ाइल, इसी प्रकार है पठनीय दुनिया हो, तो बात करने के लिए.
और यह भी वर्तमान में मना किया है.
तो मुझे एक chmod एक + R करते हैं स्टार डॉट CSS-- whoops--
हम डॉट सीएसएस बस हो सीएसएस फ़ाइलों के लिए फ़ाइल एक्सटेंशन.
अब मेरे पास वापस जाने दिया मेरे ब्राउज़र और पुनः लोड करें.
ठीक है, एक छोटे से बेहतर.
>> अब मुझे एक अंतिम बात करते हैं.
खोज-4.html में.
मुझे लगता है मैं बस सोचा था कि एक संस्करण है जिस तरह से अधिक है, हालांकि जिस तरह से कूलर था
जटिल.
के पहले परिणाम में देखें.
हमें और अधिक कमरे देने के लिए इस बंद करें.
यह -4 खोज दर्ज करने के लिए परिवर्तित करें.
>> और अब चीजों की एक गुच्छा टूट रहे हैं.
मैं वापस जाने के लिए जा रहा हूँ यहाँ मेरी निर्देशिका में.
और अब मैं सिर्फ क्या करने जा रहा हूँ एक file-- पर एक + आर के chmod
मैं यह कहा जाता exists-- क्योंकि मुझे पता है एक छवि है जो logo.gif,.
और अब पुनः लोड.
और मैं हूँ अब तो wow-- बहुत करीब है, स्पष्ट रूप से,
गूगल के 1999 के संस्करण की तरह है, और करने के लिए सच कहूँ तो, गूगल के 2014 संस्करण,
सही?
>> तो यह अब, अपनी वेबसाइट के लिए जा रहा है अंत में, मैं बिल्लियों के लिए खोज.
और वास्तव में यह है.
लेकिन मैं अलग क्या किया इस संस्करण 4 में?
इसलिए हम इसे यहाँ पर बहुत ज्यादा ध्यान केन्द्रित नहीं किया जाएगा.
आप समस्या में यह देखेंगे अंततः सात निर्धारित किया है.
लेकिन मैं कुछ बातें किया नोटिस.
>> मैं एक div पेश विभाजन है जो टैग,
एक पैरा टैग करने के लिए भावना में समान.
लेकिन एक प्रभाग यहाँ है, बस की तरह है एक आयताकार अदृश्य क्षेत्र
स्क्रीन की.
चलो यह एक अद्वितीय दे पहचानकर्ता, एक पाद, बस
इसलिए हम इस बारे में बात कर सकते हैं यह कहीं हमारे एचटीएमएल में.
यहाँ पेज का एक और div है जिसका आईडी सामग्री होने जा रहा है.
यह पेज की सामग्री है.
और यहाँ पृष्ठ का शीर्षक है.
>> दूसरे शब्दों में, मैं अनिवार्य रूप से एचटीएमएल में मानसिक रूप से कर रहा हूँ
इस वेब पेज के रूप में देखने तीन घटकों, एक हैडर
इस अदृश्य आयत के साथ यहाँ, बीच में सामग्री, और उसके बाद
नीचे नीचे पाद लेख, और भी हालांकि हम उन चीजों को नहीं देखते हैं.
मैं मेरे सिर में करना चाहते हैं क्योंकि पेज यहाँ, या एक सीएसएस फ़ाइल में,
मैं इस वाक्य रचना का उपयोग कर सकते हैं.
>> हैडर एक टैग नहीं है.
यह बदल जाता है तो यह एक आईडी है #header कर रही है कि बाहर,
मैं अब एक या एक से अधिक आवेदन कर सकते हैं शीर्षक के गुण.
मैं एक ही सामग्री कर सकते हैं, यहाँ सामग्री के लिए ही.
>> उदाहरण के लिए, पाद लेख में, नोटिस तो मैं जोड़ रहा हूँ इन गुणों के सभी.
और मुझे लगता है वे पढ़ने से अभी मौजूद पता सीएसएस के लिए दस्तावेज पर.
फ़ॉन्ट आकार smaller-- होने जा रहा है इतना कुछ रिश्तेदार फ़ॉन्ट आकार.
वजन बोल्ड होने जा रहा है.
कितने पिक्सल Margin-- आसपास it-- 20 पिक्सल है.
और यह केन्द्रित किया जा रहा है.
>> लेकिन अभी, पेज इस तरह दिखता है.
मैं के साथ खुश नहीं हूँ सही वहाँ मेरी नकल,
मैं रंग लाल की तरह कुछ कर सकता है.
और फिर मैं इस बचा सकता है, पुनः लोड, और अब मैं पाद शैली की है.
तो यह सिर्फ सत्ता पर इशारा है आप एक वेब पेज में क्या कर सकते हैं
बातों के आसपास बदलने के लिए.
>> और इस से भी कूलर, अगर आप चाहते हैं वास्तविक वेबसाइटों के साथ चारों ओर ढकेलना,
आप उन्हें स्थायी रूप से बदल नहीं सकते.
लेकिन मैं खोल अगर क्रोम के इंस्पेक्टर फिर
और मैं बाएं हाथ की ओर करने के लिए नहीं जाना यहां फेसबुक का HTML से पता चलता है, जो
लेकिन सही पर पता चलता है हाथ की ओर अपने सीएसएस के सभी,
आप कर सकते हैं या तो और मक्खी पर चीजें बदल जाते हैं.
तो मुझे आगे जाना है और यह करते हैं.
>> मुझे आगे और नियंत्रण चलें यहाँ इस यादृच्छिक शब्द पर क्लिक करें,
हस्ताक्षर, और तत्व का निरीक्षण करें.
क्रोम बहुत आसानी से करने के लिए कूदता फेसबुक का उपयोग कर रहा है कि H1 टैग.
और यहाँ फेसबुक नोटिस तरह की lazily है
कठिन यहाँ एक संपत्ति के रूप में फ़ॉन्ट आकार कोडित.
>> तो शांत बात यह है मैं वास्तव में यहाँ जाना है कि
और ओह, फेसबुक, मुझे लगता है कि पसंद नहीं है, कहना 64 पिक्सल, अब हम फेसबुक को बदल सकते हैं.
बेशक, हम केवल यह बदल रहे हैं मेरे लिए व्यक्तिगत रूप से इस समय.
लेकिन यह सिर्फ एक और है हमारे उपकरण किट में उपकरण
कि हमें tweak करने के लिए अनुमति देने के लिए जा रहा है और यह पता लगाने के लिए और भी निदान
हमारे अपने वेब पृष्ठों में मुद्दों.
और हम इसी तरह के ऊपर जा सकते हैं यहां, एक ही बात जो है.
आप वास्तव में कल्पना करना चाहते हैं, तो मैं अब आप वास्तव में पेज बदलना कर सकते हैं, इसका मतलब
और पागल बातें करते हैं.
>> तो क्यों यह सब उपयोगी है?
खैर, अंत में, हम कर रहे हैं होना चाहता हूँ के लिए जा रहा
वेब पृष्ठों को बनाने के लिए सक्षम है कि हमारी अपनी पीठ सिरों से प्रेरित हैं,
नहीं द्वारा बस गूगल और वहाँ वापस अंत आउटसोर्सिंग.
हम वास्तव में चाहते हैं मूल्य, उदाहरण के लिए,
हमारी खोज इंजन की कार्रवाई की किसी और के लिए नहीं जाने के लिए विशेषता,
लेकिन search.php तरह से कुछ के लिए, search.php हमारे खुद के सर्वर पर है जहां,
नहीं किसी और का है.
>> और इसलिए हम वास्तव में, वहाँ पाने के लिए एक नई भाषा शुरू करने की जरूरत है.
तो हम पहले से ही एक नया पर देखा है वास्तव में यहां भाषा, या दो, एचटीएमएल
और सीएसएस.
लेकिन वे वास्तव में बस रहे हैं संरचनात्मक और सौंदर्य भाषा.
वे प्रोग्रामिंग नहीं रहे भाषा से प्रति.
और कहा कि औपचारिक बारे में ज्यादा है समय हम उन पर खर्च करेंगे के रूप में.
अब हम शुरू करेंगे क्योंकि PHP के लिए संक्रमण के लिए.
>> तो PHP के एक वास्तविक है प्रोग्रामिंग भाषा.
यह एक पटकथा भाषा है यह है कि भावना में
हल्के वजन होने का मतलब सी की तरह कुछ से
और यह एक व्याख्या की भाषा है, जो इसे संकलित नहीं है इसका मतलब है.
संक्षेप में तो, इसका मतलब क्या था हम सी की तरह एक भाषा का इस्तेमाल किया जब
और हम यह संकलन करने के लिए था?
यह करने के लिए क्या मतलब है सी स्रोत कोड संकलन?
दर्शक: [अश्राव्य].
डेविड जे Malan: फिर से कहो?
दर्शक: [अश्राव्य].
डेविड जे Malan: बिल्कुल सही.
यह बाइनरी में बदल जाता है.
यह शून्य और लोगों में बदल जाता है वास्तविक अंग्रेजी की तरह स्रोत कोड से.
और फिर हम वास्तव में कर सकते हैं उन zeroes और लोगों को चलाने
के माध्यम से उन्हें पारित करके डबल क्लिक एक आइकन से सीपीयू
या किसी आदेश चल रहा है.
>> PHP और पायथन और रूबी पर्ल और जावास्क्रिप्ट और
और अन्य के गुच्छों भाषा व्याख्या कर रहे हैं
कहने के लिए है जो भाषा, आप उन्हें संकलन नहीं है.
बल्कि, आप के लिए निवेश के रूप में उन्हें खिलाने एक कार्यक्रम के लिए एक दुभाषिया बुलाया.
और वह दुभाषिया, जो किसी और ने लिखा है,
, नीचे करने के लिए अपने स्रोत कोड शीर्ष पढ़ता सही और बस की व्याख्या करने के लिए छोड़ दिया
उन पंक्तियों और आप क्या कहते हैं करता है.
>> तुम मुठभेड़ तो अगर एक प्रिंट कहते हैं कि लाइन,
यह जरूरी प्रिंट परिवर्तित नहीं करता इसी शून्य और लोगों के लिए.
यह बस की तरह इस दुभाषिया है कहते हैं कि एक बड़ा अगर हालत,
प्रोग्रामर के निर्देश है अगर प्रिंट, तो निम्नलिखित करें.
तो यह सिर्फ यह व्याख्या तर्क की तरह से
तुम्हें क्या करना है यह क्या कह रहे हैं के माध्यम से.
>> और PHP इन भाषाओं में से एक है.
और PHP साल पहले तैयार किया गया था ठीक वेब प्रोग्रामिंग के लिए.
और यह शुरू में एक था बहुत मैला गंदा भाषा.
और वास्तव में, एक बहुत बड़ा नहीं है वहाँ से बाहर बुरा PHP कोड की राशि.
लेकिन भाषा ही पिछले कुछ वर्षों में परिपक्व हो गया है,
इतना कि अब यह तो वास्तव में एक अद्भुत अगले कदम
pedagogically यह है क्योंकि सी से सब कुछ करने के लिए परिचित इतना रफ़ू
तुम सिर्फ पिछले कुछ हफ्तों में देखा है.
>> हम देखेंगे एक प्रारंभिक फर्क कोई मुख्य समारोह अब वहाँ है.
आप लेखन कोड शुरू करते हैं, यह सिर्फ है जा कोई बात नहीं क्या निष्पादित करने के लिए,
हम एक पल में देखेंगे के रूप में.
इस बीच, यहाँ है क्या एक चर PHP में की तरह दिखता है.
यह थोड़ा अलग है लेकिन केवल मुश्किल से.
>> PHP में, मजबूत टाइपिंग नहीं है.
सप्ताह टाइपिंग नहीं है, जो अभी वहाँ का मतलब
तार की तरह डेटा प्रकार हैं और नंबर और अन्य चीजें.
लेकिन आप निर्दिष्ट परेशान नहीं करते वे अब और क्या कर रहे हैं.
PHP यदि आप के लिए यह बाहर के आंकड़े.
डॉलर के हस्ताक्षर सिर्फ एक निर्णय है PHP के लोगों को साल कर दिया कि
पहले ऐसी है कि PHP में किसी भी चर सिर्फ एक डॉलर के हस्ताक्षर के साथ शुरू होता है.
ऐसा लगता है कि वास्तव में एक तरह से उपयोगी है यह एक छोटे से अधिक तुम पर बाहर कूदता है.
>> लेकिन उसके बाद, यह PHP में एक शर्त है.
सी बनाम अलग क्या है?
कुछ भी नहीं question-- छल, जो वास्तव में बहुत अच्छी है.
PHP-- ही में बूलियन अभिव्यक्ति.
साथ और बनाम बूलियन अभिव्यक्ति या, स्विच, छोरों, छोरों, ठीक loops--,
यह एक अलग है.
>> एक वहाँ बाहर तो यह बदल जाता है PHP में अन्य सुविधाओं की जोड़ी.
उनमें से एक, वास्तव में यह है जो अद्भुत सुविधाजनक है.
$ संख्या यदि आपने कि एक सरणी है एक कार्यक्रम में पहले से घोषित,
आप प्रत्येक निर्माण के लिए इस फैंसी है कि कि सब करने के बजाय
कष्टप्रद मैं मैं है, 0 के बराबर होती है इस से भी कम, [? I ++?],
संख्या, जहां प्रत्येक के रूप में प्रत्येक संख्या के लिए उन डॉलर के हस्ताक्षर मूल्यों की बस है
एक चर, और बाद आप के रूप में मैं के बारे में सोच सकते हैं
क्या आप चाहते हैं कुछ भी कह सकते हैं.
मैं संख्या कहा जाता है.
इस पर पुनरावृति करने जा रहा है सरणी संख्या कहा जाता है.
और प्रत्येक यात्रा पर, यह है स्वचालित रूप से अपडेट करने के लिए जा रहा
आप डॉलर साइन संख्या के लिए चर इतना है कि आप लगातार
आप चाहते हैं चर का उपयोग किया है किसी भी वर्ग ब्रैकेट करने के लिए बिना
एक सरणी में अंकन या अनुक्रमण.
>> इसके अलावा, हम भी तरह बातें है लगभग एक ही देखो जो सरणियों,
यह बहुत आम है, सिवाय के रूप में हम करेंगे PHP और जावास्क्रिप्ट में दोनों, देखना
एक सरणी को प्रारंभ से पूर्व की वर्ग कोष्ठक का उपयोग.
सी घुंघराले ब्रेसिज़ का उपयोग करता है.
तो यह है, भले ही थोड़ा अलग है हम वास्तव में ज्यादा है कि चाल का उपयोग नहीं किया.
>> लेकिन इससे भी ज्यादा शक्तिशाली, पीएचपी, साहचर्य सरणियों है
जो एक अच्छा तरीका है हैश तालिकाओं कहने का.
वास्तव में, यदि आप एक हैश की घोषणा करना चाहते हैं तालिका PHP में, C-- में विपरीत कितने
कोड की लाइनों यह करने के लिए ले गए थे वास्तव में सी में एक हैश तालिका लागू?
या कोड यह कितने लाइनों है की सी में एक हैश तालिका लागू करने के लिए ले रही है?
तो यह ठीक है, शायद एक बहुत कुछ है?
यह हो सकता है, 100 या 200 कुछ दर्जन है.
यह nontrivial है.
या यह रूप में हो सकता है, के बारे में है आप जल्द ही, nontrivial देखेंगे
एक हैश तालिका लागू करने के लिए [अश्राव्य] और भी एक कोशिश.
PHP-- में और स्पष्ट लेकिन, मैं शायद आपको यह बता नहीं चाहिए
Monday-- तक PHP में, अगर तुमने क्या किया, एक मेज चाहते हैं.
यह एक हैश तो table-- है कोड की एक पंक्ति के साथ.
और
>> भाषा का एक बहुत करते हैं.
Pset पाँच साथ मज़े.
तो भाषा की एक बहुत यह करते हैं.
वे तुम्हें इन चीजें दे अन्य लोगों, अन्य प्रोग्रामर कि,
इतना है कि आप के लिए बनाया है आप अपने कंधों पर खड़े हो सकते हैं
और सुपर हैं कि विचारों का उपयोग शुरू सम्मोहक, हैश तालिकाओं और पेड़ की तरह
और कोशिश करता है.
लेकिन आप जरूरी करने के लिए नहीं है उन चीजों को अपने आप को लागू करने.
>> और इसलिए अंत में, क्या हम के लिए PHP का उपयोग करने के लिए जा रहे हैं
संभावित कार्यक्रमों लिख रही है तथाकथित आदेश पंक्ति की.
हम हर कार्यक्रम विश्राम सकता है हम इस प्रकार अब तक इस सत्र में लिखा है
शायद छोड़कर एसपीएल का उपयोग करता है जो ब्रेकआउट, जो पल में सी के लिए विशिष्ट है.
लेकिन हर दूसरे समस्या सेट, निश्चित रूप से मारियो और सीज़र
और Vigenere और [? , हम? क्रैक] और आगे
सकता है PHP में फिर से लागू करने, और शायद अधिक आसानी से एक छोटे से.
>> लेकिन हम अंत में क्या जा रहे हैं वेब प्रोग्रामिंग है के लिए PHP का उपयोग करने के लिए.
और हम अगले पेश करने जा रहे हैं सप्ताह एक मानसिक मॉडल कहा जाता है, एक प्रतिमान
MVC, मॉडल दृश्य नियंत्रक, जो आप प्रोग्रामिंग किया है
अजगर में पहले या रूबी या कहीं और, आप
इस टीम के साथ के बारे में पता हो सकता है रेल और Django और पसंद है.
लेकिन आप के लिए नए हैं अगर यह भी, आप देखेंगे
यह वास्तव में एक बहुत ही स्वाभाविक है कि factorization का विस्तार
और डिजाइन की तरह कोड की हम है कि
सी में कर दिया गया अब हम जा रहे हैं PHP के लिए उन सबक के कुछ लागू
ताकि अंत में, हम कर रहे हैं हमारी अपनी वेबसाइटों को लागू करने.
और आप की तरह कर रहे हैं मंत्रमुग्ध या हैरान
हम क्या करने जा रहे हैं कि इतनी जल्दी सब,
लगभग हर एहसास है कि सेमेस्टर, लगभग 90%
उन सहित छात्रों CS50, की जो, पहले क्रमादेशित कभी नहीं किया है
अंतिम परियोजनाओं कर रही है कि अंत वेब प्रोग्रामिंग पर आधारित हैं.
और तो आप रिटर्न देखेंगे कि आने के लिए सप्ताह में अधिक हैं.
तो हम सोमवार को तो आप देखेंगे.
>> अध्यक्ष 1: और अब, दीप दावेन Farnham द्वारा विचार.
हैश तालिकाओं.
>> [हँसी]