डौग लॉयड: तो हम खर्च about-- मेरी गणित सही है, और मुझे लगता है मुझे लगता है कि back-- देख लगता है हम बात कर के बारे में 35 वीडियो बिताया शायद सी के विभिन्न पहलुओं के बारे में एक छोटे से अधिक है, शायद एक छोटे से कम। और हम कवर नहीं किया सी में सब कुछ है, लेकिन हम का एक बड़ा हिस्सा कवर भाषा, यह के विशाल बहुमत, निश्चित रूप से आम उपयोग के लिए। अब हम बात करने जा रहे हैं के बारे में एक और भाषा, एचटीएमएल। और हम कवर करने के लिए जा रहे हैं यह सिर्फ एक वीडियो में। लेकिन वह ठीक होने जा रहा है। यही कारण है कि वास्तव में बनने जा रही है कुछ आप के लिए इस्तेमाल करने के लिए जा रहे हैं। अब है कि आप एक भाषा की बुनियादी बातों में, यह वास्तव में बहुत आसान है दूसरों सीखने शुरू करने के लिए। इसलिए हम शुरू करने के लिए जा रहे हैं एक छोटे से वापस करने के लिए कदम और बुनियादी पर चमक इन भाषाओं के बीच मतभेद और एक तरह से यह करने के लिए छोड़ दें। वास्तव में महान की एक बहुत कुछ है इंटरनेट, पर संसाधनों जो हम आप निर्देशन की शुरुआत करने जा रहे हैं इंटरनेट है, क्योंकि की ओर जानकारी का एक विशाल भंडार। और तो यह हूँ तुम्हें पसंद नहीं है जरूरी होना बाहर खोने जानकारी नहीं होने से एक वीडियो में शामिल किया गया। आप अभी भी प्राप्त करने में सक्षम हो जाएगा सब कुछ आप की जरूरत है और उपयोग आप पहले से ही ज्ञान सी समझ से ऊपर का निर्माण इन के लिए सीखने की अवस्था बनाने के लिए वास्तव में अन्य भाषाओं एक बहुत चापलूसी। मे वादा करता हु। लेकिन एक भाषा के बारे में बात करते हैं कि हर वेब के लिए वास्तव में मौलिक है HTML है जो पृष्ठ। एचटीएमएल हाइपर टेक्स्ट मार्कअप भाषा है। एचटीएमएल एक भाषा है, लेकिन यह है नहीं एक प्रोग्रामिंग भाषा। एचटीएमएल चर नहीं है। यह तर्क नहीं है या कार्यों या ऐसा कुछ। हम किसी भी ऐसा नहीं कर सकते एचटीएमएल में से प्रति प्रोग्रामिंग। कभी-कभी आप सुनेंगे लोगों को खुद का वर्णन एचटीएमएल प्रोग्रामर, जो के रूप में पूरी तरह से सही नहीं है। हम HTML कार्यक्रमों नहीं लिख सकते हैं। एचटीएमएल सिर्फ पाठ को चिह्नित करने के लिए प्रयोग किया जाता है। यह एक मार्कअप भाषा कहा जाता है। और यह इस markup-- does-- क्या हम एचटीएमएल और इन tags-- में टैग का उपयोग इस शब्दार्थ markup-- एक पेज की संरचना को परिभाषित करता है और सादे पाठ का कारण बनता है कि टैग व्याख्या की जानी बीच मौजूद है अलग अलग तरीकों से ब्राउज़रों द्वारा। और शायद यह समझाने के लिए सबसे अच्छा है एक उदाहरण के इस मार्ग से। यहाँ एक बहुत ही सरल HTML पेज नहीं है, एक HTML कार्यक्रम, फिर से, एक HTML पृष्ठ। और हम इसे एक है पता HTML पृष्ठ हम है क्योंकि एचटीएमएल टैग के साथ सब कुछ घिरा। तो यह एक एचटीएमएल टैग की तरह दिखता है। यह कोण कोष्ठक के बीच है। और हम शीर्ष पर नोटिस एचटीएमएल और बहुत नीचे, हम क्या किया है के बाद जाहिरा तौर पर अन्य HTML का एक बहुत, हम कोण ब्रैकेट स्लेश HTML है। तो उस तरह की सीमा है एचटीएमएल क्या है और क्या नहीं है के बीच। और हां, पारंपरिक, बस आप अपनी सी कार्यक्रमों के सभी लिखा था डॉट सी एक्सटेंशन के साथ, अपने HTML फ़ाइलों के सभी डॉट एचटीएमएल एक्सटेंशन के साथ खत्म हो जाएगा। लेकिन यहाँ और अधिक चल रहा है वहाँ। हम सिर्फ ये टैग की जरूरत नहीं है। हम जाहिरा तौर पर इस राशि बात यह है कि एक सिर टैग बुलाया। खैर, ठीक है, यह क्या है? वैसे शायद यह करने के लिए सबसे अच्छा है एक शरीर के माध्यम से भेद, शरीर वेब पेज की सामग्री को जा रहा है। इसलिए हो सकता है सिर टैग सामान को परिभाषित करता है कि, ब्राउज़र विंडो में उचित नहीं है लेकिन करने के लिए किसी भी तरह से महत्वपूर्ण है हमारे वेब पेज को सही ढंग से गाया जा रहा है। उदाहरण के लिए, अंदर की सिर टैग हम शीर्षक टैग नहीं है। तो शीर्षक हैलो दुनिया किया जा रहा है, कि वास्तव में क्या होने जा रहा है क्रोम में टैब में पता चलता है या सफारी या Firefox-- में जो कुछ भी आप ब्राउज़र है कि prefer-- क्या शीर्षक में दिखाने के लिए जा रहा है। और टैब से पहले यह दिखा सकते हैं अपने पूरे ब्राउज़र विंडो में और आप केवल एक पृष्ठ हो सकता है एक समय में एक ब्राउज़र विंडो में खुलेगा। तो यह है कि होने जा रहा है टैब में मेरा पेज अप का खिताब या ब्राउज़र विंडो बार, हैलो दुनिया। और तो सामग्री मेरे वेब पेज हैलो, दुनिया हो जाएगा। तो चलो क्या कुछ पर एक नजर डालते हैं इस तरह बात की तरह लग सकता है। यह एक बहुत ही सरल HTML पृष्ठ है। इसलिए मैं अपने CS50 आईडीई में यहाँ हूँ और मैं एक छोटा सा में तेजी से बढ़ी है। और मैं सिर्फ करने के लिए जा रहा हूँ हैलो डॉट एचटीएमएल ऊपर खुला और यह बहुत ज्यादा है कि आप को दिखाने हम पहले देखा था कि पेज की सामग्री। मेरे सरल HTML, सिर टैग, शीर्षक टैग, इतने पर शरीर, और। मैं साफ करने के लिए इंडेंट गए हैं। और मैं ऐसा कर सकते हैं तो क्या मेरी आईडीई बस पृष्ठ पूर्वावलोकन है। और वहाँ हम चले। मेरा पेज की सामग्री, दुनिया है हैलो, और मैं कुछ भी नहीं दिख रहा है वहाँ सिर टैग से में। यह शरीर के सिर्फ सामग्री है। विश्व, नमस्कार। और फिर शरीर बस कहा, दुनिया, नमस्कार। अन्य हिस्सा गायब है। तो यह है कि वास्तव में यह सब है। यह एक बहुत ही सरल बुनियादी HTML पृष्ठ है। अब मैं अपने एचटीएमएल इंडेंट किया है वास्तव में अच्छा है और संगठित होना लेकिन मैं वास्तव में करने के लिए नहीं है। मुझे लगता है यह बहुत बदसूरत लग कर सकता। और यह अभी भी काम करेगा। इस सटीक एक ही वेब पेज होगा। मैं बस से छुटकारा मिल गया है सफेद अंतरिक्ष के सभी। यह भी निकलता है, सफेद स्थान डेटा है। और इसलिए हम से डेटा भेज रहे हैं जब भेजने वाले सर्वर से, रिसीवर को ग्राहक के लिए, डेटा पैसा खर्च होता है। और तो खाली स्थान से छुटकारा मिल रहा वास्तव में एक अच्छा विचार है आप किसी से कर रहे हैं, जो कार्य करता है वेब सामग्री का एक बहुत ऊपर। आप कर रहे हैं तो यह एक बुरा विचार है इस सामान सीख रहा है, जो किसी को और आप चाहते हैं यह अच्छी तरह का आयोजन किया। यह इस से पार्स करने के लिए एक बहुत आसान है। लेकिन यह कार्यात्मक समान है। लगता है कि जैसे खरोज और सामान वास्तव में HTML में कोई फर्क नहीं पड़ता। कि सभी मामलों को खोलने के लिए देख रहे है सही क्रम में टैग बंद। हालांकि, यहां क्या हुआ पर ध्यान दें। मार्कअप करने के लिए हमें एक रास्ता देती है अतिरिक्त जानकारी संवाद हम क्या लिखा है के बारे में। हैलो, विश्व हिस्सा था शीर्षक के रूप में व्याख्या की। और, हैलो हिस्सा दुनिया थी सामग्री के रूप में व्याख्या की या क्या होना चाहिए अपने वेब पेज पर दिख रहा है। इन अलग से 100 से अधिक कर रहे हैं टैग और महान संसाधनों की बहुत सारी उन्हें खोजने के लिए ऑनलाइन। हम एक के बारे में बात करने जा रहे हैं इस वीडियो में उनमें से कुछ, कुछ वास्तव में मौलिक सामान की। लेकिन हम बात नहीं जा रहे हैं यह सब के बारे में यह क्योंकि ऐसा करने के लिए व्यापक होगा। आप हालांकि, कर सकते हैं एक और बात, डेवलपर टूल ऊपर खुला है। और तुम से याद करते हैं HTTP पर हमारे वीडियो, मैं खोलने के लिए कैसे समझाया डेवलपर टूल अप। क्रोम में यह आम तौर पर F12 कुंजी है डेवलपर उपकरण पट्टी खोलने के लिए। तो बजाय नेटवर्क को चुनने का टैब, आप तत्वों टैब का चयन कर सकते हैं। और आप एक वेब लोड पेज, आप वास्तव में हूँ जो वेब पेज बनाता है कि एचटीएमएल देखते हैं। और तो आप HTML के बारे में बहुत कुछ सीख सकते हैं अपने पसंदीदा वेबसाइटों को देखकर और वे का निर्माण देख कैसे आप चाहते हैं कि उनमें से विभिन्न टुकड़ों। तो शायद इस शांत भी नहीं है पैटर्न या ऐसा कुछ। वे कैसे HTML के साथ यह कर सकता हूँ? वैसे आप सिर्फ अपने डेवलपर खोल सकते हैं उस तत्व से अधिक उपकरण और मंडराना और एचटीएमएल बनाता है यह वास्तव में क्या देखते हैं। तो यह है कि एक सच है एचटीएमएल सीखने के लिए अच्छा तरीका है, और मैं दृढ़ता से अनुशंसा करते हैं कि आप इसे दोनों जानने के लिए करना एचटीएमएल और यह भी एक छोटे से जानने के लिए विकल्पों में से कुछ के बारे में थोड़ा में आप के लिए उपलब्ध डेवलपर उपकरण, जो निश्चित रूप से काम में आ जाएगा आप और अधिक गहन वेब शुरू कर प्रोग्रामिंग। तो चलो एक पर एक नजर डालते हैं आम एचटीएमएल टैग की जोड़ी। और हम कूद और पर एक नज़र रखेंगे इन टैग भी प्रस्तुत करना होगा क्या मेरी आईडीई में कुछ फाइलों को देखकर के रूप में। तो यहाँ के लिए तीन बहुत ही बुनियादी टैग कर रहे हैं पाठ के दृश्य उपस्थिति tweaking। बी टैग, मैं टैग, और यू टैग नहीं है। और क्रमशः वे क्या करते है बोल्ड में उन दोनों के बीच पाठ प्रस्तुत करना, इटैलिक, और रेखांकित। तो चलो कि देखना होगा कि क्या देखते हैं मेरी आईडीई में एक वास्तविक वेब पेज पर पसंद है। तो यहाँ मेरी आईडीई में मैं एक BIU डॉट एचटीएमएल बुलाया फ़ाइल। BIU डॉट एचटीएमएल अभी की जा रही बोल्ड, इटैलिक, रेखांकित। मैं इसे खोल देता हूँ। और हम मुझे लगता है कि यहां देखेंगे इस पाठ बी टैग बोल्ड है। यह पाठ मैं टैग इटैलिक है। और इस पाठ यू टैग को रेखांकित किया है। क्या इस तरह लग रहा है? खैर फिर, सब मेरे पास है यहाँ पर जाने के लिए क्या करना अपने ब्राउज़र को, मेरी फाइल ब्राउज़र, क्लिक करें पूर्वावलोकन, और यह ऊपर आता है। बी के बीच में पाठ टैग वास्तव में अब बोल्ड है। मैं बीच में पाठ टैग वास्तव में अब इटैलिक है। और यू के बीच में पाठ टैग वास्तव में अब रेखांकित किया है। तो यह है कि बहुत अच्छा है। अब हम पाठ बनाने के लिए पता एक छोटे से अधिक फैंसी देखो या कुछ बातें करने के लिए जोर आकर्षित। यहां आम टैग की एक और जोड़ी हैं पैरा टैग, पी, और शीर्षक टैग, जो मैं सेमी यहाँ के रूप में प्रदान की गई है। इन पी टैग, इन पैराग्राफ टैग, पैराग्राफ में अपने पाठ को तोड़ने। यह सिर्फ करने के लिए पर्याप्त नहीं है दर्ज करें और रिक्त स्थान छोड़ मारा, एक कंप्यूटर ही जा रहा है क्योंकि आपको बस इतना करना है कि यह बता कि क्या करना है और यह सफेद पर ध्यान नहीं देता अधिकांश भाग के लिए अंतरिक्ष। तो हम बस दर्ज हिट नहीं कर सकते और हमारे कंप्यूटर की उम्मीद हम चाहते हैं कि व्याख्या करने के लिए एक नया अनुच्छेद शुरू करने के लिए। हम बहुत स्पष्ट रूप से यह कहना है इस paragraph-- एक another-- है पी टैग का एक सेट में प्रत्येक enclosing द्वारा। और हम भी इन विकल्पों में है एच टैग, इन शीर्षक टैग के लिए। हम छह विभिन्न स्तरों है हेडर के, एक, दो, तीन, हैं जो चार, पांच और छह, उत्तरोत्तर बड़ा और बड़ा हेडर। और वे छोटे हो और और छोटे छोटे और छोटे। तो हम एक दूसरे के एक शीर्ष स्तर शीर्षक है स्तर हेडर, और इतने पर, और इतने पर। शायद कुछ पर एक नज़र रखना पी टैग और कुछ शीर्षक टैग एक वेब पेज पर कार्रवाई में। तो यहाँ मेरी आईडीई में मैं नामक एक फाइल है पीएच डॉट एचटीएमएल, पीएच जा रहा पैराग्राफ और शीर्षक टैग। कि खोलो। एक बहुत यहाँ चल रहा है वहाँ मैं कुछ घर में डाल दिया है क्योंकि Ipsum, यहाँ में कुछ बस यादृच्छिक पाठ। इसलिए मैं थोड़ा सा बाहर ज़ूम करेंगे क्योंकि वहाँ इतना चल रहा है। लेकिन मैं बहुत कम है कि नोटिस , मैं एक H1, एक स्तर एक है यहाँ शीर्ष शीर्षक टैग। तो मैं बस है, जो एक पैरा है, यादृच्छिक text-- घर का एक गुच्छा ipsum-- सिर्फ पाठ में मानक भरने डिफ़ॉल्ट। इसलिए मुझे लगता है कि के अंदर दो पैराग्राफ है एक स्तर हेडर और फिर नीचे मैं नीचे 24 लाइन पर यहाँ एक स्तर दो शीर्षक है, एक दूसरे स्तर हेडर, और एक और दो पैराग्राफ। वैसे इस तरह दिखता है मैं अपने पूर्वावलोकन में यह देखना तो क्या होगा? चलो देखते हैं। तो यह है कि नोटिस यहां पहले के स्तर हेडर वास्तव में काफी एक बड़ा सा है दूसरे स्तर पर हेडर से। इसलिए हम H1 टैग का इस्तेमाल किया। और पी टैग हमें की अनुमति है कि नोटिस पैराग्राफ में चीजें बाहर तोड़ने के लिए। हम उन पी टैग से छुटकारा मिल गया था और वास्तव में सिर्फ डाल प्रवेश करती है या रिटर्न हम क्या उम्मीद के बीच में होगा अलग पैराग्राफ हो, वे सब सिर्फ एक साथ स्लैम होता और यह यह अच्छा पैरा नहीं होता ऊपर और नीचे अंतरिक्ष के साथ जुदाई। और इतना है कि क्या पैरा है टैग और शीर्षक टैग आमतौर पर आकर्षित करने के लिए ऐसा करने के लिए इस्तेमाल कर रहे हैं हमारे वेब पेज के कुछ भागों पर ध्यान उस रास्ते में। अगले ऊपर है कि हम इस्तेमाल कुछ टैग कर रहे हैं हमारे वेब पेज पर सूची का निर्माण करने के लिए। इसलिए हम अव्यवस्थित है lists-- ULs-- जो बस रहे हैं आदेश बुलेटेड सूचियों, numbered-- हैं जो सूची OLs-- और के अंदर या तो उन में से एक हम हैं की जरूरत है , लाइट सूची आइटम इंगित करने के लिए कैसे के सेट। और इसलिए हम खुले उल टैग है और हम इसे के अंदर आइटम डाल दिया। और फिर हम साथ कर रहे हैं जब कि, हम उल टैग को बंद कर सकते हैं। और इसी तरह हम कर सकते हैं एक आदेश दिया है या क्रमांकित सूची और उस के अंदर सूची आइटम डाल दिया। तो चलो एक नजर डालते हैं सूचियों के एक जोड़े पर और क्या वे चाहते हैं CS50 आईडीई पर के रूप में प्रस्तुत करना। इसलिए मैं अपने आईडीई एक में यहाँ है फ़ाइल कहा सूचियों एचटीएमएल डॉट। चलो एक नज़र डालते हैं। और यहाँ नोटिस मैं एक unordered है उस में पाँच चीजों के साथ सूची। और फिर मैं एक आदेश सूची है, और मैं टैग एक छोटा सा बदल दिया है, है ना? मैं शुरू छह के बराबर होती है कहा है। यह एक आदेश दिए सूची के साथ मैं बाहर जाता है शुरुआती बिंदु जहाँ भी सेट कर सकते हैं मैं यह one-- होगी डिफ़ॉल्ट रूप से want-- द्वारा सिर्फ इस तथाकथित विशेषता जोड़ने मेरी राजभाषा टैग करने के लिए। और इसलिए इस सूची जाएगा छह बजे गिनती शुरू। कि क्रमांकित सूची की तो तत्वों होना चाहिए छह, सात, आठ, नौ, दस, पाँच तत्व हैं क्योंकि सूची में, एक करने के लिए विरोध के रूप में, दो, तीन, चार, पांच, जो मैं राजभाषा ने कहा था कि यदि इस मामले की जाएगी प्रारंभ विशेषता निर्दिष्ट किए बिना। आप कर सकते हैं तो हम सिर्फ इस पूर्वावलोकन करेंगे यहाँ पर क्या हो रहा है के लिए एक भावना हो। और वहाँ हम चले। मेरी सूची में नहीं है। पहले पांच तत्व हैं अव्यवस्थित या बुलेटेड सूची। और अगले पांच तत्वों एक अलग आदेश दिया सूची इस प्रकार हैं छह से शुरू। इतना है कि हम कैसे कर सकते हैं HTML का उपयोग कर सूची का निर्माण। एक और बात आप कर सकते हैं HTML के साथ क्या करना चाहते हैं की एक तालिका का निर्माण कर रहा है पंक्तियों और स्तंभों की जानकारी एक में जानकारी पेश करने के लिए विशेष रूप से जिस तरह का आयोजन किया। हम एक हो सकता है HTML के साथ ऐसा करने के लिए खुले ब्रैकेट शुरुआत तालिका परिभाषा मेज। और फिर उस मेज के अंदर हम पंक्तियाँ, टी.आर. टैग का एक सेट हो सकता है प्रत्येक पंक्ति से संकेत मिलता है। और फिर टीडी टैग टी.आर. टैग के अंदर जाना एक पंक्ति के भीतर एक स्तंभ निर्दिष्ट करने के लिए। ऐसा क्यों है कि टीडी बुलाया और टीसी नहीं है? खैर, टीडी तालिका डेटा के लिए खड़ा है। आम तौर पर आप डाल रहे हैं वहाँ आपकी जानकारी। यह टीडी और नहीं टीसी है तो यही कारण है। यह एक छोटा सा भ्रमित करने वाला है। तो अगर आप तालिका टैग नहीं है और अपनी मेज टैग के अंदर आप पंक्तियों, टीआरएस के एक नंबर है। और प्रत्येक पंक्ति के अंदर आपके पास स्तंभों की संख्या के लिए टीडीएस आप चाहते हैं कि उस विशेष पंक्ति में। का एक बहुत पर एक नज़र रखना CS50 आईडीई में अधिक सरल मेज। तो मैं यहाँ एक फ़ाइल है तालिका डॉट एचटीएमएल बुलाया। पर एक नजर है क्या लगता है कि जैसे लग रहा है। एक बहुत यहाँ चल रहा है वहाँ लेकिन अगर तुम नोटिस मैं एक मेज खुला है। मैं मेज के साथ परिभाषा शुरू कर रहा हूँ। और फिर मेरी पहली पंक्ति में मैं जाहिरा तौर पर चार स्तंभों, एक, दो, तीन, चार। और फिर मैं उस पंक्ति के साथ काम कर रहा हूँ। तो मैं एक और पंक्ति शुरू करने और दो, चार, छह, आठ से करते हैं। उस पंक्ति को खत्म करो। एक और पंक्ति, तीन, छह, नौ, 12 मत करो। और फिर एक अंतिम पंक्ति, चार, आठ, 12, और यह है, हालांकि एक छोटी सी, 16 यहाँ से काट डाला। मैं उस पंक्ति समाप्त हो गया। मैं मेज समाप्त हो गया। और फिर मैं अपने HTML के साथ काम कर रहा हूँ। यह किसकी तरह दिखता है? खैर, यह देखने के लिए बहुत ज्यादा नहीं है। मैं स्पष्ट रूप से मेरी जानकारी का आयोजन किया है एक कुछ और अधिक संगठित तरीके से। लेकिन यह यहाँ सुपर सुंदर नहीं है। और हम से निपटने के लिए जा रहे हैं हम सीएसएस के बारे में बात करते हैं कि। हम इस विचार को फिर से आना हूँ हम एक table-- बनाने के लिए क्या करते हैं हो सकता है एक छोटा सा बेहतर यह प्रारूप? लेकिन मैं अभी भी चार पंक्तियों की क्या ज़रूरत है, जिनमें से प्रत्येक चार कॉलम है, एक है और वास्तव में यह क्या मात्रा बहुत ही सरल चार चार गुणा से मेज। हम के बारे में बात करेंगे बस कुछ ही अधिक टैग। के बारे में बात करते हैं एक HTML फार्म की अवधारणा। तो अगर आप में यह देखा हो सकता है एक वेब पेज में प्रवेश करने के संदर्भ। आम तौर पर आप अपने उपयोगकर्ता नाम में टाइप करें। आप अपना पासवर्ड टाइप और तुम जाने के लिए अच्छे हैं। यही कारण है कि एक फार्म की शुरुआत होगी। पर लंघन एक दूसरे div। हम यह भी जानकारी है जो तरह के रूपों के अंदर फिट बैठते हैं। ये तत्व हैं कि आप वास्तव में, में टाइप कर रहे हैं या रेडियो बटन आप कर रहे हैं बजाते, या चेक आप बंद बजाते रहे कि बक्से। इसलिए इन रूपों के अंदर चले जाते हैं। और वे मूल रूप से शामिल फार्म की प्रत्येक पंक्ति अपने फार्म में अच्छी तरह से स्वरूपित है। तब से इस अवधारणा को भी नहीं है सच नहीं है जो एक div, किसी विशेष श्रेणी में फिट मैं लोगों की तरह टैग की पहले से कर रहा। यह बस की तरह सीमांकित कुछ मनमाने ढंग से division-- की शुरुआत पेज के div--। कोई दृश्य तोड़ नहीं है। कोई रेखा नहीं है। यह एक बंद के रूप में सेट नहीं है स्वचालित रूप से अलग हिस्सा। आप यह शैली के लिए होता है उस तरह से है कि क्या करना है। यह बस की तरह मैं एक चाहते का कहना है अपने वेब पेज पर स्थान का टुकड़ा, और मैं सिर्फ फोन करने के लिए जा रहा हूँ यह मेरे पृष्ठ के इस विभाजन। हम अंदर सामान रख सकते हैं divs की, और वास्तव में, हम के लिए सिर पर जब एक दूसरे में आईडीई, हम करेंगे मैं डाल रहा हूँ कि वहाँ मेरी एक div के अंदर के रूप में। इसलिए मैं अपने आईडीई एक में यहाँ है div प्रपत्र डॉट एचटीएमएल बुलाया फ़ाइल। के लिए इसे खोल दें। जैसा मैंने कहा कि नोटिस, div मनमाने ढंग से की तरह है। है ना? यह वास्तव में कुछ भी मतलब नहीं है। तो मैं एक मनमाना है मेरे पृष्ठ के प्रथम श्रेणी। और फिर बजाय एक और div पर बाद में, लाइन आठ पर शुरू, मैं इस फार्म का है। और फार्म के अंदर मैं एक है आदानों की संख्या, फार्म के क्षेत्र। इसलिए मुझे लगता है जिसका नाम है एक क्षेत्र है एक-- वास्तव में कुछ भी मतलब नहीं है कि जो सही now-- कि जाहिरा तौर पर पाठ, एक दूसरे से लेता है कि एक रेडियो है कि एक पासवर्ड, एक और लेता है बटन, एक चेक बॉक्स है कि एक और, और है कि एक और एक बटन सबमिट करें। खैर, यह क्या करता है सब वास्तव में की तरह लग रही? ठीक है, चलो एक नज़र रखना। हम अपने पूर्वावलोकन विंडो में इसे खोल देंगे। इस मनमाने ढंग से सूचना है कि पहले वहाँ division-- यहां कोई दृश्य जुदाई। यह वास्तव में सही, कुछ नहीं किया? और फिर मैं अपने फार्म है। और मैं किसी भी विशेष स्वरूपण नहीं किया। तो प्रपत्र में से एक है जानकारी के बड़े पंक्ति। मैं अलग तरह से मेरी फार्म स्वरूपित था, मैं यह लाइन से लाइन से लाइन हो सकता है। लेकिन मैं किसी भी स्टाइल ऐसा नहीं किया। फिर, हम यहाँ सीएसएस के बारे में बात नहीं कर रहे। हम सिर्फ HTML के बारे में बात कर रहे हैं। वैसे मेरी पाठ के रूप में मैं type-- कर सकते हैं याद है कि प्रकार के पाठ के रूपों इसलिए मैं अपना नाम डाल सकते हैं। और मेरा पासवर्ड मैं में अपना पासवर्ड टाइप कर सकते हैं। और उस क्षेत्र की वजह , प्रकार पासवर्ड की है आप अपना पासवर्ड क्या है पता नहीं है। यह सभी डॉट्स है। मैं भी एक टिक दूर करने के लिए चुन सकते हैं रेडियो बटन या एक चेक बॉक्स को टिक। या मैं अपने फार्म जमा कर सकता है। और मैं कुछ नहीं किया, इसलिए मैं अपने फार्म जमा करते हैं, पेज सिर्फ तरोताजा कर देती है। लेकिन मैं शायद कॉन्फ़िगर सकता है मेरी कुछ और करना बटन सबमिट करें। और हम हम साथ क्या कर सकते हैं देखेंगे पीएचपी पर एक भविष्य वीडियो में उस। लेकिन यह एक बहुत बनाता है सरल फार्म है कि हम उपयोगकर्ताओं को बातचीत करने के लिए उपयोग कर सकते हैं और हमारी वेबसाइट के लिए जानकारी सबमिट करें। पिछले एक टिप्पणी हम पहले कुछ अन्य टैग के लिए आगे बढ़ना इस पर एक नज़र लेने के लिए कर रहे हैं इनपुट टैग एक बार। मैं प्रकाश डाला है कि सूचना लाल रंग में टैग के समाप्त होता है। हम अब तक देखा है हर दूसरे टैग है एक शुरुआत और अंत में, एक खोलने के लिए किया था टैग और एक बंद टैग। लेकिन एक इनपुट टैग नहीं करता है। चला जाता है कि कोई सामग्री नहीं है इनपुट टैग के बीच में। जानकारी के सब हम संप्रेषित करने के लिए इच्छुक रहे के भाग के रूप में बाध्य है कि इनपुट का जिम्मेदार बताते हैं। हम इनपुट नाम एक्स के बराबर होती है पर ध्यान दें। प्रकार Y के बराबर होती है। यही कारण है कि वास्तव में सभी जानकारी हम की जरूरत है। यह एक आत्म बंद टैग कहा जाता है। यह एक खोलने और एक की आवश्यकता नहीं है बंद जानकारी के सभी क्योंकि अंदर निहित है टैग और इसकी विशेषताओं। तो कभी कभी आप भी इस देखेंगे। यदि आपके पास एक तो यह है कि सिर्फ बारे में पता होना पूरी तरह से आत्म निहित है कि टैग, यह खोलता है और साथ में ही बंद कर देता है बाईं तरफ खुला कोण ब्रैकेट और स्लेश कोण सही पर ब्रैकेट। हम उन लोगों में से एक दूसरे को देखेंगे अभी छवि टैग के साथ के रूप में अच्छी तरह से। हम छवियों के बारे में बात करने से पहले, हम हाइपरलिंक के बारे में बात करने की जरूरत है। हम चाहते हैं कि हमारे वेब पेज होने की इंटरैक्टिव और हमारे चारों ओर ले जाते हैं, यह सक्षम होना अच्छा होगा उन में से एक पर क्लिक करने के लिए क्या आम तौर पर एक नीले लिंक किया गया है। यह हम निर्माण कैसे वास्तव में है हमारे वेब पेज में एक हाइपरलिंक। और काफी दिलचस्प है एक और एचटीएमएल टैग वहाँ एक हाइपरलिंक नहीं है, जो लिंक बुलाया। यहाँ इस लंगर के लिए खड़ा है, और कि हम एक हाइपरलिंक से संकेत मिलता है कि कैसे है। एक href एक्स साधन करने के लिए जाने के बराबर होती है वेब पेज एक्स और सब कुछ एक टैग खुला बीच और करीब एक टैग क्या होने जा रहा है है कि रेखांकित एक कड़ी की तरह लग रहा है कि नीले पाठ हम से परिचित हो। नीचे है कि हम एक छवि टैग है, जो एक आत्म प्रदर्शित करने के लिए टैग बंद हो रहा है एक्स में स्थित एक छवि और आप को बदलने में सक्षम हो सकता है निर्दिष्ट द्वारा कि छवि चौड़ाई और ऊंचाई और अन्य विशेषताओं में कि डॉट डॉट वहाँ डॉट। यहाँ बहुत नीचे हम एक बहुत ही दिलचस्प है टैग लग रही है कि नहीं करता है एक बंद टैग। यह विस्मयादिबोधक बिंदु doctype एचटीएमएल है। तो एचटीएमएल के बाद से आसपास किया गया है वेब पृष्ठों के निर्माण के लिए 1990 के दशक, और यह आया चला गया है उसके बाद से कई संशोधन। अभी हाल ही में 2014 में यह एक संशोधन कराना पड़ा अब वर्तमान है, जो एचटीएमएल 5 बुलाया वास्तविक HTML मानक की तरह। संकेत मिलता है कि हमारी वेब पृष्ठों, एचटीएमएल 5 का उपयोग कर लिखे गए हैं हम शुरू से यह कैसे है। इसे छोड़ा जा सकता है लेकिन क्या है कि मूल रूप से इसका मतलब है आप टैग के किसी भी उपयोग नहीं कर सकते है एचटीएमएल 5 टैग, उन नए टैग कि कर रहे हैं। हम तो हमेशा से शुरू हम एचटीएमएल 5 का उपयोग कर रहे हैं। और सभी टैग के बारे में हम बात की है पहले से एचटीएमएल 5 टैग नहीं हैं। लेकिन इस संकेत मिलता है कि एचटीएमएल 5 टैग उपस्थित रहेंगे। और इसलिए हम विस्मयादिबोधक है doctype एचटीएमएल, जो के बहुत शुरुआत में है हमारी HTML फ़ाइल, और उसके बाद के बाद उस बिंदु हम वास्तव में हमारे HTML खुला है टैग और वहाँ से आगे बढ़ना। पिछले एक है, एक टिप्पणी टैग है जो भी है, थोड़ा अलग दिखता है। यह कोण के साथ बंद शुरू होता है ब्रैकेट विस्मयादिबोधक पानी का छींटा पानी का छींटा लेकिन कोई समापन ब्रैकेट। वहाँ उन दो तत्वों के बीच में आप अपनी टिप्पणी लिखने जहां है। और चलो छवियों पर एक नजर डालते हैं और टिप्पणियों और CS50 आईडीई में लिंक। तो मैं एक फ़ाइल कहा जाता छवि लिंक यहाँ है मैं खोलने के लिए जा रहा हूँ जो डॉट एचटीएमएल। और मैं एक जोड़ी के लिए मिला है नोटिस मेरी HTML टिप्पणी में यहाँ टिप्पणी। तो बस सी और अन्य में की तरह प्रोग्रामिंग की भाषाएँ, सिर्फ एक मार्कअप भाषा जा रहा द्वारा एचटीएमएल टिप्पणी है करने की क्षमता है। और इसलिए मैं जाहिरा तौर पर करने के लिए जा रहा हूँ रिक एस्ले की एक तस्वीर को जगह कहीं न कहीं इस div के बीच टैग, इस मनमाने ढंग से विभाजन। जाहिर है कि फाइल है रिक डॉट जेपीईजी, पर स्थित है, जो हम खत्म करने के लिए वापस सिर यदि एक पल के लिए मेरी फाइल पेड़, में मौजूद है कि एक फाइल है वर्तमान निर्देशिका। तो यह ठीक है। मैं इसे संदर्भ सकते हैं। तब मैं आंतरिक लिंक हो सकता है। यहाँ तो लाइन 11 पर नोटिस मेरी href हैलो डॉट एचटीएमएल है। तो यह है कि सिर्फ डॉट एचटीएमएल नमस्कार करने के लिए संदर्भित करता है जो वर्तमान निर्देशिका में मौजूद है। और मैं यह भी बाहरी हो सकता है HTTPS का सिर्फ निर्दिष्ट द्वारा लिंक मैं बात नहीं कर रहा है कि इंगित करने के लिए मेरे वर्तमान निर्देशिका में एक फाइल के बारे में। मैं मौजूद है कि एक फाइल के बारे में बात कर रहा हूँ कहीं न कहीं मुझे लगता है जो इंटरनेट पर HTTP प्रोटोकॉल का उपयोग अनुरोध करने के लिए। तो चलो पर एक नजर डालते हैं क्या इस पेज की तरह लग सकता है और रिक की एक तस्वीर के लिए तैयार हो जाओ एस्ले अपनी स्क्रीन पर दिखाने के लिए। इसलिए मैं इस पूर्वावलोकन करेंगे। रिक एस्ले में नहीं है इस मनमाना में बहुत ऊपर विभाजन मैं शीर्ष पर डाल दिया। और फिर नीचे मैं नीचे मेरा लिंक है, है ना? मैं हैलो डॉट HTML करने के लिए एक कड़ी है। और मुझे लगता है कि क्लिक करते हैं, मैं मिलता है इस पृष्ठ पर ले जाया गया हम से बहुत से परिचित हैं कि हमारे कार्यक्रम के बहुत शुरुआत। मैं फिर से खुला है कि पेज पॉप, मैं यदि पॉप छवि लिंक, एक बार खोलने मैं भी बाहर से जा सकते हैं CS50 की वेबसाइट पर। और वहाँ हम मैं हूँ see-- एक छोटा सा बाहर ज़ूम here-- हम में से CS50 की वेबसाइट प्रकार देखेंगे हमारे पृष्ठ के मध्य में एम्बेडेड। तो मैं एक आंतरिक बनाने में सक्षम था एक बाहरी कड़ी के रूप में के रूप में अच्छी तरह से जोड़ती हैं। HTML के साथ अंतिम नियम है कि हम यहाँ के बारे में बात करने जा रहे हैं अपने HTML अच्छी तरह का गठन किया जाना चाहिए। सी में हम के बारे में बहुत बात चीजों की विभिन्न सिंटेक्स। एचटीएमएल में सिंटेक्स सच टैग के आसपास घूमती है। आप खुला हर टैग को बंद कर दिया जाना चाहिए। और वास्तव में, हर टैग आप के लिए खुला रिवर्स क्रम में बंद किया जाना चाहिए। तो अगर आप एक बोल्ड टैग खोलते हैं, तो एक इटैलिक टैग, और फिर रेखांकित टैग एक करने के लिए सभी तीन करने के लिए पाठ का विशेष सेट, आप रिवर्स क्रम में उन्हें बंद करना चाहिए। आप बोल्ड खोला तो, अगर इटैलिक, आप, रेखांकन बोल्ड, रेखांकन, इटैलिक बंद करना चाहते हैं। Encapsulation के इस तरह क्या है एचटीएमएल अच्छा और संगठित रहता है। सी विपरीत है, हालांकि, सिंटैक्स त्रुटि नहीं होगा वास्तव में संभवतः अपने HTML अपंग। आपका HTML नहीं अच्छी तरह से हो सकता है का गठन, लेकिन अभी भी काम करेगा। और इसलिए इन त्रुटियों द्वारा स्लाइड की तरह कर सकते हैं। यह वास्तव में सतर्क रहने के लिए आप पर निर्भर है। कभी-कभी वे असफल हो जायेगी लेकिन कभी कभी आप इसके साथ भाग ले सकते हैं। यह एक सच में हो सकता है मुश्किल काम है, हालांकि, आप जब खोला का ट्रैक रखने के लिए एक टैग है, तो आप इसे बंद कर दिया जब, विशेष रूप से अपने HTML के रूप में फ़ाइलों बड़ा और बड़ा हो। आप कुछ मदद चाहता हूँ। और ऑनलाइन कर रहे हैं सत्यापनकर्ता उपकरण है कि आप अपने वेब पर एक नज़र है करने के लिए उपयोग कर सकते हैं पेज और यह अच्छी तरह से बनाई एचटीएमएल अगर देखते हैं। और आप निश्चित रूप से करना चाहिए उन पर एक नज़र रखना और आप के रूप में उपयोग करने के लिए शुरू HTML के साथ कुछ काम कर रहा शुरू, आप प्राप्त कर सिर्फ इतना, एचटीएमएल लिख आयोजन के बारे में कुछ अच्छी आदतें एक अच्छा तरीका में अपने HTML और अच्छा शैली और सुनिश्चित कर रही है आप कुछ भी नहीं कर रहे हैं कि कोई सिंटैक्स त्रुटि पैदा कर सकता है कि आप का एक सा कारण होगा सड़क के नीचे एक समस्या है। मैं डौग लॉयड हूँ। इस CS50 है।