HTML Basic
📘 अध्याय 3: HTML Basic in Hindi
इस अध्याय में आप सीखेंगे कि एक बुनियादी HTML डॉक्युमेंट कैसा दिखता है, उसमें कौन-कौन से टैग्स अनिवार्य होते हैं, HTML के बेसिक स्ट्रक्चर को कैसे समझें, और कैसे अपना पहला HTML पेज बनाएं। यह अध्याय HTML सीखने की नींव है, इसलिए इसे ध्यान से पढ़ें।
🧱 HTML Document की Basic Structure
HTML डॉक्युमेंट एक ढांचा (structure) होता है, जिसमें कुछ आवश्यक टैग्स होते हैं। हर HTML फाइल का एक सामान्य रूप होता है:
✅ एक साधारण HTML पेज का उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>मेरा पहला वेबपेज</title>
</head>
<body>
<h1>नमस्ते दुनिया!</h1>
<p>यह मेरा पहला HTML पेज है।</p>
</body>
</html>
🔍 प्रत्येक टैग का विवरण:
| टैग | कार्य |
|---|---|
<!DOCTYPE html> |
ब्राउज़र को बताता है कि यह HTML5 डॉक्युमेंट है |
<html> |
पूरी HTML सामग्री को घेरता है |
<head> |
मेटाडेटा, टाइटल, CSS/JS लिंक आदि के लिए |
<title> |
ब्राउज़र टैब में दिखाई देने वाला टाइटल |
<body> |
यूज़र को दिखने वाली सारी सामग्री जैसे टेक्स्ट, इमेज, लिंक आदि |
📌 सामान्य HTML Tags
| टैग | उपयोग |
|---|---|
<h1> से <h6> |
हेडिंग्स (H1 सबसे बड़ी, H6 सबसे छोटी) |
<p> |
पैराग्राफ |
<a href=""> |
हाइपरलिंक |
<img src=""> |
इमेज जोड़ना |
<br> |
लाइन ब्रेक |
<hr> |
हॉरिज़ॉन्टल लाइन |
<strong>, <em> |
टेक्स्ट को बोल्ड या इटैलिक दिखाने के लिए |
🔗 Headings और Paragraphs
हेडिंग्स का उदाहरण:
<h1>यह H1 हेडिंग है</h1>
<h2>यह H2 हेडिंग है</h2>
<h3>यह H3 हेडिंग है</h3>
पैराग्राफ का उदाहरण:
<p>यह एक पैराग्राफ है जो टेक्स्ट को अलग ब्लॉक में दिखाता है।</p>
🖼️ Image जोड़ना
<img src="image.jpg" alt="My Image" width="300" height="200">
src: इमेज का URL या फाइल लोकेशनalt: इमेज ना दिखे तो टेक्स्टwidth/height: इमेज का साइज़
🔗 Hyperlink (लिंक) जोड़ना
<a href="https://www.google.com">Google पर जाएं</a>
href: लिंक का पता (URL)- टैग के बीच का टेक्स्ट, जिस पर क्लिक किया जाएगा
🧑💻 पहला HTML पेज कैसे बनाएं?
- कोई भी Text Editor खोलें (जैसे Notepad या VS Code)
- ऊपर दिया HTML कोड टाइप करें
- फ़ाइल को
.htmlएक्सटेंशन से सेव करें (जैसेindex.html) - ब्राउज़र में फाइल को ओपन करें — आपका पहला वेबपेज तैयार है!
✅ बेसिक HTML नियम
🔹 सभी टैग Angle Brackets (< >) में होते हैं
🔹 ज्यादातर टैग्स का एक Opening और Closing फॉर्म होता है
🔹 Nesting सही होनी चाहिए — टैग्स को सही क्रम में बंद करना जरूरी है
🔹 White spaces और लाइन ब्रेक्स ब्राउज़र में कोई फर्क नहीं डालते
🔹 HTML Case-insensitive है, लेकिन lowercase में लिखना अच्छा अभ्यास है
🧠 निष्कर्ष (Conclusion)
यह अध्याय आपको HTML के मूल ढांचे और आवश्यक टैग्स से परिचित कराता है। जब तक आप बेसिक स्ट्रक्चर नहीं समझते, आगे की चीजें जैसे फॉर्म, लिस्ट्स, टेबल्स, स्टाइलिंग (CSS) आदि समझना मुश्किल होता है। HTML का अभ्यास करें — एक छोटा पेज बनाएं और ब्राउज़र में देखिए क्या काम करता है और कैसे।