HTML

हर वेब पेज की संरचना

HTML हर वेब पेज की सामग्री और संरचना का वर्णन करता है। आपके पहले टैग से लेकर सुलभ फ़ॉर्म और सिमैंटिक HTML तक, यह ट्रैक आपको वेब डेवलपमेंट की बाकी हर चीज़ के लिए ठोस आधार देता है।

बुनियाद

शुरुआती - मूल बातें, कदम-दर-कदम

• HTML क्या है? टैग और एट्रिब्यूटजानें कि HTML क्या है और एक टैग तथा एक एट्रिब्यूट को पहचानना सीखें।
• पाठ को व्यवस्थित करना: शीर्षक, पैराग्राफ और सूचियाँशीर्षकों, पैराग्राफ और सूचियों के पदानुक्रम के साथ पाठ को व्यवस्थित करना सीखें।
• लिंक और छवियाँa और img टैग के साथ अन्य पेजों के लिए लिंक बनाएँ और छवियाँ दिखाएँ।
• सरल तालिकाएँtable, tr, th और td टैग के साथ डेटा को पंक्तियों और स्तंभों में प्रस्तुत करें।
• एक HTML पेज का पूरा ढाँचाdoctype और html, head, meta तथा body टैग के साथ एक पूरा वेब पेज तैयार करें।

प्रगति

मध्यवर्ती - असली प्रोजेक्ट बनाएं

• फ़ॉर्म: input, label, select, textarea, buttonपूर्ण, सुलभ और प्रोडक्शन के लिए तैयार फ़ॉर्म बनाएं।
• सिमैंटिक HTML: एक वास्तविक पेज को संरचित करनाअपने बेनाम div को उन टैग से बदलें जो आपकी संरचना को अर्थ देते हैं।
• मीडिया: audio, video, figure और figcaptionबिना किसी प्लगइन के ध्वनि, वीडियो और कैप्शन वाले चित्र एम्बेड करें।
• वैश्विक एट्रिब्यूट और data-*हर जगह काम करने वाले एट्रिब्यूट का लाभ उठाएं और अपना डेटा HTML में संग्रहीत करें।
• अपने पेज को वेब के लिए तैयार करनाअपने पेज के head को निखारें: title, description, favicon और सुरक्षित बाहरी लिंक।

उन्नत

निपुण - उन्नत पैटर्न और प्रदर्शन

• एक्सेसिबिलिटी: alt, हेडिंग पदानुक्रम, और ARIAवैकल्पिक टेक्स्ट में महारत हासिल करें, एक ऐसा हेडिंग पदानुक्रम बनाएं जिसमें स्क्रीन रीडर सचमुच नेविगेट कर सकें, और ARIA का उपयोग केवल उन मामलों तक सीमित रखें जहाँ नेटिव HTML कम पड़ जाती है।
• उन्नत फ़ॉर्म और नेटिव वैलिडेशनकिसी भी बाहरी लाइब्रेरी के बिना मज़बूत फ़ॉर्म के लिए required, pattern, inputmode, और Constraint Validation API का लाभ उठाएं।
• रिस्पॉन्सिव छवियाँ: srcset, sizes, और picturesrcset और sizes के साथ सही स्क्रीन को सही छवि परोसें, art direction के लिए picture आरक्षित रखें, और lazy loading में महारत हासिल करें।
• तकनीकी SEO: Open Graph और संरचित डेटाOpen Graph के साथ नियंत्रित करें कि आपके पृष्ठ सोशल नेटवर्क पर कैसे प्रीव्यू होते हैं, और JSON-LD में schema.org के साथ rich results का लक्ष्य रखें।
• लोडिंग प्रदर्शन: defer, async, preload, और prefetchअपनी स्क्रिप्ट के निष्पादन को defer और async के साथ क्रमबद्ध करें, फिर preload, preconnect, और prefetch के साथ नेटवर्क को दिशा दें।

महारत

विशेषज्ञ - आर्किटेक्चर, आंतरिक कार्यप्रणाली और किनारे के मामले

• HTML से DOM तक: पार्सिंग और त्रुटि पुनर्प्राप्तिसमझें कि ब्राउज़र किसी भी HTML स्ट्रीम को, यहाँ तक कि विकृत स्ट्रीम को भी, कैसे एक निर्धारित DOM वृक्ष में बदल देता है।
• Web Components: कस्टम एलिमेंट, shadow DOM और slotsकस्टम एलिमेंट के जीवनचक्र, shadow DOM एनकैप्सुलेशन और slots के माध्यम से सामग्री प्रोजेक्शन में महारत हासिल करें।
• अंतर्राष्ट्रीयकरण: lang, dir, charset और Unicode के जालlang, dir और एन्कोडिंग घोषणा का समझदारी से उपयोग करें, और Unicode नॉर्मलाइज़ेशन तथा दिशात्मकता के जालों को हराएँ।
• HTML-पक्ष सुरक्षा: XSS, sandbox, noopener और CSPमार्कअप के लिए विशिष्ट XSS वैक्टर की पहचान करें और HTML की नेटिव सुरक्षा को तैनात करें: sandbox, noopener और Content Security Policy।
• आधुनिक इंटरैक्टिव HTML: dialog, details, popover, contenteditableअपनी UI लाइब्रेरीज़ को आधुनिक HTML की नेटिव प्रिमिटिव्स से बदलें: मोडल डायलॉग, अनन्य अकॉर्डियन, पॉपओवर और संपादन योग्य क्षेत्र।