1. परिचय
जब हम इंटरनेट पर किसी वेबपेज को खोलते हैं, तो वह सुंदर और व्यवस्थित क्यों दिखता है? इसका उत्तर है HTML — हाइपर टेक्स्ट मार्कअप लैंग्वेज। HTML वह भाषा है जिसकी सहायता से वेबपेज बनाए जाते हैं। इसे 'वेबपेज की रीढ़' कहा जाता है। इस अध्याय में हम HTML की मूल संरचना, टैग, एट्रिब्यूट, सूचियाँ, तालिकाएँ और लिंक बनाने की तकनीकों को सीखेंगे।
2. HTML की परिभाषा
HTML (हाइपर टेक्स्ट मार्कअप लैंग्वेज) एक मार्कअप भाषा है जिसका उपयोग वेबपेजों की संरचना बनाने के लिए किया जाता है। यह कोई प्रोग्रामिंग भाषा नहीं है, बल्कि एक मार्कअप भाषा है। 'मार्कअप' का अर्थ है टैग की सहायता से टेक्स्ट को विशेष चिह्न देना। HTML द्वारा बनाए गए वेबपेज को ब्राउज़र में खोला जाता है। HTML का पूर्ण रूप है — HyperText Markup Language।
3. टैग (Tag) की अवधारणा
HTML में कार्य टैग (Tag) के माध्यम से होता है। टैग को कंपन कोष्ठक (< >) में लिखा जाता है। अधिकतर टैग जोड़े में होते हैं — प्रारंभिक टैग () और समापन टैग ()। समापन टैग में स्लैश (/) का प्रयोग होता है।
उदाहरण: यह बोल्ड है
यहाँ प्रारंभिक टैग और समापन टैग है।
HTML के मूल टैग
| टैग |
कार्य |
|
HTML दस्तावेज़ की शुरुआत |
|
दस्तावेज़ के बारे में जानकारी |
| </td>
<td>वेबपेज का शीर्षक</td>
</tr>
<tr>
<td><body></td>
<td>मुख्य सामग्री</td>
</tr>
<tr>
<td><h1> से <h6></td>
<td>शीर्षक (Heading), h1 सबसे बड़ा</td>
</tr>
<tr>
<td><p></td>
<td>पैराग्राफ</td>
</tr>
<tr>
<td><br></td>
<td>लाइन ब्रेक</td>
</tr>
<tr>
<td><hr></td>
<td>क्षैतिज रेखा</td>
</tr>
<tr>
<td><b></td>
<td>बोल्ड टेक्स्ट</td>
</tr>
<tr>
<td><i></td>
<td>इटैलिक टेक्स्ट</td>
</tr>
<tr>
<td><u></td>
<td>अंडरलाइन टेक्स्ट</td>
</tr>
<tr>
<td><center></td>
<td>टेक्स्ट केंद्र में</td>
</tr>
</tbody>
</table>
<h2 id="4-html">4. HTML दस्तावेज़ की मूल संरचना</h2>
<pre><code class="language-html"><html>
<head>
<title>मेरा पहला पेज</title>
</head>
<body>
<h1>नमस्ते दुनिया</h1>
<p>यह मेरा पहला वेबपेज है।</p>
</body>
</html>
</code></pre>
<p>इस कोड को किसी टेक्स्ट एडिटर में लिखकर 'index.html' नाम से सहेजें और ब्राउज़र में खोलें। वेबपेज में 'नमस्ते दुनिया' शीर्षक के रूप में दिखाई देगा।</p>
<h2 id="5-attribute">5. एट्रिब्यूट (Attribute)</h2>
<p>टैग को अतिरिक्त गुण देने के लिए एट्रिब्यूट का उपयोग होता है। एट्रिब्यूट टैग के भीतर लिखे जाते हैं।</p>
<p>उदाहरण: <body bgcolor="yellow"></p>
<p>यहाँ bgcolor एट्रिब्यूट है, जो पृष्ठ की पृष्ठभूमि का रंग पीला करता है।</p>
<p>सामान्य एट्रिब्यूट:
- bgcolor — पृष्ठभूमि रंग
- color — फ़ॉन्ट रंग
- size — फ़ॉन्ट आकार
- face — फ़ॉन्ट शैली
- align — संरेखण (left, right, center)
- src — स्रोत (चित्र/फ़ाइल)
- href — लिंक का पता</p>
<h2 id="6-lists">6. सूचियाँ (Lists)</h2>
<p>HTML में सूचियाँ बनाने के दो मुख्य टैग हैं:</p>
<ul>
<li><strong>क्रमित सूची (Ordered List)</strong>: <ol> टैग से बनती है। प्रत्येक आइटम <li> टैग में लिखा जाता है। इसमें 1, 2, 3... क्रमांक स्वतः लगते हैं।</li>
<li><strong>अक्रमित सूची (Unordered List)</strong>: <ul> टैग से बनती है। इसमें बुलेट (•) चिह्न लगते हैं।</li>
</ul>
<pre><code class="language-html"><ol>
<li>सेब</li>
<li>आम</li>
</ol>
<ul>
<li>लाल</li>
<li>नीला</li>
</ul>
</code></pre>
<h2 id="7-table">7. तालिका (Table)</h2>
<p>तालिका बनाने के लिए <table>, <tr>, <th> और <td> टैग का उपयोग होता है।</p>
<ul>
<li><table> — तालिका की शुरुआत</li>
<li><tr> — तालिका पंक्ति (Table Row)</li>
<li><th> — तालिका शीर्षक (Table Header)</li>
<li><td> — तालिका डेटा (Table Data)</li>
</ul>
<pre><code class="language-html"><table border="1">
<tr>
<th>नाम</th>
<th>अंक</th>
</tr>
<tr>
<td>राम</td>
<td>85</td>
</tr>
</table>
</code></pre>
<h2 id="8">8. लिंक और चित्र</h2>
<ul>
<li><strong>लिंक (Link)</strong>: <a> टैग से बनता है। <a href="https://www.google.com">गूगल</a></li>
<li><strong>चित्र (Image)</strong>: <img> टैग से चित्र डाला जाता है। <img src="photo.jpg" width="200" height="150"></li>
</ul>
<h2 id="9">9. टेक्स्ट स्वरूपण और फ़ॉन्ट</h2>
<p>HTML में टेक्स्ट का स्वरूप बदलने के लिए फ़ॉन्ट टैग और एट्रिब्यूट का उपयोग होता है।</p>
<ul>
<li><strong>फ़ॉन्ट रंग</strong>: <font color="red">लाल रंग</font> — यहाँ color एट्रिब्यूट रंग बदलता है।</li>
<li><strong>फ़ॉन्ट आकार</strong>: <font size="5">बड़ा आकार</font> — size एट्रिब्यूट अक्षर का आकार बढ़ाता है।</li>
<li><strong>फ़ॉन्ट शैली</strong>: <font face="Arial">एरियल शैली</font> — face एट्रिब्यूट अक्षर की शैली बदलता है।</li>
</ul>
<p>इसके अतिरिक्त <sub> टैग नीचे की ओर लिखता है (जैसे H₂O में 2) और <sup> टैग ऊपर की ओर लिखता है (जैसे x² में 2)। HTML में एक से अधिक खाली स्थान (Space) एक साथ स्वतः नहीं दिखते; उनके लिए विशेष चिह्न ' ' का उपयोग किया जाता है। वेबपेज की पृष्ठभूमि का रंग body टैग में bgcolor एट्रिब्यूट लगाकर बदला जा सकता है, जैसे <body bgcolor="lightblue">।</p>
<h3 id="_1">वेबपेज बनाते समय ध्यान देने योग्य बातें</h3>
<ol>
<li>प्रत्येक टैग को सही क्रम में खोलें और बंद करें।</li>
<li>टेक्स्ट को उचित शीर्षक टैग (h1 से h6) में रखें।</li>
<li>सामग्री को पैराग्राफ में व्यवस्थित करें।</li>
<li>फ़ाइल का नाम सरल और याद रखने योग्य रखें, जैसे home.html।</li>
<li>ब्राउज़र में परिणाम देखते समय बदलावों के लिए रिफ्रेश करें।</li>
</ol>
<h3 id="91">9.1 अन्य उपयोगी टैग</h3>
<div> टैग का उपयोग वेबपेज की सामग्री को अलग-अलग बक्सों (खंडों) में विभाजित करने के लिए होता है, जिससे पेज का लेआउट व्यवस्थित रहता है। <marquee> टैग से टेक्स्ट को पृष्ठ पर घुमाया जा सकता है, हालाँकि आधुनिक वेब डिज़ाइन में इसका उपयोग कम होता है। HTML में टिप्पणी (Comment) लिखने के लिए <!-- ... --> चिह्नों का प्रयोग होता है, जो ब्राउज़र में दिखाई नहीं देती, केवल कोड में समझ के लिए रहती है। सामग्री को ऊपर-नीचे रखने के लिए <header> और <footer> टैग भी प्रयोग किए जाते हैं। इन टैगों के साथ अभ्यास करने से हमारी वेबपेज निर्माण की समझ मजबूत होती है और हम अधिक सुंदर पेज बना पाते हैं।
## 10. वेबपेज बनाने के चरण
1. कोई टेक्स्ट एडिटर खोलें (नोटपैड, नोटपैड++).
2. HTML कोड लिखें।
3. फ़ाइल को '.html' एक्सटेंशन के साथ सहेजें।
4. फ़ाइल को ब्राउज़र में खोलें।
5. यदि बदलाव करें तो सहेजें और ब्राउज़र में रिफ्रेश करें।
## त्वरित पुनरावृत्ति तालिकाएँ
### तालिका 1: HTML के मूल टैग
| टैग | कार्य |
| --- | --- |
| <html> | दस्तावेज़ की शुरुआत |
| <head> | जानकारी भाग |
| <title> | शीर्षक |
| <body> | मुख्य सामग्री |
| <h1>-<h6> | शीर्षक |
| <p> | पैराग्राफ |
| <br> | लाइन ब्रेक |
### तालिका 2: सूची व तालिका टैग
| टैग | कार्य |
| --- | --- |
| <ol> | क्रमित सूची |
| <ul> | अक्रमित सूची |
| <li> | सूची आइटम |
| <table> | तालिका |
| <tr> | पंक्ति |
| <th> | शीर्षक सेल |
| <td> | डेटा सेल |
### तालिका 3: सामान्य एट्रिब्यूट
| एट्रिब्यूट | कार्य | उदाहरण |
| --- | --- | --- |
| bgcolor | पृष्ठभूमि रंग | bgcolor="yellow" |
| align | संरेखण | align="center" |
| href | लिंक पता | href="page.html" |
| src | चित्र स्रोत | src="pic.jpg" |
## माइंड मैप
<div class="mermaid">
graph TD
A["HTML"] --> B["मूल संरचना"]
A --> C["टैग"]
A --> D["एट्रिब्यूट"]
A --> E["सूचियाँ व तालिका"]
B --> B1["html, head, title, body"]
C --> C1["h1-h6, p, br, hr"]
C --> C2["b, i, u"]
D --> D1["bgcolor, align"]
D --> D2["href, src"]
E --> E1["ol, ul, li"]
E --> E2["table, tr, th, td"]
</div>
## महत्वपूर्ण आरेख (SVG)
### आरेख 1: HTML दस्तावेज़ की संरचना
<div style="text-align: center; margin: 20px 0;">
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" font-family="Arial, sans-serif">
<rect width="100%" height="100%" fill="#f0fdf4" rx="10"/>
<text x="400" y="70" font-size="26" font-weight="bold" text-anchor="middle" fill="#14532d">HTML दस्तावेज़ की संरचना</text>
<rect x="200" y="110" width="400" height="60" rx="8" fill="#16a34a"/>
<text x="400" y="140" font-size="17" font-weight="bold" text-anchor="middle" fill="#ffffff"><html></text>
<text x="400" y="162" font-size="12" text-anchor="middle" fill="#dcfce7">पूरे दस्तावेज़ का प्रारंभ</text>
<rect x="260" y="200" width="280" height="90" rx="8" fill="#65a30d"/>
<text x="400" y="230" font-size="16" font-weight="bold" text-anchor="middle" fill="#ffffff"><head></text>
<text x="400" y="255" font-size="14" text-anchor="middle" fill="#f7fee7"><title> शीर्षक </title></text>
<text x="400" y="278" font-size="12" text-anchor="middle" fill="#f7fee7">जानकारी भाग</text>
<rect x="260" y="320" width="280" height="140" rx="8" fill="#22c55e"/>
<text x="400" y="350" font-size="16" font-weight="bold" text-anchor="middle" fill="#ffffff"><body></text>
<text x="400" y="375" font-size="14" text-anchor="middle" fill="#f0fdf4"><h1> शीर्षक </h1></text>
<text x="400" y="398" font-size="14" text-anchor="middle" fill="#f0fdf4"><p> पैराग्राफ </p></text>
<text x="400" y="421" font-size="14" text-anchor="middle" fill="#f0fdf4"><br> लाइन ब्रेक</text>
<text x="400" y="444" font-size="12" text-anchor="middle" fill="#f0fdf4">मुख्य सामग्री</text>
<rect x="200" y="490" width="400" height="55" rx="8" fill="#16a34a"/>
<text x="400" y="520" font-size="17" font-weight="bold" text-anchor="middle" fill="#ffffff"></html></text>
<text x="400" y="540" font-size="12" text-anchor="middle" fill="#dcfce7">दस्तावेज़ का समापन</text>
<rect x="120" y="565" width="560" height="30" rx="8" fill="#FFD700"/>
<text x="400" y="585" font-size="15" font-weight="bold" text-anchor="middle" fill="#78350f">स्वर्ण नियम: head के बाद body आता है, body की सामग्री ही दिखती है</text>
</svg>
</div>
### आरेख 2: सूचियों के प्रकार
<div style="text-align: center; margin: 20px 0;">
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" font-family="Arial, sans-serif">
<rect width="100%" height="100%" fill="#faf5ff" rx="10"/>
<text x="400" y="70" font-size="26" font-weight="bold" text-anchor="middle" fill="#4c1d95">HTML सूचियाँ</text>
<rect x="80" y="130" width="300" height="330" rx="10" fill="#7c3aed"/>
<text x="230" y="165" font-size="19" font-weight="bold" text-anchor="middle" fill="#ffffff">क्रमित सूची (<ol>)</text>
<text x="230" y="210" font-size="16" text-anchor="middle" fill="#ede9fe">1. सेब</text>
<text x="230" y="245" font-size="16" text-anchor="middle" fill="#ede9fe">2. आम</text>
<text x="230" y="280" font-size="16" text-anchor="middle" fill="#ede9fe">3. केला</text>
<text x="230" y="320" font-size="13" text-anchor="middle" fill="#ede9fe">क्रमांक स्वतः लगते हैं</text>
<text x="230" y="345" font-size="13" text-anchor="middle" fill="#ede9fe">1, 2, 3...</text>
<rect x="420" y="130" width="300" height="330" rx="10" fill="#16a34a"/>
<text x="570" y="165" font-size="19" font-weight="bold" text-anchor="middle" fill="#ffffff">अक्रमित सूची (<ul>)</text>
<text x="570" y="210" font-size="16" text-anchor="middle" fill="#dcfce7">• सेब</text>
<text x="570" y="245" font-size="16" text-anchor="middle" fill="#dcfce7">• आम</text>
<text x="570" y="280" font-size="16" text-anchor="middle" fill="#dcfce7">• केला</text>
<text x="570" y="320" font-size="13" text-anchor="middle" fill="#dcfce7">बुलेट चिह्न लगते हैं</text>
<text x="570" y="345" font-size="13" text-anchor="middle" fill="#dcfce7">• चिह्न</text>
<text x="230" y="390" font-size="14" font-weight="bold" text-anchor="middle" fill="#ffffff"><li> = सूची आइटम</text>
<text x="570" y="390" font-size="14" font-weight="bold" text-anchor="middle" fill="#ffffff"><li> = सूची आइटम</text>
<rect x="150" y="490" width="500" height="50" rx="10" fill="#ffffff" stroke="#4c1d95" stroke-width="2"/>
<text x="400" y="518" font-size="15" text-anchor="middle" fill="#4c1d95">हर आइटम <li>...</li> के बीच लिखा जाता है</text>
<text x="400" y="538" font-size="14" text-anchor="middle" fill="#4c1d95">ol में क्रमांक, ul में बुलेट</text>
<rect x="150" y="550" width="500" height="40" rx="10" fill="#FFD700" stroke="#b45309" stroke-width="2"/>
<text x="400" y="575" font-size="16" font-weight="bold" text-anchor="middle" fill="#78350f">Golden Rule: ol = क्रमित, ul = अक्रमित</text>
</svg>
</div>
## सामान्य गलतियाँ
1. **समापन टैग में स्लैश (/) न लगाना**: हर प्रारंभिक टैग (<b>) का समापन टैग (</b>) स्लैश के साथ लिखना चाहिए।
2. **टैग के बीच में खाली जगह रखना**: < body > गलत है; सही है <body>।
3. **टैग को बड़े या छोटे अक्षरों में गलत लिखना**: HTML टैग केस-सेंसिटिव नहीं होते, परंतु सामान्यतः छोटे अक्षरों में लिखने का रिवाज है।
4. **क्रमित और अक्रमित सूची में भ्रम**: <ol> क्रमित है, <ul> अक्रमित।
5. **<th> और <td> को उलटना**: <th> शीर्षक सेल है, <td> डेटा सेल।
6. **img टैग का समापन करना**: <img> स्वतः समाप्त होने वाला टैग है; इसमें </img> की आवश्यकता नहीं।
7. **title को body में रखना**: <title> हमेशा <head> के अंदर लिखा जाता है।
## परीक्षा युक्तियाँ
1. HTML का पूर्ण रूप और उसकी परिभाषा याद रखें — हाइपर टेक्स्ट मार्कअप लैंग्वेज।
2. मूल संरचना — html, head, title, body — का क्रम लिखना आए।
3. टैग और एट्रिब्यूट में अंतर समझाएं — टैग संरचना देता है, एट्रिब्यूट गुण।
4. क्रमित व अक्रमित सूची के उदाहरण कोड लिखें।
5. तालिका के टैग table, tr, th, td के उपयोग का कोड दिखाएं।
6. एट्रिब्यूट bgcolor, align, href, src के उदाहरण याद रखें।
7. वेबपेज बनाने के चरणों का क्रम लिखें — लिखें, .html सहेजें, ब्राउज़र में खोलें।
## निष्कर्ष
HTML वेबपेज निर्माण की आधारभूत भाषा है। टैग की सहायता से हम वेबपेज को संरचना देते हैं, एट्रिब्यूट उसे गुण प्रदान करते हैं। सूचियाँ, तालिकाएँ, लिंक और चित्र मिलकर एक संपूर्ण वेबपेज बनाते हैं। HTML सीखना वेब डिज़ाइन की पहली सीढ़ी है। आगे प्रोग्रामिंग के अध्याय में हम जानेंगे कि कंप्यूटर को कैसे निर्देश दिए जाते हैं, जो हमें वेब विकास और सॉफ्टवेयर निर्माण की दिशा में आगे ले जाएगा।
</div>
</div>
<div class="adsense-slot" style="margin-bottom:20px;">
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8365906758934350" data-ad-slot="auto" data-ad-format="auto" data-full-width-responsive="true"></ins>
</div>
<!-- Mermaid JS -->
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({startOnLoad:true, theme: 'dark'});
</script>
<button id="scrollToTopBtn" title="Go to top">↑</button>
<script>
// Reading Progress
window.addEventListener('scroll', () => {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
const bar = document.getElementById('reading-progress-bar');
if (bar) bar.style.width = scrolled + '%';
// Scroll to Top Button Visibility
const topBtn = document.getElementById('scrollToTopBtn');
if (topBtn) {
if (winScroll > 300) {
topBtn.style.display = 'block';
} else {
topBtn.style.display = 'none';
}
}
});
document.getElementById('scrollToTopBtn')?.addEventListener('click', () => {
window.scrollTo({top: 0, behavior: 'smooth'});
});
// Font Size Control
document.addEventListener('DOMContentLoaded', () => {
const notesBody = document.getElementById('notes-body-content');
const btnIncrease = document.getElementById('btn-font-increase');
const btnDecrease = document.getElementById('btn-font-decrease');
let fontMultiplier = 1.0;
if (notesBody && btnIncrease && btnDecrease) {
btnIncrease.addEventListener('click', () => {
if (fontMultiplier < 1.5) fontMultiplier += 0.1;
notesBody.style.fontSize = fontMultiplier + 'em';
});
btnDecrease.addEventListener('click', () => {
if (fontMultiplier > 0.7) fontMultiplier -= 0.1;
notesBody.style.fontSize = fontMultiplier + 'em';
});
}
});
</script>
<script src="/app.js"></script>
<footer class="footer" style="margin-top: 3rem; text-align: center; padding: 2rem; background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.1);">
<p style="font-size: 0.85rem; color: var(--text-muted); max-width: 800px; margin: 0 auto; line-height: 1.6;">
<strong>Disclaimer / अस्वीकरण:</strong> The study materials provided are for educational reference purposes only. Please verify the most up-to-date syllabus and content directly on the official <a href="https://ncert.nic.in" target="_blank" rel="nofollow noopener" style="color: var(--primary); text-decoration: underline;">NCERT website</a>. (प्रदान की गई अध्ययन सामग्री केवल शैक्षिक संदर्भ के लिए है। कृपया नवीनतम पाठ्यक्रम के लिए आधिकारिक NCERT वेबसाइट देखें।)
</p>
<p style="margin-top: 1rem;">© 2026 CodeNest Studios | <a href="https://codeneststudios.com">codeneststudios.com</a></p>
</footer>
</body>
</html> |