IWT CAT-1: Official Syllabus & Exam Revision Blueprint

Internet & Web Technologies · Unit 1

IWT CAT-1: Official Syllabus & Exam Revision Blueprint

Course: Internet & Web Technologies
Course Code: 26CSE0106
Programme: B.E. Computer Science & Engineering (Semester 01)
Academic Assessment: Continuous Assessment Test 1 (CAT-1)
Coverage: Unit 1 (Complete) + Unit 2 (Foundations up to HTML Tables)

1. Official CAT-1 Syllabus (Prescribed Curriculum)

The official syllabus prescribed for Continuous Assessment Test 1 (CAT-1) comprises the following four modules:

Module 1:
Introduction to Web Technologies, Evolution of the World Wide Web, Internet Architecture,
Client–Server Architecture, Frontend and Backend Technologies, Static and Dynamic Websites,
Differences between Static and Dynamic Websites, Web Application Lifecycle, Stages of Web Application Development.

Module 2:
Web Browsers, Browser Rendering Process, Browser Developer Tools, HTTP and HTTPS Protocols,
HTTP Methods (GET, POST, PUT, DELETE), HTTP Status Codes.

Module 3:
HTTP Request–Response Model, HTTP Request and Response Components, DNS, Domain Names,
Domain Name Resolution Process, Top-Level Domains (TLDs), URL Structure, Absolute and Relative URLs,
Query Parameters, Web Hosting, Types of Web Hosting, Domain and Hosting Integration, Unit Summary.

Module 4:
Introduction to HTML5, HTML5 Document Structure, HTML Elements and Attributes,
Semantic HTML Elements, Headings, Paragraphs, Text Formatting, Comments, Hyperlinks, Images, Tables.

2. Examination Scope & Boundary Matrix

Understanding the exact boundary lines prevents wasting revision time on topics reserved for CAT-2 or the End-Semester Examination:

Topic Group	Status for CAT-1	Specific Exam Coverage	Detailed Notes Link
Unit 1: Web Foundations & Protocols	INCLUDED (100%)	Full unit: Web evolution, TCP/IP, client-server models, HTTP/HTTPS, methods, status codes, DNS, URLs, hosting	Unit 1 Notes
Unit 2: HTML5 Boilerplate & Semantics	INCLUDED	`<!DOCTYPE html>`, document tree, semantic tags (`<header>`, `<nav>`, `<article>`, etc.)	Unit 2 Part I
Unit 2: Text, Links, Images & Tables	INCLUDED	Headings (`<h1>`–`<h6>`), formatting, anchor tags, image tags & attributes, complete table architecture (`colspan`, `rowspan`)	Unit 2 Part I
Unit 2: Forms, Inputs & Form Validation	EXCLUDED (CAT-2)	`<form>`, text/email/password inputs, select/option, fieldset, native validation	Unit 2 Part II
Unit 2: Multimedia (Audio, Video, Canvas)	EXCLUDED (CAT-2)	`<audio>`, `<video>`, `<source>`, `<canvas>`, `<svg>`, `<iframe>`	Unit 2 Part II
Unit 2: Metadata, ARIA Accessibility & SEO	EXCLUDED (CAT-2)	Meta tags (viewport, robots, og:*), ARIA roles, Lighthouse audit	Unit 2 Part II
Unit 3: UI / UX Design Principles	EXCLUDED (CAT-2)	Wireframes, color theory, typography hierarchy, Jakob's Law	Unit 3 Notes
Unit 4: CSS3 & Responsive Web Design	EXCLUDED (CAT-2)	Selectors, Flexbox, Grid, Media queries, Box Model	Unit 4 Notes
Unit 5: Bootstrap 5 Framework	EXCLUDED (End-Sem)	Grid system, utility classes, components, responsive navigation	Unit 5 Notes
Unit 6: Testing, Optimization & Deployment	EXCLUDED (End-Sem)	Cross-browser testing, Lighthouse, Webpack/Vite, CI/CD, hosting	Unit 6 Notes

3. Module 1: Web Technologies & Internet Architecture

3.1 Introduction to Web Technologies

Definition: A collection of tools, protocols, markup specifications, and programming platforms used to author, transmit, render, and maintain content and distributed applications across the World Wide Web.
Core Pillars:
1. Structure: HyperText Markup Language (HTML5)
2. Presentation: Cascading Style Sheets (CSS3)
3. Behavior & Logic: Client-side JavaScript (ECMAScript)
4. Transport Protocols: Transmission Control Protocol / Internet Protocol (TCP/IP) suite and HyperText Transfer Protocol (HTTP/HTTPS).

3.2 Evolution of the World Wide Web

1969 — ARPANET: First packet-switching network funded by the US DoD (DARPA), establishing decentralized routing.
1983 — TCP/IP Standardization: Replaced NCP as the universal standard on ARPANET, defining the modern Internet foundation.
1989 — WWW Invention: Sir Tim Berners-Lee authored the proposal at CERN for information sharing using hypertext links.
1991 — First Public Website: Hosted on Berners-Lee's NeXT computer at info.cern.ch.
1995 — Dynamic Web Emergence: Introduction of JavaScript (Netscape) and server scripting (PHP, ASP) connected to relational databases.
Web Generations Matrix:

Dimension	Web 1.0 (1990–2000)	Web 2.0 (2000–2010)	Web 3.0 (2010–2020+)	Web 4.0 (Future)
Primary Nature	Read-Only (Static)	Read-Write (Interactive)	Read-Write-Execute (Semantic)	Intelligent / Ubiquitous OS
User Role	Passive consumer	Active producer & collaborator	Co-creator & owner	Autonomous immersion
Content Type	Static HTML pages	Social media, blogs, wikis	Linked data, AI, decentralized	Ambient interfaces, IoT
Pioneering Tech	HTML, basic HTTP	AJAX, REST APIs, Mobile Apps	RDF, SPARQL, Cloud, ML	Neuro-computing, WebOS

Internet vs. World Wide Web (Critical Distinction):
- The Internet: Global hardware infrastructure of interconnected physical networks, routers, cables, and switches operating at the Network/Transport layers.
- The Web (WWW): An application-layer information system running on top of the Internet, allowing documents to be discovered via URLs and retrieved via HTTP.

3.3 Internet Architecture & TCP/IP Model

The web relies on the four-layer TCP/IP architectural hierarchy:

+-----------------------------------------------------------------+
| 4. Application Layer    (HTTP, HTTPS, DNS, FTP, SMTP, SSH)      |
+-----------------------------------------------------------------+
| 3. Transport Layer      (TCP - Reliable stream / UDP - Datagram)|
+-----------------------------------------------------------------+
| 2. Internet Layer       (IP - IPv4/IPv6, ICMP, ARP, Routing)    |
+-----------------------------------------------------------------+
| 1. Network Access Layer (Ethernet, Wi-Fi 802.11, Fiber, MAC)    |
+-----------------------------------------------------------------+

3.4 Client–Server Architecture

The standard model for web communications where clients request resources and servers provide services:

2-Tier Architecture: Client (UI + Business Logic) directly accesses the Database Server. Simple, but suffers from low scalability and poor security.
3-Tier Architecture (Industry Standard):
1. Presentation Tier (Client): Web browser displaying HTML/CSS/JS.
2. Application / Business Logic Tier (Server): Node.js, Python, Java, or PHP processing requests and authentication.
3. Data Tier (Storage): Relational or NoSQL database (PostgreSQL, MySQL, MongoDB).
N-Tier Architecture: Splits tiers into microservices, load balancers, caching nodes (Redis), and CDNs for massive scalability.

3.5 Frontend vs. Backend Technologies

Attribute	Frontend (Client-Side)	Backend (Server-Side)
Execution Environment	User's web browser (V8, SpiderMonkey, WebKit)	Web server or cloud serverless runtime
Core Languages	HTML5, CSS3, JavaScript / TypeScript	JavaScript (Node.js), Python, Java, Go, PHP, C#
Primary Objective	Visual design, user interaction, UI responsiveness	Business logic, authentication, database persistence, security
Accessibility to User	Source code is public and inspectable via DevTools	Source code is compiled/private on the server

3.6 Static vs. Dynamic Websites

Feature	Static Website	Dynamic Website
Source Files	Pre-written HTML, CSS, JavaScript files	Server-side templates (EJS, Jinja) + Database records
Content Generation	Sent as-is from server disk	Assembled dynamically per request via server scripts
Database Requirement	None	Required for queries, user profiles, transactional data
Performance	Instantaneous; cacheable across global CDNs	Requires compute latency (query execution + rendering)
Security Risk	Minimal (no database injection or server code exploits)	High (SQL injection, XSS, CSRF must be prevented)
Cost & Hosting	Very low (GitHub Pages, Vercel, Netlify)	Higher (requires persistent compute instances or containers)

3.7 Web Application Development Lifecycle (Stages)

Requirements Gathering & Analysis: Define project scope, functional specifications, user personas, and SRS document.
UI/UX Design & Prototyping: Wireframing (low-fidelity), visual mockups (Figma), and interaction user flows.
Architecture & Database Design: Define API schemas, relational database entity-relationship diagrams (ERDs), and security boundaries.
Implementation & Coding: Frontend page construction and backend service/API coding.
Testing & Quality Assurance: Unit testing, cross-browser compatibility tests, responsive mobile checks, and vulnerability scanning.
Deployment & Hosting: CI/CD deployment to production web server, DNS configuration, and SSL certificate installation.
Maintenance & Monitoring: Error logging, performance tracking, security patches, and incremental feature updates.

4. Module 2: Web Browsers, Rendering & HTTP/HTTPS

4.1 Web Browsers & Engine Landscape

A web browser is client software that fetches, interprets, and renders web documents. Major rendering engines include:

Blink: Google Chrome, Microsoft Edge, Brave, Opera (Chromium open-source branch).
Gecko: Mozilla Firefox.
WebKit: Apple Safari (iOS & macOS).

4.2 The Browser Rendering Process (Critical Rendering Path)

When HTML is delivered to the browser, it executes a sequential 6-stage rendering pipeline:

[HTML Parsing] ---> [DOM Tree]       \
                                      +--> [Render Tree] ---> [Layout (Reflow)] ---> [Paint] ---> [Compositing]
[CSS Parsing]  ---> [CSSOM Tree]     /

DOM Tree Construction: Converts raw HTML bytes into characters, tokens, nodes, and finally the hierarchical Document Object Model (DOM).
CSSOM Tree Construction: Parses external stylesheets and internal styles to construct the CSS Object Model (CSSOM).
Render Tree Generation: Combines visible DOM nodes with their computed CSSOM styles (omitting display: none and <head> elements).
Layout (Reflow): Computes exact geometric coordinates, widths, and viewport positions of every element in the render tree.
Paint (Repaint): Rasterizes text, colors, borders, shadows, and images into actual screen pixels.
Compositing: Assembles individual painted layers on the GPU and draws them to the display screen.

4.3 Browser Developer Tools (DevTools)

Essential built-in toolkit (opened via F12 or Ctrl+Shift+I):

Elements Tab: Live DOM tree inspection and real-time CSS style tweaking.
Console Tab: JavaScript execution REPL, error logging (console.error()), and warning alerts.
Network Tab: Inspects all HTTP requests, response headers, status codes, payload sizes, and load timing waterfalls.
Sources / Debugger Tab: Breakpoint debugging, call stack inspection, and local workspace file mapping.
Application Tab: LocalStorage, SessionStorage, Cookies, IndexedDB, and PWA manifests.

4.4 HTTP vs. HTTPS Protocols

Dimension	HTTP (HyperText Transfer Protocol)	HTTPS (HTTP Secure)
Default Port	Port 80	Port 443
Security Layer	Plaintext transmission (Unencrypted)	SSL/TLS (Secure Sockets Layer / Transport Layer Security)
Confidentiality	Vulnerable to packet sniffing and MITM eavesdropping	Fully encrypted end-to-end between client and server
Integrity & Trust	Data can be altered in transit without detection	Cryptographic checksums prevent tampering; signed by CA
SEO Impact	Flagged as "Not Secure" by modern browsers	Standard requirement for all modern sites and search rankings

4.5 HTTP Request Methods

Method	Purpose	Idempotent?	Safe?	Request Body
GET	Retrieve data from server	Yes	Yes	No (parameters in URL)
POST	Submit data to create a new resource	No	No	Yes (Payload/Form data)
PUT	Replace/overwrite entire target resource	Yes	No	Yes (Complete resource)
DELETE	Remove specified resource from server	Yes	No	Optional

Safe Method: Does not alter server state (read-only operation).
Idempotent Method: Executing the request multiple consecutive times produces the identical server state as executing it once.

4.6 HTTP Status Codes (Essential Memorization Table)

1xx: Informational   |   2xx: Success   |   3xx: Redirection   |   4xx: Client Error   |   5xx: Server Error

Code	Standard Reason Phrase	Technical Meaning & Exam Significance
200	OK	Standard successful response for GET/POST requests.
201	Created	Request succeeded and a new resource was created (common for POST).
204	No Content	Request succeeded, but response intentionally has no body content.
301	Moved Permanently	Target URL has permanently shifted; browser updates bookmarks and caches new URI.
302	Found / Temporary Redirect	Target resource temporarily resides at a different URI.
304	Not Modified	Conditional GET validated: cached client copy is fresh, saving bandwidth.
400	Bad Request	Malformed request syntax or invalid parameters sent by client.
401	Unauthorized	Authentication is required and has failed or has not been provided.
403	Forbidden	Server authenticated client, but refuses authorization for requested resource.
404	Not Found	The requested resource cannot be found on the server.
405	Method Not Allowed	Request method is known by server but not supported by target resource.
500	Internal Server Error	Generic server crash, uncaught script exception, or database failure.
502	Bad Gateway	Server acting as proxy received an invalid response from upstream server.
503	Service Unavailable	Server temporarily unable to handle request due to overload or maintenance.
504	Gateway Timeout	Gateway or proxy did not receive timely response from upstream server.

5. Module 3: Request-Response Lifecycle, DNS & Web Hosting

5.1 HTTP Request–Response Model & Message Anatomy

HTTP is a stateless, application-layer client-initiated protocol:

Client (Browser)                           Web Server
       |                                       |
       |  1. Establish TCP Connection (Handshake) |
       |-------------------------------------->|
       |  2. HTTP Request                      |
       |======================================>|
       |  3. Process Request (Query DB/Files)   |
       |  4. HTTP Response                     |
       |<======================================|
       |  5. Close/Keep-Alive Connection       |

HTTP Request Structure

Request Line: METHOD Request-URI HTTP-Version (e.g. GET /index.html HTTP/1.1)
Request Headers:
- Host: example.com (Mandatory in HTTP/1.1)
- User-Agent: Mozilla/5.0 ... (Client identity)
- Accept: text/html,application/xhtml+xml (MIME preference)
- Content-Type: application/x-www-form-urlencoded (MIME type of body)
Empty Line: CRLF (\r\n) separating headers from message body.
Message Body: Optional data payload (used in POST and PUT requests).

HTTP Response Structure

Status Line: HTTP-Version Status-Code Reason-Phrase (e.g. HTTP/1.1 200 OK)
Response Headers:
- Date: Fri, 18 Sep 2026 12:00:00 GMT
- Server: Apache/2.4.51 (Unix)
- Content-Type: text/html; charset=UTF-8
- Content-Length: 4096
- Set-Cookie: sessionId=xyz123; HttpOnly; Secure
Empty Line: CRLF (\r\n) delimiter.
Message Body: Raw HTML, JSON, image bytes, or requested data stream.

5.2 DNS (Domain Name System) & Domain Hierarchy

DNS acts as the global directory translating human-memorable domain names into machine-routable IP addresses:

                     . (Root Zone)
                     /           \
                 .com             .edu
                 /                   \
           google.com            chitkara.edu
           /        \                  \
     www.google.com  api.google.com   portal.chitkara.edu

TLD (Top-Level Domain): Top tier of hierarchy:
- Generic TLDs (gTLDs): .com, .org, .net, .edu, .gov
- Country-Code TLDs (ccTLDs): .in (India), .uk (United Kingdom), .ca (Canada).
SLD (Second-Level Domain): Domain registered by organization (chitkara, google).
Subdomain: Sub-division created by administrator (www, portal, mail, lms).

5.3 The 8-Step Domain Name Resolution Process

Browser Cache Check: Browser checks if IP was resolved recently.
OS Cache Check: Operating system checks local resolver cache and hosts file.
Query Recursive Resolver (ISP / DNS 8.8.8.8): If cache misses, OS queries recursive server.
Query Root Nameserver (.): Recursive resolver contacts root server, which directs it to the TLD server (e.g. .com).
Query TLD Nameserver: TLD server returns the Authoritative Nameserver for the specific domain.
Query Authoritative Nameserver: Holds the official DNS records (A, AAAA, CNAME) and returns the exact IP address.
Recursive Resolver Caches Result: Stores record matching the TTL (Time-To-Live) and responds to OS.
Browser Initiates TCP Connection: Connects to returned IP over port 80/443.

5.4 URL Structure (Uniform Resource Locator)

Anatomy of a complete web address:

https://www.example.com:443/courses/web-tech/index.html?subject=iwt&unit=1#topics
|___|   |_____________| |__| |________________________| |________________| |_____|
Scheme     Hostname     Port            Path                Query String   Fragment

Scheme / Protocol: Specifies method of access (http://, https://, ftp://).
Hostname / Domain: Identifies the web host (www.example.com).
Port: Target networking port (:80 for HTTP, :443 for HTTPS; default omitted).
Path: Hierarchical location of requested resource on server file system.
Query Parameters: Key-value pairs (?key1=val1&key2=val2) transmitting dynamic parameters.
Fragment Identifier: Client-side anchor (#section-id) jumping directly to an element.

Absolute vs. Relative URLs

Absolute URL: Contains full scheme and domain (https://chitkara.edu.in/admissions/). Valid from any location on the web.
Relative URL: Points to a resource relative to the current file or site root:
- index.html (Same directory)
- ../images/logo.png (One folder up, into images)
- /css/style.css (From website domain root).

5.5 Web Hosting: Types & DNS Integration

Web hosting involves leasing persistent server storage, bandwidth, and compute resources connected to high-availability Internet backbones.

Hosting Type	Architecture	Pros	Cons
Shared Hosting	Hundreds of websites share single OS and CPU/RAM	Very cheap, managed control panel	Resource contention ("noisy neighbor"), security risks
VPS (Virtual Private Server)	Physical server partitioned into isolated virtual machines	Dedicated RAM/CPU, root access, customizable	Requires server administration skills
Dedicated Hosting	Renter leases entire physical server machine	Maximum power, full hardware control, top security	Highest expense, manual maintenance
Cloud Hosting	Clustered network of virtual servers (AWS, GCP, Azure)	Dynamic auto-scaling, high reliability, pay-as-you-use	Complex billing, setup expertise

Domain & Hosting Integration Workflow:
1. Purchase domain at a Domain Registrar (GoDaddy, Namecheap).
2. Purchase hosting package and obtain server IP address or Nameservers (ns1.host.com).
3. Update Registrar DNS settings to point to hosting nameservers or configure an A Record (mapping @ to server IPv4).
4. Wait for global DNS propagation (typically 1 to 24 hours depending on TTL).

6. Module 4: HTML5 Foundations through Tables

6.1 Introduction to HTML5 & Standard Document Structure

HTML5 is the universal standard for authoring web documents, maintained by WHATWG and W3C.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
</head>
<body>
  <!-- All visible content renders here -->
</body>
</html>

<!DOCTYPE html>: Case-insensitive doctype declaration informing the browser to render in full standard mode (preventing legacy Quirks Mode).
<html lang="en">: Root container specifying English as document language for accessibility and search engines.
<head>: Container for document metadata not visible directly in the viewport.
<meta charset="UTF-8">: Character encoding declaration supporting virtually all written human languages and symbols.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures responsive mobile scaling matching physical device width.
<body>: Contains all rendered document markup (text, images, links, tables).

6.2 HTML Elements and Attributes

Container Elements: Paired tags containing text or children: <p>Sample text</p>
Void (Empty) Elements: Self-closing tags without closing tags or inner content:
- <br> (line break)
- <hr> (thematic break)
- <img> (image)
- <input> (input field)
- <meta> (metadata)
- <link> (resource link)
Attributes: Key-value configuration pairs inside the opening tag:
- Global attributes: id, class, style, title, lang, hidden, tabindex.
- Element-specific attributes: href on <a>, src and alt on <img>.

6.3 Semantic HTML Elements

Semantic elements clearly describe their meaning to both browser and developer, vastly improving accessibility (screen readers) and SEO rankings.

+-------------------------------------------------------------+
| <header> (Logo, University Title, Top Utilities)            |
+-------------------------------------------------------------+
| <nav> (Navigation Links: Home, Syllabus, Notes, Contact)     |
+-------------------------------------+-----------------------+
| <main>                              | <aside>               |
|  <section>                          |  (Sidebar, Notices,   |
|   <article>                         |   Quick Links,        |
|    <h1>Article Title</h1>           |   Advertisements)     |
|    <p>Article body content...</p>   |                       |
|   </article>                        |                       |
|  </section>                         |                       |
+-------------------------------------+-----------------------+
| <footer> (Copyright, Contact Info, Terms, Disclaimer)       |
+-------------------------------------------------------------+

<header>: Introductory content or site-wide banner.
<nav>: Primary navigation links.
<main>: Central, unique body content of the document (only one per page).
<section>: Thematic grouping of content, typically with a heading.
<article>: Self-contained, independently distributable composition (blog post, news story).
<aside>: Tangentially related content (sidebars, pull quotes).
<footer>: Concluding footer info (copyright, legal links, author contact).
Non-semantic elements: <div> (generic block container) and <span> (generic inline container).

6.4 Headings, Paragraphs, Text Formatting & Comments

Headings (<h1> to <h6>): Six levels of structural priority. Always follow a strict descending hierarchy; never skip heading levels for visual styling.
Paragraph (<p>): Block of text with default top/bottom margins.
Comments (): Code annotations ignored by the rendering engine.
Text Formatting Tags Comparison:

Tag	Name	Type	Semantic Meaning vs. Presentation
`<strong>`	Strong Importance	Inline	Indicates high urgency, seriousness, or importance (rendered bold).
`<b>`	Bold	Inline	Stylistic bold text without conveying extra importance.
`<em>`	Emphasized Text	Inline	Stressed verbal emphasis that alters sentence meaning (rendered italic).
`<i>`	Idiomatic Text	Inline	Alternate voice, mood, technical term, or foreign phrase (rendered italic).
`<mark>`	Marked Text	Inline	Highlighted text for reference or search hit relevance.
`<small>`	Small Text	Inline	Fine print, side comments, disclaimers, or copyright text.
`<del>`	Deleted Text	Inline	Represents text removed or superseded in a document revision.
`<ins>`	Inserted Text	Inline	Represents text added during an editorial revision.
`<sub>`	Subscript	Inline	Lowered text baseline for chemical formulas: `H<sub>2</sub>O`.
`<sup>`	Superscript	Inline	Raised text baseline for mathematical powers: `x<sup>2</sup> + y<sup>2</sup>`.
`<code>`	Inline Code	Inline	Monospace font representation of code snippets.
`<pre>`	Preformatted	Block	Retains exact whitespace, tabs, and newlines as authored.
`<abbr>`	Abbreviation	Inline	Displays full explanation tooltip via `title` attribute: `<abbr title="HyperText Markup Language">HTML</abbr>`.

6.5 Hyperlinks (`<a>`)

The anchor element creates hyperlinks to external sites, internal files, or on-page fragment anchors:

<!-- External Link with Security Best Practices -->
<a href="https://chitkara.edu.in" target="_blank" rel="noopener noreferrer">Visit Chitkara University</a>

<!-- On-Page Fragment Bookmark -->
<a href="#module-4">Jump to Module 4</a>

<!-- Mailto and Tel Protocol Handlers -->
<a href="mailto:info@chitkara.edu.in">Send Email</a>
<a href="tel:+911234567890">Call Office</a>

href: Target URL or URI scheme.
target="_blank": Opens target document in a new tab/window.
rel="noopener noreferrer": Mandatory security attribute with target="_blank" to prevent Reverse Tabnabbing and suppress the Referer header.

6.6 Images (`<img>`)

Void inline element embedding raster or vector graphics:

<img src="images/web-architecture.png"
     alt="Diagram illustrating 3-tier client-server web architecture"
     width="600"
     height="400"
     loading="lazy">

src: Location path (relative or absolute) of graphic asset.
alt: Text alternative for screen readers and search engines; rendered if the asset fails to load.
width & height: Explicit integer dimensions preventing Cumulative Layout Shift (CLS).
loading="lazy": Native browser deferred loading for off-screen images.

6.7 Tables (`<table>`)

Tables structure multi-dimensional tabular data into rows and columns:

<table border="1">
  <caption>CAT-1 Examination Marks Distribution</caption>
  <thead>
    <tr>
      <th scope="col">Unit #</th>
      <th scope="col">Module Name</th>
      <th scope="col">Exam Weightage</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Unit 1</td>
      <td>Web Foundations & Protocols</td>
      <td>60%</td>
    </tr>
    <tr>
      <td>Unit 2</td>
      <td>HTML5 Foundations through Tables</td>
      <td>40%</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total Assessment Weightage</th>
      <td>100%</td>
    </tr>
  </tfoot>
</table>

Table Tags & Semantic Roles:
- <table>: Root wrapper for tabular data.
- <caption>: Descriptive title of the table (always first child).
- <thead>: Header block containing column headings (<th>).
- <tbody>: Main body block containing data rows.
- <tfoot>: Summary or aggregate row block at the bottom.
- <tr>: Table row container.
- <th>: Header cell (bold and centered by default, associates scope="col" or scope="row").
- <td>: Standard tabular data cell.
Cell Spanning Attributes:
- colspan="N": Merges a cell horizontally across $$N$$ columns.
- rowspan="N": Merges a cell vertically across $$N$$ rows.

7. High-Yield CAT-1 Quick Revision Matrix

7.1 Key Technical Distinctions for Exams

Comparison	Core Point of Difference
Internet vs. Web	Internet is network infrastructure (hardware/routers); Web is an application-layer service (HTTP/HTML).
GET vs. POST	GET parameters are visible in the URL, cacheable, and idempotent; POST carries data in the message body, is not cached, and creates resources.
HTTP vs. HTTPS	HTTP transmits plaintext over port 80; HTTPS encrypts traffic via SSL/TLS over port 443.
`<strong>` vs. `<b>`	`<strong>` provides semantic urgency/importance; `<b>` provides visual bolding without semantic weight.
`colspan` vs. `rowspan`	`colspan` spans columns horizontally; `rowspan` spans rows vertically.
301 vs. 302	301 is permanent redirect (clients update caches); 302 is temporary redirect.
401 vs. 403	401 is Unauthorized (authentication credentials missing/invalid); 403 is Forbidden (authenticated user lacks access permissions).

7.2 CAT-1 Self-Assessment Checklist

Explain the four layers of the TCP/IP teaching model with corresponding protocols.
Diagram the 6 stages of the Critical Rendering Path (CRP) in web browsers.
Trace all 8 steps of the DNS domain name resolution workflow.
Distinguish between 2-Tier, 3-Tier, and N-Tier web architectures.
Contrast Static and Dynamic websites across performance, security, and hosting cost.
List all 5 HTTP status code classes with two examples from each.
Write the standard HTML5 document boilerplate and explain every tag.
Identify at least 6 HTML5 semantic tags and draw their typical page placement.
Write HTML markup for a table featuring <caption>, <thead>, <tbody>, <tfoot>, and a spanning colspan cell.