Prepare for the CBSE Class 10 Computer Applications (Code 165) 2025 board examinations with this comprehensive, interactive HTML architecture and web design guide. This resource bridges the gap between theoretical syllabus requirements and practical application, specifically targeting high-weightage units like HTML layouts, networking fundamentals, and cascading style sheets (CSS).

Unlike traditional static notes, this guide integrates Visualizations to explain the Document Object Model (DOM), interactive code sandboxes for real-time syntax testing, and dynamic canvas diagrams to clarify complex topics such as table cell merging (rowspan/colspan) and the CSS Box Model. Whether you are revising legacy attributes, mastering HTML5 semantic structure, or preparing for the practical lab assessment, this module provides the technical depth and visual aids necessary to secure top marks in your computer applications paper.

HTML Architecture & Web Design

A technical breakdown of Unit 2 for Computer Applications (Code 165). This guide analyzes the document structure, multimedia integration, and styling logic required for the 2025 board examinations.

Curriculum Weightage Analysis

HTML constitutes the largest portion of the practical assessment and nearly half of the theory paper. Mastery of this unit affects the overall grade significantly.

Figure 1: Distribution of marks across Theory (50) and Practical (50) components.

Filter Topics:

1. The Web Ecosystem

Writing HTML requires understanding the environment where code executes. The syllabus links networking fundamentals directly to web development.

Protocols

HTTP: Standard rules for fetching web pages.
HTTPS: Secure version. Encrypts data between client and server.
FTP/SFTP: Used to upload local HTML files to a remote server.

Structure

URL: The address (e.g., https://cbse.nic.in).
Web Client: The browser (Chrome/Edge) that renders the code.
Web Server: The computer storing the website data.

2. Document Architecture

Every HTML file follows a tree structure. The <!DOCTYPE html> declaration ensures the browser renders in standards mode rather than quirks mode.

index.html

<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta charset=”UTF-8″> </head> <body> <h1>Main Heading</h1> <p>Content goes here.</p> </body> </html>

3. Text Formatting & Typography

HTML provides physical and logical tags to alter text appearance. The exam often tests the difference between deprecated tags and modern practices.

Tag	Description	Visual Result
<b>	Bold Text	Example
<i>	Italic Text	Example
<u>	Underline	Example
<sup>	Superscript (Powers)	X²
<sub>	Subscript (Chemical)	H₂O
<strike>	Strikethrough (Deprecated)	Example

Visualizing the DOM Tree (D3.js)

Browsers read HTML and construct a Document Object Model (DOM). This D3.js visualization shows how nested tags create a hierarchy (Parent → Child relationships).

Figure: The browser parses root, head, and body into nodes.

4. Legacy Attributes

<body> Attributes

bgcolor: Background Color
text: Default text color
link: Unvisited link color
vlink: Visited link color
alink: Active link color

<font> Tag Attributes

Note: Highly deprecated but often in syllabus.

face: Font family (e.g., “Arial”)
size: 1 to 7
color: Hex or Name

5. Semantic HTML5 Structure

Modern HTML uses tags that explain their content to the browser and search engines. Instead of using div for everything, use specific structural tags.

<header>: Introductory content or logos.
<nav>: Navigation links.
<main>: The dominant content of the body.
<section>: Thematic grouping of content.
<article>: Independent, self-contained content.
<footer>: Copyright and footer links.

6. List Type Attributes

The appearance of list markers can be changed using the `type` attribute.

Unordered List (<ul>)

type="disc" ● Default

type="circle" ○ Hollow

type="square" ■ Square

Ordered List (<ol>)

type="1" 1, 2, 3

type="A" A, B, C

type="i" i, ii, iii

7. Complex Layouts: Tables & Forms

Tables organize data grids. A common exam confusion is the difference between cellpadding and cellspacing.

Padding vs. Spacing

Cellpadding: Space between cell wall and content.
Cellspacing: Space between two cells.

Merging Cells

Rowspan merges down; Colspan merges right.

Table Attributes Quick Ref

Tag	Attributes	Usage
<table>	border, width, align, bgcolor	Defines the container. ‘align’ centers the whole table.
<tr>	align, valign, bgcolor	Applies style to the entire row.
<td>	align, valign, colspan, rowspan	‘align’ moves text left/right. ‘valign’ moves text top/middle/bottom.

HTML5 Form Attributes & Validation

Modern HTML forms can validate user input without JavaScript.

required

Prevents submission if the field is empty.

placeholder="Text..."

Shows a hint inside the box before typing.

min="1" max="10"

Restricts numerical input ranges.

pattern="[A-Za-z]{3}"

Uses Regex to validate format.

Form Data Flowchart (D3.js)

Visualizing how data travels from the browser to the server.

8. Multimedia & Embeds

Audio Tag

<audio controls loop>
  <source src="song.mp3" type="audio/mpeg">
</audio>

Video Tag

<video width="320" controls poster="thumb.jpg">
  <source src="movie.mp4" type="video/mp4">
</video>

Embedding Webpages (Iframes)

The <iframe> tag embeds another HTML page inside the current one.

9. Head Section & Meta Tags

The <head> section contains metadata that isn’t visible on the page but is critical for browser rendering and SEO.

Crucial Meta Tags

Character Set: <meta charset="UTF-8">
Ensures the browser handles special characters and emojis correctly.
Viewport (Responsive): <meta name="viewport" content="width=device-width, initial-scale=1.0">
Essential for making websites look good on mobile devices. Without this, mobile phones scale the page down like a desktop monitor.
Description: <meta name="description" content="...">
Used by search engines (like Google) to display snippets in search results.

10. CSS Strategies & Reference

Three ways to apply CSS: Inline (attribute), Internal (style tag), and External (link tag).

Selectors: Class vs. ID

Class Selector (.)

Can be used on multiple elements.


                            .btn { color: red; }

                            <button class="btn">

ID Selector (#)

Must be unique (one element per page).


                            #header { height: 50px; }

                            <div id="header">

Essential CSS Properties for Class 10

Text

color
text-align
text-decoration
font-family
font-weight

Background

background-color
background-image
background-repeat

Box

border-style
border-radius
margin
padding

11. Entities & Color Theory

HTML Entities

< <
> >
© ©
Space

Color Definitions

#FF0000 (Red)

#00FF00 (Green)

#0000FF (Blue)

12. The Box Model

Content: The actual text or image.
Padding: Space inside the border.
Border: A line going around the padding.
Margin: Space outside the border.

13. Common Exam Errors & Code Etiquette

How to Write Code in Exams

Indentation: Always indent nested tags to show structure clearly to the examiner.
Closing Tags: Double-check that all container tags (like `table`, `form`, `div`) are closed.
Lowercase: While HTML is case-insensitive, standard practice (and examiner preference) is lowercase tags.
Comments: Use  in HTML and /* Comment */ in CSS to explain complex logic.

Improper Nesting

Wrong: <b><i>Text</b></i>

Right: <b><i>Text</i></b> (First opened, last closed).

Unclosed Container Tags

Forgetting to close </table> or </form> can break the entire page layout.

Absolute vs Relative Paths

Writing C:/Users/Me/pic.jpg instead of pic.jpg will result in broken images on the examiner’s computer.

Case Sensitivity

HTML tags are not case sensitive, but file names often are. image.JPG is not the same as image.jpg on Linux servers.

Exam Q&A & Explanations

Q: Difference between POST and GET methods?

GET appends data to the URL (insecure). POST sends data in the HTTP body (secure, for passwords).

Q: Why use relative paths?

Relative paths (e.g., img/pic.jpg) work even if the project folder is moved. Absolute paths break if the drive letter changes.

Q: What is the use of <datalist>?

It provides an “Autocomplete” feature for input elements. Users can see a dropdown of pre-defined options as they type.

CBSE Class 10 HTML Guide (Code 165) | Notes, Lab & CSS Quiz