37:55
HTML Course | From Beginners to Advance Level | Lecture 1
Apna College
Overview
यह वीडियो वेब डेवलपमेंट के लिए HTML का परिचय देता है, जो किसी भी वेबसाइट की नींव है। यह मार्कअप लैंग्वेज, इसके एलिमेंट्स और टैग्स के बारे में बताता है, जिसमें ओपनिंग और क्लोजिंग टैग्स का अंतर समझाया गया है। वीडियो में एट्रीब्यूट्स का उपयोग करके एलिमेंट्स को अतिरिक्त प्रॉपर्टीज कैसे दी जाती हैं, यह भी समझाया गया है, जैसे कि आईडी और क्लास एट्रीब्यूट्स। इसके बाद, एक बेसिक HTML डॉक्यूमेंट का स्ट्रक्चर, जिसे बॉयलरप्लेट कोड कहा जाता है, समझाया गया है, जिसमें डॉकटाइप, हेड और बॉडी टैग शामिल हैं। अंत में, वीडियो VS कोड जैसे टेक्स्ट एडिटर का उपयोग करके HTML कोड लिखने की प्रक्रिया दिखाता है, जिसमें हेडिंग, पैराग्राफ, बोल्ड, इटैलिक जैसे सामान्य टैग्स और लिस्ट बनाने के तरीके शामिल हैं।
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- HTML (हाइपर टेक्स्ट मार्कअप लैंग्वेज) वेबसाइट का स्ट्रक्चर बनाने के लिए इस्तेमाल होने वाली एक मार्कअप लैंग्वेज है, प्रोग्रामिंग लैंग्वेज नहीं।
- मार्कअप लैंग्वेज में टैग्स का उपयोग करके ब्राउज़र को वेब पेज पर कंटेंट डिस्प्ले करने के निर्देश दिए जाते हैं।
- HTML डॉक्यूमेंट एलिमेंट्स से बने होते हैं, और हर एलिमेंट टैग्स से मिलकर बनता है।
यह समझना महत्वपूर्ण है कि HTML कैसे काम करता है ताकि आप वेब पेजों की मूल संरचना बना सकें और समझ सकें कि वे कैसे प्रदर्शित होते हैं।
HTML में, `<p>` टैग एक पैराग्राफ एलिमेंट को दर्शाता है, जिसमें टेक्स्ट कंटेंट होता है।
- HTML एलिमेंट्स किसी डॉक्यूमेंट के इंडिविजुअल कॉम्पोनेंट्स होते हैं, जो टैग्स से मिलकर बनते हैं।
- ओपनिंग टैग्स में `<tagname>` होता है, जबकि क्लोजिंग टैग्स में `<tagname>` के आगे एक फॉरवर्ड स्लैश `/` होता है।
- कुछ एलिमेंट्स, जैसे इमेज (`<img>`), में क्लोजिंग टैग नहीं होता क्योंकि उनका कंटेंट टेक्स्ट नहीं होता।
एलिमेंट्स और टैग्स को समझना आपको वेब पेज के विभिन्न हिस्सों को बनाने और नियंत्रित करने की अनुमति देता है।
एक पैराग्राफ एलिमेंट `<p>यह एक पैराग्राफ है।</p>` के रूप में लिखा जाता है, जिसमें `<p>` ओपनिंग टैग है और `</p>` क्लोजिंग टैग है।
- एट्रीब्यूट्स एलिमेंट्स को एडिशनल प्रॉपर्टीज या जानकारी प्रदान करते हैं, जैसे इमेज का साइज या टेक्स्ट का अलाइनमेंट।
- एट्रीब्यूट्स एलिमेंट के ओपनिंग टैग में `name="value"` फॉर्मेट में लिखे जाते हैं।
- ID एट्रीब्यूट एक एलिमेंट को यूनिक नाम देता है, जबकि क्लास एट्रीब्यूट एक से ज्यादा एलिमेंट्स को सेम नाम दे सकता है।
एट्रीब्यूट्स आपको एलिमेंट्स के व्यवहार और दिखावट को कस्टमाइज़ करने की शक्ति देते हैं, जिससे आप अधिक डायनामिक वेब पेज बना सकते हैं।
`<p align="center">` एक पैराग्राफ एलिमेंट बनाता है जिसे पेज के सेंटर में अलाइन किया जाता है।
- हर HTML डॉक्यूमेंट `<!DOCTYPE html>` से शुरू होता है, जो ब्राउज़र को डॉक्यूमेंट का टाइप बताता है।
- `<html>` टैग रूट एलिमेंट है जिसके अंदर पूरा HTML कंटेंट होता है।
- `<head>` टैग में मेटा-जानकारी होती है जैसे पेज का टाइटल और लिंक किए गए स्टाइलशीट/स्क्रिप्ट्स, जबकि `<body>` टैग में वह सब कंटेंट होता है जो यूजर को पेज पर दिखाई देता है।
यह स्टैंडर्ड स्ट्रक्चर सुनिश्चित करता है कि ब्राउज़र आपके HTML कोड को सही ढंग से समझें और रेंडर करें, जिससे कंपैटिबिलिटी बनी रहती है।
एक बेसिक HTML फाइल में `<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, और `<body>` टैग्स का एक निश्चित क्रम होता है।
- VS Code जैसे कोड एडिटर, नोटपैड की तुलना में कोडिंग को आसान बनाते हैं क्योंकि वे सिंटैक्स हाइलाइटिंग और ऑटो-कंप्लीशन जैसी सुविधाएं प्रदान करते हैं।
- हेडिंग के लिए `<h1>` से `<h6>` तक के टैग्स का उपयोग किया जाता है, जहाँ `<h1>` सबसे बड़ी हेडिंग होती है।
- पैराग्राफ के लिए `<p>` टैग, लाइन ब्रेक के लिए `<br>` टैग और हॉरिजॉन्टल रूल के लिए `<hr>` टैग का उपयोग होता है।
सही टूल्स का उपयोग करने और सामान्य टैग्स को जानने से आप कुशलतापूर्वक वेब पेज बना सकते हैं और कंटेंट को प्रभावी ढंग से स्ट्रक्चर कर सकते हैं।
VS Code में `html:5` टाइप करके एंटर दबाने से एक पूरा HTML बॉयलरप्लेट कोड ऑटोमेटिकली जनरेट हो जाता है।
- HTML एंटिटीज का उपयोग स्पेशल कैरेक्टर्स (जैसे `<`, `>`, `&`) को डिस्प्ले करने के लिए किया जाता है, जिन्हें ब्राउज़र टैग्स के रूप में समझ सकता है।
- कमेंट्स (`<!-- comment -->`) कोड में नोट्स जोड़ने के लिए होते हैं जिन्हें ब्राउज़र रेंडर नहीं करता, यह कोड को समझने में मदद करते हैं।
- HTML एंटिटीज नंबर या स्ट्रिंग कोड के रूप में हो सकती हैं, जैसे `<` या `&`।
एंटिटीज और कमेंट्स आपको अपने कोड को अधिक पठनीय और मेंटेन करने योग्य बनाने में मदद करते हैं, साथ ही स्पेशल कैरेक्टर्स को सही ढंग से प्रदर्शित करते हैं।
`<` एंटिटी का उपयोग करके हम `<` कैरेक्टर को डिस्प्ले कर सकते हैं, ताकि ब्राउज़र उसे टैग का हिस्सा न समझे।
- बोल्ड टेक्स्ट के लिए `<b>` या `<strong>` टैग, इटैलिक टेक्स्ट के लिए `<i>` या `<em>` टैग, और स्मॉल टेक्स्ट के लिए `<small>` टैग का उपयोग किया जाता है।
- सबस्क्रिप्ट (`<sub>`) और सुपरस्क्रिप्ट (`<sup>`) टैग्स का उपयोग क्रमशः नीचे या ऊपर की ओर छोटे टेक्स्ट के लिए होता है (जैसे केमिकल फॉर्मूले या एक्सपोनेंट्स)।
- अनॉर्डड लिस्ट (`<ul>`) डॉट्स या बुलेट्स के साथ आइटम्स को लिस्ट करती है, जबकि ऑर्डर्ड लिस्ट (`<ol>`) नंबर्स या लेटर्स के साथ आइटम्स को लिस्ट करती है।
ये टैग्स आपको टेक्स्ट को विभिन्न तरीकों से फॉर्मेट करने और जानकारी को संरचित लिस्ट्स में व्यवस्थित करने की अनुमति देते हैं, जिससे वेब पेज अधिक आकर्षक और पठनीय बनते हैं।
एक शॉपिंग लिस्ट बनाने के लिए `<ul>` टैग के अंदर `<li>` टैग का उपयोग करके आइटम्स जैसे 'Milk', 'Bread' को लिस्ट किया जाता है।
Key takeaways
- HTML किसी भी वेबसाइट की संरचना का आधार है और यह मार्कअप लैंग्वेज का उपयोग करके कंटेंट को व्यवस्थित करता है।
- HTML एलिमेंट्स टैग्स से बने होते हैं, जिनमें ओपनिंग और क्लोजिंग टैग्स का अंतर समझना महत्वपूर्ण है।
- एट्रीब्यूट्स एलिमेंट्स को अतिरिक्त जानकारी और कार्यक्षमता प्रदान करते हैं, जैसे ID और क्लास।
- एक स्टैंडर्ड HTML बॉयलरप्लेट स्ट्रक्चर (DOCTYPE, html, head, body) ब्राउज़र द्वारा सही रेंडरिंग सुनिश्चित करता है।
- VS Code जैसे कोड एडिटर कोडिंग प्रक्रिया को तेज और आसान बनाते हैं।
- HTML एंटिटीज और कमेंट्स कोड की पठनीयता और स्पेशल कैरेक्टर्स के प्रदर्शन को बेहतर बनाते हैं।
- लिस्ट्स (ऑर्डर्ड और अनॉर्डर्ड) जानकारी को संरचित तरीके से प्रस्तुत करने के लिए आवश्यक हैं।
Key terms
HTMLMarkup LanguageElementTagAttributeIDClassBoilerplate CodeDOCTYPEHeadBodyVS CodeHTML EntitiesCommentsUnordered List (ul)Ordered List (ol)List Item (li)
Test your understanding
- HTML को मार्कअप लैंग्वेज क्यों कहा जाता है, प्रोग्रामिंग लैंग्वेज क्यों नहीं?
- HTML एलिमेंट्स और टैग्स के बीच क्या अंतर है और वे कैसे काम करते हैं?
- ID और क्लास एट्रीब्यूट्स का उपयोग कब और क्यों किया जाता है?
- एक बेसिक HTML डॉक्यूमेंट का स्ट्रक्चर क्या है और प्रत्येक भाग का क्या उद्देश्य है?
- HTML एंटिटीज का उपयोग क्यों आवश्यक है और कमेंट्स कोड में क्या भूमिका निभाते हैं?
- ऑर्डर्ड लिस्ट और अनॉर्डर्ड लिस्ट में क्या अंतर है और उनका उपयोग कब किया जाता है?