Chapter 1: Introduction to HTML

1.1 What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to create and structure web pages. HTML tells a web browser how the content of a webpage is organized — headings, paragraphs, images, links, lists and tables.

For example, when you visit a school website, HTML provides the structure for the school name, logo, admission information, notices and contact details.

1.2 Meaning of HTML

HyperText: Text that connects to other documents or web pages through hyperlinks.
Markup: Special tags used to identify and organize different types of content.
Language: A system of rules and instructions used to create documents.

1.3 Why is HTML used?

Creating websites and web pages.
Displaying text, headings and paragraphs.
Adding images, audio and video.
Creating hyperlinks between web pages.
Organizing information into tables and lists.
Creating forms for collecting user information.
Providing structure for CSS styling and JavaScript functionality.

1.4 How does HTML work?

HTML Code → Structure and content → Web Browser reads and renders → Web Page displayed. Browsers such as Chrome, Firefox or Edge read HTML and render the page. Users see the webpage, not the HTML source.

1.5 Advantages of HTML

Easy to learn and use.
Supported by modern web browsers.
Works on different operating systems.
Can be combined with CSS and JavaScript.
Supports hyperlinks and multimedia.
No expensive software needed to get started.

1.6 Limitations of HTML

HTML alone does not provide advanced visual styling.
Cannot perform complex programming tasks by itself.
Does not independently store information in a database.
Interactive features often require JavaScript.
Modern responsive designs generally require CSS.

1.7 Example: First HTML webpage

first.html

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>I am learning web development.</p>
</body>
</html>

Output: A webpage displaying the heading “Welcome to HTML” and the paragraph “I am learning web development.”

Chapter 2: HTML Editors

2.1 What is an HTML editor?

An HTML editor is a software application used to write, edit and manage HTML code. HTML files are usually saved with the .html or .htm extension.

2.2 Types of HTML editors

1. Notepad

A simple text editor available on Windows. Students can use it to write HTML code manually and save it with the .html extension.

2. Visual Studio Code (VS Code)

A popular code editor offering syntax highlighting, code completion, extensions and debugging tools.

3. Notepad++

A lightweight source-code editor with syntax highlighting and useful editing features. Other options include Sublime Text and online editors such as the W3Schools Tryit Editor.

2.3 Steps to create an HTML file using Notepad

Open Notepad.
Type the HTML code.
Click File → Save As.
Enter the filename index.html.
Select All Files as the file type, if required.
Save the file in an easily accessible folder.
Double-click the saved file or open it in a web browser.
Edit the code in Notepad and refresh the browser to view changes.

Important: Ensure the file is saved as index.html, not index.html.txt.

2.4 HTML editor versus web browser

HTML editor	Web browser
Used to write and edit code.	Used to view the rendered webpage.
Examples: Notepad, VS Code.	Examples: Chrome, Firefox, Edge.
Saves HTML files.	Opens and displays HTML files.

Chapter 3: Basic Structure of HTML

3.1 Standard HTML document structure

structure.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>My Webpage</title>
</head>
<body>
    <h1>My First Webpage</h1>
    <p>This is my first HTML document.</p>
</body>
</html>

3.2 Explanation of the tags

Tag or declaration	Explanation
`<!DOCTYPE html>`	Declares an HTML5 document.
`<html>`	Root element containing the entire document.
`lang="en"`	Identifies English as the main language.
`<head>`	Contains metadata, title and resource links.
`<meta charset="UTF-8">`	Specifies character encoding.
`<meta name="viewport">`	Helps the page adapt to mobile screens.
`<title>`	Sets the browser tab title.
`<body>`	Main visible content.
`<h1>`	Top-level heading.
`<p>`	Paragraph.

3.3 Important points

The <!DOCTYPE html> declaration is not an ordinary HTML element.
Most HTML elements have opening and closing tags.
Elements should be nested correctly.
The page title belongs inside <head>.
Visible page content generally belongs inside <body>.

Correct nesting

correct.html

<p>This is <strong>important</strong> information.</p>

Incorrect nesting

incorrect.html

<p>This is <strong>important</p></strong>

Chapter 4: HTML Elements and Tags

4.1 What is an HTML tag?

An HTML tag is a markup instruction written within angle brackets. Examples: <h1>, <p>, <img>, <a>.

4.2 What is an HTML element?

An element usually consists of an opening tag, content and a closing tag.

element.html

<p>Welcome to our school.</p>

Opening tag: <p>
Content: Welcome to our school.
Closing tag: </p>

4.3 Types of HTML elements

A. Elements with opening and closing tags

normal-elements.html

<h1>My School</h1>
<p>Education is important.</p>

B. Void elements (no closing tag)

void.html

<br>
<hr>
<img src="https://picsum.photos/200" alt="School">
<input type="text">

4.4 What are HTML attributes?

Attributes provide additional information about an element and are written inside the opening tag.

attributes.html

<a href="https://www.google.com"
   title="Open Google">
    Visit Google
</a>

4.5 Common HTML attributes

Attribute	Purpose
`id`	Unique identifier for an element.
`class`	Groups elements for styling or scripting.
`style`	Applies inline CSS.
`title`	Additional advisory information.
`href`	Link destination.
`src`	Resource location (images).
`alt`	Alternative text for an image.
`width`, `height`	Dimensions.

4.6 Difference between tags, elements and attributes

compare.html

<img src="https://picsum.photos/200" alt="Red flower" width="200">

Tag: <img>
Attributes: src, alt, width
Values: "flower.jpg", "Red flower", "200"
Element: the complete image element.

Chapter 5: HTML Headings and Paragraphs

5.1 HTML headings

headings.html

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>
<h4>Heading Level Four</h4>
<h5>Heading Level Five</h5>
<h6>Heading Level Six</h6>

Headings have default browser styling but can be changed using CSS.

5.2 HTML paragraphs

paragraphs.html

<p>HTML is used to create web pages.</p>
<p>CSS is used to style web pages.</p>

5.3 HTML line breaks

br.html

<p>
    My name is Amey.<br>
    I am learning HTML.<br>
    I want to create websites.
</p>

5.4 HTML horizontal rules

hr.html

<h2>Introduction</h2>
<p>This section introduces HTML.</p>

<hr>

<h2>Conclusion</h2>
<p>HTML is useful for building websites.</p>

5.5 Complete practical example

school.html

<!DOCTYPE html>
<html>
<head>
    <title>My School</title>
</head>
<body>
    <h1>My School</h1>
    <p>My school provides quality education.</p>

    <h2>Our Facilities</h2>
    <p>We have a library, computer lab and playground.</p>

    <hr>

    <h2>Contact</h2>
    <p>Email: school@example.com</p>
</body>
</html>

Chapter 6: HTML Styles and Formatting

HTML provides elements for indicating meaning or importance of text. CSS controls most visual formatting.

6.1 Text formatting tags

Tag	Purpose	Example
`<b>`	Bold styling	`<b>Welcome</b>`
`<strong>`	Important text	`<strong>Warning</strong>`
`<i>`	Alternate voice / italic	`<i>Scientific name</i>`
`<em>`	Emphasis	`<em>Very important</em>`
`<u>`	Underline	`<u>Underlined</u>`
`<mark>`	Highlight	`<mark>Important</mark>`
`<small>`	Small print	`<small>Terms apply</small>`
`<del>`	Deleted text	`<del>₹500</del>`
`<ins>`	Inserted text	`<ins>₹400</ins>`
`<sub>`	Subscript	`H<sub>2</sub>O`
`<sup>`	Superscript	`x<sup>2</sup>`

6.2 Example of text formatting

formatting.html

<h2>Text Formatting Examples</h2>

<p><b>Bold text</b></p>
<p><strong>Important information</strong></p>
<p><i>Italic text</i></p>
<p><em>Emphasized text</em></p>
<p><u>Underlined text</u></p>
<p><mark>Highlighted text</mark></p>
<p><del>Old price: ₹500</del></p>
<p><ins>New price: ₹400</ins></p>
<p>Water formula: H<sub>2</sub>O</p>
<p>Square: 5<sup>2</sup> = 25</p>

6.3 HTML styles using CSS

Syntax: <tagname style="property: value;">Content</tagname>

styles.html

<h1 style="color: blue;">My Website</h1>

<p style="font-size: 20px;">
    Welcome to my webpage.
</p>

<p style="text-align: center;">
    This paragraph is centered.
</p>

6.4 Common CSS properties

Property	Example	Purpose
`color`	`color: red;`	Text colour
`background-color`	`background-color: yellow;`	Background
`font-size`	`font-size: 18px;`	Text size
`font-family`	`font-family: Arial;`	Font family
`text-align`	`text-align: center;`	Alignment
`border`	`border: 1px solid black;`	Border
`padding`	`padding: 10px;`	Inside space
`margin`	`margin: 20px;`	Outside space

6.5 Internal CSS

internal-css.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>

    <style>
        body {
            background-color: lightyellow;
        }

        h1 {
            color: navy;
            text-align: center;
        }

        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Welcome</h1>
    <p>This webpage uses internal CSS.</p>
</body>
</html>

6.6 Difference between HTML formatting and CSS

HTML elements such as <strong> and <em> provide semantic meaning. CSS controls presentation — colours, fonts, alignment and spacing.

Chapter 7: HTML Colours

7.1 Introduction

Colours make a webpage more attractive. In HTML, colours are applied using CSS to text, backgrounds, borders, buttons, tables and other elements.

7.2 Colour names

colornames.html

<h1 style="color: red;">Red Heading</h1>
<p style="color: blue;">Blue Paragraph</p>
<p style="background-color: yellow;">
    Yellow Background
</p>

7.3 Hexadecimal colour values

Form: #RRGGBB. Examples:

Colour	Hex code
Black	`#000000`
White	`#FFFFFF`
Red	`#FF0000`
Green	`#008000`
Blue	`#0000FF`
Yellow	`#FFFF00`
Purple	`#800080`

hex.html

<h1 style="color: #0000FF;">Blue Heading</h1>
<p style="background-color: #FFFF00;">Yellow Background</p>

7.4 RGB colours

rgb.html

<p style="color: rgb(255, 0, 0);">Red Text</p>
<p style="color: rgb(0, 0, 255);">Blue Text</p>

7.5 RGBA colours

rgba.html

<div style="background-color: rgba(255, 0, 0, 0.5); padding: 10px;">
    Partially transparent red background
</div>

7.6 HSL colours

hsl.html

<p style="color: hsl(120, 100%, 25%);">Dark Green Text</p>

7.7 Practical exercise

Create a webpage containing a red heading, a blue paragraph, a yellow background section and a green border around a text box.

Chapter 8: HTML Links

8.1 What is a hyperlink?

A hyperlink connects one webpage or resource to another. The <a> element creates hyperlinks.

8.2 Syntax

syntax.html

<a href="URL">Link Text</a>

8.3 External website link

external.html

<a href="https://www.google.com">Visit Google</a>

8.4 Link to another local webpage

local.html

<a href="about.html">About Us</a>

8.5 Open a link in a new tab

newtab.html

<a href="https://www.wikipedia.org"
   target="_blank"
   rel="noopener">
    Visit Wikipedia
</a>

8.6 Email link

email.html

<a href="mailto:tecwithamey@gmail.com">
    Contact Us
</a>

8.7 Link to a section on the same page

section.html

<a href="#contact">Go to Contact</a>

<h2 id="contact">Contact Us</h2>
<p>Contact information appears here.</p>

8.8 Image as a link

image-link.html

<a href="https://www.example.com">
    <img src="https://picsum.photos/150"
         alt="Visit Example Website" width="150">
</a>

8.9 Important link attributes

href — destination.
target — where the linked content opens.
title — advisory info.
rel — relationship with the linked resource.

Practical task: Create a webpage with links to three educational websites, an email link and a link to a section at the bottom of the page.

Chapter 9: HTML Images

9.1 What is an image in HTML?

The <img> element displays images. It is a void element (no closing tag).

9.2 Basic syntax

basic-img.html

<img src="flower.jpg" alt="A red flower">

src — image file or URL.
alt — alternative text (also supports accessibility).

9.3 Setting image width and height

width-height.html

<img src="https://picsum.photos/400/250"
     alt="School building"
     width="400"
     height="250">

9.4 Using CSS to resize images

resize.html

<img src="https://picsum.photos/300"
     alt="Flower"
     style="width: 300px; height: auto;">

<img src="https://picsum.photos/600/300"
     alt="School"
     style="max-width: 100%; height: auto;">

9.5 Image file formats

Format	Common use
JPEG/JPG	Photographs and complex images.
PNG	Graphics requiring transparency.
GIF	Simple animations.
SVG	Scalable logos and icons.
WebP	Efficient web compression.
AVIF	Modern efficient compression.

9.6 Using an image from a folder

Folder structure: MyWebsite/index.html + MyWebsite/images/school.jpg

folder-img.html

<img src="images/school.jpg" alt="School building">

9.7 Common image mistakes

Incorrect filename.
Incorrect folder path.
Missing file extension.
Image URL unavailable.
Missing alternative text.
Image stretched by unsuitable dimensions.

Practical: Create a webpage with three images, each with a different width, descriptive alt text and a suitable heading.

Chapter 10: HTML Tables

10.1 What is an HTML table?

An HTML table displays information in rows and columns — useful for marksheets, timetables and schedules.

10.2 Basic table tags

Tag	Meaning
`<table>`	Creates the table.
`<tr>`	Creates a row.
`<th>`	Header cell.
`<td>`	Data cell.
`<caption>`	Table caption.
`<thead>`, `<tbody>`, `<tfoot>`	Group header, body, footer rows.

10.3 Basic table example

table.html

<table border="1">
    <caption>Student Marks</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Marks</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Rahul</td>
            <td>10</td>
            <td>85</td>
        </tr>
        <tr>
            <td>Priya</td>
            <td>10</td>
            <td>92</td>
        </tr>
    </tbody>
</table>

10.4 Styling a table with CSS

styled-table.html

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid black;
        padding: 10px;
        text-align: center;
    }

    th {
        background-color: lightblue;
    }
</style>

<table>
    <tr><th>Subject</th><th>Marks</th></tr>
    <tr><td>English</td><td>85</td></tr>
    <tr><td>Computer</td><td>92</td></tr>
</table>

10.5 Colspan

colspan.html

<table border="1">
    <tr>
        <th colspan="2">Student Details</th>
    </tr>
    <tr>
        <td>Name</td>
        <td>Rahul</td>
    </tr>
</table>

10.6 Rowspan

rowspan.html

<table border="1">
    <tr>
        <th rowspan="2">Class</th>
        <th>Student</th>
    </tr>
    <tr>
        <td>Rahul</td>
    </tr>
</table>

10.7 Complete marksheet practical

marksheet.html

<!DOCTYPE html>
<html>
<head>
    <title>Student Marksheet</title>
    <style>
        table {
            border-collapse: collapse;
            width: 70%;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }

        th {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <h1>Student Marksheet</h1>

    <table>
        <tr>
            <th>Roll No.</th>
            <th>Name</th>
            <th>English</th>
            <th>Computer</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Rahul</td>
            <td>85</td>
            <td>92</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Priya</td>
            <td>90</td>
            <td>95</td>
        </tr>
    </table>
</body>
</html>

Practical task: Create a school timetable with five days, four periods and a break row.

Chapter 11: HTML Lists

HTML supports three main list types.

11.1 Ordered list

ol.html

<h2>Daily Routine</h2>

<ol>
    <li>Wake up</li>
    <li>Study</li>
    <li>Attend school</li>
    <li>Complete homework</li>
</ol>

11.2 Ordered list types

ol-types.html

<ol type="A">
    <li>English</li>
    <li>Mathematics</li>
</ol>

<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
</ol>

1 — Numbers
A — Uppercase letters
a — Lowercase letters
I — Uppercase Roman numerals
i — Lowercase Roman numerals

11.3 Unordered list

ul.html

<h2>Computer Equipment</h2>

<ul>
    <li>Monitor</li>
    <li>Keyboard</li>
    <li>Mouse</li>
    <li>Printer</li>
</ul>

<ul style="list-style-type: square;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

11.4 Description list

dl.html

<dl>
    <dt>HTML</dt>
    <dd>Used to structure web pages.</dd>

    <dt>CSS</dt>
    <dd>Used to style web pages.</dd>

    <dt>JavaScript</dt>
    <dd>Used to add interactivity.</dd>
</dl>

11.5 Nested lists

nested.html

<ul>
    <li>Languages
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>Programming
        <ul>
            <li>Python</li>
            <li>JavaScript</li>
        </ul>
    </li>
</ul>

Practical: Create a webpage with an ordered list of school subjects, an unordered list of hobbies and a description list of three computer terms.

Chapter 12: Block and Inline Elements

12.1 Block-level behaviour

Block elements begin on a new line and take available width. Examples: <div>, <p>, <h1>, <section>, <article>.

block.html

<h1>Welcome</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

12.2 Inline behaviour

Inline elements stay within the current line and occupy only needed space. Examples: <span>, <a>, <strong>, <em>.

inline.html

<p>
    Learn <strong>HTML</strong> and
    <em>CSS</em> to create websites.
</p>

12.3 Difference between block and inline

Block behaviour	Inline behaviour
Starts on a new line.	Stays on the same line.
Occupies available container width.	Occupies only necessary width.
Examples: `<div>`, `<p>`.	Examples: `<span>`, `<a>`.
Useful for major sections.	Useful for styling within a line.

12.4 Example using div and span

div-span.html

<div style="background-color: lightblue; padding: 10px;">
    This is a block container.
</div>

<p>
    This is a <span style="color: red;">red word</span>
    inside a paragraph.
</p>

12.5 Changing display behaviour with CSS

display.html

<style>
    .inline-example { display: inline; }
    .block-example  { display: block; }
</style>

<div class="inline-example">Inline div</div>
<span class="block-example">Block span</span>

Chapter 13: Div and Layout

13.1 What is a <div>?

The <div> element is a generic block container used to group related content. It has no special semantic meaning but is very useful with CSS.

13.2 Basic example

div-basic.html

<div>
    <h2>About Our School</h2>
    <p>Our school provides quality education.</p>
</div>

13.3 Styling a div

div-styled.html

<div style="
    background-color: lightyellow;
    border: 2px solid navy;
    padding: 20px;
    margin: 15px;
">
    <h2>Welcome</h2>
    <p>This content is inside a styled box.</p>
</div>

13.4 CSS Flexbox layout

flexbox.html

<style>
    .container { display: flex; gap: 10px; }
    .box { flex: 1; padding: 20px; background-color: lightblue; }
</style>

<div class="container">
    <div class="box">Box One</div>
    <div class="box">Box Two</div>
    <div class="box">Box Three</div>
</div>

13.5 Semantic layout elements

<header> — introductory section.
<nav> — navigation links.
<main> — main content.
<section> — thematic section.
<article> — independent content.
<aside> — supplementary content.
<footer> — footer info.

Practical: Design a webpage with a header, navigation bar, three content boxes and a footer.

Chapter 14: HTML Classes and IDs

14.1 What is a class?

The class attribute groups elements so they can share CSS styling or be selected by JavaScript. A class can be used on multiple elements.

class.html

<style>
    .highlight {
        color: blue;
        background-color: yellow;
    }
</style>

<p class="highlight">First highlighted paragraph.</p>
<p class="highlight">Second highlighted paragraph.</p>

14.2 What is an ID?

The id attribute identifies a particular element. An ID should be unique within the document.

id.html

<style>
    #main-heading {
        color: green;
        text-align: center;
    }
</style>

<h1 id="main-heading">Welcome to My Website</h1>

14.3 Difference between class and ID

Class	ID
Can be reused on multiple elements.	Should uniquely identify one element.
CSS selector begins with `.`	CSS selector begins with `#`
Example: `.student`	Example: `#student1`
Useful for shared styling.	Useful for a specific element or target.

14.4 Using multiple classes

multi-class.html

<style>
    .text-blue  { color: blue; }
    .large-text { font-size: 24px; }
</style>

<p class="text-blue large-text">
    Large blue text.
</p>

14.5 Using an ID with a link

id-link.html

<a href="#about">Go to About Section</a>

<h2 id="about">About Us</h2>
<p>Welcome to our website.</p>

Practical: Create three paragraphs with the same class and a separate heading with a unique ID. Style them using CSS.

Chapter 15: HTML Buttons

15.1 What is an HTML button?

The <button> element creates a clickable button used for submitting forms, triggering JavaScript and controlling interactive features.

15.2 Basic button

button.html

<button type="button">Click Me</button>

15.3 Button with JavaScript

button-js.html

<!DOCTYPE html>
<html>
<body>
    <h2 id="message">Welcome Students</h2>

    <button type="button" onclick="showMessage()">
        Click Here
    </button>

    <script>
        function showMessage() {
            document.getElementById("message").textContent =
                "You clicked the button!";
        }
    </script>
</body>
</html>

15.4 Styling buttons with CSS

button-styled.html

<style>
    .my-button {
        background-color: blue;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>

<button class="my-button" type="button">Submit</button>

15.5 Button types

type="button" — general-purpose button.
type="submit" — submits a form.
type="reset" — resets form controls.

Practical: Create three buttons labelled Red, Green and Blue. Clicking each button changes a heading to the corresponding colour using JavaScript.

Chapter 16: HTML Iframes

16.1 What is an iframe?

An iframe (inline frame) embeds another webpage or supported external content within the current webpage.

16.2 Basic syntax

iframe.html

<iframe
    src="https://example.com"
    title="Example Website"
    width="500"
    height="300">
</iframe>

16.3 Embedding a YouTube video

youtube.html

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Educational Video"
    allowfullscreen>
</iframe>

16.4 Iframe with CSS

iframe-css.html

<style>
    iframe {
        width: 100%;
        max-width: 600px;
        height: 350px;
        border: 2px solid navy;
    }
</style>

<iframe
    src="https://example.com"
    title="Example Website">
</iframe>

16.5 Advantages and limitations

Advantages: embeds external content; integrates maps and videos.

Limitations: some websites block embedding; may load slowly; security/privacy considerations apply; responsive behaviour may vary.

Practical: Create a webpage with a heading, a paragraph and an iframe. Use a website that permits embedding.

Chapter 17: HTML and JavaScript

17.1 What is JavaScript?

JavaScript is a programming language used to make webpages interactive — responding to clicks, validating forms, updating content and performing calculations.

17.2 Adding JavaScript to HTML

alert.html

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    <h1>Hello Students</h1>

    <script>
        alert("Welcome to HTML and JavaScript!");
    </script>
</body>
</html>

17.3 Changing webpage content

change.html

<p id="demo">Original Text</p>

<button type="button" onclick="changeText()">
    Change Text
</button>

<script>
    function changeText() {
        document.getElementById("demo").textContent =
            "The text has changed!";
    }
</script>

17.4 Displaying the current date

date.html

<h2 id="date"></h2>

<script>
    document.getElementById("date").textContent =
        new Date().toLocaleDateString();
</script>

17.5 Simple calculator

calculator.html

<!DOCTYPE html>
<html>
<body>
    <h2>Add Two Numbers</h2>

    <input type="number" id="num1" placeholder="First number">
    <input type="number" id="num2" placeholder="Second number">

    <button type="button" onclick="addNumbers()">Add</button>

    <p id="result">Result will appear here.</p>

    <script>
        function addNumbers() {
            const a = Number(document.getElementById("num1").value);
            const b = Number(document.getElementById("num2").value);

            document.getElementById("result").textContent =
                "Result: " + (a + b);
        }
    </script>
</body>
</html>

Practical: Create a button that changes a paragraph, a button that displays a message, and a calculator that adds two numbers.

Chapter 18: HTML File Paths

18.1 What is a file path?

A file path specifies the location of a file. HTML uses paths to locate images, stylesheets, scripts, videos and other resources.

18.2 Absolute URL

absolute.html

<a href="https://www.w3schools.com/html/">
    Learn HTML
</a>

<img src="https://picsum.photos/200"
     alt="Flower">

18.3 Relative path

Example folder structure:

MyWebsite/
│
├── index.html
├── about.html
│
├── images/
│   └── school.jpg
│
└── pages/
    └── contact.html

relative.html

<!-- Same folder -->
<a href="about.html">About Us</a>

<!-- Inside a subfolder -->
<img src="images/school.jpg" alt="School">

<!-- File inside another folder -->
<a href="pages/contact.html">Contact Us</a>

<!-- Parent folder -->
<a href="../index.html">Home</a>

18.4 Common file path mistakes

Wrong filename.
Wrong extension.
Missing folder name.
Incorrect use of / or ...
Path works on one computer but not another.
Case-sensitivity on web hosting.

Practical: Create a folder with an HTML file, an images folder and a second HTML page. Link the pages and display an image using a relative path.

Chapter 19: HTML Head and Meta Elements

19.1 What is the <head> element?

The <head> element contains info about the document that is not normally displayed as page content: page title, character encoding, viewport settings, description, CSS links, favicon and other metadata.

19.2 What is metadata?

Metadata means information about the webpage. The <meta> element provides metadata used by browsers, search engines and other services.

19.3 Character encoding

charset.html

<meta charset="UTF-8">

19.4 Viewport meta tag

viewport.html

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

19.5 Description meta tag

description.html

<meta name="description"
      content="Learn HTML with simple notes and practical examples.">

19.6 Complete example

head-complete.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <meta name="description"
          content="A website for learning HTML.">

    <title>HTML Learning Website</title>

    <link rel="icon" href="favicon.png" type="image/png">

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to HTML Learning</h1>
    <p>Learn HTML step by step.</p>
</body>
</html>

The <title> appears in the browser tab, whereas the <h1> normally appears within the webpage itself.

Chapter 20: Responsive Web Design

20.1 What is responsive web design?

A responsive website adapts to different screen sizes and devices: desktop computers, laptops, tablets and mobile phones. HTML provides document structure and viewport metadata; CSS is primarily responsible for responsive layouts.

20.2 Viewport meta tag

viewport.html

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

Without suitable viewport settings, mobile browsers may render pages too small.

20.3 Responsive images

responsive-img.html

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>

<img src="https://picsum.photos/800/400"
     alt="School building">

20.4 Media queries

media-query.html

<style>
    .container {
        display: flex;
        gap: 15px;
    }

    .box {
        flex: 1;
        padding: 20px;
        background-color: lightblue;
    }

    @media (max-width: 600px) {
        .container {
            flex-direction: column;
        }
    }
</style>

<div class="container">
    <div class="box">Section One</div>
    <div class="box">Section Two</div>
</div>

20.5 Benefits of responsive websites

Improved mobile usability.
Better use of available screen space.
Reduced need for separate mobile and desktop pages.
Easier navigation across devices.
Better accessibility.

Practical: Create a two-column webpage that changes to a single column on mobile.

Chapter 21: HTML Code Elements

21.1 Introduction

HTML provides special elements for representing computer code, keyboard input, variables and sample output — useful for programming tutorials.

21.2 The <code> element

code.html

<p>Use <code>print()</code> to display output in Python.</p>

21.3 The <pre> element

pre.html

<pre>
Name: Rahul
Class: 10
Subject: Computer
</pre>

21.4 The <kbd> element

kbd.html

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save a file.</p>

21.5 The <samp> element

samp.html

<p>Program output: <samp>Hello World</samp></p>

21.6 The <var> element

var.html

<p>Let <var>x</var> = 10.</p>
<p>Let <var>y</var> = 20.</p>

21.7 Complete example

code-complete.html

<h2>Python Example</h2>

<p>Python code:</p>

<pre><code>print("Hello World")
print(10 + 20)</code></pre>

<p>Expected output:</p>

<pre><samp>Hello World
30</samp></pre>

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

Practical: Create a webpage showing a Python program, its output, and a keyboard shortcut for saving a file.

Chapter 22: Semantic HTML

22.1 What is semantic HTML?

Semantic HTML means using HTML elements according to their meaning and purpose. For example, <nav> identifies navigation content, while <footer> identifies footer content. Semantic elements help browsers, developers and assistive technologies understand page structure.

22.2 Common semantic elements

Element	Purpose
`<header>`	Introductory content or section header.
`<nav>`	Navigation links.
`<main>`	Main content of the page.
`<section>`	Thematic grouping of content.
`<article>`	Independent or self-contained content.
`<aside>`	Related supplementary content.
`<footer>`	Footer information.
`<figure>`, `<figcaption>`	Illustration with caption.
`<time>`	Date or time.

22.3 Semantic HTML example

semantic.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>School Website</title>
</head>
<body>
    <header>
        <h1>ABC School</h1>
        <p>Learn, Grow and Succeed</p>
    </header>

    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>

    <main id="home">
        <section id="about">
            <h2>About Our School</h2>
            <p>We provide quality education.</p>
        </section>

        <article>
            <h2>School News</h2>
            <p>Admissions are open for the new academic year.</p>
        </article>

        <aside>
            <h2>Notice</h2>
            <p>Please check the school timetable.</p>
        </aside>
    </main>

    <footer id="contact">
        <p>Contact: school@example.com</p>
    </footer>
</body>
</html>

22.4 Semantic elements versus <div>

A <div> is a generic container with no inherent semantic meaning. A <section> is a thematic section; an <article> is self-contained content. Use semantic elements when their meaning fits the content.

22.5 Advantages of semantic HTML

Makes code easier to read and maintain.
Helps assistive technologies.
Improves document organization.
Provides meaningful landmarks.
Helps search engines interpret content.

Practical: Create a school website using header, nav, main, section, article and footer.

Chapter 23: HTML Entities and Symbols

23.1 What are HTML entities?

HTML entities are special character references used to display reserved characters and certain symbols. For example, the less-than sign < is used to start HTML tags — to display it as text, use <.

23.2 Common HTML entities

Entity	Display	Meaning
`<`	<	Less than
`>`	>	Greater than
`&`	&	Ampersand
`"`	"	Double quote
`'`	'	Apostrophe
` `		Non-breaking space
`©`	©	Copyright
`®`	®	Registered trademark
`™`	™	Trademark
`€`	€	Euro
`£`	£	Pound
`&hearts;`	♥	Heart
`∞`	∞	Infinity

23.3 Displaying reserved characters

entities.html

<p>5 &lt; 10</p>
<p>10 &gt; 5</p>
<p>Tom &amp; Jerry</p>
<p>&quot;Welcome&quot;</p>
<p>&copy; 2026 My Website</p>

23.4 Numeric character references

numeric.html

<p>&#169; 2026 My Website</p>
<p>&#9733; Star Symbol</p>

23.5 HTML symbols

symbols.html

<p>Multiplication: &times;</p>
<p>Division: &divide;</p>
<p>Plus or minus: &plusmn;</p>
<p>Infinity: &infin;</p>
<p>Approximately equal: &asymp;</p>
<p>Not equal: &ne;</p>

Practical: Create a webpage displaying ten special characters, mathematical symbols and currency symbols.

Chapter 24: HTML Emojis

24.1 What are emojis?

Emojis are small digital symbols used to express emotions, objects, activities and ideas. HTML can display emojis directly when the browser, font and character encoding support them.

24.2 Displaying emojis directly

emojis.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Emoji Page</title>
</head>
<body>
    <h1>Welcome Students 😊</h1>
    <p>Learn 💻, read 📚 and succeed 🌟!</p>
    <p>Thank you 🙏</p>
</body>
</html>

24.3 Emoji numeric references

emoji-codes.html

<p>&#128512; Smiling Face</p>
<p>&#128187; Computer</p>
<p>&#127891; Graduation Cap</p>
<p>&#127775; Glowing Star</p>

24.4 Common uses of emojis

Welcoming visitors.
Highlighting information.
Educational webpages.
Adding visual interest to notices.
Improving informal content appearance.

Emoji appearance varies between devices and browsers. Avoid using emojis as the only way to communicate essential information.

Practical: Design a webpage titled “My Hobbies” and use at least five suitable emojis.

Chapter 25: HTML vs CSS vs JavaScript

25.1 HTML — Structure

html.html

<h1>Welcome</h1>
<p>This is my website.</p>
<button type="button">Click Me</button>

25.2 CSS — Presentation

css.html

<style>
    h1 {
        color: blue;
        text-align: center;
    }

    p {
        font-size: 18px;
    }

    button {
        background-color: green;
        color: white;
    }
</style>

<h1>Welcome</h1>
<p>This is my website.</p>
<button type="button">Click Me</button>

25.3 JavaScript — Behaviour

js.html

<button type="button" onclick="alert('Welcome!')">
    Click Me
</button>

25.4 Comparison table

Feature	HTML	CSS	JavaScript
Full name	HyperText Markup Language	Cascading Style Sheets	JavaScript
Main purpose	Structure	Styling	Behaviour and interactivity
File extension	`.html`	`.css`	`.js`
Example	Heading	Blue text	Button click action
Type	Markup language	Style sheet language	Programming language

25.5 Complete combined example

combined.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>HTML CSS JavaScript</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: lightyellow;
            padding: 30px;
        }

        h1 {
            color: navy;
        }

        button {
            padding: 10px 20px;
            background-color: blue;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Learn Web Development</h1>

    <p id="message">HTML creates the structure.</p>

    <button type="button" onclick="changeMessage()">
        Click Here
    </button>

    <script>
        function changeMessage() {
            document.getElementById("message").textContent =
                "HTML + CSS + JavaScript = Interactive Webpages!";
        }
    </script>
</body>
</html>

Chapter 26: Practical Project — Student Profile

26.1 Project objective

Create a student profile webpage with name, class, photograph, school info, hobbies, an educational link and contact info — all styled with CSS.

26.2 Step 1: Project folder

StudentProfile/
│
├── index.html
├── style.css
├── script.js
└── images/
    └── student.jpg

26.3 Step 2: HTML code (index.html)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Student Profile</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>My Student Profile</h1>
        <p>Welcome to my personal webpage!</p>
    </header>

    <main>
        <section class="profile">
            <img src="https://picsum.photos/150"
                 alt="Student photograph"
                 class="profile-image">

            <h2>Rahul Sharma</h2>
            <p><strong>Class:</strong> 10</p>
            <p><strong>School:</strong> ABC School</p>
        </section>

        <section class="details">
            <h2>About Me</h2>
            <p>I am a student who enjoys learning computers.</p>

            <h2>My Hobbies</h2>
            <ul>
                <li>Reading books</li>
                <li>Playing cricket</li>
                <li>Learning HTML</li>
            </ul>

            <p>
                <a href="https://www.w3schools.com/html/">
                    Learn HTML
                </a>
            </p>

            <button type="button" id="greetButton">
                Click for a Greeting
            </button>

            <p id="greeting"></p>
        </section>
    </main>

    <footer>
        <p>Student Profile Project | 2026</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

26.4 Step 3: CSS code (style.css)

style.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f0f8ff;
    color: #222;
}

header {
    background-color: navy;
    color: white;
    text-align: center;
    padding: 25px;
}

main {
    max-width: 800px;
    margin: 20px auto;
    padding: 15px;
}

.profile,
.details {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px #cccccc;
}

.profile {
    text-align: center;
}

.profile-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
}

h2 {
    color: navy;
}

a {
    color: blue;
}

button {
    background-color: navy;
    color: white;
    padding: 12px 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

footer {
    text-align: center;
    background-color: navy;
    color: white;
    padding: 15px;
}

@media (max-width: 600px) {
    main {
        margin: 10px;
    }
}

26.5 Step 4: JavaScript code (script.js)

script.js

const button = document.getElementById("greetButton");

button.addEventListener("click", function () {
    document.getElementById("greeting").textContent =
        "Hello! Welcome to my student profile.";
});

26.6 Step 5: Run the project

Save all three files in the same folder.
Place the photograph inside images/.
Ensure the image filename matches the HTML code.
Double-click index.html.
Click the greeting button to test JavaScript.
Resize the browser to check responsive layout.

26.7 Expected result

A student profile card, photograph, school info, hobbies, educational link, greeting button and footer. The page adjusts to smaller screens.

26.8 Project viva questions

What is HTML?
Why is the <head> element used?
What is the purpose of the <title> tag?
Why is the alt attribute important?
What is the difference between HTML and CSS?
How do you connect an external CSS file?
How do you connect an external JavaScript file?
What is the purpose of a class?
Why is a relative file path used?
What is responsive web design?

Chapter 27: MCQs and Practice Questions

Part A: Multiple-choice questions

Part B: Short-answer questions

Define HTML and explain its uses.
What is the difference between an HTML tag and an HTML element?
Explain the basic structure of an HTML document.
What are HTML attributes? Give four examples.
Explain the difference between <h1> and <h6>.
Differentiate between <br> and <hr>.
What is the difference between ordered and unordered lists?
Explain the difference between a class and an ID.
What are semantic HTML elements? Give five examples.
Explain the purpose of the alt attribute in an image.
What is an iframe? Give one use.
Explain the purpose of the viewport meta tag.
Differentiate between HTML, CSS and JavaScript.
What are HTML entities? Give five examples.
What is responsive web design?

Part C: HTML practical examination questions

Practical 1 — Basic webpage

Create a webpage containing a title, an <h1> heading, three paragraphs, a horizontal line and a line break.

Practical 2 — Images and links

Insert two images with alternative text and create hyperlinks to two educational websites.

Practical 3 — Student marksheet

Create a table containing five students, their roll numbers and marks in three subjects. Style the table using CSS.

Practical 4 — Styling

Create a webpage with coloured headings, different font sizes, a background colour, a border and suitable spacing.

Practical 5 — Responsive webpage

Design a webpage with a header, navigation, two content sections and a footer. Use CSS media queries to adapt the layout to mobile screens.

Practical 6 — JavaScript interaction

Create a webpage with a button that changes a paragraph's text when clicked.

Final revision checklist

☐ I can explain HTML and its uses.
☐ I can create and save an HTML file.
☐ I understand tags, elements and attributes.
☐ I can use headings, paragraphs and formatting.
☐ I can add colours, images and hyperlinks.
☐ I can create tables and lists.
☐ I understand block, inline, div, class and ID.
☐ I can use buttons, iframes and JavaScript.
☐ I understand file paths, head and meta elements.
☐ I can create responsive and semantic webpages.
☐ I can use entities, symbols and emojis.
☐ I can build a complete student profile project.