HTML, या HyperText Markup Language, वेब का 'कंकाल' है। यदि CSS आपके HTML और 'ड्रेस अप' को जीवन में लाता है, तो HTML आपके वेब एप्लिकेशन का मुख्य भाग है। HTML का सिंटैक्स भी उस विचार को दर्शाता है, क्योंकि इसमें "head", "body" और "footer" टैग शामिल हैं।
इस पाठ में, हम अपने वर्चुअल टेरारियम के इंटरफ़ेस के 'कंकाल' को लेआउट करने के लिए HTML का उपयोग करने जा रहे हैं। इसमें एक शीर्षक और तीन कॉलम होंगे: एक दाएं और बाएं स्तंभ जहां ड्रैगेबल पौधे रहते हैं, और एक केंद्र क्षेत्र जो वास्तविक ग्लास दिखने वाला टेरारियम होगा। इस पाठ के अंत तक, आप कॉलम में पौधों को देख पाएंगे, लेकिन इंटरफ़ेस थोड़ा अजीब लगेगा; चिंता न करें, अगले भाग में आप सीएसएस शैली को बेहतर बनाने के लिए इंटरफ़ेस में जोड़ देंगे।
अपने कंप्यूटर पर, 'टेरारियम' नामक एक फ़ोल्डर बनाएं और उसके अंदर, एक फ़ाइल 'index.html'। विज़ुअल स्टूडियो कोड में आप ऐसा कर सकते हैं, जब आप एक नया वीएस कोड विंडो खोलकर, 'open folder' पर क्लिक करके, और अपने नए फ़ोल्डर में नेविगेट करके अपना टेरारियम फ़ोल्डर बना सकते हैं। एक्सप्लोरर फलक में छोटे 'फ़ाइल' बटन पर क्लिक करें और नई फ़ाइल बनाएँ:
> index.html फ़ाइलें एक ब्राउज़र को इंगित करती हैं कि यह एक फ़ोल्डर में डिफ़ॉल्ट फ़ाइल है; URL जैसे `https://anysite.com/test` को एक फ़ोल्डर संरचना का उपयोग करके बनाया जा सकता है, जिसमें इसके अंदर` index` नाम के साथ `test` नामक एक फ़ोल्डर शामिल है; `index.html` को URL में नहीं दिखाना है।
HTML फ़ाइल की पहली पंक्ति इसका सिद्धांत है। यह थोड़ा आश्चर्य की बात है कि आपको इस लाइन को फ़ाइल के शीर्ष पर रखने की आवश्यकता है, लेकिन यह पुराने ब्राउज़रों को बताता है कि वर्तमान HTML विनिर्देश के बाद ब्राउज़र को मानक मोड में पृष्ठ को प्रस्तुत करना होगा।
✅ कुछ अलग तरीके हैं जो डॉक टाइप को क्वेरी स्ट्रिंग के साथ निर्धारित करके निर्धारित किए जा सकते हैं: [क्विर्क मोड और स्टैंडर्ड मोड](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ये मोड वास्तव में पुराने ब्राउज़रों का समर्थन करते थे जो आजकल सामान्य रूप से उपयोग नहीं किए जाते हैं (नेटस्केप नेविगेटर 4 और इंटरनेट एक्सप्लोरर 5)। आप मानक सिद्धांत घोषणा से चिपक सकते हैं।
HTML दस्तावेज़ के 'हेड' क्षेत्र में आपके वेब पेज के बारे में महत्वपूर्ण जानकारी शामिल है, जिसे [मेटाडेटा](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) के रूप में भी जाना जाता है। हमारे मामले में, हम वेब सर्वर को बताते हैं कि इस पेज को किस पेज पर भेजा जाएगा, ये चार बातें:
- 'वर्ण सेट', पृष्ठ में किस वर्ण एन्कोडिंग का उपयोग किया जाता है, इस बारे में बताना
-`x-ua-compatible` सहित ब्राउज़र जानकारी, जो इंगित करता है कि IE = एज ब्राउज़र समर्थित है
- लोड होने पर व्यूपोर्ट कैसे व्यवहार करना चाहिए, इसके बारे में जानकारी। जब पृष्ठ पहली बार लोड होता है तो व्यूपोर्ट के शुरुआती स्तर को नियंत्रित करने के लिए व्यूपोर्ट सेट करना 1 को नियंत्रित करता है।
✅ यदि आप व्यूपोर्ट मेटा टैग इस तरह सेट करते हैं तो क्या होगा: `<meta name="viewport" content="width=600">`? [Viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) के बारे में और पढ़ें।
HTML में, आप वेब पेज के तत्वों को बनाने के लिए अपने .html फ़ाइल में टैग जोड़ते हैं। प्रत्येक टैग में आमतौर पर एक उद्घाटन और समापन टैग होता है, जैसे: पैराग्राफ को इंगित करने के लिए `<p>hello</ p>`। `<Html>` टैग जोड़ी के अंदर `<body>` टैग का एक सेट जोड़कर अपने इंटरफ़ेस का शरीर बनाएं; आपका मार्कअप अब इस तरह दिखता है:
अब, आप अपने पृष्ठ का निर्माण शुरू कर सकते हैं। आम तौर पर, आप एक पृष्ठ में अलग-अलग तत्वों को बनाने के लिए `<div>` टैग का उपयोग करते हैं। हम '<div>' तत्वों की एक श्रृंखला बनाएंगे जिसमें चित्र शामिल होंगे।
एक html टैग जिसे एक समापन टैग की आवश्यकता नहीं है, वह है <<img>`टैग, क्योंकि इसमें एक` src` तत्व है, जिसमें आइटम को रेंडर करने के लिए पृष्ठ की सभी जानकारी शामिल है।
अपने एप्लिकेशन में एक फ़ोल्डर बनाएं, जिसे `images` कहा जाता है और उस में, [स्रोत कोड फ़ोल्डर](../solution/images) में सभी छवियों को जोड़ें; (पौधों की 14 छवियां हैं)।
इस मार्कअप के साथ, पौधे अब स्क्रीन पर दिखाई देते हैं। यह बहुत बुरा लग रहा है, क्योंकि वे अभी तक CSS का उपयोग नहीं कर रहे हैं, और हम अगले पाठ में ऐसा करेंगे।
प्रत्येक छवि में ऑल्ट टेक्स्ट होता है, भले ही आप किसी चित्र को देख या प्रस्तुत नहीं कर सकते हैं। पहुँच के लिए शामिल करने के लिए यह एक महत्वपूर्ण विशेषता है। भविष्य के पाठों में पहुंच के बारे में अधिक जानें; अभी के लिए, याद रखें कि यदि कोई उपयोगकर्ता किसी कारण से इसे नहीं देख सकता है (धीमी गति से कनेक्शन के कारण, src विशेषता में कोई त्रुटि, या यदि उपयोगकर्ता एक स्क्रीन रीडर का उपयोग करता है), तो सर्वोच्च विशेषता किसी छवि के लिए वैकल्पिक जानकारी प्रदान करती है।
सामान्य तौर पर, HTML लिखते समय सार्थक 'शब्दार्थ' का उपयोग करना बेहतर होता है। इसका क्या मतलब है? इसका अर्थ है कि आप जिस प्रकार के डेटा या इंटरैक्शन के लिए डिज़ाइन किए गए थे, उनका प्रतिनिधित्व करने के लिए आप HTML टैग का उपयोग करते हैं। उदाहरण के लिए, किसी पृष्ठ पर मुख्य शीर्षक पाठ में `<h1>` टैग का उपयोग करना चाहिए।
सिमेंटिक मार्कअप का उपयोग करना जैसे हेडर होना `<h1>` और अनऑर्डर किए गए सूचियों को `<ul>` के रूप में प्रस्तुत किया जाना चाहिए। स्क्रीन रीडर्स को पेज के माध्यम से नेविगेट करने में मदद करता है। सामान्य तौर पर, बटन को `<button>` के रूप में लिखा जाना चाहिए और सूचियों को `<li>` होना चाहिए। हालांकि यह संभव नहीं है कि विशेष रूप से स्टाइल किए गए `<span>` 'तत्वों का उपयोग करने के लिए क्लिक हैंडलर के साथ बटन को मॉक करें, अक्षम उपयोगकर्ताओं के लिए प्रौद्योगिकियों का उपयोग करना बेहतर होता है यह निर्धारित करने के लिए कि एक पृष्ठ पर बटन कहाँ रहता है, और इसके साथ बातचीत करने के लिए, यदि तत्व एक के रूप में प्रकट होता है बटन। इस कारण से, संभव के रूप में अर्थ मार्कअप का उपयोग करने का प्रयास करें।
✅ एक स्क्रीन रीडर पर नज़र डालें और [यह कैसे एक वेब पेज के साथ बातचीत करता है](https://www.youtube.com/watch?v=OUDV1gqs9GA)। क्या आप देख सकते हैं कि गैर शब्दार्थ मार्कअप होने से उपयोगकर्ता निराश हो सकता है?
HTML में कुछ जंगली 'पुराने' टैग हैं जो अभी भी खेलने में मज़ेदार हैं, हालांकि आपको [[इन टैग्स](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obirect_and_deprecated_elements) जैसे अस्वीकृत टैग का उपयोग नहीं करना चाहिए आपके मार्कअप में । फिर भी, आप h1 शीर्षक स्क्रॉल को क्षैतिज रूप से बनाने के लिए पुराने `<marquee>` टैग का उपयोग कर सकते हैं? (यदि आप ऐसा करते हैं, तो इसे बाद में हटाना न भूलें)
HTML 'ट्राइ एंड ट्रू' बिल्डिंग ब्लॉक सिस्टम है जिसने वेब को आज के समय में बनाने में मदद की है। कुछ पुराने और नए टैग का अध्ययन करके इसके इतिहास के बारे में थोड़ा जानें। क्या आप यह पता लगा सकते हैं कि कुछ टैग क्यों हटाए गए और कुछ जोड़े गए? भविष्य में कौन से टैग पेश किए जा सकते हैं?
[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academy-13441-cxa) पर वेब और मोबाइल उपकरणों के लिए साइट बनाने के बारे में और जानें।
