Scribd
Upload
3 views172 pages

? Chapter 1 - Introduction To HTML

The document provides a comprehensive introduction to HTML, covering its definition, history, objectives, and basic structure. It explains key concepts such as tags, content structuring, hyperlinking, and multimedia support, along with examples and important points for exams. Additionally, it outlines the evolution of HTML from its inception by Tim Berners-Lee to the current living standard.

Uploaded by

Krishnapriya
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views172 pages

? Chapter 1 - Introduction To HTML

The document provides a comprehensive introduction to HTML, covering its definition, history, objectives, and basic structure. It explains key concepts such as tags, content structuring, hyperlinking, and multimedia support, along with examples and important points for exams. Additionally, it outlines the evolution of HTML from its inception by Tim Berners-Lee to the current living standard.

Uploaded by

Krishnapriya
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

📘

🔹
🔹
✅
CHAPTER 1: INTRODUCTION TO
HTML

1.1 Introduction to HTML


Definition (Write Exactly)
● HTML stands for Hypertext Markup Language.
● It is the most widely used language to write web pages.
● Hypertext refers to the way in which web pages (HTML
documents) are linked together.
● HTML is a Markup Language, which means it is used to mark up
a text document with tags that tell a web browser how to
structure and display it.

Key Points
● HTML uses tags to structure content
● Used to create:
○ Headings
○ Paragraphs
○ Lists
● Developed to share scientific information between researchers
● Now used for designing and formatting web pages
⸻

Example
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>

Important Points for Exam


● HTML is not a programming language
● It is a markup language
● Works with a web browser
● Uses angle brackets < > for tags

Common Questions
● What is HTML?
● Define Hypertext
● Why is HTML called a markup language?

Quick Revision
● HTML = Hypertext Markup Language
● Used to create web pages
● Uses tags to structure content

1.2 History of HTML

Definition (Write Exactly)


● HTML was developed by Tim Berners-Lee at CERN (European
Organization for Nuclear Research) to share and link
documents using hypertext.

Timeline (Very Important for Marks)


1989–1990: Origin
● Proposed by Tim Berners-Lee
● Foundation of World Wide Web (WWW)
● Included:
○ HTML
○ HTTP

1991–1993: Early HTML (HTML 1.0)


● First HTML specification published
● Included 18 basic elements:
○ <p>, <a>, <h1>–<h6>, <img>
● No standard versioning

1995: HTML 2.0


● First official standard
● Developed by IETF
● Introduced:
○ <form> (user input)
○ <table> (tabular data)
⸻

1997–1999: HTML 3.2 & HTML 4.0


● Added:
○ <script> (JavaScript)
○ <style> (CSS)
● HTML 4.0 improvements:
○ Better structure (<div>, <span>)
○ CSS support
○ DOM (Document Object Model)
⸻

2000–2008: XHTML
● Stricter version of HTML
● Required:
○ Proper nesting
○ Closing tags
● Not widely used
⸻
2008–2014: HTML5
● Developed by WHATWG
● Major features:
○ Semantic tags:
◆ <header>, <footer>, <section>, <nav>
○ Multimedia:
◆ <audio>, <video>
○ APIs:
◆ Geolocation
◆ Offline storage
● Officially released in 2014 (W3C)

⸻
2014–Present: Living Standard
● No fixed versions
● Continuously updated
● New features:
○ <dialog>, <template>
○ Web components
⸻
Important Points for Exam
● Father of HTML → Tim Berners-Lee
● HTML developed at → CERN
● HTML5 released in → 2014
● HTML is now a living standard
⸻

Common Questions
● Who developed HTML?
● Explain the evolution of HTML
● What are features of HTML5?
⸻
Quick Revision
● 1989 → Idea (TBL)
● 1995 → HTML 2.0
● 1997 → HTML 3.2 / 4.0
● 2000 → XHTML
● 2014 → HTML5

1.3 Objective of HTML

⸻
Definition (Write Exactly)
● The primary objective of HTML is to structure and present
content on the World Wide Web in a way that is
understandable to both web browsers and users.
● HTML is designed to serve as the foundational language for
creating web pages and web applications.

Key Objectives of HTML

1. Content Structuring
● HTML provides a framework for organizing and structuring
content into meaningful elements.
Examples:
● Headings → <h1> to <h6>
● Paragraphs → <p>
● Lists → <ul>, <ol>, <li>
● Tables → <table>, <tr>, <td>

2. Hyperlinking and Navigation


● HTML allows creation of hyperlinks using <a> tag
● Helps to connect different web pages or sections
● Forms the backbone of the web’s interconnected nature

3. Presentation of Content
● HTML defines how content is displayed (with help of CSS)
Examples:
● Text formatting → <strong>, <em>, <small>
● Media → <img>, <video>, <audio>

4. Semantic Structure
● HTML provides semantic elements to define meaning of content
Examples:
● <header>, <footer>, <article>, <section>
Importance:
● Improves SEO (Search Engine Optimization)
● Helps screen readers and accessibility tools

5. Interactivity and Forms


● HTML allows user interaction through forms
Examples:
● <form>, <input>, <textarea>, <button>
● <select>, <option>, <label>

6. Support for Multimedia


● HTML supports embedding multimedia directly
Examples:
● Images → <img>
● Video → <video>
● Audio → <audio>

7. Cross-Platform Compatibility
● HTML is platform-independent
● Works on:
○ Computers
○ Mobile phones
○ Tablets
● Requires only a web browser

8. Integration with Other Technologies


● HTML works with:
○ CSS → styling and layout
○ JavaScript → interactivity
○ APIs → extra functionality (e.g., geolocation)

9. Standards Compliance
● HTML follows standards set by:
○ W3C
○ WHATWG
● Ensures:
○ Consistency
○ Compatibility across browsers

Important Points for Exam


● HTML is used for structure, not styling
● Works with CSS and JavaScript
● Supports multimedia and forms
● Ensures cross-platform compatibility
⸻
Common Questions
● What are the objectives of HTML?
● Explain content structuring in HTML
● How does HTML support multimedia?
● What is semantic HTML?
⸻
Quick Revision
● HTML structures web content
● Supports links, media, and forms
● Works with CSS & JavaScript
● Platform independent
⸻

1.4 Basic Structure of HTML

Definition (Write Exactly)


● A typical HTML document consists of basic structural tags that
define the overall layout of a web page.
● These tags include <html>, <head>, <title>, and <body>.

Basic Structure
<html>
<head>
<title>Document Title</title>
</head>
<body>
Document body content
</body>
</html>
⸻

Explanation of Tags

1.
<html>
Tag
● This tag encloses the complete HTML document
● It contains:
○ <head> section
○ <body> section
● </html> indicates the end of HTML document

2.
<head>
Tag
● Represents the document header
● Contains:
○ <title>
○ Meta information
● Closing tag → </head>

3.
<title>
Tag
● Used to define the title of the document
● Appears on the browser tab
● Must be inside <head>
● Closing tag → </title>

4.
<body>
Tag
● Represents the main content of the document
● Contains:
○ Text
○ Links
○ Tables
○ Forms
● Closing tag → </body>

⸻
Example Program (Important for Exam)
<html>
<head>
<title>This is document title</title>
</head>
<body>
This is an HTML Document.
</body>
</html>

Output
● This is an HTML Document.

Important Points for Exam


● <html> is the root tag
● <head> contains non-visible information
● <body> contains visible content
● <title> appears on browser tab only
⸻

Common Questions
● Explain the basic structure of HTML
● Write an HTML program showing structure
● Difference between <head> and <body>

Quick Revision
● HTML structure = <html> + <head> + <body>
● <title> inside <head>
● Content shown inside <body>

1.5 Header Tags

Definition (Write Exactly)


● HTML provides six levels of headings using <h1> to <h6> tags.
● <h1> is the largest heading and <h6> is the smallest heading.
⸻

Key Points
● Used to define titles and subtitles
● Browser automatically adds:
○ One line before and after headings

Header Tags List


● <h1> → Largest
● <h2>
● <h3>
● <h4>
● <h5>
● <h6> → Smallest

Example Program
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

Output
● This is heading 1
● This is heading 2
● This is heading 3
● This is heading 4
● This is heading 5
● This is heading 6

Important Points for Exam


● Total headings → 6 levels
● <h1> most important (SEO also)
● Used for structuring content hierarchy
⸻
Common Questions
● What are header tags?
● Difference between <h1> and <h6>
● Write HTML program using headings

Quick Revision
● 6 heading tags
● <h1> biggest, <h6> smallest
● Used for titles
⸻
⸻

1.6 Paragraph Tag

Definition (Write Exactly)


● The <p> tag offers a way to structure text into different
paragraphs.
● Each paragraph of text should be written between an opening
<p> tag and a closing </p> tag.
⸻

Attributes in HTML
Definition (Write Exactly)
● An attribute is used to define the characteristics of an HTML
element and is placed inside the opening tag.
● Attributes consist of two parts:
○ Name (property)
○ Value (assigned value in quotes)

Align Attribute
● Used to set alignment of paragraph text
Values:
● "left"
● "center"
● "right"

Example Program
<html>
<head>
<title>Paragraph Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>

Output
● This is left aligned
● This is center aligned
● This is right aligned

Important Points for Exam


● <p> is a container tag (has opening & closing)
● Attributes are written in opening tag only
● Values are written in quotes (” “)

Common Questions
● What is <p> tag?
● Define attribute with example
● Explain align attribute

Quick Revision
● <p> → paragraph
● Attribute = name + value
● Align → left / center / right

1.7 Body Tag

Definition (Write Exactly)


● The <body> tag defines the main content of a webpage that is
displayed in the browser.
● It contains all visible elements such as text, images, videos, and
interactive features.
● It is placed after the <head> tag.

⸻
Key Points
● Contains user-visible content
● Essential for webpage display
● Only one <body> per document

Important Points for Exam


● <body> = visible part of webpage
● Everything shown on screen is inside <body>

Quick Revision
● <body> → main content
● Visible elements only

1.7.1 Centering Content


⸻

Definition (Write Exactly)


● The <center> tag is used to align content at the center of the
webpage or within a container.

Key Points
● Centers:
○ Text
○ Images
○ Other elements

Example Program
<html>
<head>
<title>Centering Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>

<center>
<p>This text is in the center.</p>
</center>

</body>
</html>

Output
● This text is not in the center.
● This text is in the center.

Important Points for Exam


● <center> is used for alignment
● It is deprecated in modern HTML (HTML5)
(but still asked in exams!)

Common Questions
● What is <body> tag?
● Explain <center> tag with example
⸻

Quick Revision
● <body> → visible content
● <center> → aligns content to center
⸻

1.7.2 Break Tag (Line Break)

Definition (Write Exactly)


● The <br> tag is used to insert a line break in HTML.
● Anything written after <br> starts from the next line.
● It is an empty tag, so it does not require a closing tag.

Key Points
● Used to break lines without starting a new paragraph
● No closing tag → <br> only
● Called an empty element
⸻

Example Program
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>
Hello<br>
How are you?<br>
Bye<br>
Tom
</p>
</body>
</html>

Output
Hello
How are you?
Bye
Tom
⸻

Important Points for Exam


● <br> = line break
● It is an empty tag
● No closing tag required

Common Questions
● What is <br> tag?
● Why is <br> called an empty tag?

Quick Revision
● <br> → next line
● Empty tag
● No closing tag

1.7.3 Horizontal Line


⸻

Definition (Write Exactly)


● The <hr> tag is used to create a horizontal line in a web page.
● It is used to visually break sections of a document.
● It is an empty tag and does not require a closing tag.

Key Points
● Draws a line from left to right margin
● Used for section separation
● No closing tag → <hr>

Example Program
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr>
<p>This is paragraph two and should be at bottom</p>
</body>
</html>

Output
This is paragraph one and should be on top
This is paragraph two and should be at bottom

Important Points for Exam


● <hr> = horizontal line
● Used to separate content
● It is an empty tag

Common Questions
● What is <hr> tag?
● Difference between <br> and <hr>
⸻

Quick Revision
● <hr> → horizontal line
● Empty tag
● Used for separation

⸻
⸻

1.7.4 Formatting Tags

Definition (Write Exactly)


● HTML provides formatting tags to change the appearance of
text such as bold, italic, underlined, superscript, and subscript.

Types of Formatting Tags


⸻

[Link] Bold Text


Definition (Write Exactly)
● Any text that appears within <b>...</b> tags is displayed in bold.

Example Program
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>Apples are <b>red</b></p>
</body>
</html>

Output
Apples are red
⸻

Quick Point
● <b> → makes text bold

[Link] Italic Text


Definition (Write Exactly)
● Any text that appears within <i>...</i> tags is displayed in italic.

Example Program
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>Apples are <i>red</i></p>
</body>
</html>

⸻
Output
Apples are red

Quick Point
● <i> → italic text

[Link] Underlined Text


Definition (Write Exactly)
● Any text that appears within <u>...</u> tags is displayed as
underlined text.

Example Program
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>Apples are <u>red</u></p>
</body>
</html>

Output
Apples are red

Quick Point
● <u> → underline text

[Link] Superscript Text


Definition (Write Exactly)
● The text written inside <sup>...</sup> tag is displayed as
superscript.
● It appears slightly above the normal line of text.
⸻

Example Program
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>This is <sup>superscript</sup> text</p>
</body>
</html>

Output
This is superscript text (shown above line)

Quick Point
● <sup> → text goes up

⸻
Important Points for Exam
● All formatting tags are container tags
● Used to change appearance only
● Very common in short questions

Common Questions
● What are formatting tags?
● Explain <b>, <i>, <u> with examples
● What is superscript text?

Quick Revision
● <b> → bold
● <i> → italic
● <u> → underline
● <sup> → above text

[Link] Subscript Text


⸻

Definition (Write Exactly)


● The text written inside <sub>...</sub> tag is displayed as
subscript.
● It appears slightly below the normal line of text.

Key Points
● Font size remains the same
● Position is below the normal text
● Commonly used in:
○ Chemical formulas (e.g., H₂O)

Example Program
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
⸻

Output
The following word uses a subscript typeface.

Quick Point
● <sub> → text goes down

Important Points for Exam


● Opposite of superscript
● Used in scientific notation

Quick Revision
● <sub> → below text
● Same size, lower position
⸻

1.7.5 Font Tag

Definition (Write Exactly)


● The <font> tag is used to change the style, size, and color of
text in a webpage.
● It has three main attributes: size, color, and face.

Attributes of
<font>
Tag
1. Size
● Changes the text size
2. Color
● Changes the text color
3. Face
● Changes the font style (e.g., Courier New)
⸻

Key Points
● Text remains changed until </font> tag is closed
● Can change:
○ One attribute OR
○ All attributes together

Example Program
<html>
<head>
<title>Setting Font Size, Face and Color</title>
</head>
<body>
<font size="2" color="red" face="Courier New">
This is Font demo.
</font>
</body>
</html>

⸻
Output
This is Font demo. (in red color, smaller size, Courier New style)

Important Points for Exam


● <font> is used for text styling
● It is deprecated in HTML5 (important point!)
● Now replaced by CSS

Common Questions
● What is <sub> tag?
● What are attributes of <font> tag?
● Why is <font> tag not used in modern HTML?

Quick Revision
● <sub> → below text
● <font> → size, color, face
● Deprecated → use CSS
⸻

1.7.6 Background Tags

Definition (Write Exactly)


● By default, the background of a webpage is white in color.
● HTML provides attributes to decorate the webpage background
with colors or images.

Background Color Attribute


Definition (Write Exactly)
● The bgcolor attribute is used to set the background color of an
HTML element such as the body or table.
● The text attribute is used to set the color of the text.

Example Program (Background Color)


<html>
<head>
<title>HTML Background Colors</title>
</head>
<body bgcolor="red" text="blue">
This is color demo.
</body>
</html>

Output
● Background → Red
● Text → Blue
● Output: This is color demo.

Background Image
Definition (Write Exactly)
● The background attribute is used to set an image as the
background of a webpage.

Example Program (Background Image)


Example Program (Background Image)
<html>
<head>
<title>Background Image Demo</title>
</head>
<body background="[Link]">
Welcome to HTML Programming
</body>
</html>

Output
● Background → Image ([Link])
● Text: Welcome to HTML Programming

Important Points for Exam


● Default background → white
● bgcolor → sets background color
● text → sets text color
● background → sets image
● These attributes are deprecated in HTML5

⸻
Common Questions
● What is bgcolor attribute?
● How to set background image in HTML?
● What is default background color of webpage?

Quick Revision
● Default → white
● bgcolor → background color
● text → text color
● background → image

1.8 Short Answer Questions

1. Explain paragraph tags in HTML.


Answer (Write in Exam)
● The <p> tag is used to define a paragraph in HTML.
● Text is written between <p> and </p> tags.
● It helps to organize content into separate paragraphs.
● Attributes like align can be used to set alignment (left, center,
right).

2. How will you centralize the text in an HTML


document?
Answer
● Text can be centralized using the <center> tag.
● The content written inside <center>...</center> will appear in the
center of the webpage.
Example:
<center>
<p>This text is centered</p>
</center>

3. What is the purpose of


<br>
tag?
Answer
● The <br> tag is used to insert a line break in HTML.
● It moves the content to the next line.
● It is an empty tag and does not require a closing tag.

4. How will you insert horizontal ruler in an HTML


document?
Answer
● A horizontal line can be inserted using the <hr> tag.
● It is used to separate sections of content.
● It is an empty tag.

5. What are font tags?


Answer
● The <font> tag is used to change the size, color, and style of
text.
● It has three attributes:
○ size
○ color
○ face

⸻
6. Explain background tags in HTML.
Answer
● Background tags are used to set background color or image of
a webpage.
● bgcolor attribute sets background color
● text attribute sets text color
● background attribute sets background image

1.9 Essay Questions

1. Give a brief account of the history of HTML.


Answer (Write in Points)
● HTML was developed by Tim Berners-Lee at CERN.
● 1989–1990: Concept of HTML and WWW introduced
● 1991: First version of HTML released
● 1995: HTML 2.0 (first standard version)
● 1997: HTML 3.2 and HTML 4.0 introduced CSS and scripting
● 2000: XHTML introduced stricter rules
● 2014: HTML5 introduced multimedia and semantic tags
● Present: HTML is a living standard

⸻
2. Discuss the objectives of HTML.
Answer
● To structure web content using elements
● To create hyperlinks for navigation
● To support multimedia (images, audio, video)
● To provide semantic structure
● To enable user interaction using forms
● To ensure cross-platform compatibility
● To integrate with CSS and JavaScript

3. Explain HTML document structure with an example.


Answer
● An HTML document consists of:
○ <html> → root element
○ <head> → contains title and metadata
○ <title> → page title
○ <body> → visible content
Example:
<html>
<head>
<title>My Page</title>
</head>
<body>
Hello World
</body>
</html>

4. Explain the basic formatting tags used in HTML.


Answer
● <b> → Bold text
● <i> → Italic text
● <u> → Underlined text
● <sup> → Superscript text
● <sub> → Subscript text
● These tags are used to change the appearance of text.

⸻
<html>
<head>
<title>All Tags Example</title>
</head>

<body bgcolor="lightyellow" text="black">

<!-- Heading Tags -->


<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>

<hr>

<!-- Paragraph with Align -->


<p align="left">This is left aligned paragraph</p>
<p align="center">This is center aligned paragraph</p>
<p align="right">This is right aligned paragraph</p>

<hr>

<!-- Center Tag -->


<center>
<h3>This content is centered</h3>
</center>

<hr>

<!-- Line Break -->


<p>
Hello<br>
How are you?<br>
Welcome to HTML
</p>

<hr>

<!-- Formatting Tags -->


<p>
<b>Bold Text</b><br>
<i>Italic Text</i><br>
<u>Underlined Text</u><br>
This is <sup>Superscript</sup> text<br>
This is <sub>Subscript</sub> text
</p>

<hr>

<!-- Font Tag -->


<font size="4" color="blue" face="Courier New">
This is styled using font tag
</font>

<hr>

<!-- Final Paragraph -->


<p>
This is a simple webpage showing all basic HTML tags.
</p>

</body>
</html>
📘
🔹
✅

CHAPTER 2: TAGS FOR FORM CREATION


2.1 Tables

Definition (Write Exactly)


● HTML tables are used to arrange data such as text, images, and
links into rows and columns.
● Tables are created using the <table> tag.

Basic Table Tags

Tag Purpose
<table> Creates table
<tr> Defines table row
<td> Defines table data
(cell)
<th> Defines table
heading
⸻

Key Points
● <td> → normal cell (left aligned)
● <th> → heading cell (bold + centered)
● Table is divided into:
○ Rows
○ Columns

Important Attributes
1. Cellpadding
● Defines space between cell border and content
2. Cellspacing
● Defines space between table cells

Example Program (Basic Table)


<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Tom Sawyer</td>
<td>5000</td>
</tr>
<tr>
<td>Newton Raphson</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Important Points for Exam


● <table> is the main tag
● <tr> = row
● <td> = data
● <th> = heading (bold + center)

Table Background & Merging Cells


⸻

Definition (Write Exactly)


● HTML provides attributes to set background color, border color,
and merge rows or columns in tables.

Attributes
1. bgcolor
● Sets background color
2. bordercolor
● Sets border color
3. colspan
● Merges columns
4. rowspan
● Merges rows

Example Program (Advanced Table)


<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>

Important Points for Exam


● rowspan → merge rows
● colspan → merge columns
● Very important for programs
⸻

Table Width and Height

Definition (Write Exactly)


● The width and height attributes are used to set the size of the
table in pixels or percentage.

Example Program
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Apple</td>
<td>Oranges</td>
</tr>
<tr>
<td>Grapes</td>
<td>Pear</td>
</tr>
</table>
</body>
</html>

Important Points for Exam


● Width & height can be:
○ Pixels (e.g., 400)
○ Percentage (e.g., 50%)

Common Questions
● What are table tags in HTML?
● Difference between <td> and <th>
● What is cellpadding and cellspacing?
● Explain rowspan and colspan

Quick Revision
● <table> → table
● <tr> → row
<html>
<head>
<title>Complete Table Example</title>
</head>

<body>

<table border="2"
bordercolor="blue"
bgcolor="lightgreen"
cellpadding="10"
cellspacing="5"
width="500"
height="200">

<!-- Heading Row -->


<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>

<!-- Rowspan Example -->


<tr>
<td rowspan="2">John</td>
<td>Maths</td>
<td>90</td>
</tr>

<tr>
<td>Science</td>
<td>85</td>
</tr>

<!-- Normal Row -->


<tr>
<td>Mary</td>
<td>English</td>
<td>88</td>
</tr>

<!-- Colspan Example -->


<tr>
<td colspan="3" align="center">Total Students: 2</td>
</tr>

</table>

</body>
</html>
● <td> → data
● <th> → heading
● rowspan / colspan → merging

Perfect—this is the MOST IMPORTANT topic of Chapter 2


Forms carry very high marks (theory + programs), so learn this well.

2.2 Form

Definition (Write Exactly)


● HTML forms are used to collect data from the user.
● A form takes input from the site visitor and sends it to a back-end
application for processing.

Purpose of Forms
● Used in:
○ Registration forms
○ Login forms
○ Feedback forms
● Collects data like:
○ Name
○ Email
○ Password

Form Tag Syntax


<form action="Script URL" method="GET | POST">
form elements
</form>

Attributes of
<form>
Tag
1. action
● Specifies where the data is sent
● Usually a server file (PHP, ASP, etc.)

⸻
2. method
● Specifies how data is sent
Types:
● GET
○ Data sent in URL
○ Less secure
● POST
○ Data sent securely
○ Used for sensitive data

3. target (Optional)
● Specifies where to display response
● Example:
○ _self → same page
○ _blank → new tab

Form Elements
Forms can contain different input controls:
● Text fields
● Textarea
● Radio buttons
● Checkboxes
● Buttons
● Dropdown lists
⸻

Example Program
<html>
<head>
<title>Form Example</title>
</head>
<body>
<form action="[Link]" method="POST">
Name: <input type="text"><br><br>
Email: <input type="text"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Important Points for Exam


● <form> is used to collect user input
● Data is sent to server (backend)
● action → where data goes
● method → how data is sent

⸻
Common Questions
● What is HTML form?
● Explain <form> tag with syntax
● Difference between GET and POST

Quick Revision
● Form → collects data
● action → destination
● method → GET / POST

Great—this is another high-scoring topic


I’ll make it clean, structured, and exam-perfect for you.

2.2.1 Text Input

Definition (Write Exactly)


Definition (Write Exactly)
Text input controls are used to take input from the user in the form of
text.

Types of Text Input

1. Single-Line Text Input


Definition
● Used to take one line of input from the user.
● Created using <input> tag with type="text"

Example Program
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form>
First name: <input type="text" name="first_name"><br>
Last name: <input type="text" name="last_name">
</form>
</body>
</html>

Attributes of
<input>
(Text)
● type → Specifies input type (text)
● name → Name of control (sent to server)
● value → Default value
● size → Width of text box
● maxlength → Maximum characters allowed

2. Password Input
Definition (Write Exactly)
● Password input control is a single-line text input that masks the
characters entered by the user.

Example Program
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form>
User ID: <input type="text" name="user_id"><br>
Password: <input type="password" name="password">
</form>
</body>
</html>

Important Point
● Uses: type="password"
● Characters appear as dots or stars

3. Multi-Line Text Input (Textarea)


Definition (Write Exactly)
● Used when user needs to enter large amount of text.
● Created using <textarea> tag

⸻
Example Program
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description:<br>
<textarea name="description" rows="5" cols="50">
Enter description here...
</textarea>
</form>
</body>
</html>

Attributes of
<textarea>
● name → Name of control
● rows → Number of rows
● cols → Number of columns

Important Points for Exam


● Text input → user enters data
● <input type="text"> → single-line
● <input type="password"> → hidden text
● <textarea> → multi-line text

Quick Revision
● Text → one line
● Password → hidden
● Textarea → many lines

Perfect—another important 5-mark topic


Let’s make this exam-ready and clean.

2.2.2 Checkboxes

Definition (Write Exactly)


Checkboxes are used when more than one option can be selected by the
user.
⸻

Key Point
● Created using <input> tag
● type="checkbox" is used

Example Program
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name="India" value="on"> India<br>
<input type="checkbox" name="China" value="on"> China
</form>
</body>
</html>

Attributes of Checkbox
● type → Specifies input type (checkbox)
● name → Name of the checkbox (sent to server)
● value → Value sent when checkbox is selected
● checked → Used to select checkbox by default

Example with Default Selection


<input type="checkbox" name="India" checked> India

Important Points for Exam


● Allows multiple selections
● Uses <input type="checkbox">
● Can be checked by default using checked

Quick Revision
● Checkbox → multiple options
● type="checkbox"
● checked → default selection

⸻
Common Mistake (Important)
● Don’t confuse with Radio Button
○ Checkbox → multiple selection
○ Radio → single selection

2.2.3 Radio Box

Definition (Write Exactly)


Radio buttons are used when only one option can be selected from a
group of options.

Key Point
● Created using <input> tag
● type="radio" is used
● All options must have the same name
⸻

Example Program
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type="radio" name="subject" value="Male"> Male<br>
<input type="radio" name="subject" value="Female"> Female
</form>
</body>
</html>

Attributes of Radio Button


● type → Specifies input type (radio)
● name → Same name groups options
● value → Value sent to server
● checked → Default selected option

Example with Default Selection


<input type="radio" name="subject" value="Male" checked> Male

Important Points for Exam


● Allows only one selection
● All radio buttons must have same name
● Uses <input type="radio">

Quick Revision
● Radio → one option only
● Same name → group
● checked → default

Very Important Difference (Exam Question)

Feature Checkbox Radio


Button
Selection Multiple Single
Type checkbox radio

2.2.4 Select Box (Drop-down List)

Definition (Write Exactly)


A select box, also called a drop-down list, is used to display multiple
options, from which a user can select one or more options.

Key Point
● Created using <select> tag
● Options are added using <option> tag

Example Program
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Male" selected>Male</option>
<option value="Female">Female</option>
</select>
</form>
</body>
</html>

Attributes of
<select>
Tag
● name → Name of control sent to server
● size → Number of visible options
● multiple → Allows selecting multiple options

Attributes of
<option>
Tag
● value → Value sent to server
● selected → Default selected option
● label → Alternative label for option

Important Points for Exam


● Used for dropdown lists
● <select> contains <option>
● Can allow single or multiple selection

Quick Revision
● Select box → dropdown
● <select> + <option>
● multiple → many selections

Important Tip
● By default → only one option selected
● Use multiple → for many selections

⸻
Great—this is the last part of Forms (very important)

2.2.5 Buttons

Definition (Write Exactly)


Buttons are used to perform actions such as submitting or resetting a
form.

Key Point
● Created using <input> tag
● Defined using type attribute

Types of Buttons
⸻

1. Submit Button
● Used to submit form data to the server
<input type="submit" value="Submit">

2. Reset Button
● Used to clear all form fields
<input type="reset" value="Reset">

3. Button
● Used to perform custom actions (JavaScript)
<input type="button" value="OK">

4. Image Button
● Used to create a button using an image
<input type="image" src="[Link]">
⸻

Example Program
<html>
<head>
<title>Button Demo</title>
</head>
<body>
<form>
<input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset">
<input type="button" value="OK" name="ok">
</form>
</body>
</html>

Important Points for Exam


● Buttons are used to perform actions
● Created using <input> tag
● type defines function of button

⸻
Quick Revision
● Submit → send data
● Reset → clear form
● Button → custom action
● Image → button with image

Great—now we move to 2.3 Images (very important for programs)

2.3 Images

Definition (Write Exactly)


Images are used to beautify a webpage and to represent complex
concepts in a simple way.

Image Tag
● Images are inserted using <img> tag
● It is an empty tag (no closing tag)
⸻

Syntax
<img src="Image URL" attributes>

Important Points
● <img> tag has no closing tag
● It only contains attributes
● Image path must be correct (same folder or full path)

Important Attributes
● src → Specifies image path
● width → Width of image
● height → Height of image

Example Program
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<img src="[Link]" width="400" height="600">
</body>
</html>

Output Explanation
● Image [Link] will be displayed on webpage
● File must be in the same folder

Important Points for Exam


● <img> is an empty tag
● Uses src attribute
● Can set width and height

Quick Revision
● <img> → image tag
● src → path
● No closing tag
Excellent—this is a very important theory + definition question

2.4 Iframe

Definition (Write Exactly)


An <iframe> (inline frame) is used to embed another HTML document
inside the current webpage.

Purpose of Iframe
● Display:
○ Videos
○ Maps
○ External websites
● Used to show content from another source

⸻
Syntax
<iframe src="URL" width="value" height="value" title="description"></
iframe>

Attributes of
<iframe>
● src → URL of the page to embed
● width → Width of iframe
● height → Height of iframe
● title → Description (important for accessibility)

Example Program
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<h1>Embedding an External Page</h1>
<iframe src="[Link] width="600" height="400"
title="Java Tutorial"></iframe>
</body>
</html>
⸻

Output Explanation
● Displays external website inside webpage
● Example: javatpoint site appears inside frame

Important Points for Exam


● <iframe> embeds another webpage
● Has opening and closing tag
● Uses src attribute

Quick Revision
● Iframe → embed page
● src → link
● Used for videos, maps

Good—this is a short but important theory question


⸻

2.5 Fieldset

Definition (Write Exactly)


The <fieldset> element in HTML is used to group related elements in a
form for better readability and organization.

Key Point
● Groups form controls together
● Improves structure and clarity

Legend Tag
Definition
● <legend> is used to give a title (caption) to the grouped fields
⸻

Syntax
<fieldset>
<legend>Group Title</legend>
<!-- Form fields go here -->
</fieldset>

Example Program
<html>
<head>
<title>Fieldset Example</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
Name: <input type="text"><br><br>
Email: <input type="text">
</fieldset>
</form>
</body>
</html>

⸻
Important Points for Exam
● <fieldset> → groups related fields
● <legend> → gives title
● Used inside forms

Quick Revision
● Fieldset → group
● Legend → title

Excellent—this is a VERY IMPORTANT question (almost always asked)

2.6 Anchor (Hyperlink)

⸻
Definition (Write Exactly)
A hyperlink is used to navigate from one webpage to another webpage
or to a specific part of a page.

Key Point
● Created using <a> tag
● Called anchor tag
● Link can be:
○ Text
○ Image

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

Important Attribute
● href (Hypertext Reference) → Specifies the destination URL

⸻
Example Program
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="[Link]
</body>
</html>

Output Explanation
● “Google” appears as a clickable link
● Clicking it opens Google homepage

Important Points for Exam


● <a> is used to create links
● href specifies destination
● Can link:
○ Webpages
○ Files
○ Sections
⸻

Quick Revision
● Anchor → link
● <a> tag
● href → URL

Very Important
● Anchor tag has both opening and closing tag
● Anything inside becomes clickable

Perfect—you’ve completed the entire Chapter 2


Let’s finish it strongly with Frames + Exam Answers (VERY IMPORTANT)

2.7 Frames
⸻

Definition (Write Exactly)


HTML frames are used to divide the browser window into multiple
sections, where each section can load a separate HTML document.

Key Terms
● Frameset → Collection of frames
● <frameset> → Defines layout
● <frame> → Loads webpage inside frame

Important Points
● <frameset> is used instead of <body>
● rows → horizontal division
● cols → vertical division

Syntax
<frameset cols="20%, 80%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>

Example Program
<html>
<head>
<title>Frames Example</title>
</head>

<frameset rows="20%, 80%">


<frame src="[Link]">

<frameset cols="30%, 70%">


<frame src="[Link]">
<frame src="[Link]">
</frameset>

</frameset>

</html>

Drawbacks of Frames (IMPORTANT THEORY)


● Not supported by all browsers
● Not suitable for small devices
● Back button may not work properly
● Different display on different screens

Quick Revision
● Frames → divide screen
● <frameset> → layout
● <frame> → content

2.8 Short Answer Questions


(READY TO WRITE)

1. How will you place images in HTML?


● Images are inserted using <img> tag
● It is an empty tag
● Uses src attribute
⸻

2. Explain anchor tag


● <a> tag is used to create hyperlinks
● Uses href attribute

3. Explain text box control


● Created using <input type="text">
● Used for single-line input

4. Explain textarea control


● Created using <textarea>
● Used for multi-line input

5. How to create buttons in HTML?


● Using <input> tag
● Types: submit, reset, button
⸻

6. How to create password box?


● Using <input type="password">
● Masks user input

7. How to create select box?


● Using <select> and <option>

8. How to create radio buttons?


● Using <input type="radio">
● Same name for grouping

9. How to create checkboxes?


● Using <input type="checkbox">
● Allows multiple selection

⸻
10. Explain
<iframe>
tag
● Used to embed another webpage
● Uses src, width, height

2.9 Essay Questions (FULL MARKS)

1. Table Tags and Attributes


Tags:
● <table> → creates table
● <tr> → table row
● <td> → table data
● <th> → table heading
Attributes:
● border
● cellpadding
● cellspacing
● bgcolor
● rowspan / colspan
⸻

2. Tags for Form Creation


● <form> → create form
● <input> → input fields
● <textarea> → multi-line
● <select> → dropdown
● <option> → list items
● <button> → actions

3. Fieldset Tag
● <fieldset> → groups fields
● <legend> → title
● Improves readability

FINAL REVISION (SUPER


IMPORTANT)
● Forms → collect data
● Input types → text, password, checkbox, radio
● Select → dropdown
● Anchor → links
● Image → <img>
● Iframe → embed page
● Frames → divide screen

⸻
✅
🔹
📘
Perfect—now we start Chapter 5: JavaScript
This chapter is VERY IMPORTANT (theory + small programs)

5.1 Introduction to JavaScript

Definition (Write Exactly)

JavaScript is a lightweight, interpreted programming language with


object-oriented capabilities, used to create dynamic and interactive
web pages.

Key Points

● It is a client-side scripting language


● Works with HTML and CSS
● Runs inside the web browser
● Used to make web pages dynamic

History

● First known as LiveScript


● Developed by Netscape
● Renamed to JavaScript
● Introduced in 1995 (Netscape 2.0)
⸻

Features of JavaScript

● Lightweight and easy to use


● Interpreted language (no compilation needed)
● Object-oriented
● Platform independent

Uses of JavaScript

● Form validation
● Event handling (button click, etc.)
● Dynamic content creation
● Interactive web pages

Advantages of JavaScript

1. Less Server Interaction

● Validation done on client side


● Reduces server load

2. Immediate Feedback
● No need to reload page
● Faster response

3. Increased Interactivity

● Responds to user actions


● Example: hover, click

4. Rich Interfaces

● Drag and drop


● Sliders
● Animations

Limitations of JavaScript

● Cannot read/write files (security reasons)


● Cannot be used for networking applications
● No multithreading support

Quick Revision

● JavaScript → client-side language


● Used for → dynamic webpages
● Runs in → browser
● Introduced in → 1995

Important Exam Questions

● Define JavaScript
● Write advantages of JavaScript
● Write limitations of JavaScript
● Explain features of JavaScript
Excellent—this is a VERY IMPORTANT THEORY + PROGRAM question

5.1.1 Syntax of JavaScript

Definition (Write Exactly)


JavaScript syntax refers to the set of rules used to write JavaScript
code, which is placed inside <script> tags.

⸻
Script Tag
● JavaScript code is written inside:
<script>
JavaScript code
</script>

Placement of
<script>
Tag
● Can be placed:
○ Inside <head>
○ Inside <body>
Recommended: inside <head>

Attributes of
<script>
Tag
● language → Specifies scripting language (javascript)
● type → Specifies MIME type (text/javascript)

⸻
Example Program
<html>
<body>
<script language="javascript" type="text/javascript">
[Link]("Hello World!");
</script>
</body>
</html>

Output
● Displays: Hello World!

Important Points
● [Link]() → prints output on webpage
● JavaScript is case-sensitive
● Statements usually end with semicolon (;)
● Spaces, tabs, new lines are ignored

⸻
Quick Revision
● <script> → JavaScript code
● [Link]() → output
● Case-sensitive language

5.1.2 Comments in JavaScript

Definition (Write Exactly)


Comments are used to add notes in the code, which are ignored by the
JavaScript interpreter.

Types of Comments

1. Single-Line Comment
// This is a comment
● Starts with //
● Ends at line

2. Multi-Line Comment
/* This is
multi-line comment */
● Starts with /*
● Ends with */

3. HTML Style Comment


<!-- This is a comment -->
● Treated as single-line comment

Important Points for Exam


● Comments are not executed
● Used for understanding code

⸻
Quick Revision
● // → single line
● /* */ → multi-line

Great—this is a very important concept (often asked theory +


program)

5.1.3 JavaScript Placement

Definition (Write Exactly)


JavaScript placement refers to where JavaScript code is written inside
an HTML document.

Ways to Place JavaScript


⸻

1. Script in
<head>
Section
Explanation
● Used when script is executed on events (like button click)
● Functions are usually defined here

Example Program
<html>
<head>
<script type="text/javascript">
function sayHello() {
alert("Hello World");
}
</script>
</head>

<body>
<input type="button" onclick="sayHello()" value="Say Hello">
</body>
</html>
⸻

Output
● Clicking button shows alert box: Hello World

2. Script in
<body>
Section
Explanation
● Used when script runs when page loads
● Directly displays content

Example Program
<html>
<head></head>
<body>

<script type="text/javascript">
[Link]("Hello World");
</script>
<p>This is web page body</p>

</body>
</html>

Output
● Displays:
○ Hello World
○ This is web page body

3. External JavaScript (Important Point)


Explanation
● JavaScript code is written in a separate file (.js)
● Linked using <script src="[Link]">

Important Points for Exam


● <head> → event-based scripts
● <body> → page load scripts
● External file → reusable code
⸻

Quick Revision
● Head → functions/events
● Body → direct execution
● External → separate file

Excellent—this is a VERY IMPORTANT PROGRAM + THEORY section

(Questions often come from Alert / Input / Console)

5.2 Output System in JavaScript

Definition (Write Exactly)


The output system in JavaScript refers to the different ways of
displaying output to the user.
⸻

Methods of Output
● [Link]()
● alert()
● Input box
● [Link]()

5.2.1 Alert

Definition (Write Exactly)


An alert box is used to display a warning or message to the user.

Key Point
● Contains only one button (OK)

⸻
Example Program
<html>
<head>
<script type="text/javascript">
function warn() {
alert("This is a warning message!");
}
</script>
</head>

<body>
<p>Click the button to see the result:</p>

<form>
<input type="button" value="Click Me" onclick="warn()">
</form>

</body>
</html>

Output
● Shows alert box → “This is a warning message!”

⸻
Quick Revision
● Alert → message box
● Only OK button

5.2.2 Input Box

Definition (Write Exactly)


An input box is used to take input from the user and display it using
JavaScript.

Key Function
● [Link]() → gets value from input field

⸻
Example Program
<html>
<head>
<script>
function getOutput() {
var input = [Link]("inputBox").value;
[Link]("You have entered " + input);
}
</script>
</head>

<body>
<form>
<input type="text" id="inputBox" placeholder="Enter something here">
<button type="button" onclick="getOutput()">Submit</button>
</form>
</body>
</html>

Output
● Displays: You have entered (input value)

Quick Revision
● Input → user data
● getElementById() → get value

5.2.3 Console

Definition (Write Exactly)


The console is used to display messages for debugging and testing
purposes.

Key Function
● [Link]() → prints output in browser console

Example Program
<html>
<body>
<h3>Open the Console to see output</h3>

<script>
[Link]("Hello World!");

var num1 = 10;


var num2 = 20;
[Link]("Sum:", num1 + num2);
</script>

</body>
</html>

Output
● Output shown in browser console (F12)

Important Points
● Used for debugging
● Not visible on webpage
● Open using F12 / Developer Tools
⸻

Quick Revision
● Console → debugging
● [Link]()

FINAL REVISION (VERY IMPORTANT)


● Alert → message box
● Input → user input
● Console → debugging

⸻ Great—this is a VERY IMPORTANT chapter (functions + events =


programming questions)

5.3 Functions and Events

Definition (Write Exactly)


A function is a block of reusable code that can be called whenever
needed in a program.

Key Points
● Avoids repetition of code
● Makes program modular
● Improves readability

5.3.1 Function Definition

Definition (Write Exactly)


Function definition means creating a function using the function
keyword.

Syntax
<script type="text/javascript">
function functionName(parameters) {
// statements
}
</script>

Example
<script type="text/javascript">
function helloWorld() {
alert("Hello World");
}
</script>

Quick Revision
● function keyword used
● Can have parameters or not

5.3.2 Function Calling


⸻

Definition (Write Exactly)


Function calling means executing a function when required.

Example Program
<html>
<head>
<script type="text/javascript">
function helloWorld() {
[Link]("Hello World!");
}
</script>
</head>

<body>
<p>Click the button to call the function</p>

<form>
<input type="button" value="Hello" onclick="helloWorld()">
</form>

</body>
</html>
⸻

Output
● Clicking button → Hello World!

Important Point
● onclick is used to call function

Quick Revision
● Call function using → functionName()
● Often used with events

5.3.3 Events

⸻
Definition (Write Exactly)
Events are actions that occur in the browser or by the user, which
trigger JavaScript code.

Examples of Events
● Mouse click
● Key press
● Page load
● Window resize

Common Events
● onclick → when button is clicked
● onload → when page loads
● onkeypress → when key is pressed

Example
<button onclick="alert('Button Clicked!')">Click Me</button>
⸻

Output
● Clicking button → shows alert

Important Points
● Events connect HTML + JavaScript
● Used for user interaction
● Part of DOM (Document Object Model)

FINAL REVISION (EXAM GOLD)


● Function → reusable code
● Definition → using function
● Calling → functionName()
● Event → user action triggers code

⸻ Perfect—this is a very scoring section (events with examples)

Examiners LOVE asking these!


⸻

[Link]
onclick
Event

Definition (Write Exactly)


The onclick event occurs when the user clicks on an element (usually a
button).

Example Program
<html>
<head>
<script type="text/javascript">
function sayHello() {
alert("Hello World");
}
</script>
</head>
<body>
<p>Click the button to see result</p>

<form>
<input type="button" onclick="sayHello()" value="Say Hello">
</form>

</body>
</html>

Output
● Click button → Hello World

Quick Revision
● Click → action performed

[Link]
onkeydown
Event
Event

Definition (Write Exactly)


The onkeydown event occurs when a key is pressed down on the
keyboard.

Example Program
<html>
<head>
<script type="text/javascript">
function sayDown() {
alert("Key pressed down");
}
</script>
</head>

<body>
<p>Type in the textbox</p>

<form>
<input type="text" onkeydown="sayDown()">
</form>

</body>
</html>

Output
● Press any key → Key pressed down

Quick Revision
● Key press → event triggered

[Link]
onchange
Event

Definition (Write Exactly)


The onchange event occurs when the value of an element is changed.
⸻

Example Program
<html>
<head>
<script type="text/javascript">
function sayChange() {
alert("Content changed");
}
</script>
</head>

<body>
<form>
Name:
<input type="text" onchange="sayChange()">
</form>
</body>
</html>

Output
● Change text → Content changed
⸻

Quick Revision
● Value change → event

[Link]
onload
Event

Definition (Write Exactly)


The onload event occurs when the web page is fully loaded.

Example Program
<html>
<head>
<script type="text/javascript">
function sayLoad() {
alert("Finished loading the page");
}
</script>
</head>

<body onload="sayLoad()">
</body>
</html>

Output
● Page loads → alert shown

Quick Revision
● Page load → event

[Link]
onmouseover
&
onmouseout

Definition (Write Exactly)


● onmouseover → when mouse comes over element
● onmouseout → when mouse leaves element

Example Program
<html>
<body>

<h2 id="demo" onmouseover="mouseOver()"


onmouseout="mouseOut()">
Mouse over me
</h2>

<script>
function mouseOver() {
[Link]("demo")×style×color = "red";
}

function mouseOut() {
[Link]("demo")×style×color = "black";
}
</script>

</body>
</html>

Output
● Mouse over → text turns red
● Mouse out → text turns black

Quick Revision
● Mouse over → color change
● Mouse out → revert back

FINAL REVISION (VERY IMPORTANT)


● onclick → click
● onkeydown → key press
● onchange → value change
● onload → page load
● onmouseover/out → mouse effect
⸻

Nice—this is a very smart exam question


(They sometimes ask to combine events in one program)

Combined Program (All Events


in One)

Example Program
<html>
<head>
<title>All Events Example</title>

<script type="text/javascript">

function sayHello() {
alert("Hello World (onclick event)");
}
function sayDown() {
alert("Key pressed (onkeydown event)");
}

function sayChange() {
alert("Content changed (onchange event)");
}

function sayLoad() {
alert("Page Loaded (onload event)");
}

function mouseOver() {
[Link]("demo")×style×color = "red";
}

function mouseOut() {
[Link]("demo")×style×color = "black";
}

</script>

</head>

<body onload="sayLoad()">

<h2 id="demo" onmouseover="mouseOver()"


onmouseout="mouseOut()">
Move mouse over me
</h2>
<p>Click the button:</p>
<input type="button" value="Click Me" onclick="sayHello()">

<br><br>

<p>Press any key:</p>


<input type="text" onkeydown="sayDown()">

<br><br>

<p>Change the text:</p>


<input type="text" onchange="sayChange()">

</body>
</html>

Output Behavior
● Page load → “Page Loaded” alert
● Click button → “Hello World” alert
● Press key → keydown alert
● Change text → change alert
● Mouse over text → color turns red
● Mouse out → color turns black

⸻
Exam Tip (VERY IMPORTANT)
If asked:
“Write a program using different events”
Write this full program
Or write any 3–4 events (if short answer)

Quick Revision
● onclick → button
● onkeydown → typing
● onchange → edit
● onload → page start
● onmouseover/out → hover

⸻ Great—this is the last slightly tricky topic, but I’ll make it super
easy

5.4 Document Object Model (DOM)


Traversing
⸻

Definition (Write Exactly)


DOM Traversing means accessing and manipulating HTML elements
using JavaScript through the DOM tree structure.

Key Concept (VERY IMPORTANT)


● Entire HTML document → Document Node
● Each tag → Element Node
● Text inside → Text Node
JavaScript uses:
● [Link]() to access elements

Example: Sum of Two Numbers using DOM

Program
<html>
<head>
<script type="text/javascript">
function add() {
var num1 = parseInt([Link]("firstNumber").value);
var num2 =
parseInt([Link]("secondNumber").value);

var result = num1 + num2;

[Link]("result")×value = result;
}
</script>
</head>

<body>

<form>
1st Number:
<input type="text" id="firstNumber"><br><br>

2nd Number:
<input type="text" id="secondNumber"><br><br>

Result:
<input type="text" id="result"><br><br>

<input type="button" value="Sum" onclick="add()">


</form>

</body>
</html>
⸻

Output
● Enter numbers → click Sum → result displayed

Important Functions
● [Link]() → access element
● .value → get/set value
● parseInt() → convert text to number

Quick Revision (EXAM GOLD)


● DOM → structure of HTML
● Nodes → document, element, text
● Traversing → accessing elements
● Used for → dynamic changes

⸻
Final One-Line Answer
DOM Traversing is the process of accessing HTML elements using
JavaScript to manipulate data dynamically.

⸻ Nice—this is an easy theory + 2–3 mark question

5.5 Variables in JavaScript

Definition (Write Exactly)


Variables are named containers used to store data values in a program.

Declaration of Variables
Before using a variable, we must declare it using var keyword.

⸻
Syntax
<script type="text/javascript">
var variableName;
</script>

Example
<script type="text/javascript">
var money;
var name;
</script>

Multiple Variables
We can declare multiple variables in one line:
<script type="text/javascript">
var money, name;
</script>

Variable Initialization
⸻

Definition (Write Exactly)


Variable initialization means assigning a value to a variable.

Example
<script type="text/javascript">
var name = "Adam"; // initialization at declaration
var money;
money = 2000; // initialization later
</script>

Important Points (VERY IMPORTANT)


● Use var keyword
● Do not declare same variable twice
● JavaScript is untyped language

⸻
What is Untyped Language?
JavaScript does not require data type declaration
Example:
<script>
var x = 10; // number
x = "Hello"; // now string
</script>
Same variable can store different data types

Quick Revision (EXAM GOLD)


● Variable → stores data
● var → declaration
● Initialization → assign value
● Untyped → no data type needed

One-Line Answer
A variable is a named container used to store data values in
JavaScript.

⸻ Nice—this is another easy + scoring topic (arrays + methods)


⸻

5.6 Arrays in JavaScript

Definition (Write Exactly)


An array is a collection of elements stored in a single variable.

Key Points
● Stores multiple values
● Elements are accessed using index (position)
● Index starts from 0

Creating an Array

⸻
Syntax
<script>
var arrayName = new Array("value1", "value2", "value3");
</script>

Example
<script>
var flowers = new Array("Rose", "Lotus", "Jasmine");
</script>

Accessing Elements
<script>
var flowers = ["Rose", "Lotus", "Jasmine"];
[Link](flowers[0]); // Rose
</script>

Important Property
● length → number of elements
<script>
var arr = [10, 20, 30, 40, 50];
[Link]([Link]); // 5
</script>

Array Methods (VERY IMPORTANT)

1.
pop()
● Removes last element
[Link]();

2.
push()
● Adds element at end
[Link]("Grapes");
⸻

3.
shift()
● Removes first element

4.
unshift()
● Adds element at beginning

5.
splice()
● Add/remove elements
[Link](2, 0, "Strawberry"); // insert
[Link](0, 2); // delete

6.
concat()
● Combines arrays
newArray = [Link](arr2);

7.
slice()
● Extracts part of array
res = [Link](0, 2);

Example Program (All Methods)

<html>
<body>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var dryfruits = ["Pista", "Dates", "Almonds"];

[Link](fruits + "<br>");
[Link]();
[Link](fruits + "<br>");

[Link]("Grapes");
[Link](fruits + "<br>");

[Link]();
[Link](fruits + "<br>");

[Link]("Pear");
[Link](fruits + "<br>");

[Link](2, 0, "Strawberry");
[Link](fruits + "<br>");

[Link](0, 2);
[Link](fruits + "<br>");

var newfruits = fruits×concat(dryfruits);


[Link](newfruits + "<br>");

var res = fruits×slice(0, 2);


[Link](res);
</script>

</body>
</html>

⸻
Quick Revision (EXAM GOLD)
● Array → collection of values
● Index → starts from 0
● length → size
● push/pop → end
● shift/unshift → beginning
● splice → add/remove
● concat → merge
● slice → extract

One-Line Answer
An array is a collection of elements stored in a single variable and
accessed using index values.

⸻ Great—this is a short + easy scoring topic

5.7 Date Functions in JavaScript

⸻
Definition (Write Exactly)
JavaScript provides the Date object to handle and manipulate date and
time values.

Creating Date Object


<script>
var now = new Date();
</script>

Important Date Methods (VERY IMPORTANT)

Method Description
getFullYear() Returns year
getMonth() Returns month (0–
11)
getDate() Returns day of
month
getDay() Returns day of
week (0–6)
getHours() Returns hours
getMinutes() Returns minutes
getSeconds() Returns seconds
getMilliseconds() Returns
milliseconds

Example Program

<html>
<head>
<title>Date Functions</title>
</head>

<body>
<script>
var now = new Date();

[Link]("Year: " + [Link]() + "<br>");


[Link]("Month (0-based): " + [Link]() + "<br>");
[Link]("Date: " + [Link]() + "<br>");
[Link]("Day of Week: " + [Link]() + "<br>");
[Link]("Hours: " + [Link]() + "<br>");
[Link]("Minutes: " + [Link]() + "<br>");
[Link]("Seconds: " + [Link]() + "<br>");
[Link]("Milliseconds: " + [Link]());
</script>

</body>
</html>

Output Example
● Year: 2025
● Month: 0 (January)
● Date: 18
● Day: 6 (Saturday)
● Time values displayed

⸻
Important Points
● Month starts from 0 (January)
● Day starts from 0 (Sunday)
● Used for time-based operations

Quick Revision (EXAM GOLD)


● Date object → handles date/time
● new Date() → create object
● getFullYear() → year
● getMonth() → month
● getDate() → day

One-Line Answer
The Date object in JavaScript is used to create and manipulate date
and time values.

⸻ Great—this is the last topic of the chapter (easy + theory +


methods)

⸻
5.8 String Handling in JavaScript

Definition (Write Exactly)


A string is a sequence of characters used to store text in JavaScript.

Creating a String
Syntax
<script>
var str = new String("Hello");
</script>

String Property
● length → returns number of characters

⸻
Example
<script>
var str = new String("This is an apple");
[Link]([Link]);
</script>

Output
● Length = 16

String Methods (VERY IMPORTANT)

1.
charAt()
● Returns character at given index
[Link](0);

⸻
2.
concat()
● Joins two strings

3.
indexOf()
● Returns position of character

4.
replace()
● Replaces text

5.
substring()
● Extracts part of string
⸻

6.
toLowerCase()
● Converts to lowercase

7.
toUpperCase()
● Converts to uppercase

8.
toString()
● Converts value to string

9.
valueOf()
● Returns primitive value
⸻

Example Program

<html>
<head>
<title>String Methods</title>
</head>

<body>

<script>
var str = "This is string";
var num = 200;

[Link]("charAt: " + [Link](2) + "<br>");


[Link]("concat: " + [Link](" handling") + "<br>");
[Link]("indexOf: " + [Link]("n") + "<br>");
[Link]("replace: " + [Link]("string", "text") + "<br>");
[Link]("toLowerCase: " + [Link]() + "<br>");
[Link]("toUpperCase: " + [Link]() + "<br>");
[Link]("toString: " + [Link]() + "<br>");
[Link]("valueOf: " + [Link]());
</script>
</body>
</html>

Quick Revision (EXAM GOLD)


● String → sequence of characters
● length → size
● charAt() → character
● concat() → join
● indexOf() → position
● replace() → change text
● toUpperCase() / toLowerCase()

One-Line Answer
A string is a sequence of characters used to store text data in
JavaScript.

⸻
Perfect—this is your exam gold section (5.9 + 5.10 answers)
I’ll give you ready-to-write answers

⸻
5.9 Short Answer Questions

Syntax of JavaScript
JavaScript code is written inside <script> tag.
<script>
[Link]("Hello World");
</script>

Comments in JavaScript
● Single line → // comment
● Multi-line → /* comment */

Placement of JavaScript
● Inside <head>
● Inside <body>
● External file (.js)
⸻

Alert in JavaScript
Alert is used to display a message box.
alert("Hello");

[Link]() Function
Used to display output in browser console.
[Link]("Hello World");

Declare Variables
Using var keyword:
var x = 10;

Constructors in Arrays
Array can be created using constructor:
var arr = new Array(10, 20, 30);

shift() and unshift()


● shift() → removes first element
● unshift() → adds element at beginning

splice() Method
Used to add/remove elements:
var arr = ["A", "B", "C"];
[Link](1, 0, "X"); // insert

String Functions (Any 2)


● charAt() → returns character
● toUpperCase() → converts to uppercase
var str = "hello";
[Link](0); // h
[Link](); // HELLO
⸻

onclick Event
Triggered when element is clicked.
<button onclick="alert('Clicked')">Click</button>

onload Event
Triggered when page loads.
<body onload="alert('Loaded')">

5.10 Essay Questions

Function Definition & Calling


Definition:
A function is reusable code.
Example:
<script>
function hello() {
aler×("Hello World");
}
<×script>

<button onclick="hello()">×lick</button>

× ⃣ Various Events
● onclick → click
● onload×→ page load
● onkeydown → key press
● onmouseover → mouse over

DOM Traversing Example


<script>
function add() {
var a = parseInt(document×getElementById("n1")×value);
var b = parseInt(document×getElementById("n2")×value);
[Link]("res")×value = a + b;
}
</script>
⸻

Array Object & Methods


Array stores multiple values.
var arr = ["A", "B", "C"];
[Link]("D");
[Link]();

Date Functions
var now = new Date();
[Link]();
[Link]();

String Handling Functions


var str = "hello";
[Link]();
[Link]("e");

⸻
Output Systems
● alert() → message
● [Link]() → webpage
● [Link]() → console

FINAL TIP
For exam:
● Learn definitions + 1 example each
● Practice functions, events, arrays

You might also like