DAVEN Farnham: आज, मैं जा रहा हूँ HTML के बारे में एक छोटा सा बात करते हैं, हाइपरटेक्स्ट मार्कअप लैंग्वेज. आप इन दिनों हर जगह एचटीएमएल देखें. वास्तव में, आप यह देख रहे हैं एक ब्राउज़र में वीडियो, आप कर रहे हैं अब ठीक एचटीएमएल देखकर. HTML एक प्रोग्रामिंग भाषा नहीं है, दरअसल, यह द्वारा इस्तेमाल मार्कअप भाषा है पृष्ठों को प्रस्तुत करने के लिए वेब ब्राउज़र इंटरनेट पर. 

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

वेब ब्राउज़रों हालांकि, थोड़ा और अधिक कर रहे हैं यह HTML के लिए आता है क्षमा. अपने HTML वाक्य रचना नहीं है यहां तक ​​कि अगर सही, अपने पृष्ठ अभी भी हो सकता है एक ब्राउज़र द्वारा प्रदर्शित है, लेकिन यह हो सकता है आप के रूप में इरादा नहीं लग रही. तो यह करने के लिए सबसे अच्छा हमेशा नियमों का पालन करें. एक अंतर्ज्ञान प्राप्त करने के लिए सबसे अच्छा तरीका कुछ काम करने के बारे में कैसे एक उदाहरण के माध्यम से जाना. 

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

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

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

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

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

तुम्हारा पीछा एक छवि टैग के साथ खुला द्वारा में Alt विशेषता में छवि का स्रोत. Alt विशेषता के मूल्य है, बस कुछ मामले में वैकल्पिक पाठ एक उपयोगकर्ता नहीं कर सकते छवि देखते हैं. वैकल्पिक रूप से, आप भी करने के लिए लिंक कर सकते हैं इस तरह से एक पूर्ण यूआरएल के माध्यम से छवियों,. अब, कि वेबसाइट वास्तव में मौजूद नहीं है, लेकिन की एक तस्वीर अगर वहाँ थे उस पते पर मुझे, मैं इस्तेमाल कर सकते हैं शामिल करने के लिए स्रोत यूआरएल अपनी वेबसाइट पर अपनी छवि. किसी भी तरह से, आप एक बहुत के साथ खत्म सुंदर वेबसाइट, कुछ इस तरह. 

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

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

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

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

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

प्रभाग शीर्ष के भीतर सब कुछ इसी तरह की शैली या किसी भी होगा में HTML मैं समूह के अन्य समूह वर्ग छवि एक समान दिखाई हिस्सा होगा. इस संपादित करने की कोशिश की तुलना में आसान है और शैली छवियों या के ब्लॉक अलग - अलग पाठ. 

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

मेरा नाम Daven Farnham है. इस CS50 है. 

तो उदाहरण के लिए, मैं उपयोग कर सकते हैं वर्ग छवि - नहीं, तो कई गुण होते हैं. मेरा नाम Daven Farnham है. इस सीएस 650 है. मैं सीएसएस कहना चाहता हूँ. इस सीएसएस है.