जिनेवा, स्विट्जरलैंड में CERN कण भौतिकी प्रयोगशाला में काम कर रहे थे। दर्जनों देशों के हजारों वैज्ञानिक जटिल कण प्रयोग चला रहे थे, लेकिन उनके कंप्यूटर एक-दूसरे से बात नहीं कर पा रहे थे। दस्तावेज़ खो जाने से निराश होकर, बर्नर्स-ली ने कोणीय कोष्ठक (`< >`) का उपयोग करके एक सरल, टेक्स्ट-आधारित फ़ॉर्मेटिंग भाषा का आविष्कार किया, जिसने दस्तावेज़ों को इंटरनेट केबलों पर अन्य दस्तावेज़ों से लिंक करने की अनुमति दी:
! आज, पृथ्वी पर हर एक वेबसाइट—यूट्यूब और विकिपीडिया से लेकर गूगल और अमेज़ॅन तक—अपने विज़ुअल ढांचे के निर्माण के लिए HTML पर निर्भर है! क्या आप कोई खेल टूर्नामेंट स्कोरबोर्ड प्रदर्शित करना चाहते हैं? `
` और `` का उपयोग करके एक HTML तालिका बनाएं! क्या आप तीन स्तंभों को एक साथ मिलाना चाहते हैं? तैनाती `colspan="3"`! क्या आप किसी विज़िटर को दुनिया भर में किसी अन्य पेज से लिंक करना चाहते हैं? एंकर टैग `` का उपयोग करें! आइए HTML की उन्नत सुविधाओं में महारत हासिल करें।
यह अध्याय क्यों महत्वपूर्ण है
HTML इंटरनेट और वेब डिज़ाइन की मूलभूत प्रोग्रामिंग भाषा है। HTML तालिकाओं, मल्टीमीडिया एम्बेडिंग, हाइपरलिंक और इंटरैक्टिव फॉर्म में महारत हासिल करना फ्रंटएंड वेब डेवलपमेंट और ICSE कंप्यूटर परीक्षाओं के लिए आवश्यक प्रवेश बिंदु है।
अध्ययन से पूर्व (आवश्यक ज्ञान)
- कक्षा 6 से मूल HTML टैग: `, , , <body>, <h1> to <h6>, <p>, <br>, <hr>`.</li>
<li>एक सादे पाठ संपादक (नोटपैड) और एक वेब ब्राउज़र (Google क्रोम) के साथ काम करना।</li>
<li>फ़ाइल पथ और छवि प्रारूपों को समझना (.jpg, .png).</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="sm-section-card h-100 mb-0" style="background: #f0fdf4; border-color: #bbf7d0;">
<div class="sm-sec-head" style="border-color: #dcfce7; margin-bottom: 10px;">
<i class="fa-solid fa-bullseye" style="color: #16a34a;"></i>
<h3 style="color: #14532d; font-size: 1.05rem; margin: 0; font-weight: 700;">इस अध्याय के लक्ष्य</h3>
</div>
<ul style="margin: 0; padding-left: 20px; color: #166534; font-size: 13.5px; line-height: 1.7;">
<li>`<table>, <tr>, <th>`, और `<td>` टैग का उपयोग करके HTML में जटिल, स्टाइल वाली तालिकाओं का निर्माण करें।</li>
<li>`border, cellpadding, cellspacing, colspan`, और `rowspan` सहित तालिका विशेषताओं को लागू करें।</li>
<li>HTML5 `<audio>` और `<video>` का उपयोग करके वेबपेजों में ऑडियो और वीडियो मल्टीमीडिया एम्बेड करें। टैग.</li>
<li>एंकर टैग `<a>` का उपयोग करके निरपेक्ष और सापेक्ष यूआरएल के साथ आंतरिक और बाहरी हाइपरलिंक बनाएं।</li>
<li>`<input>` (टेक्स्ट, रेडियो, चेकबॉक्स), `<textarea>`, और `<select>` का उपयोग करके इंटरैक्टिव वेब फॉर्म डिज़ाइन करें।</li>
<li>समस्या निवारण करें और स्वच्छ, अर्थपूर्ण HTML5 कोड लिखें।</li>
</ul>
</div>
</div>
</div>
<!-- Chapter Roadmap -->
<div class="sm-section-card" style="background:#ffffff; border:1px solid #e2e8f0; margin-bottom:24px;">
<div class="sm-sec-head" style="margin-bottom:12px;">
<i class="fa-solid fa-map-location-dot" style="color:#6366f1;"></i>
<h2 style="color:#1e293b; font-size:1.15rem;">अध्याय रूपरेखा एवं प्रगति</h2>
</div>
<div style="display:flex; flex-wrap:wrap; align-items:center; gap:8px;">
<div style="background:#f1f5f9; color:#0f172a; border:1px solid #cbd5e1; border-radius:6px; padding:6px 12px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px;">
<span style="background:#3b82f6; color:#ffffff; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;">1</span>
<span>1। HTML टेबल्स: आर्किटेक्चर और कोर...</span>
</div>
<i class="fa-solid fa-arrow-right" style="color:#94a3b8; font-size:11px;"></i>
<div style="background:#f1f5f9; color:#0f172a; border:1px solid #cbd5e1; border-radius:6px; padding:6px 12px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px;">
<span style="background:#3b82f6; color:#ffffff; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;">2</span>
<span>2. टेबल सेल को मर्ज करना: कोलस्पैन...</span>
</div>
<i class="fa-solid fa-arrow-right" style="color:#94a3b8; font-size:11px;"></i>
<div style="background:#f1f5f9; color:#0f172a; border:1px solid #cbd5e1; border-radius:6px; padding:6px 12px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px;">
<span style="background:#3b82f6; color:#ffffff; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;">3</span>
<span>3. HTML में मल्टीमीडिया और हाइपरलिं...</span>
</div>
<i class="fa-solid fa-arrow-right" style="color:#94a3b8; font-size:11px;"></i>
<div style="background:#f1f5f9; color:#0f172a; border:1px solid #cbd5e1; border-radius:6px; padding:6px 12px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px;">
<span style="background:#3b82f6; color:#ffffff; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;">4</span>
<span>4. इंटरएक्टिव वेब फॉर्म</span>
</div>
</div>
</div>
</div>
<!-- Section 1: Complete Concept & Theory Walkthrough -->
<div class="sm-section-card" id="theory">
<div class="sm-sec-head">
<i class="fa-solid fa-book-bookmark"></i>
<h2>सम्पूर्ण सैद्धांतिक एवं वैचारिक अध्ययन</h2>
</div>
<div class="sm-theory-block">
<h3>1। HTML टेबल्स: आर्किटेक्चर और कोर टैग</h3>
<div class="body-text"><div class="theory-facet">
<span class="badge bg-primary text-white mb-2">समझें</span>
<h5>ए. तालिका संरचना:</h5>
<p>टेबल्स चार मुख्य टैग का उपयोग करके डेटा को पंक्तियों और स्तंभों के दो-आयामी ग्रिड में व्यवस्थित करते हैं:</p>
<ul>
<li><code><तालिका>...</तालिका></code>: तालिका को परिभाषित करने वाला मुख्य कंटेनर।</li>
<li><code><tr>...</tr></code>: <strong>टेबल पंक्ति</strong> को परिभाषित करता है।</li>
<li><code><th>...</th></code>: एक <strong>टेबल हेडर</strong> सेल को परिभाषित करता है (टेक्स्ट डिफ़ॉल्ट रूप से <strong>बोल्ड और सेंटर्ड</strong> होता है)।</li>
<li><code><td>...</td></code>: एक <strong>तालिका डेटा</strong> सेल (नियमित, बाएँ-संरेखित पाठ) को परिभाषित करता है।</li>
</ul>
<h5>बी. तालिका विशेषताएँ:</h5>
<ul>
<li><code>बॉर्डर='2'</code>: टेबल बॉर्डर फ्रेम की मोटाई निर्दिष्ट करता है।</li>
<li><code>सेलपैडिंग='10'</code>: <strong>सेल दीवार और उसके अंदर की सामग्री</strong> के बीच पिक्सेल दूरी।</li>
<li><code>सेलस्पेसिंग='5'</code>: पिक्सेल दूरी <strong>आसन्न कोशिकाओं के बीच</strong>.</li>
<li><code>bgcolor='lightblue'</code>: तालिका, पंक्ति या सेल का पृष्ठभूमि रंग सेट करता है।</li>
</ul>
</div></div>
</div>
<div class="sm-theory-block">
<h3>2. टेबल सेल को मर्ज करना: कोलस्पैन और रोस्पैन</h3>
<div class="body-text"><div class="theory-facet">
<span class="badge bg-primary text-white mb-2">सेल मर्जिंग</span>
<h5>ए. कोलस्पैन (कॉलम स्पैनिंग):</h5>
<p>दो या दो से अधिक क्षैतिज स्तंभों को एक ही कक्ष में विलय करता है:</p>
<pre><code><td colspan='3'>3 कॉलम में विलय</td></code></pre>
<h5>बी. रोस्पैन (पंक्ति स्पैनिंग):</h5>
<p>दो या दो से अधिक ऊर्ध्वाधर पंक्तियों को एक एकल कक्ष में विलय करता है:</p>
<pre><code><td rowspan='2'>2 पंक्तियों में लंबवत रूप से विलय</td></code></pre>
</div></div>
</div>
<div class="sm-theory-block">
<h3>3. HTML में मल्टीमीडिया और हाइपरलिंक</h3>
<div class="body-text"><div class="theory-facet">
<span class="badge bg-primary text-white mb-2">मीडिया और लिंक</span>
<h5>ए. ऑडियो और वीडियो एम्बेडिंग (HTML5):</h5>
<ul>
<li><strong>ऑडियो टैग:</strong>
<pre><code><ऑडियो नियंत्रण>
<स्रोत src='music.mp3' प्रकार='ऑडियो/mpeg'>
</ऑडियो></code></pre>
</li>
<li><strong>वीडियो टैग:</strong>
<pre><code><वीडियो चौड़ाई='480' ऊंचाई='320' नियंत्रण>
<स्रोत src='movie.mp4' प्रकार='वीडियो/mp4'>
</वीडियो></code></pre>
</li>
</ul>
<h5>बी. एंकर टैग के साथ हाइपरलिंकिंग <code><a></code>:</h5>
<p> <code>href</code> (हाइपरटेक्स्ट संदर्भ) विशेषता गंतव्य URL निर्दिष्ट करती है:</p>
<ul>
<li><em>बाहरी लिंक:</em> <code><a href='https://targetexams.com' target='_blank'> TargetExams पर जाएं</a></code></li>
<li><em>ईमेल लिंक:</em> <code><a href="mailto:info@school.com">हमें ईमेल करें</a></code></li>
</ul>
</div></div>
</div>
<div class="sm-theory-block">
<h3>4. इंटरएक्टिव वेब फॉर्म</h3>
<div class="body-text"><div class="theory-facet">
<span class="badge bg-primary text-white mb-2">फॉर्म</span>
<p><code><form></code> टैग विभिन्न जीयूआई इनपुट नियंत्रणों के माध्यम से उपयोगकर्ता इनपुट एकत्र करता है:</p>
<ul>
<li><code><इनपुट प्रकार='पाठ' नाम='उपयोगकर्ता नाम'></code>: एकल-पंक्ति पाठ इनपुट.</li>
<li><code><इनपुट प्रकार='पासवर्ड' नाम='पीडब्ल्यूडी'></code>: टाइप किए गए अक्षरों को बिंदुओं से छिपाता है।</li>
<li><code><इनपुट प्रकार='रेडियो' नाम='लिंग' मूल्य='एम'></code>: परस्पर अनन्य रेडियो बटन।</li>
<li><code><इनपुट प्रकार='चेकबॉक्स' नाम='शौक'></code>: एकाधिक चयन की अनुमति देता है।</li>
<li><code><textarea rows='4' cols='30'></textarea></code>: टिप्पणियों के लिए मल्टी-लाइन टेक्स्ट बॉक्स।</li>
<li><code><input type='submit' value='Submit'></code>: सर्वर पर फॉर्म डेटा सबमिट करता है।</li>
</ul>
</div></div>
</div>
</div>
<!-- Section 1.5: Formulas & Key Scientific Facts / Key Terms & Chronology -->
<div class="sm-section-card" id="formulas">
<div class="sm-sec-head">
<i class="fa-solid fa-laptop-code" style="color:#0284c7;"></i>
<h2>
प्रोग्रामिंग सिंटेक्स, स्टेटमेंट्स एवं भाषा अनुवादक नियम
</h2>
</div>
<div class="sm-formula-grid">
<div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;">
<div>
<div class="f-name">टेबल सेल दूरी नियम</div>
<div class="f-val">$$\text{Cellpadding = Space (Wall to Text)} \quad \Big| \quad \text{Cellspacing = Space (Cell to Cell)}$$</div>
</div>
<div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> HTML तालिका स्वरूपण में महत्वपूर्ण अंतर।</div>
</div>
<div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;">
<div>
<div class="f-name">एंकर टैग सिंटैक्स</div>
<div class="f-val">$$<a \text{ href}=\"\text{URL}\" \text{ target}=\"\_blank\">\text{Clickable Text}</a>$$</div>
</div>
<div class="f-note"><i class="fa-solid fa-circle-info me-1"></i> Target='_blank' नए टैब में गंतव्य खोलता है।</div>
</div>
</div>
</div>
<!-- Section 1.6: Solved Examples & Application Questions -->
<!-- Section 1.7: Common Examiner Traps & Misconceptions -->
<!-- Section 2: Visual Learning Models (if available) -->
<div class="sm-section-card" id="visuals">
<div class="sm-sec-head">
<i class="fa-solid fa-chart-line" style="color:#07a698;"></i>
<h2>वेब विकास: टेबल सेल स्पेसिंग, कोलस्पैन और फॉर्म एलिमेंट्स</h2>
</div>
<div style="background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center;overflow-x:auto;">
<svg viewBox="0 0 800 380" xmlns="http://www.w3.org/2000/svg" style="max-width:100%;height:auto;font-family:system-ui,-apple-system,sans-serif;">
<rect width="800" height="380" fill="#f8fafc" rx="12"/>
<text x="400" y="32" font-size="18" font-weight="700" fill="#0f172a" text-anchor="middle">HTML5 Advanced: Tables, Cell Merging & Web Forms</text>
<!-- Left Box: Table Attributes -->
<rect x="50" y="65" width="335" height="235" rx="8" fill="#eff6ff" stroke="#2563eb" stroke-width="1.5"/>
<text x="217" y="90" font-size="12" font-weight="700" fill="#1e40af" text-anchor="middle">TABLE ANATOMY & MERGING</text>
<!-- Merged Table Graphic -->
<rect x="75" y="115" width="285" height="25" fill="#dbeafe" stroke="#0f172a"/>
<text x="217" y="132" font-size="9" font-weight="700" fill="#1e40af" text-anchor="middle"><td colspan="2"> Merged Horizontally</text>
<rect x="75" y="140" width="130" height="40" fill="#dcfce7" stroke="#0f172a"/>
<text x="140" y="165" font-size="8" font-weight="700" fill="#15803d" text-anchor="middle"><td rowspan="2"></text>
<rect x="205" y="140" width="155" height="20" fill="#ffffff" stroke="#0f172a"/>
<text x="282" y="154" font-size="8" text-anchor="middle">Cell B1</text>
<rect x="205" y="160" width="155" height="20" fill="#ffffff" stroke="#0f172a"/>
<text x="282" y="174" font-size="8" text-anchor="middle">Cell B2</text>
<text x="70" y="205" font-size="10" font-weight="700" fill="#0f172a">• Cellpadding vs Cellspacing:</text>
<text x="85" y="222" font-size="9" fill="#334155">Cellpadding: Space between cell wall & text</text>
<text x="85" y="238" font-size="9" fill="#334155">Cellspacing: Space between two adjacent cells</text>
<text x="70" y="265" font-size="9" fill="#2563eb">• <th> = Bold & Centered • <td> = Regular data</text>
<text x="70" y="285" font-size="9" font-weight="700" fill="#1e40af">• <a href="url"> Anchor tag creates Hyperlinks</text>
<!-- Right Box: Web Forms -->
<rect x="415" y="65" width="335" height="235" rx="8" fill="#f0fdf4" stroke="#16a34a" stroke-width="1.5"/>
<text x="582" y="90" font-size="12" font-weight="700" fill="#15803d" text-anchor="middle">INTERACTIVE HTML FORMS</text>
<text x="435" y="118" font-size="10" font-weight="700" fill="#15803d">• Form Input Controls:</text>
<text x="450" y="135" font-size="9" fill="#334155"><input type="text"> • Single-line text input</text>
<text x="450" y="152" font-size="9" fill="#334155"><input type="password"> • Masks characters</text>
<text x="450" y="170" font-size="9" fill="#334155"><input type="radio"> • Mutually exclusive choice</text>
<text x="450" y="188" font-size="9" fill="#334155"><input type="checkbox"> • Multiple selections</text>
<text x="450" y="206" font-size="9" fill="#334155"><textarea> • Multi-line comments box</text>
<text x="435" y="235" font-size="10" font-weight="700" fill="#2563eb">• Multimedia Tags (HTML5):</text>
<text x="450" y="252" font-size="9" fill="#334155"><audio controls> • Plays MP3 / WAV audio</text>
<text x="450" y="268" font-size="9" fill="#334155"><video controls> • Embeds MP4 video with controls</text>
<text x="435" y="288" font-size="9" fill="#15803d">• Submit button sends data to server</text>
<!-- Bottom Bar -->
<rect x="50" y="315" width="700" height="45" rx="6" fill="#1e293b"/>
<text x="400" y="342" font-size="11" font-weight="700" fill="#38bdf8" text-anchor="middle">COLSPAN MERGES COLUMNS • ROWSPAN MERGES ROWS • FORMS GATHER USER DATA</text>
</svg>
</div>
</div>
<!-- Section 3: Chapter Summary (Consolidated Mastery Recap) -->
<div class="sm-section-card" id="summary" style="background: #faf5ff; border-color: #e9d5ff;">
<div class="sm-sec-head" style="border-color: #f3e8ff;">
<i class="fa-solid fa-clipboard-check" style="color: #7c3aed;"></i>
<h2 style="color: #581c87;">अध्याय का सार संक्षेप एवं 10 मुख्य निष्कर्ष</h2>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 10px;">
<div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
<div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 1</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">एक HTML तालिका का उपयोग करके परिभाषित किया गया है <table>, तालिका पंक्तियाँ <tr> का उपयोग करती हैं, और डेटा सेल <td> का उपयोग करती हैं।</div>
</div>
<div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
<div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 2</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">टेबल हेडर (<th>) डिफ़ॉल्ट रूप से बोल्ड, केंद्रित टेक्स्ट प्रदर्शित करते हैं।</div>
</div>
<div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
<div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 3</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">सेलपैडिंग सेल दीवार और टेक्स्ट के बीच आंतरिक मार्जिन को नियंत्रित करता है।</div>
</div>
<div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
<div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 4</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">सेलस्पेसिंग आसन्न कोशिकाओं के बीच भौतिक दूरी को नियंत्रित करता है।</div>
</div>
<div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
<div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 5</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">कोलस्पैन अनेक स्तंभों को क्षैतिज रूप से विलीन करता है; Rowspan कई पंक्तियों को लंबवत रूप से मर्ज करता है।</div>
</div>
<div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
<div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 6</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">HTML5 <audio controls> और <video controls> बिना प्लगइन के ध्वनि और वीडियो को एम्बेड करता है।</div>
</div>
<div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
<div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 7</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">हाइपरलिंक एंकर टैग <a href="URL"> का उपयोग करके बनाए जाते हैं; target='_blank' एक नए टैब में खुलता है।</div>
</div>
<div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
<div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 8</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">HTML फॉर्म वेबपेजों पर उपयोगकर्ता इनपुट इकट्ठा करने के लिए <form> कंटेनर का उपयोग करते हैं।</div>
</div>
<div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
<div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 9</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">फॉर्म नियंत्रण में टेक्स्ट फ़ील्ड, पासवर्ड मास्क, रेडियो बटन, चेकबॉक्स और टेक्स्टक्षेत्र शामिल हैं।</div>
</div>
<div style="background: #ffffff; border: 1px solid #f3e8ff; border-left: 4px solid #7c3aed; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
<div style="font-size: 11px; font-weight: 800; color: #7c3aed; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">मुख्य बिंदु 10</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">एक सबमिट बटन (<input type="submit">) फॉर्म डेटा को प्रोसेसिंग के लिए सर्वर तक पहुंचाता है।</div>
</div>
</div>
</div>
<!-- Section 4: Self-Assessment Diagnostics (Bridging to CBT Test) -->
<div class="sm-section-card" id="selfcheck" style="border-color: #cbd5e1;">
<div class="sm-sec-head">
<i class="fa-solid fa-pen-to-square" style="color: #0284c7;"></i>
<h2>स्व-मूल्यांकन अभ्यास (Check Your Understanding)</h2>
</div>
<p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">मूल वैचारिक स्पष्टता की जांच के लिए नैदानिक प्रश्न। पहले स्वयं हल करें, फिर उत्तर देखें।</p>
<div style="display: flex; flex-direction: column; gap: 14px;">
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;">
<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;">
<span style="background: #0284c7; color: #ffffff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;">1</span>
<div style="font-weight: 600; color: #0f172a; font-size: 14.5px; line-height: 1.5; flex-grow: 1;">के बीच अंतर करें HTML तालिका की "सेलपैडिंग" और "सेलस्पेसिंग" विशेषताएँ।</div>
</div>
<details style="margin-top: 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; cursor: pointer;">
<summary style="font-size: 13px; font-weight: 700; color: #0369a1; user-select: none;">
<i class="fa-solid fa-eye me-1"></i> उत्तर एवं व्याख्या देखें
</summary>
<div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13.5px; color: #0f172a; line-height: 1.6;">
<strong style="color: #15803d;">उत्तर:</strong> <p>• <strong>सेलपैडिंग:</strong> किसी सेल की <strong>सीमा दीवार और उसके अंदर की सामग्री/पाठ</strong> के बीच पिक्सेल में दूरी या आंतरिक पैडिंग निर्दिष्ट करता है।<br>• <strong>सेलस्पेसिंग:</strong> तालिका ग्रिड में <strong>दो आसन्न कोशिकाओं</strong> के बीच पिक्सेल में दूरी निर्दिष्ट करता है।</p>
<br>
<span style="color: #64748b; margin-top: 4px; display: block;">सेलपैडिंग अंदर पैडिंग है कोशिका; सेलस्पेसिंग आसन्न कोशिकाओं के बीच का स्थान है।</span>
</div>
</details>
</div>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;">
<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;">
<span style="background: #0284c7; color: #ffffff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;">2</span>
<div style="font-weight: 600; color: #0f172a; font-size: 14.5px; line-height: 1.5; flex-grow: 1;">कोड उदाहरणों के साथ "colspan" और "rowspan" विशेषताओं के कार्य को समझाएं।</div>
</div>
<details style="margin-top: 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; cursor: pointer;">
<summary style="font-size: 13px; font-weight: 700; color: #0369a1; user-select: none;">
<i class="fa-solid fa-eye me-1"></i> उत्तर एवं व्याख्या देखें
</summary>
<div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13.5px; color: #0f172a; line-height: 1.6;">
<strong style="color: #15803d;">उत्तर:</strong> • <strong>colspan:</strong> दो या दो से अधिक क्षैतिज स्तंभों को एक विस्तृत सेल में विलय करता है।<br><em>उदाहरण:</em> `<td colspan="3">Quarterly Report</td>`<br>• <strong>rowspan:</strong> दो को जोड़ता है या अधिक ऊर्ध्वाधर पंक्तियों को एक ही लम्बे सेल में।<br><em>उदाहरण:</em> `<td rowspan="2">Physics</td>`<br>
<span style="color: #64748b; margin-top: 4px; display: block;">कोलस्पैन स्तंभों को क्षैतिज रूप से विलीन करता है; rowspan पंक्तियों को लंबवत रूप से मर्ज करता है।</span>
</div>
</details>
</div>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;">
<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;">
<span style="background: #0284c7; color: #ffffff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;">3</span>
<div style="font-weight: 600; color: #0f172a; font-size: 14.5px; line-height: 1.5; flex-grow: 1;">एक टेबल हेडर सेल (`<th>`) डिफ़ॉल्ट रूप से मानक टेबल डेटा सेल (`<td>`) से कैसे भिन्न होता है?</div>
</div>
<details style="margin-top: 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; cursor: pointer;">
<summary style="font-size: 13px; font-weight: 700; color: #0369a1; user-select: none;">
<i class="fa-solid fa-eye me-1"></i> उत्तर एवं व्याख्या देखें
</summary>
<div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13.5px; color: #0f172a; line-height: 1.6;">
<strong style="color: #15803d;">उत्तर:</strong> • <strong>`<th>` (टेबल हेडर):</strong> टेक्स्ट <strong>बोल्ड फॉन्ट</strong> में प्रस्तुत किया जाता है और डिफ़ॉल्ट रूप से सेल के भीतर <strong>क्षैतिज रूप से केंद्रित</strong> होता है।<br>• <strong>`<td>` (तालिका डेटा):</strong> पाठ मानक <strong>नियमित (गैर-बोल्ड) फ़ॉन्ट</strong> में प्रस्तुत किया गया है और डिफ़ॉल्ट रूप से सेल के भीतर <strong>बाएं-संरेखित</strong> है।<br>
<span style="color: #64748b; margin-top: 4px; display: block;"><th> बोल्ड और केंद्रित है; <td> नियमित और बाएँ-संरेखित है।</span>
</div>
</details>
</div>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;">
<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;">
<span style="background: #0284c7; color: #ffffff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;">4</span>
<div style="font-weight: 600; color: #0f172a; font-size: 14.5px; line-height: 1.5; flex-grow: 1;">एक हाइपरलिंक बनाने के लिए HTML कोड लिखें जो वेबसाइट "https://targetexams.com" को एक नए ब्राउज़र टैब में खोलता है।</div>
</div>
<details style="margin-top: 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; cursor: pointer;">
<summary style="font-size: 13px; font-weight: 700; color: #0369a1; user-select: none;">
<i class="fa-solid fa-eye me-1"></i> उत्तर एवं व्याख्या देखें
</summary>
<div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13.5px; color: #0f172a; line-height: 1.6;">
<strong style="color: #15803d;">उत्तर:</strong> `<a href="https://targetexams.com" target="_blank">Visit TargetExams</a>`<br>*(`target="_blank"` विशेषता ब्राउज़र को एक नए, नए टैब में गंतव्य लिंक लॉन्च करने का निर्देश देती है)*.<br>
<span style="color: #64748b; margin-top: 4px; display: block;">उपयोग करें `<a href="url" target="_blank">Text</a>`.</span>
</div>
</details>
</div>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;">
<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;">
<span style="background: #0284c7; color: #ffffff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;">5</span>
<div style="font-weight: 600; color: #0f172a; font-size: 14.5px; line-height: 1.5; flex-grow: 1;">प्लेबैक नियंत्रण, 480 पिक्सल की चौड़ाई और 320 पिक्सल की ऊंचाई के साथ "lesson.mp4" नामक वीडियो को एम्बेड करने के लिए HTML कोड लिखें।</div>
</div>
<details style="margin-top: 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; cursor: pointer;">
<summary style="font-size: 13px; font-weight: 700; color: #0369a1; user-select: none;">
<i class="fa-solid fa-eye me-1"></i> उत्तर एवं व्याख्या देखें
</summary>
<div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13.5px; color: #0f172a; line-height: 1.6;">
<strong style="color: #15803d;">उत्तर:</strong> ```html
<video width="480" height="320" controls>
<source src="lesson.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
```<br>
<span style="color: #64748b; margin-top: 4px; display: block;">`<source>` चाइल्ड एलिमेंट के साथ `<video width="480" height="320" controls>` टैग का उपयोग करें।</span>
</div>
</details>
</div>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;">
<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;">
<span style="background: #0284c7; color: #ffffff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;">6</span>
<div style="font-weight: 600; color: #0f172a; font-size: 14.5px; line-height: 1.5; flex-grow: 1;">के बीच अंतर करें HTML वेब फॉर्म में "रेडियो बटन" और "चेकबॉक्स"।</div>
</div>
<details style="margin-top: 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; cursor: pointer;">
<summary style="font-size: 13px; font-weight: 700; color: #0369a1; user-select: none;">
<i class="fa-solid fa-eye me-1"></i> उत्तर एवं व्याख्या देखें
</summary>
<div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13.5px; color: #0f172a; line-height: 1.6;">
<strong style="color: #15803d;">उत्तर:</strong> <p>• <strong>रेडियो बटन (<code>type="radio"</code>):</strong> तब उपयोग किया जाता है जब उपयोगकर्ता को परस्पर अनन्य समूह से <strong>केवल एक विकल्प</strong> का चयन करना होता है (उदाहरण के लिए, लिंग का चयन करना: पुरुष या महिला)। समूह के सभी बटनों को समान <code>name</code> विशेषता साझा करनी चाहिए।<br>• <strong>चेकबॉक्स (<code>type="checkbox"</code>):</strong> इसका उपयोग तब किया जाता है जब उपयोगकर्ता को एक साथ <strong>एकाधिक स्वतंत्र विकल्प</strong> चुनने की अनुमति दी जाती है (उदाहरण के लिए, शौक का चयन करना: पढ़ना, क्रिकेट और संगीत)।</p>
<br>
<span style="color: #64748b; margin-top: 4px; display: block;">रेडियो बटन एक समूह से केवल एक विकल्प की अनुमति देते हैं; चेकबॉक्स कई चयनों की अनुमति देते हैं।</span>
</div>
</details>
</div>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;">
<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;">
<span style="background: #0284c7; color: #ffffff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;">7</span>
<div style="font-weight: 600; color: #0f172a; font-size: 14.5px; line-height: 1.5; flex-grow: 1;">HTML फॉर्म में `type="password"` इनपुट नियंत्रण का उद्देश्य क्या है?</div>
</div>
<details style="margin-top: 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; cursor: pointer;">
<summary style="font-size: 13px; font-weight: 700; color: #0369a1; user-select: none;">
<i class="fa-solid fa-eye me-1"></i> उत्तर एवं व्याख्या देखें
</summary>
<div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13.5px; color: #0f172a; line-height: 1.6;">
<strong style="color: #15803d;">उत्तर:</strong> <p>• <code>type="password"</code> इनपुट नियंत्रण <strong>उपयोगकर्ता द्वारा टाइप किए जाने पर प्रत्येक टाइप किए गए वर्ण को काले बिंदुओं या तारांकन (<code>*</code>)</strong> के साथ मास्क करता है।<br>• यह गोपनीय पासवर्ड को "शोल्डर सर्फिंग" (उपयोगकर्ता के कंधे की ओर देखने वाले लोग) से बचाता है स्क्रीन) सार्वजनिक स्थानों पर।</p>
<br>
<span style="color: #64748b; margin-top: 4px; display: block;">पासवर्ड को स्क्रीन पर दिखाई देने से रोकने के लिए टाइप किए गए अक्षरों को बिंदु या तारांकन के साथ छिपाता है।</span>
</div>
</details>
</div>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;">
<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;">
<span style="background: #0284c7; color: #ffffff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;">8</span>
<div style="font-weight: 600; color: #0f172a; font-size: 14.5px; line-height: 1.5; flex-grow: 1;">हाइपरलिंक में "पूर्ण यूआरएल" और "सापेक्ष यूआरएल" के बीच अंतर समझाएं।</div>
</div>
<details style="margin-top: 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; cursor: pointer;">
<summary style="font-size: 13px; font-weight: 700; color: #0369a1; user-select: none;">
<i class="fa-solid fa-eye me-1"></i> उत्तर एवं व्याख्या देखें
</summary>
<div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; font-size: 13.5px; color: #0f172a; line-height: 1.6;">
<strong style="color: #15803d;">उत्तर:</strong> <p>• <strong>पूर्ण यूआरएल:</strong> प्रोटोकॉल योजना, डोमेन नाम और फ़ाइल पथ (उदाहरण के लिए, <code>https://targetexams.com/courses/index.html</code>) सहित <strong>पूर्ण, पूर्ण इंटरनेट वेब पता</strong> निर्दिष्ट करता है। बाहरी वेबसाइटों से लिंक करने के लिए उपयोग किया जाता है।<br>• <strong>सापेक्ष यूआरएल:</strong>डोमेन नाम का उल्लेख किए बिना <strong>वर्तमान वेबपेज की निर्देशिका के सापेक्ष</strong> एक फ़ाइल स्थान निर्दिष्ट करता है (उदाहरण के लिए, <code>about.html</code> या <code>images/logo.png</code>)। एक ही वेबसाइट के आंतरिक पेजों को लिंक करने के लिए उपयोग किया जाता है।</p>
<br>
<span style="color: #64748b; margin-top: 4px; display: block;">एब्सोल्यूट यूआरएल में पूरा डोमेन शामिल होता है (https://...); संबंधित URL साइट के भीतर स्थानीय फ़ाइल पथ से लिंक होता है।</span>
</div>
</details>
</div>
</div>
</div>
<!-- Closed-Loop Assessment CTA -->
<div class="sm-assessment-loop" id="cbt-tests">
<div style="display:inline-block;background:rgba(255,255,255,0.2);padding:6px 16px;border-radius:99px;font-size:12.5px;font-weight:700;margin-bottom:12px;">
<i class="fa-solid fa-flag-checkered"></i> अध्याय का अध्ययन पूर्ण हुआ?
</div>
<div style="display:inline-block;background:rgba(255,255,255,0.2);padding:4px 14px;border-radius:99px;font-size:12px;font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.05em;">अभ्यास के लिए तैयार?</div>
<h3 style="font-size:1.45rem;font-weight:800;margin-bottom:8px;">ऑनलाइन CBT टेस्ट देकर तैयारी का मूल्यांकन करें</h3>
<p>
झारखण्ड बोर्ड परीक्षा पैटर्न पर आधारित बहुविकल्पीय प्रश्नों का ऑनलाइन टेस्ट दें। तुरंत परिणाम, समय विश्लेषण और प्रत्येक प्रश्न का विस्तृत हल प्राप्त करें।
</p>
<div class="sm-loop-buttons">
<a href="https://www.targetexams.com/school-test-series/cisce/class-7/computer-science/html-advanced-features/cisce-class-7-computer-science-html-advanced-features-set-01-foundation" class="sm-loop-btn-fnd" style="display:inline-flex;align-items:center;gap:10px;">
<i class="fa-solid fa-play"></i>
<div>
<div style="font-weight:800;font-size:14.5px;">फाउंडेशन टेस्ट</div>
<div style="font-size:11.5px;opacity:0.9;"><i class="fa-solid fa-list-check"></i> 15 MCQs • मूल अवधारणाएँ</div>
</div>
</a>
<a href="https://www.targetexams.com/school-test-series/cisce/class-7/computer-science/html-advanced-features/cisce-class-7-computer-science-html-advanced-features-set-01-foundation" class="sm-loop-btn-adv" style="display:inline-flex;align-items:center;gap:10px;">
<i class="fa-solid fa-fire"></i>
<div>
<div style="font-weight:800;font-size:14.5px;">एडवांस्ड टेस्ट</div>
<div style="font-size:11.5px;opacity:0.9;"><i class="fa-solid fa-bolt"></i> 15 MCQs • HOTS और ट्रैप्स</div>
</div>
</a>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="col-lg-4">
<!-- Chapter Navigation Card -->
<div class="sm-section-card" style="padding:22px;">
<h3 style="font-size:16px;font-weight:800;color:#0f172a;margin-bottom:14px;display:flex;align-items:center;gap:8px;">
<i class="fa-solid fa-book-open text-primary"></i>
कक्षा 7 Computer Science के सभी अध्याय
</h3>
<div style="max-height:480px;overflow-y:auto;padding-right:4px;">
<a href="https://www.targetexams.com/school-syllabus/cisce/class-7/computer-science/computer-hardware-components/study-material"
class="sm-chapter-pill-link ">
<span>अध्याय 1: कंप्यूटर - हार्डवेयर घटक (Computer - Hardware Components)</span>
</a>
<a href="https://www.targetexams.com/school-syllabus/cisce/class-7/computer-science/number-system-an-introduction/study-material"
class="sm-chapter-pill-link ">
<span>अध्याय 2: संख्या प्रणाली - एक परिचय (Number System - An Introduction)</span>
</a>
<a href="https://www.targetexams.com/school-syllabus/cisce/class-7/computer-science/computer-virus/study-material"
class="sm-chapter-pill-link ">
<span>अध्याय 3: कंप्यूटर वायरस (Computer Virus)</span>
</a>
<a href="https://www.targetexams.com/school-syllabus/cisce/class-7/computer-science/ethics-and-safety-measures-in-computing/study-material"
class="sm-chapter-pill-link ">
<span>अध्याय 4: कंप्यूटिंग में नैतिकता और सुरक्षा उपाय (Ethics and Safety Measures in Computing)</span>
</a>
<a href="https://www.targetexams.com/school-syllabus/cisce/class-7/computer-science/spreadsheets-an-introduction/study-material"
class="sm-chapter-pill-link ">
<span>अध्याय 5: स्प्रेडशीट - एक परिचय (Spreadsheets - An Introduction)</span>
</a>
<a href="https://www.targetexams.com/school-syllabus/cisce/class-7/computer-science/database-and-dbms-an-introduction/study-material"
class="sm-chapter-pill-link ">
<span>अध्याय 6: डेटाबेस और डीबीएमएस - एक परिचय (Database and DBMS - An Introduction)</span>
</a>
<a href="https://www.targetexams.com/school-syllabus/cisce/class-7/computer-science/html-advanced-features/study-material"
class="sm-chapter-pill-link active">
<span>अध्याय 7: HTML - उन्नत सुविधाएँ (HTML - Advanced Features)</span>
<i class="fa-solid fa-chevron-right text-primary" style="font-size:10px;"></i>
</a>
</div>
</div>
<!-- AI Study Friend Widget -->
<div class="sm-section-card" style="background:#f8fafc;border-color:#cbd5e1;padding:22px;">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
<div style="width:38px;height:38px;border-radius:10px;background:#4f46e5;color:#fff;display:grid;place-items:center;font-size:18px;">
<i class="fa-solid fa-robot"></i>
</div>
<div>
<h4 style="font-size:15px;font-weight:800;color:#0f172a;margin:0;">AI अध्ययन मित्र</h4>
<span style="font-size:12px;color:#64748b;">त्वरित शंका समाधान</span>
</div>
</div>
<p style="font-size:13px;color:#475569;line-height:1.55;margin-bottom:14px;">
<strong>HTML - उन्नत सुविधाएँ (HTML - Advanced Features)</strong> में कोई संदेह या प्रश्न है? हमारे AI अध्ययन मित्र से तुरंत समझें।
</p>
<div style="display:flex;flex-direction:column;gap:8px;">
<a href="javascript:void(0)" onclick="alert('AI अध्ययन मित्र: HTML - उन्नत सुविधाएँ (HTML - Advanced Features) के मुख्य बिंदुओं को ध्यान से पढ़ें।')" class="btn btn-sm" style="background:#ffffff;border:1px solid #cbd5e1;font-size:12px;font-weight:600;color:#334155;text-align:left;padding:8px 12px;border-radius:8px;">
💬 "मुख्य अवधारणाओं को समझाइए"
</a>
<a href="javascript:void(0)" onclick="alert('AI अध्ययन मित्र: परीक्षा में सामान्य गलतियों से बचें।')" class="btn btn-sm" style="background:#ffffff;border:1px solid #cbd5e1;font-size:12px;font-weight:600;color:#334155;text-align:left;padding:8px 12px;border-radius:8px;">
💬 "सामान्य गलतियाँ क्या हैं?"
</a>
<a href="javascript:void(0)" onclick="alert('AI अध्ययन मित्र: अध्याय पढ़ने के बाद टेस्ट हल करें।')" class="btn btn-sm" style="background:#ffffff;border:1px solid #cbd5e1;font-size:12px;font-weight:600;color:#334155;text-align:left;padding:8px 12px;border-radius:8px;">
💬 "परीक्षा की तैयारी कैसे करें?"
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer-section pt-120" data-background="https://www.targetexams.com/public/assets/img/bg-img/footer-bg.png">
<div class="footer-top-wrap">
<div class="container footer-container">
<div class="row footer-wrap">
<div class="col-lg-3 col-md-6">
<div class="footer-widget">
<h3 class="widget-header">Get in touch!</h3>
<p class="mb-30">India's leading educational platform for School Syllabus (23+ Boards), Online Chapter Test Series, Government Exams, and Computer Courses in partnership with Acesoftech Academy.</p>
<div class="footer-contact">
<span class="number"><i class="fa-solid fa-phone"></i><a href="tel:+918583959528">+91 85839 59528</a></span>
<a href="mailto:enquiry@targetexams.com" class="mail">enquiry@targetexams.com</a>
</div>
<ul class="footer-social">
<li><a href="https://www.facebook.com/targetexamsai/" aria-label="Follow Target Exams on Facebook" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://www.instagram.com/targetexams1" aria-label="Follow Target Exams on Instagram" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.linkedin.com/in/target-exams-2a1475432/" aria-label="Follow Target Exams on LinkedIn" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="https://www.youtube.com/@TargetExams1" aria-label="Follow Target Exams on YouTube" target="_blank" rel="noopener noreferrer"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget-2">
<h3 class="widget-header">Company Info</h3>
<ul class="footer-list">
<li><a href="https://www.targetexams.com/about-us">About Us</a></li>
<li><a href="https://www.targetexams.com/why-us">Why Us</a></li>
<li><a href="https://www.targetexams.com/blogs">Blogs</a></li>
<li><a href="https://www.targetexams.com/contact-us">Contact Us</a></li>
<li><a href="https://www.targetexams.com/sitemap.html">Sitemap</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget-2">
<h3 class="widget-header">Explore Portals</h3>
<ul class="footer-list">
<li><a href="https://www.targetexams.com/school-syllabus">School Syllabus (23 Boards)</a></li>
<li><a href="https://www.targetexams.com/school-test-series">School Online Test Series</a></li>
<li><a href="https://www.targetexams.com/computer-courses">Computer Training Courses</a></li>
<li><a href="https://www.targetexams.com/government-exams">Government Recruitment Exams</a></li>
<li><a href="https://www.targetexams.com/upcoming-government-exams" style="color: #38bdf8; font-weight: 600;"><i class="fa-solid fa-calendar-check me-1"></i> Upcoming Govt Jobs (2026–27)</a></li>
<li><a href="https://www.targetexams.com/upcoming-entrance-exams" style="color: #2dd4bf; font-weight: 600;"><i class="fa-solid fa-calendar-check me-1"></i> Upcoming Entrance Exams (2026–27)</a></li>
<li><a href="https://www.targetexams.com/blogs">Blogs & Exam Updates</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget">
<h3 class="widget-header">Recent Posts</h3>
<div class="sidebar-post mb-20">
<img
src="https://res.cloudinary.com/gnai8nsr/image/upload/v1790076413/schoolsyllabus/cbse/cbse-sample-papers-2027.webp"
alt="CBSE Sample Papers 2027 for Class 10 & 12 Released: Download Subject-Wise SQP, Marking Scheme & Complete Board Exam Strategy Guide"
width="80"
height="80"
loading="lazy"
decoding="async"
style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; aspect-ratio: 1/1;"
>
<div class="post-content">
<h3 class="title">
<a href="https://www.targetexams.com/blog-details/cbse-sample-papers-2027-class-10-12-download-marking-scheme">
CBSE Sample Papers 2027 for Class 10 & 12 Released: Download Subject-Wise SQP, Marking Scheme & Complete Board Exam Strategy Guide
</a>
</h3>
</div>
</div>
<div class="sidebar-post mb-20">
<img
src="https://res.cloudinary.com/gnai8nsr/image/upload/v1790010450/schoolsyllabus/govt-jobs/isro-recruitment-2026-exam-guide-notification.webp"
alt="ISRO Recruitment 2026: Scientist/Engineer 'SC', Technical Assistant & Technician Vacancies — Exam Pattern, Eligibility, Syllabus & Complete Selection Guide"
width="80"
height="80"
loading="lazy"
decoding="async"
style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; aspect-ratio: 1/1;"
>
<div class="post-content">
<h3 class="title">
<a href="https://www.targetexams.com/blog-details/isro-recruitment-2026-scientist-engineer-technical-assistant-guide">
ISRO Recruitment 2026: Scientist/Engineer 'SC', Technical Assistant & Technician Vacancies — Exam Pattern, Eligibility, Syllabus & Complete Selection Guide
</a>
</h3>
</div>
</div>
<div class="sidebar-post mb-20">
<img
src="https://res.cloudinary.com/gnai8nsr/image/upload/v1789995947/schoolsyllabus/govt-jobs/bpsc-tre-4-teacher-recruitment-2026.webp"
alt="BPSC TRE 4.0 Recruitment 2026: 32,388 Teacher Vacancies Out, Apply Online at bpsc.bih.nic.in"
width="80"
height="80"
loading="lazy"
decoding="async"
style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; aspect-ratio: 1/1;"
>
<div class="post-content">
<h3 class="title">
<a href="https://www.targetexams.com/blog-details/bpsc-tre-4-teacher-recruitment-2026-notification-32388-vacancies">
BPSC TRE 4.0 Recruitment 2026: 32,388 Teacher Vacancies Out, Apply Online at bpsc.bih.nic.in
</a>
</h3>
</div>
</div>
<div class="sidebar-post mb-20">
<img
src="https://res.cloudinary.com/gnai8nsr/image/upload/v1789995953/schoolsyllabus/govt-jobs/bpsc-tre-4-teacher-recruitment-2026-hindi.webp"
alt="BPSC TRE 4.0 शिक्षक भर्ती 2026: 32,388 पदों के लिए ऑनलाइन आवेदन शुरू, देखें योग्यता, पैटर्न व नियम"
width="80"
height="80"
loading="lazy"
decoding="async"
style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; aspect-ratio: 1/1;"
>
<div class="post-content">
<h3 class="title">
<a href="https://www.targetexams.com/blog-details/bpsc-tre-4-teacher-recruitment-2026-notification-32388-vacancies-hindi">
BPSC TRE 4.0 शिक्षक भर्ती 2026: 32,388 पदों के लिए ऑनलाइन आवेदन शुरू, देखें योग्यता, पैटर्न व नियम
</a>
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="copyright-area">
<div class="container footer-container">
<div class="copyright-content d-flex flex-wrap justify-content-between align-items-center">
<p class="mb-0">Copyright © 2026 TargetExams. All Rights Reserved. (A Unit of Acesoftech Academy)</p>
<div class="footer-bottom-links">
<a href="https://www.targetexams.com/blogs" style="color: #cbd5e1; font-size: 13px; margin-right: 15px; text-decoration: none;">
<i class="fa-solid fa-newspaper" style="color: #00A86B;"></i> Blogs
</a>
<a href="https://www.targetexams.com/sitemap.html" style="color: #cbd5e1; font-size: 13px; margin-right: 15px; text-decoration: none;">
<i class="fa-solid fa-sitemap" style="color: #00A86B;"></i> Sitemap
</a>
</div>
</div>
</div>
</div>
</footer>
<!-- ./ footer-section -->
<div id="scrollup">
<button id="scroll-top" class="scroll-to-top" aria-label="Scroll to top of page"><i class="fa-solid fa-arrow-up-long"></i></button>
</div>
<!--scrollup-->
<!-- Optimized Core Scripts -->
<script src="https://www.targetexams.com/public/assets/js/vendor/jquary-3.6.0.min.js"></script>
<script src="https://www.targetexams.com/public/assets/js/vendor/bootstrap-bundle.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>
<script src="https://www.targetexams.com/public/assets/js/vendor/imagesloaded-pkgd.js" defer></script>
<script src="https://www.targetexams.com/public/assets/js/vendor/main.js?v=20260819-twomenu2" defer></script>
<script src="https://www.targetexams.com/public/assets/js/vendor/meanmenu.js" defer></script>
<script src="https://www.targetexams.com/public/assets/js/vendor/nice-select.js" defer></script>
<script src="https://www.targetexams.com/public/assets/js/vendor/smooth-scroll.js" defer></script>
<script src="https://www.targetexams.com/public/assets/js/vendor/swiper.min.js" defer></script>
<script src="https://www.targetexams.com/public/assets/js/vendor/venobox.min.js" defer></script>
<script src="https://www.targetexams.com/public/assets/js/vendor/waypoints.min.js" defer></script>
<script src="https://www.targetexams.com/public/assets/js/vendor/odometer.min.js" defer></script>
<script>
(function() {
function animateOdometer(el) {
var raw = el.getAttribute('data-count');
if (!raw || el.getAttribute('data-animated') === 'true') return;
el.setAttribute('data-animated', 'true');
var hasComma = raw.indexOf(',') !== -1;
var hasDot = raw.indexOf('.') !== -1;
var targetNum = parseFloat(raw.replace(/,/g, ''));
if (isNaN(targetNum)) {
el.textContent = raw;
return;
}
var duration = 2000;
var startTime = null;
function step(timestamp) {
if (!startTime) startTime = timestamp;
var progress = Math.min((timestamp - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = targetNum * ease;
if (hasDot) {
var dec = raw.split('.')[1].length;
el.textContent = current.toFixed(dec);
} else if (hasComma) {
el.textContent = Math.floor(current).toLocaleString('en-US');
} else {
el.textContent = Math.floor(current);
}
if (progress < 1) {
requestAnimationFrame(step);
} else {
el.textContent = raw;
}
}
requestAnimationFrame(step);
}
function initCounters() {
var odos = document.querySelectorAll('.odometer');
if (!odos.length) return;
if ('IntersectionObserver' in window) {
var obs = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
animateOdometer(entry.target);
obs.unobserve(entry.target);
}
});
}, { threshold: 0.15 });
odos.forEach(function(el) {
obs.observe(el);
});
} else {
odos.forEach(function(el) {
animateOdometer(el);
});
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initCounters);
} else {
initCounters();
}
})();
</script>
<script src="https://www.targetexams.com/public/assets/js/vendor/wow.min.js" defer></script>
</body>
</html>
|
