was working at the CERN particle physics laboratory in Geneva, Switzerland. Thousands of scientists from dozens of nations were running complex particle experiments, but their computers could not talk to each other. Frustrated by lost documents, Berners-Lee invented a simple, text-based formatting language using angled brackets (`< >`) that allowed documents to link to other documents across internet cables:
! Today, every single website on Earth—from YouTube and Wikipedia to Google and Amazon—relies on HTML to build its visual skeleton! Want to display a sports tournament scoreboard? Build an
` and ``! Want to merge three columns together? Deploy `colspan="3"`! Want to link a visitor to another page across the globe? Use the Anchor Tag ``! Let's master HTML advanced features.
Why This Chapter Matters
HTML is the foundational programming language of the internet and web design. Mastering HTML tables, multimedia embedding, hyperlinks, and interactive forms is the essential entry point for frontend web development and ICSE computer examinations.
Before You Begin (Prerequisites)
- Basic HTML tags from Class 6: `, , , <body>, <h1> to <h6>, <p>, <br>, <hr>`.</li>
<li>Working with a plain text editor (Notepad) and a web browser (Google Chrome).</li>
<li>Understanding file paths and image formats (.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;">What You Will Learn (Core Objectives)</h3>
</div>
<ul style="margin: 0; padding-left: 20px; color: #166534; font-size: 13.5px; line-height: 1.7;">
<li>Construct complex, styled tables in HTML using `<table>, <tr>, <th>`, and `<td>` tags.</li>
<li>Apply table attributes including `border, cellpadding, cellspacing, colspan`, and `rowspan`.</li>
<li>Embed audio and video multimedia into webpages using HTML5 `<audio>` and `<video>` tags.</li>
<li>Create internal and external hyperlinks using the anchor tag `<a>` with absolute and relative URLs.</li>
<li>Design interactive web forms using `<input>` (text, radio, checkbox), `<textarea>`, and `<select>`.</li>
<li>Troubleshoot and write clean, semantic HTML5 code.</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;">Chapter Roadmap & Progression</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 Tables: Architecture & Core...</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. Merging Table Cells: Colspan & R...</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. Multimedia & Hyperlinks in 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. Interactive Web Forms</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>Complete Concept Guide (100% Curriculum Coverage)</h2>
</div>
<div class="sm-theory-block">
<h3>1. HTML Tables: Architecture & Core Tags</h3>
<div class="body-text">
<div class="theory-facet">
<span class="badge bg-primary text-white mb-2">Understand</span>
<h5>A. Table Structure:</h5>
<p>Tables organize data into a two-dimensional grid of rows and columns using four core tags:</p>
<ul>
<li><code><table>...</table></code>: The main container defining the table.</li>
<li><code><tr>...</tr></code>: Defines a <strong>Table Row</strong>.</li>
<li><code><th>...</th></code>: Defines a <strong>Table Header</strong> cell (text is <strong>bold and centered</strong> by default).</li>
<li><code><td>...</td></code>: Defines a <strong>Table Data</strong> cell (regular, left-aligned text).</li>
</ul>
<h5>B. Table Attributes:</h5>
<ul>
<li><code>border="2"</code>: Specifies the thickness of the table border frame.</li>
<li><code>cellpadding="10"</code>: The pixel distance between the <strong>cell wall and the content inside it</strong>.</li>
<li><code>cellspacing="5"</code>: The pixel distance <strong>between adjacent cells</strong>.</li>
<li><code>bgcolor="lightblue"</code>: Sets the background color of the table, row, or cell.</li>
</ul>
</div>
</div>
</div>
<div class="sm-theory-block">
<h3>2. Merging Table Cells: Colspan & Rowspan</h3>
<div class="body-text">
<div class="theory-facet">
<span class="badge bg-primary text-white mb-2">Cell Merging</span>
<h5>A. Colspan (Column Spanning):</h5>
<p>Merges two or more horizontal columns into a single cell:</p>
<pre><code><td colspan="3">Merged across 3 columns</td></code></pre>
<h5>B. Rowspan (Row Spanning):</h5>
<p>Merges two or more vertical rows into a single cell:</p>
<pre><code><td rowspan="2">Merged across 2 rows vertically</td></code></pre>
</div>
</div>
</div>
<div class="sm-theory-block">
<h3>3. Multimedia & Hyperlinks in HTML</h3>
<div class="body-text">
<div class="theory-facet">
<span class="badge bg-primary text-white mb-2">Media & Links</span>
<h5>A. Audio & Video Embedding (HTML5):</h5>
<ul>
<li><strong>Audio Tag:</strong>
<pre><code><audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio></code></pre>
</li>
<li><strong>Video Tag:</strong>
<pre><code><video width="480" height="320" controls>
<source src="movie.mp4" type="video/mp4">
</video></code></pre>
</li>
</ul>
<h5>B. Hyperlinking with the Anchor Tag <code><a></code>:</h5>
<p>The <code>href</code> (Hypertext Reference) attribute specifies the destination URL:</p>
<ul>
<li><em>External Link:</em> <code><a href="https://targetexams.com" target="_blank">Visit TargetExams</a></code></li>
<li><em>Email Link:</em> <code><a href="mailto:info@school.com">Email Us</a></code></li>
</ul>
</div>
</div>
</div>
<div class="sm-theory-block">
<h3>4. Interactive Web Forms</h3>
<div class="body-text">
<div class="theory-facet">
<span class="badge bg-primary text-white mb-2">Forms</span>
<p>The <code><form></code> tag collects user inputs through various GUI input controls:</p>
<ul>
<li><code><input type="text" name="username"></code>: Single-line text input.</li>
<li><code><input type="password" name="pwd"></code>: Masks typed characters with dots.</li>
<li><code><input type="radio" name="gender" value="m"></code>: Mutually exclusive radio buttons.</li>
<li><code><input type="checkbox" name="hobbies"></code>: Allows multiple selections.</li>
<li><code><textarea rows="4" cols="30"></textarea></code>: Multi-line text box for comments.</li>
<li><code><input type="submit" value="Submit"></code>: Submits form data to the server.</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>
Key Programming Syntax, Statements & Translator Rules
</h2>
</div>
<div class="sm-formula-grid">
<div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;">
<div>
<div class="f-name">Table Cell Distance Rule</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> Crucial distinction in HTML table formatting.</div>
</div>
<div class="sm-formula-card humanities-card" style="border-top-color: #0284c7;">
<div>
<div class="f-name">Anchor Tag Syntax</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" opens destination in new tab.</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>Web Development: Table Cell Spacing, Colspan & Form Elements</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;">Chapter Summary & 10 Key Takeaways</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;">Takeaway 1</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">An HTML table is defined using <table>, table rows using <tr>, and data cells using <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;">Takeaway 2</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">Table headers (<th>) display bold, centered text by default.</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;">Takeaway 3</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">Cellpadding controls the internal margin between the cell wall and text.</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;">Takeaway 4</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">Cellspacing controls the physical distance between adjacent cells.</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;">Takeaway 5</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">Colspan merges multiple columns horizontally; Rowspan merges multiple rows vertically.</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;">Takeaway 6</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">HTML5 <audio controls> and <video controls> embed sound and video without plugins.</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;">Takeaway 7</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">Hyperlinks are created using the anchor tag <a href="URL">; target="_blank" opens in a new tab.</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;">Takeaway 8</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">HTML forms use the <form> container to gather user input on webpages.</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;">Takeaway 9</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">Form controls include text fields, password masks, radio buttons, checkboxes, and textareas.</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;">Takeaway 10</div>
<div style="font-size: 14px; color: #0f172a; line-height: 1.6;">A submit button (<input type="submit">) transmits form data to the server for processing.</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 (Diagnostic Practice Questions)</h2>
</div>
<p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">Diagnostic questions testing core conceptual clarity. Answers are hidden initially — solve each problem first, then click to reveal the step-by-step verified solution.</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;">Differentiate between "cellpadding" and "cellspacing" attributes of an HTML table.</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> Reveal Answer & Explanation
</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;">Answer:</strong> <p>• <strong>cellpadding:</strong> Specifies the distance or internal padding in pixels between the <strong>border wall of a cell and the content/text inside it</strong>.<br>• <strong>cellspacing:</strong> Specifies the distance in pixels between <strong>two adjacent cells</strong> in the table grid.</p>
<br>
<span style="color: #64748b; margin-top: 4px; display: block;">Cellpadding is padding inside the cell; cellspacing is the space between adjacent cells.</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;">Explain the function of "colspan" and "rowspan" attributes with code examples.</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> Reveal Answer & Explanation
</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;">Answer:</strong> • <strong>colspan:</strong> Merges two or more horizontal columns into a single wide cell.<br><em>Example:</em> `<td colspan="3">Quarterly Report</td>`<br>• <strong>rowspan:</strong> Merges two or more vertical rows into a single tall cell.<br><em>Example:</em> `<td rowspan="2">Physics</td>`<br>
<span style="color: #64748b; margin-top: 4px; display: block;">Colspan merges columns horizontally; rowspan merges rows vertically.</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;">How does a table header cell (`<th>`) differ from a standard table data cell (`<td>`) by default?</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> Reveal Answer & Explanation
</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;">Answer:</strong> • <strong>`<th>` (Table Header):</strong> The text is rendered in <strong>bold font</strong> and is <strong>horizontally centered</strong> within the cell by default.<br>• <strong>`<td>` (Table Data):</strong> The text is rendered in standard <strong>regular (non-bold) font</strong> and is <strong>left-aligned</strong> within the cell by default.<br>
<span style="color: #64748b; margin-top: 4px; display: block;"><th> is bold and centered; <td> is regular and left-aligned.</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;">Write the HTML code to create a hyperlink that opens the website "https://targetexams.com" in a NEW browser tab.</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> Reveal Answer & Explanation
</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;">Answer:</strong> `<a href="https://targetexams.com" target="_blank">Visit TargetExams</a>`<br>*(The `target="_blank"` attribute instructs the browser to launch the destination link in a fresh, new tab)*.<br>
<span style="color: #64748b; margin-top: 4px; display: block;">Use `<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;">Write the HTML code to embed a video named "lesson.mp4" with playback controls, a width of 480 pixels, and height of 320 pixels.</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> Reveal Answer & Explanation
</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;">Answer:</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;">Use the `<video width="480" height="320" controls>` tag with a `<source>` child element.</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;">Differentiate between "Radio Buttons" and "Checkboxes" in an HTML web form.</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> Reveal Answer & Explanation
</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;">Answer:</strong> <p>• <strong>Radio Buttons (<code>type="radio"</code>):</strong> Used when the user must select <strong>only ONE option</strong> from a mutually exclusive group (e.g., selecting Gender: Male OR Female). All buttons in the group must share the same <code>name</code> attribute.<br>• <strong>Checkboxes (<code>type="checkbox"</code>):</strong> Used when the user is allowed to select <strong>multiple independent choices</strong> simultaneously (e.g., selecting Hobbies: Reading, Cricket, and Music).</p>
<br>
<span style="color: #64748b; margin-top: 4px; display: block;">Radio buttons allow only one choice from a group; checkboxes allow multiple selections.</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;">What is the purpose of the `type="password"` input control in an HTML form?</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> Reveal Answer & Explanation
</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;">Answer:</strong> <p>• The <code>type="password"</code> input control <strong>masks every typed character with black dots or asterisks (<code>*</code>)</strong> as the user types.<br>• This protects confidential passwords from "shoulder surfing" (people looking over the user's shoulder at the screen) in public places.</p>
<br>
<span style="color: #64748b; margin-top: 4px; display: block;">Masks typed characters with dots or asterisks to prevent passwords from being seen on screen.</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;">Explain the difference between an "Absolute URL" and a "Relative URL" in hyperlinks.</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> Reveal Answer & Explanation
</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;">Answer:</strong> <p>• <strong>Absolute URL:</strong> Specifies the <strong>complete, full internet web address</strong> including the protocol scheme, domain name, and file path (e.g., <code>https://targetexams.com/courses/index.html</code>). Used to link to external websites.<br>• <strong>Relative URL:</strong> Specifies a file location <strong>relative to the current webpage's directory</strong> without mentioning the domain name (e.g., <code>about.html</code> or <code>images/logo.png</code>). Used to link internal pages within the same website.</p>
<br>
<span style="color: #64748b; margin-top: 4px; display: block;">Absolute URL includes the full domain (https://...); Relative URL links to a local file path within the site.</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> Finished Studying This Chapter?
</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;">READY TO PRACTICE?</div>
<h3 style="font-size:1.45rem;font-weight:800;margin-bottom:8px;">Timed CBT Practice Tests (Exam Simulator)</h3>
<p>
Put your concepts to the test with official curriculum-aligned Foundation and Advanced practice tests. Get instant accuracy scores, time metrics, and step-by-step verified explanations.
</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;">Foundation Test</div>
<div style="font-size:11.5px;opacity:0.9;"><i class="fa-solid fa-list-check"></i> 15 MCQs • Core Concepts</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;">Advanced Test</div>
<div style="font-size:11.5px;opacity:0.9;"><i class="fa-solid fa-bolt"></i> 15 MCQs • HOTS & Traps</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>
All Class 7 Computer Science Chapters
</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>Ch 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>Ch 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>Ch 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>Ch 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>Ch 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>Ch 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>Ch 7: 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 Study Friend</h4>
<span style="font-size:12px;color:#64748b;">Instant Concept Tutor</span>
</div>
</div>
<p style="font-size:13px;color:#475569;line-height:1.55;margin-bottom:14px;">
Have a doubt in <strong>HTML - Advanced Features</strong>? Ask our AI study tutor for rapid explanations or customized quizzes.
</p>
<div style="display:flex;flex-direction:column;gap:8px;">
<a href="javascript:void(0)" onclick="alert('AI Study Friend: In HTML - Advanced Features (Computer Science), focus on the core conceptual principles.')" 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;">
💬 "Explain core concepts of HTML - Advanced Features"
</a>
<a href="javascript:void(0)" onclick="alert('AI Study Friend: Common exam traps include rushing calculations and skipping intermediate steps.')" 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;">
💬 "What are the common exam traps?"
</a>
<a href="javascript:void(0)" onclick="alert('AI Study Friend: Complete the chapter guide above, then test your exam readiness with CBT test sets!')" 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;">
💬 "How should I prepare for tests?"
</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>
|
