Information & Communication Technology (ICT)NCTB HSC ICT Chapter 4Web Design FoundationsHTML Tables & FormsBoard Exam CQ

HTML Code Playground & Live Runner

Interactive dual-pane HTML code editor with live sandboxed preview, device frames, and HSC Board exam table templates (colspan/rowspan).

Jump to:Calculator Formulas Exemplars Casio fx-991 Applications FAQ

Presets:

Quick insert:

Auto-run

HTML / CSS Source1109 chars • UTF-8

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 20px; background: #f8fafc; }
    h2 { color: #0284c7; }
    table { width: 100%; max-width: 500px; border-collapse: collapse; margin-top: 15px; }
    th, td { border: 2px solid #334155; padding: 10px; text-align: center; }
    th { background-color: #0284c7; color: white; }
    .highlight { background-color: #e0f2fe; font-weight: bold; }
  </style>
</head>
<body>
  <h2>HSC Board Student Grade Sheet</h2>
  <table>
    <tr>
      <th rowspan="2">Roll</th>
      <th rowspan="2">Name</th>
      <th colspan="2">Marks</th>
      <th rowspan="2">GPA</th>
    </tr>
    <tr>
      <th>Theory</th>
      <th>Practical</th>
    </tr>
    <tr>
      <td>101</td>
      <td>Rahim Ahmed</td>
      <td>68</td>
      <td>24</td>
      <td class="highlight">5.00</td>
    </tr>
    <tr>
      <td>102</td>
      <td>Sumaiya Kabir</td>
      <td>72</td>
      <td>25</td>
      <td class="highlight">5.00</td>
    </tr>
    <tr>
      <td colspan="4">Total Students Evaluated</td>
      <td>2</td>
    </tr>
  </table>
</body>
</html>

Live Browser Preview

● LIVEDESKTOP

https://localhost/hsc_board_preview.html

Formula & Derivation

Theoretical foundation, dimensional analysis, and governing boundary conditions.

1. Origin of WWW & History of HTML

In 1989, British physicist Tim Berners-Lee at CERN invented the World Wide Web (WWW) to facilitate global information sharing among scientists. In 1990, he authored the initial draft of HTML (HyperText Markup Language). Marc Andreessen created the graphical Mosaic browser in 1993, and in 1994, Berners-Lee founded the W3C (World Wide Web Consortium). Today, HTML5 stands as the universal living standard for digital content delivery.

2. Static vs. Dynamic Web Pages Comparison

Evaluation Criteria	Static Web Page	Dynamic Web Page
Content Nature	Fixed HTML; identical content delivered to all visitors.	Adaptive; dynamically compiled based on user sessions and DB state.
Technology Stack	HTML5, CSS3, Client-side JavaScript.	Node.js, Python, PHP, Java, ASP.NET.
Database Layer	No database required; fast CDN caching.	Requires relational (PostgreSQL, MySQL) or NoSQL storage.
Maintenance & Cost	Low deployment overhead; high inherent security.	Higher maintenance overhead; requires server monitoring.

3. Website Architectural Topologies

1. Linear / Sequential:

Pages are navigated sequentially in an orderly forward/back progression (e.g. step-by-step documentation, wizard flows).

2. Tree / Hierarchical:

Top-level homepage diverges into categorized branches and sub-pages. Standard for corporate and educational portals.

3. Network / Web-Linked:

Every page maintains cross-links to all others, granting visitors complete traversal freedom.

4. Hybrid / Composite:

Blends tree hierarchies with linear sub-sections for complex enterprise web applications.

4. HTML Table Architecture & Merging Rules (Rowspan & Colspan)

Secondary ICT exams frequently test irregular tables. Merging rules demand strict coordinate bookkeeping:

Rowspan (Vertical Merge):

Increases the downward span across <td rowspan="n"> rows. The succeeding n-1 row tags must omit this cell definition.

Colspan (Horizontal Merge):

Expands a cell sideways across <th colspan="n"> columns in the same row, proportionately decreasing the remaining cell count in that row.

5. Three Pillars of Website Publishing

Step 1: Domain Name

Registering a unique, memorable address (e.g., biggan.me) with an ICANN-accredited registrar.

Step 2: Web Hosting

Procuring persistent server storage space connected 24/7 to the internet backbone.

Step 3: FTP & Deployment

Uploading static assets and code bundles via secure FTP/Git workflows and registering search indexers.

Solved Textbook Examples

Three fully worked pedagogical exemplars: standard textbook, advanced edge-case, and authentic past board examination.

Foundational Conceptbg-emerald-500/10 text-emerald-400 border border-emerald-500/20

Construct a valid HTML5 page containing a top-level heading <h1> and a brief intro paragraph <p>.

Given Parameters:

Heading: STEM Foundations
Paragraph: Welcome to Web Design

Procedural Solution:

Declare <!DOCTYPE html> at the start.

Wrap structural elements inside <html>, <head>, and <body>.

Place <h1> and <p> tags inside the body tag.

Final Answer:<h1>STEM Foundations</h1><p>Welcome to Web Design</p>

Secondary Board Standardbg-cyan-500/10 text-cyan-400 border border-cyan-500/20

Design an examination grade table where the Marks header spans two sub-columns (Theory and Practical).

Given Parameters:

Total columns: 3
Required attribute: colspan="2"

Procedural Solution:

Create <table> container with border attributes.

In row 1, set <th colspan="2">Marks</th>.

In row 2, add subheaders <th>Theory</th> and <th>Practical</th>.

Final Answer:<th colspan="2">Marks</th> merges horizontal columns.

Practical Applicationbg-purple-500/10 text-purple-400 border border-purple-500/20

Write HTML for an enrollment form containing a student name text input and radio buttons for academic groups.

Given Parameters:

Form wrapper: <form>
Input types: text and radio

Procedural Solution:

Open form with <form method="POST">.

Add <input type="text" name="studentName">.

Add radio inputs with identical name="group" attribute to enforce mutual exclusivity.

Final Answer:<input type="radio" name="group" value="science"> Science

Board Exam & Laboratory Checklist

✓ Unit Conversion (SI)Convert all inputs to SI units prior to calculation.

✓ Formula & TranspositionExplicitly isolate target variable before substitution.

✓ Precision & RoundingPreserve required precision without premature truncation.

Practical Applications

How this scientific principle drives chemical engineering, aerospace, medicine, and research.

HTML5 and CSS3 serve as the universal foundation powering the modern web, hybrid mobile platforms (React Native, Capacitor, Electron), responsive corporate email templates, and cloud interfaces. Practicing inside this client-side sandbox equips students with real tactile coding muscle memory, ensuring accurate syntax for secondary board examinations and modern full-stack development.

Frequently Asked Questions

Answers to common conceptual misconceptions and board examination guidelines.

What is the difference between rowspan and colspan?▼

rowspan merges cells vertically across multiple rows, whereas colspan merges cells horizontally across multiple columns.

What are self-closing empty elements in HTML?▼

Empty elements do not have closing tags or text content between them, such as <br>, <img>, and <hr>.

Why is <!DOCTYPE html> mandatory?▼

It instructs modern web browsers to render the document in standard HTML5 mode rather than legacy quirks mode.

HTML Code Playground & Live Runner

Formula & Derivation

1. Origin of WWW & History of HTML

2. Static vs. Dynamic Web Pages Comparison

3. Website Architectural Topologies

4. HTML Table Architecture & Merging Rules (Rowspan & Colspan)

5. Three Pillars of Website Publishing

Solved Textbook Examples

Board Exam & Laboratory Checklist

Practical Applications

Frequently Asked Questions

Related Scientific Tools & Simulators

Logic Gate Circuits

C Code Runner

SQL Database Simulator

Privacy & Cookie Choices