Complete Notes
Uploaded by
nsznz95Complete Notes
Uploaded by
nsznz95Unit 1: Introduction to Web (Question–Answer Format)
Q1. What is the Internet?
Answer
The Internet is a worldwide network of interconnected computers and devices that communicate with each other
using standard protocols such as TCP/IP.
It allows users to exchange data, send emails, browse websites, stream videos, and much more.
Example
When you send a WhatsApp message from Delhi to Mumbai, the message travels through the Internet.
Key Points
Global network of networks
Uses TCP/IP protocol
Provides services like Email, Web, FTP, Video Calling
Q2. What is the World Wide Web (WWW)?
Answer
The World Wide Web (WWW) is a collection of web pages and websites that are accessed through the Internet using
a web browser.
It was invented by Tim Berners-Lee in 1989.
Example
When you visit Google, YouTube, or Wikipedia, you are using the Web.
Key Points
Works on the Internet
Uses HTTP/HTTPS protocol
Uses HTML pages connected through hyperlinks
Q3. Differentiate between Internet and Web.
Answer
Internet Web
Network of networks Service running on Internet
Infrastructure Information system
Uses TCP/IP Uses HTTP/HTTPS
Supports Email, FTP, VoIP, Web etc. Only provides websites and web pages
Older technology Built on top of Internet
Example
Think of the Internet as roads and the Web as cars travelling on those roads.
Internet = Road network
Web = Websites and web pages
Exam Definition
Internet: A global network connecting millions of computers worldwide.
Web: A collection of interlinked web pages accessed through the Internet using browsers.
Q4. What is Web Architecture?
Answer
Web Architecture refers to the structure that defines how web components communicate with each other.
The most common architecture is the Client-Server Architecture.
Diagram
Client (Browser)
| HTTP Request
Server
| HTTP Response
Client (Browser)
Example
1. User enters [Link].
2. Browser sends request to Google's server.
3. Server processes request.
4. Server returns webpage.
5. Browser displays webpage.
Q5. What is Client-Server Model?
Answer
The Client-Server Model is a communication model in which:
Client requests services.
Server provides services.
Components
Client
The device or software requesting information.
Examples:
Chrome
Firefox
Edge
Server
The computer that stores and serves web pages.
Examples:
Apache Server
Nginx Server
Example
When you search "Operating System Notes":
Browser = Client
Google Server = Server
Exam Definition
The Client-Server model is a distributed architecture where clients request resources and servers provide them.
Q6. What is an HTTP Request?
Answer
An HTTP Request is a message sent by a client (browser) to a server asking for a resource.
Example
You type:
[Link]
Browser sends:
GET /
HTTP/1.1
Host: [Link]
Common Request Methods
Method Purpose
GET Retrieve data
POST Send data
PUT Update data
Method Purpose
DELETE Remove data
Real-Life Example
Login form submission uses POST request.
Q7. What is an HTTP Response?
Answer
An HTTP Response is the message sent by the server back to the client after processing the request.
Example
Server responds:
HTTP/1.1 200 OK
<html>
<h1>Welcome</h1>
</html>
Components
1. Status Code
2. Headers
3. Content (Body)
Q8. What are HTTP Status Codes?
Answer
Status codes indicate the result of an HTTP request.
Common Status Codes
Code Meaning
200 Success
301 Redirect
400 Bad Request
403 Forbidden
404 Not Found
500 Internal Server Error
Example
If a webpage does not exist:
404 Not Found
Q9. What is a URL?
Answer
URL stands for Uniform Resource Locator.
It is the address used to locate a resource on the Web.
Example
[Link]
Parts of URL
[Link]
│ │ │
│ │ └── Path
│ └──────────── Domain Name
└────────────────── Protocol
Components
1. Protocol (HTTP/HTTPS)
2. Domain Name
3. Path
Q10. What is a Web Server?
Answer
A Web Server is software or hardware that stores websites and delivers web pages to users.
Functions
Receive requests
Process requests
Send responses
Examples
Apache HTTP Server
Nginx
Microsoft IIS
Example
When you visit YouTube, its servers send videos and web pages to your browser.
Q11. What is a Web Browser?
Answer
A Web Browser is software used to access and display web pages.
Functions
Sends HTTP requests
Receives responses
Renders HTML pages
Examples
Google Chrome
Mozilla Firefox
Microsoft Edge
Example
Typing "[Link]" in Chrome opens the website.
Q12. What is a Domain Name?
Answer
A Domain Name is a human-readable address of a website.
Instead of remembering IP addresses, users remember domain names.
Example
[Link]
[Link]
[Link]
Why Needed?
Without domain names:
[Link]
would need to be remembered instead of:
[Link]
Q13. What is an IP Address?
Answer
An IP Address is a unique numerical address assigned to every device connected to a network.
Example
[Link]
Types
IPv4
[Link]
IPv6
2001:db8::1
Purpose
Helps identify and locate devices on a network.
Q14. What is DNS?
Answer
DNS stands for Domain Name System.
It converts domain names into IP addresses.
Example
[Link]
[Link]
Why Needed?
Computers understand IP addresses, not domain names.
Working
1. User enters [Link]
2. DNS server finds IP address
3. Browser connects to server
4. Website opens
Real-Life Analogy
DNS is like a phone contact list.
You remember:
Mom
Phone stores:
+91XXXXXXXXXX
Similarly:
[Link]
maps to:
142.250.x.x
Q15. What is Web Hosting?
Answer
Web Hosting is a service that stores website files on a server and makes them accessible on the Internet.
Example
A website contains:
HTML files
CSS files
Images
Videos
These files are stored on a hosting server.
Popular Hosting Providers
Hostinger
Bluehost
GoDaddy
Example Flow
Website Files
Hosting Server
Internet
Users Access Website
Important 5-Mark Exam Question
Explain the working of the Web using Client-Server Architecture.
Answer:
The Web works on the Client-Server Architecture. A user enters a URL in a web browser. The browser (client) sends
an HTTP request to the web server. The server processes the request and returns an HTTP response containing the
requested webpage. The browser then displays the webpage to the user.
Steps:
1. User enters URL.
2. DNS finds IP address.
3. Browser sends HTTP request.
4. Server processes request.
5. Server sends HTTP response.
6. Browser displays webpage.
Example: Opening [Link] in Chrome follows this process.
This question is one of the most frequently asked questions from Unit 1 and is worth preparing thoroughly.
Unit 2: HTML (Question–Answer Format)
Core Idea: Structure of Web Pages
Q1. What is HTML?
Answer
HTML stands for HyperText Markup Language.
It is the standard language used to create and structure web pages. HTML uses tags to define elements such as
headings, paragraphs, images, tables, links, and forms.
Example
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
</body>
</html>
Key Points
HTML is not a programming language.
It is a markup language.
Used to create the structure of web pages.
Q2. What is HyperText?
Answer
HyperText is text that contains links to other documents or web pages.
Example
Clicking the link:
<a href="[Link]
takes the user to another webpage.
Q3. What is a Tag in HTML?
Answer
A tag is a keyword enclosed within angle brackets (< >) that tells the browser how to display content.
Example
<h1>Hello World</h1>
Here:
<h1> = Opening Tag
</h1> = Closing Tag
Q4. What are Paired and Unpaired Tags?
Answer
1. Paired Tags
Have both opening and closing tags.
Example
<p>This is a paragraph.</p>
2. Unpaired Tags
Do not require a closing tag.
Example
<br>
<hr>
<img>
Exam Question
Differentiate between Paired and Unpaired Tags.
Paired Tags Unpaired Tags
Have opening and closing tags Have only one tag
Enclose content Do not enclose content
Example: <p></p> Example: <br>
Q5. What are Attributes in HTML?
Answer
Attributes provide additional information about an HTML element.
They are written inside the opening tag.
Syntax
<tagname attribute="value">
Example
<a href="[Link]
Here:
href = Attribute
[Link] = Value
Q6. Explain the Basic Structure (Skeleton) of an HTML Page.
Answer
Every HTML page follows a basic structure.
Example
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my webpage.</p>
</body>
</html>
Components
1. <!DOCTYPE html>
Declares HTML5 document.
2. <html>
Root element of HTML document.
3. <head>
Contains metadata.
4. <title>
Page title displayed on browser tab.
5. <body>
Contains visible content.
Q7. What is DOCTYPE?
Answer
DOCTYPE tells the browser which version of HTML is being used.
HTML5 Declaration
<!DOCTYPE html>
Importance
Ensures proper rendering.
Prevents compatibility issues.
Q8. What are HTML Comments?
Answer
Comments are notes added to code that are ignored by browsers.
Syntax
<!-- This is a comment -->
Example
<!-- Website Header -->
<h1>My Website</h1>
Uses
Documentation
Debugging
Code readability
Q9. What is an Unordered List?
Answer
An unordered list displays items using bullets.
Tag
<ul>
Example
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ul>
Output:
• Apple
• Mango
• Banana
Type Attribute
<ul type="square">
Possible values:
disc
circle
square
Q10. What is an Ordered List?
Answer
An ordered list displays items in numbered sequence.
Tag
<ol>
Example
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Output:
1. HTML
2. CSS
3. JavaScript
Type Attribute
<ol type="A">
Possible values:
Type Output
1 1,2,3
A A,B,C
a a,b,c
I I,II,III
i i,ii,iii
Q11. What is the Start Attribute in Ordered Lists?
Answer
The start attribute specifies the starting number.
Example
<ol start="5">
<li>Item 1</li>
<li>Item 2</li>
</ol>
Output:
5. Item 1
6. Item 2
Q12. What is a Definition List?
Answer
A definition list displays terms and their definitions.
Tags
<dl>
<dt>
<dd>
Example
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Q13. What is a Hyperlink?
Answer
A hyperlink connects one webpage to another webpage or resource.
Tag
<a>
Example
<a href="[Link]
</a>
Q14. What is the href Attribute?
Answer
The href attribute specifies the destination URL.
Example
<a href="[Link]
YouTube
</a>
Q15. Explain the target Attribute.
Answer
The target attribute specifies where the linked page will open.
Example
<a href="[Link]
target="_blank">
</a>
Values
Value Meaning
_blank New tab
_self Same tab
Q16. Differentiate Between Absolute and Relative URLs.
Answer
Absolute URL
Contains complete web address.
<a href="[Link]
</a>
Relative URL
Contains local file path.
<a href="[Link]">
About Us
</a>
Difference
Absolute URL Relative URL
Full address Partial address
Used for external pages Used for internal pages
Q17. What are Internal Links?
Answer
Internal links move to a specific section within the same webpage.
Example
<a href="#contact">Go to Contact</a>
<h2 id="contact">
Contact Section
</h2>
Here:
#contact points to the element having id="contact".
Q18. What is a Table in HTML?
Answer
Tables organize data into rows and columns.
Example
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>20</td>
</tr>
</table>
Q19. Explain Table Tags.
Answer
Tag Purpose
<table> Creates table
<tr> Table row
<th> Table heading
<td> Table data
Q20. What is Colspan?
Answer
Colspan merges multiple columns.
Example
<table border="1">
<tr>
<th colspan="2">Student Info</th>
</tr>
</table>
Output:
Student Info
(one heading across two columns)
Q21. What is Rowspan?
Answer
Rowspan merges multiple rows.
Example
<td rowspan="2">HTML</td>
The cell occupies two rows.
Q22. What are Border, Cellpadding and Cellspacing?
Answer
Border
<table border="1">
Adds border around cells.
Cellpadding
<table cellpadding="10">
Space inside cell.
Cellspacing
<table cellspacing="5">
Space between cells.
Q23. What is a Web Form?
Answer
A form collects user input.
Tag
<form>
Example
<form>
Name:
<input type="text">
<input type="submit">
</form>
Q24. What are Action and Method Attributes?
Answer
Action
Specifies where data is sent.
<form action="[Link]">
Method
Specifies how data is sent.
<form method="POST">
Methods
Method Purpose
GET Data visible in URL
POST Data hidden from URL
Q25. Explain Different Input Types.
Text
<input type="text">
Password
<input type="password">
Radio Button
<input type="radio">
Checkbox
<input type="checkbox">
Submit
<input type="submit">
Reset
<input type="reset">
Button
<input type="button" value="Click">
Q26. What are Name, Value and Required Attributes?
Answer
Name
Used to identify form field.
<input type="text" name="username">
Value
Stores default value.
<input type="text" value="Abhinay">
Required
Makes field mandatory.
<input type="text" required>
Q27. What is a Drop-Down List?
Answer
Drop-down lists are created using <select> and <option>.
Example
<select>
<option>Delhi</option>
<option>Mumbai</option>
<option>Noida</option>
</select>
Q28. What is Textarea?
Answer
Textarea allows multi-line text input.
Example
<textarea rows="5" cols="30">
</textarea>
Used for:
Feedback
Comments
Messages
Q29. How are Images Inserted in HTML?
Answer
Images are inserted using the <img> tag.
Example
<img src="[Link]">
Q30. Explain img Attributes.
src
Image location.
src="[Link]"
alt
Alternative text.
alt="Flower Image"
width
width="300"
height
height="200"
Complete Example
<img src="[Link]"
alt="Flower"
width="300"
height="200">
Q31. What are Frames?
Answer
Frames divide the browser window into multiple sections, each displaying a different webpage.
Note: Frames are obsolete in HTML5 but may still appear in exams because they are in the syllabus.
Q32. What is Frameset?
Answer
<frameset> replaces the <body> tag and divides the page into frames.
Example
<frameset cols="30%,70%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
Q33. Explain Rows and Cols in Frameset.
Rows
<frameset rows="20%,80%">
Creates horizontal frames.
Cols
<frameset cols="30%,70%">
Creates vertical frames.
Q34. What is the Frame Tag?
Answer
The <frame> tag specifies which page should be displayed inside a frame.
Example
<frame src="[Link]">
Q35. What is Noframes?
Answer
The <noframes> tag provides content for browsers that do not support frames.
Example
<noframes>
Your browser does not support frames.
</noframes>
Most Important 5-Mark Exam Question
Create a Student Registration Form using HTML.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form action="[Link]" method="POST">
Name:
<input type="text" name="name" required>
<br><br>
Password:
<input type="password" name="password">
<br><br>
Gender:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
<br><br>
Hobbies:
<input type="checkbox"> Sports
<input type="checkbox"> Music
<br><br>
City:
<select>
<option>Delhi</option>
<option>Noida</option>
<option>Gurugram</option>
</select>
<br><br>
<textarea rows="4" cols="30"></textarea>
<br><br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
Topics Most Frequently Asked in Exams
1. HTML Page Structure
2. Lists (ul, ol, dl)
3. Hyperlinks (absolute vs relative URLs)
4. Tables (rowspan, colspan)
5. Web Forms (GET vs POST)
6. Input Types
7. Images (img)
8. Frames and Frameset
9. HTML Comments
10. DOCTYPE Declaration
These 10 topics cover the majority of Unit 2 examination questions.
Unit 3: CSS (Question–Answer Format)
Core Idea: Styling and Layout of Web Pages
CSS is used to control the appearance of HTML elements. It separates the content (HTML) from the presentation
(CSS), making websites easier to design and maintain. (GeeksforGeeks)
Q1. What is CSS?
Answer
CSS stands for Cascading Style Sheets.
It is a stylesheet language used to style HTML elements such as text, colors, backgrounds, spacing, borders, and
layouts. (GeeksforGeeks)
Example
<p>Hello World</p>
p{
color:red;
Output:
Hello World (in red color)
Key Points
HTML creates structure.
CSS provides styling.
Improves website appearance.
Q2. Why is CSS Used?
Answer
CSS is used to separate content from presentation.
Without CSS
<h1>Welcome</h1>
Output is plain text.
With CSS
h1{
color:blue;
text-align:center;
Output becomes attractive and properly formatted.
Advantages
1. Better design
2. Easy maintenance
3. Reusable styles
4. Faster website development
(GeeksforGeeks)
Q3. What is the Syntax of CSS?
Answer
CSS follows this structure:
selector{
property:value;
Example
h1{
color:blue;
Components
Part Meaning
h1 Selector
color Property
blue Value
Exam Definition
A CSS rule consists of a selector and a declaration block containing property-value pairs. (Dofactory)
Q4. What is a CSS Rule?
Answer
A CSS rule tells the browser which element to style and how to style it.
Example
p{
color:red;
font-size:20px;
Here:
Selector = p
Declarations = color:red, font-size:20px
Q5. What are the Different Ways to Apply CSS?
Answer
There are three main ways:
1. Inline CSS
2. Internal CSS
3. External CSS
Q6. What is Inline CSS?
Answer
Inline CSS is written directly inside the HTML element using the style attribute.
Example
<h1 style="color:red;">
Welcome
</h1>
Advantages
Quick styling
Disadvantages
Difficult to maintain
Priority
Inline CSS has the highest priority. (Ted Roche)
Q7. What is Internal CSS?
Answer
Internal CSS is written inside the <style> tag within the <head> section.
Example
<head>
<style>
h1{
color:blue;
</style>
</head>
Use
Useful for styling a single webpage.
Q8. What is External CSS?
Answer
External CSS is stored in a separate .css file.
HTML File
<link rel="stylesheet" href="[Link]">
[Link]
h1{
color:green;
Advantages
Reusable
Easy maintenance
Best method
(Ted Roche)
Q9. What is @import in CSS?
Answer
@import is used to import another CSS file.
Example
@import url("[Link]");
Purpose
Allows one stylesheet to load another stylesheet.
Q10. Explain Background Properties in CSS.
Answer
Background properties control the appearance of an element's background.
Background Color
body{
background-color:yellow;
}
Background Image
body{
background-image:url("[Link]");
Background Repeat
background-repeat:no-repeat;
Values
Value Meaning
repeat Repeat image
no-repeat Show once
repeat-x Horizontal repeat
repeat-y Vertical repeat
Background Position
background-position:center;
Values
top
bottom
left
right
center
Q11. Explain Text Formatting Properties.
Answer
Text formatting changes text appearance.
Text Color
p{
color:red;
}
Text Alignment
h1{
text-align:center;
Values
left
right
center
justify
Text Decoration
text-decoration:underline;
Values
Value Meaning
underline Underline
overline Line above
line-through Strike text
none No decoration
Text Transform
text-transform:uppercase;
Values
Value Result
uppercase ABC
lowercase abc
capitalize Abc
Q12. Explain Font Properties.
Answer
Font properties control text style.
Font Family
font-family:Arial;
Font Size
font-size:20px;
Font Weight
font-weight:bold;
Values
normal
bold
Font Style
font-style:italic;
Values
normal
italic
Q13. What are CSS Selectors?
Answer
Selectors identify HTML elements that should receive styles. (MDN Web Docs)
Q14. What is Universal Selector?
Answer
Universal selector selects all elements.
Syntax
*{
color:red;
Example
All text becomes red.
Q15. What is Type Selector?
Answer
Selects all elements of a specific tag.
Example
p{
color:blue;
All paragraphs become blue.
Q16. What is Class Selector?
Answer
Class selector selects elements having a particular class.
Syntax
.classname
Example
HTML:
<p class="note">
Hello
</p>
CSS:
.note{
color:red;
Important Point
A class can be reused many times. (MDN Web Docs)
Q17. What is ID Selector?
Answer
ID selector selects one unique element.
Syntax
#idname
Example
HTML:
<h1 id="title">
Welcome
</h1>
CSS:
#title{
color:green;
}
Important Point
An ID should be unique within a webpage. (MDN Web Docs)
Q18. Differentiate Between ID and Class.
Answer
ID Class
Unique Reusable
Uses # Uses .
One element Multiple elements
Higher specificity Lower specificity
Example
#header{
color:red;
.menu{
color:blue;
This is one of the most important exam questions. (MDN Web Docs)
Q19. What is Descendant Selector?
Answer
Selects elements inside another element.
Example
div p{
color:red;
Meaning:
All <p> inside <div> become red.
Q20. What is Child Selector?
Answer
Selects direct child elements only.
Example
div > p{
color:blue;
Only immediate child paragraphs are selected.
Q21. What is Adjacent Selector?
Answer
Selects the immediate next sibling element.
Example
h1 + p{
color:red;
Styles the first paragraph immediately after h1.
Q22. What is CSS Cascade?
Answer
Cascade determines which CSS rule is applied when multiple rules target the same element. (DevDoc)
Factors
1. Inheritance
2. Specificity
3. Source Order
Q23. What is Inheritance?
Answer
Child elements inherit some properties from parent elements.
Example
body{
color:blue;
Paragraphs inside body also become blue.
Q24. What is Specificity?
Answer
Specificity decides which selector is stronger.
Priority Order
Inline Style
ID Selector
Class Selector
Element Selector
Example
p{
color:red;
.note{
color:blue;
#text{
color:green;
ID selector wins.
(MDN Web Docs)
Q25. What is Source Order?
Answer
If specificity is equal, the last rule written is applied.
Example
p{
color:red;
p{
color:blue;
}
Output:
Blue text
Because the second rule appears later. (Reddit)
Q26. Explain Display Property.
Answer
Display controls how elements appear.
Block
display:block;
Takes full width.
Examples:
div
p
h1
Inline
display:inline;
Takes only needed width.
Examples:
span
a
Inline-Block
display:inline-block;
Inline + allows width/height.
None
display:none;
Element becomes invisible.
(MDN Web Docs)
Q27. Explain List Styling.
Answer
List appearance is controlled using list-style-type.
Example
ul{
list-style-type:square;
Values
Value Output
disc ●
circle ○
square ■
decimal 1,2,3
Q28. How is Table Styling Done in CSS?
Example
table{
border:1px solid black;
Border Collapse
border-collapse:collapse;
Removes double borders.
Example
table{
border-collapse:collapse;
Q29. What is the CSS Box Model?
Answer
Every HTML element is treated as a rectangular box. The box model consists of:
Margin
Border
↓
Padding
Content
(DevDoc)
Diagram
-------------------------
| Margin |
| ---------------------- |
|| Border ||
|| ------------------- | |
||| Padding |||
||| --------------- | | |
|||| Content | | | |
||| --------------- | | |
|| ------------------- | |
| ---------------------- |
-------------------------
Q30. What is Content Area?
Answer
Content area contains actual text, images, or other data.
Example
width:200px;
height:100px;
Defines content size.
Q31. What is Padding?
Answer
Padding is the space between content and border.
Example
padding:20px;
Individual Sides
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
Shorthand
padding:10px 20px 10px 20px;
(top right bottom left)
Q32. What is Border?
Answer
Border surrounds the padding and content.
Example
border:2px solid black;
Q33. Explain Border Properties.
Border Style
border-style:solid;
Values:
solid
dotted
dashed
double
Border Width
border-width:3px;
Border Color
border-color:red;
Q34. What is Margin?
Answer
Margin is the space outside the border.
Example
margin:20px;
Individual Sides
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;
Q35. Difference Between Margin and Padding.
Answer
Margin Padding
Outside border Inside border
Space between elements Space between content and border
Transparent Background applies
Example
padding:20px;
margin:20px;
Q36. Explain Width vs Total Width in Box Model.
Example
width:200px;
padding:20px;
border:5px;
margin:10px;
Calculation
Total Width =
Margin Left
+ Border Left
+ Padding Left
+ Content Width
+ Padding Right
+ Border Right
+ Margin Right
= 10 + 5 + 20 + 200 + 20 + 5 + 10
= 270px
This is a very important numerical exam question. (Wikipedia)
Most Important 5-Mark Exam Question
Explain CSS Box Model with Diagram.
Answer:
The CSS Box Model describes how every HTML element is represented as a rectangular box consisting of Content,
Padding, Border, and Margin.
Content
Padding
Border
Margin
Content contains text and images.
Padding is space between content and border.
Border surrounds the content and padding.
Margin creates space outside the border.
The total size of an element depends on the combined width of content, padding, border, and margin.
(DevDoc)
Most Frequently Asked CSS Topics in Exams
1. CSS Introduction
2. Ways to Apply CSS
3. CSS Syntax and Rules
4. Class vs ID
5. CSS Selectors
6. Specificity and Cascade
7. Background Properties
8. Text Formatting
9. Font Properties
10. Display Property
11. Box Model
12. Margin vs Padding
13. Border Properties
14. Width Calculation in Box Model
15. List and Table Styling
These topics usually cover the majority of Unit 3 theory and practical questions.
Unit 4: JavaScript (Question–Answer Format)
Core Idea: Interactivity and Logic in Web Pages
JavaScript is a programming language used to make web pages interactive. It can respond to user actions, validate
forms, manipulate HTML elements, and perform calculations. (MDN Web Docs)
Q1. What is JavaScript?
Answer
JavaScript (JS) is a scripting language used to add interactivity and dynamic behavior to web pages.
Example
<button onclick="alert('Hello!')">
Click Me
</button>
When the button is clicked, an alert box appears.
Uses
Form validation
Animations
Interactive buttons
Dynamic content
Games
JavaScript works together with HTML and CSS. (MDN Web Docs)
Q2. What is DOM?
Answer
DOM stands for Document Object Model.
It represents an HTML document as a tree structure of objects (nodes) that JavaScript can access and modify. (MDN
Web Docs)
Example HTML
<h1 id="title">Welcome</h1>
DOM Structure
Document
html
/ \
head body
|
h1
Importance
JavaScript uses DOM to:
Change text
Change styles
Add/remove elements
Q3. What are Nodes in DOM?
Answer
Every element, attribute, and text in HTML is called a node.
Example
<p>Hello</p>
Nodes:
p element → Node
Hello text → Node
Q4. What is getElementById()?
Answer
It selects an element using its ID.
Syntax
[Link]("idname")
Example
<p id="msg">Hello</p>
<script>
[Link]("msg").innerHTML="Welcome";
</script>
Output:
Welcome
Q5. What is getElementsByClassName()?
Answer
It selects all elements having a particular class.
Example
<p class="note">HTML</p>
<p class="note">CSS</p>
[Link]("note");
Returns all elements having class note.
Q6. What are JavaScript Data Types?
Answer
Data types define the type of data stored in variables.
Main Data Types
Data Type Example
String "Hello"
Number 100
Boolean true
Undefined undefined
Null null
Object {name:"Rahul"}
(MDN Web Docs)
Q7. What is String Data Type?
Answer
A string stores text data.
Example
let name = "Abhinay";
Output:
Abhinay
Q8. What is Number Data Type?
Answer
Stores numeric values.
Example
let age = 20;
Q9. What is Boolean Data Type?
Answer
Stores either true or false.
Example
let isStudent = true;
Q10. What is Undefined?
Answer
A variable declared but not assigned any value is undefined.
Example
let x;
[Link](x);
Output:
undefined
(Reddit)
Q11. What is Null?
Answer
Null represents an intentionally empty value.
Example
let data = null;
Q12. What is an Object?
Answer
Objects store data in key-value pairs.
Example
let student = {
name:"Rahul",
age:20
};
Q13. What are Variables?
Answer
Variables are containers used to store data.
Example
let name = "Rahul";
Q14. What is var?
Answer
var is the old method of declaring variables.
Example
var age = 20;
Features
Function scope
Can be redeclared
(MDN Web Docs)
Q15. What is let?
Answer
let is used to declare block-scoped variables.
Example
let marks = 90;
Features
Block scope
Cannot be redeclared in same scope
Q16. What is const?
Answer
const declares constant values.
Example
const PI = 3.14;
Rule
Cannot be reassigned.
Q17. What is Scope?
Answer
Scope determines where variables can be accessed.
Types
1. Global Scope
2. Local Scope
Q18. What is Global Scope?
Answer
Variables declared outside functions are global.
Example
let name = "Rahul";
function show(){
[Link](name);
Accessible everywhere.
Q19. What is Local Scope?
Answer
Variables declared inside functions are local.
Example
function show(){
let age = 20;
Cannot be accessed outside function.
Q20. What is a Function?
Answer
A function is a reusable block of code.
Syntax
function name(){
Example
function greet(){
alert("Welcome");
(MDN Web Docs)
Q21. How are Functions Called?
Answer
Functions are executed by calling their name.
Example
function greet(){
alert("Hello");
greet();
Q22. What are Parameters?
Answer
Parameters receive values passed to functions.
Example
function add(a,b){
[Link](a+b);
add(5,10);
Output:
15
Q23. What is Return Value?
Answer
The return statement sends a value back from a function.
Example
function add(a,b){
return a+b;
let result = add(5,3);
Output:
(MDN Web Docs)
Q24. What is alert()?
Answer
Displays a popup message box.
Example
alert("Welcome");
Output:
Popup message appears.
Q25. What is [Link]()?
Answer
Displays output in browser console.
Example
[Link]("Hello");
Used for debugging.
Q26. What is [Link]()?
Answer
Writes content directly to webpage.
Example
[Link]("Welcome");
Output:
Welcome
(Reddit)
Q27. What are Events in JavaScript?
Answer
Events are actions performed by users or browsers.
Examples
Clicking button
Loading page
Submitting form
Moving mouse
(DevDoc)
Q28. What is onclick Event?
Answer
Triggered when user clicks an element.
Example
<button onclick="show()">
Click
</button>
<script>
function show(){
alert("Button Clicked");
</script>
Q29. What is onload Event?
Answer
Triggered when page finishes loading.
Example
<body onload="alert('Page Loaded')">
Q30. What is onchange Event?
Answer
Triggered when input value changes.
Example
<select onchange="alert('Changed')">
<option>HTML</option>
</select>
Q31. What is onmouseover Event?
Answer
Triggered when mouse moves over an element.
Example
<p onmouseover="alert('Mouse Over')">
Hover Here
</p>
Q32. What is onsubmit Event?
Answer
Triggered when form is submitted.
Example
<form onsubmit="return validate()">
Mostly used for validation.
Q33. What is if-else Statement?
Answer
Used for decision making.
Example
let age = 18;
if(age>=18){
[Link]("Eligible");
else{
[Link]("Not Eligible");
Q34. What is switch Statement?
Answer
Used to select one option from multiple choices.
Example
let day = 1;
switch(day){
case 1:
[Link]("Monday");
break;
case 2:
[Link]("Tuesday");
break;
Q35. What is for Loop?
Answer
Executes code repeatedly.
Example
for(let i=1;i<=5;i++){
[Link](i);
Output:
Q36. What is while Loop?
Answer
Runs while condition remains true.
Example
let i=1;
while(i<=5){
[Link](i);
i++;
Q37. What is break Statement?
Answer
Stops loop execution.
Example
for(let i=1;i<=10;i++){
if(i==5){
break;
[Link](i);
Output:
1234
Q38. What is continue Statement?
Answer
Skips current iteration.
Example
for(let i=1;i<=5;i++){
if(i==3){
continue;
[Link](i);
Output:
1245
Q39. What is JavaScript Object Model (BOM)?
Answer
BOM stands for Browser Object Model.
It allows JavaScript to interact with browser windows.
Main Objects
1. Window
2. Document
3. History
4. Location
5. Navigator
Q40. What is Window Object?
Answer
Window is the top-level browser object.
Example
[Link]("Hello");
Q41. What is Document Object?
Answer
Represents the webpage.
Example
[Link]("Welcome");
Q42. What is History Object?
Answer
Stores browser history.
Example
[Link]();
Moves to previous page.
Q43. What is Location Object?
Answer
Contains URL information.
Example
[Link];
Gets current URL.
Q44. What is Navigator Object?
Answer
Provides browser information.
Example
[Link];
Q45. What is String Object?
Example
let text = "Hello";
Method
[Link]
Output:
Q46. What is Array?
Answer
Array stores multiple values in one variable.
Example
let colors = ["Red","Blue","Green"];
Q47. What is push()?
Answer
Adds element at end.
Example
[Link]("Yellow");
Q48. What is pop()?
Answer
Removes last element.
Example
[Link]();
Q49. What is length Property?
Example
[Link]
Returns number of elements.
Q50. What is Math Object?
Example
[Link]();
Returns random number.
Q51. What is [Link]()?
Example
[Link](4.7);
Output:
Q52. What is Date Object?
Example
let today = new Date();
Returns current date and time.
Q53. What is Number Object?
Example
let num = Number("100");
Converts string to number.
Q54. Explain Arithmetic Operators.
Operator Meaning
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
Example
10 % 3
Output:
Q55. Explain Comparison Operators.
Operator Meaning
== Equal value
Operator Meaning
=== Equal value & type
!= Not equal
> Greater
< Less
Example
5=="5"
Output:
true
5==="5"
Output:
false
(MDN Web Docs)
Q56. Explain Logical Operators.
Operator Meaning
&& AND
|| OR
! NOT
Example
true && false
Output:
false
Q57. Explain Assignment Operators.
Operator Meaning
= Assign
+= Add and assign
-= Subtract and assign
Example
let x = 10;
x += 5;
Output:
15
Q58. What is Form Validation?
Answer
Form validation checks whether user input is correct before submitting data.
Examples
Empty field check
Email validation
Password matching
Numeric range validation
JavaScript validation commonly uses the onsubmit event. (MDN Web Docs)
Q59. How to Validate Empty Fields?
Example
<form onsubmit="return validate()">
<input type="text" id="name">
<input type="submit">
</form>
<script>
function validate(){
let name =
[Link]("name").value;
if(name==""){
alert("Name Required");
return false;
</script>
Purpose
return false stops form submission.
Q60. How to Validate Email Format?
Example
let email =
[Link]("email").value;
if(![Link]("@")){
alert("Invalid Email");
return false;
Q61. How to Validate Numeric Range?
Example
let age = 15;
if(age<18 || age>60){
alert("Invalid Age");
Q62. How to Validate Password Match?
Example
let p1 =
[Link]("pass1").value;
let p2 =
[Link]("pass2").value;
if(p1!=p2){
alert("Passwords Do Not Match");
return false;
Most Important 5-Mark Exam Question
Write a JavaScript program for Form Validation.
<!DOCTYPE html>
<html>
<body>
<form onsubmit="return validate()">
Name:
<input type="text" id="name">
<br><br>
Email:
<input type="text" id="email">
<br><br>
<input type="submit">
</form>
<script>
function validate(){
let name =
[Link]("name").value;
let email =
[Link]("email").value;
if(name==""){
alert("Name cannot be empty");
return false;
if(![Link]("@")){
alert("Invalid Email");
return false;
return true;
</script>
</body>
</html>
Working
1. User clicks Submit.
2. onsubmit event calls validate().
3. If input is invalid, return false stops submission.
4. If valid, form submits successfully.
This is one of the most frequently asked JavaScript practical questions in exams.
Most Frequently Asked Unit 4 Topics
1. DOM and DOM Methods
2. Data Types
3. var vs let vs const
4. Functions and Return Values
5. Events (onclick, onsubmit, onload)
6. if-else and switch
7. Loops (for, while)
8. break and continue
9. BOM (Window, Document, History, Location, Navigator)
10. Arrays (push, pop, length)
11. Math Object
12. Date Object
13. Operators
14. Form Validation
15. Password Matching Validation
These topics usually cover the majority of Unit 4 theory and practical exam questions. (MDN Web Docs)
Unit 5: jQuery and JSON (Question–Answer Format)
Core Idea: Simpler JavaScript (jQuery) and Data Format (JSON)
jQuery is a JavaScript library that simplifies JavaScript programming, while JSON is a lightweight format used for
storing and transferring data between applications. (GeeksforGeeks)
Part A: jQuery
Q1. What is jQuery?
Answer
jQuery is a fast, lightweight JavaScript library that simplifies HTML manipulation, event handling, animations, and
AJAX operations.
Its famous slogan is:
"Write Less, Do More"
This means tasks that require many lines of JavaScript can often be done with a single line of jQuery code.
(W3Schools)
Example
JavaScript:
[Link]("msg").[Link]="red";
jQuery:
$("#msg").css("color","red");
jQuery code is shorter and easier.
Q2. Why is jQuery Used?
Answer
jQuery is used because it:
1. Simplifies JavaScript code
2. Handles browser compatibility issues
3. Makes DOM manipulation easier
4. Simplifies event handling
5. Provides animation effects
(jQuery)
Q3. How to Include jQuery in a Webpage?
Answer
There are two methods:
1. Using CDN
<script src=
"[Link]
</script>
2. Downloading jQuery
<script src="[Link]">
</script>
(GeeksforGeeks)
Q4. What is the Syntax of jQuery?
Answer
Basic jQuery syntax:
$(selector).action();
Components
Part Meaning
$ jQuery symbol
selector HTML element selection
Part Meaning
action() Operation to perform
Example
$("p").hide();
This hides all paragraphs.
(GeeksforGeeks)
Q5. What is the $ Symbol in jQuery?
Answer
The $ symbol represents the jQuery function.
It is a shortcut for:
jQuery()
Example
$("h1")
Selects all h1 elements.
(GeeksforGeeks)
Q6. What is Document Ready Event?
Answer
The document ready event ensures that jQuery code runs only after the webpage is fully loaded.
Syntax
$(document).ready(function(){
});
Example
$(document).ready(function(){
$("p").hide();
});
Importance
Prevents errors caused by accessing elements before page loading.
(GeeksforGeeks)
Q7. What is a jQuery Selector?
Answer
Selectors are used to select HTML elements for manipulation.
Syntax
$(selector)
Q8. What is Element Selector?
Answer
Selects HTML elements by tag name.
Example
$("p")
Selects all paragraphs.
Q9. What is ID Selector in jQuery?
Answer
Selects an element using its ID.
Syntax
$("#id")
Example
$("#title")
Selects:
<h1 id="title">
Welcome
</h1>
Q10. What is Class Selector in jQuery?
Answer
Selects elements having a particular class.
Syntax
$(".classname")
Example
$(".note")
Selects:
<p class="note">
Hello
</p>
Q11. What is Attribute Selector?
Answer
Selects elements based on attributes.
Syntax
$("[attribute]")
Example
$("[href]")
Selects all elements having href attribute.
Q12. What are jQuery Events?
Answer
Events are actions performed by users or browsers.
Examples
Mouse click
Double click
Key press
Form submission
Q13. What is click() Event?
Answer
Triggered when an element is clicked.
Example
$("button").click(function(){
alert("Button Clicked");
});
Q14. What is dblclick() Event?
Answer
Triggered when user double-clicks an element.
Example
$("p").dblclick(function(){
$(this).hide();
});
Q15. What is mouseenter() Event?
Answer
Triggered when mouse enters an element.
Example
$("p").mouseenter(function(){
alert("Mouse Entered");
});
Q16. What is mouseleave() Event?
Answer
Triggered when mouse leaves an element.
Example
$("p").mouseleave(function(){
alert("Mouse Left");
});
Q17. What is keypress() Event?
Answer
Triggered when keyboard key is pressed.
Example
$("input").keypress(function(){
alert("Key Pressed");
});
Q18. What is submit() Event?
Answer
Triggered when a form is submitted.
Example
$("form").submit(function(){
alert("Form Submitted");
});
Q19. What is change() Event?
Answer
Triggered when element value changes.
Example
$("select").change(function(){
alert("Selection Changed");
});
Q20. What is hover() Event?
Answer
hover() combines mouseenter() and mouseleave().
Example
$("p").hover(
function(){
$(this).css("color","red");
},
function(){
$(this).css("color","black");
);
Most Important Practical Question (jQuery)
Hide Paragraph on Button Click
<!DOCTYPE html>
<html>
<head>
<script src=
"[Link]
</script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<p>Hello World</p>
<button id="btn">
Hide Paragraph
</button>
</body>
</html>
Working
1. Page loads.
2. Button click event activates.
3. Paragraph hides.
This is one of the most frequently asked jQuery practical questions. (GeeksforGeeks)
Part B: JSON
Q21. What is JSON?
Answer
JSON stands for:
JavaScript Object Notation
It is a lightweight text-based format used for storing and exchanging data between systems. (MDN Web Docs)
Example
"name":"Rahul",
"age":20
Q22. Why is JSON Used?
Answer
JSON is used because it:
1. Stores structured data
2. Transfers data between server and client
3. Is easy to read and write
4. Is lightweight
(MDN Web Docs)
Q23. What is JSON Syntax?
Answer
JSON stores data as key-value pairs.
Syntax
"key":"value"
Example
"name":"Abhinay",
"age":20,
"city":"Delhi"
Q24. What are Key-Value Pairs?
Answer
JSON data is stored as:
"key" : value
Example
"name":"Rahul"
Here:
Key = name
Value = Rahul
Q25. How are Arrays Stored in JSON?
Answer
Arrays are enclosed inside square brackets.
Example
"subjects":[
"HTML",
"CSS",
"JavaScript"
Output Structure
subjects
HTML
CSS
JavaScript
Q26. Can JSON Store Functions?
Answer
No.
JSON stores only data, not functions.
Invalid Example
"name":"Rahul",
"show":function(){}
This is not valid JSON.
JSON contains only:
Strings
Numbers
Objects
Arrays
Boolean values
Null
(MDN Web Docs)
Q27. Differentiate Between JSON and XML.
Answer
JSON XML
Lightweight Heavy
Easy syntax Complex syntax
Faster parsing Slower parsing
Uses key-value pairs Uses tags
Less data size More data size
Easy to read Less readable
JSON Example
"name":"Rahul"
XML Example
<student>
<name>Rahul</name>
</student>
Exam Point
JSON is lighter, faster, and easier to parse than XML. (MDN Web Docs)
Q28. What is [Link]()?
Answer
[Link]() converts a JavaScript object into a JSON string.
Syntax
[Link](object)
Example
let student = {
name:"Rahul",
age:20
};
let data =
[Link](student);
[Link](data);
Output:
{"name":"Rahul","age":20}
(MDN Web Docs)
Q29. Why is [Link]() Used?
Answer
Used when sending data over a network or storing data as text.
Example
let obj = {
name:"Aman"
};
let text =
[Link](obj);
Converts object into transferable text format.
Q30. What is [Link]()?
Answer
[Link]() converts a JSON string into a JavaScript object.
Syntax
[Link](string)
Example
let data =
'{"name":"Rahul","age":20}';
let obj =
[Link](data);
[Link]([Link]);
Output:
Rahul
(DevDoc)
Q31. Why is [Link]() Used?
Answer
Used when receiving JSON data from a server.
Example
Server sends:
"name":"Rahul"
JavaScript converts it into object using:
[Link](data);
Then values can be accessed easily.
Q32. Explain [Link]() and [Link]() Together.
Example
let student = {
name:"Rahul",
age:20
};
let jsonText =
[Link](student);
let obj =
[Link](jsonText);
[Link]([Link]);
Working
Object
[Link]()
JSON String
[Link]()
Object
This conversion process is frequently asked in exams. (MDN Web Docs)
Most Important 5-Mark Exam Question
Differentiate Between JSON and XML.
JSON XML
JavaScript Object Notation Extensible Markup Language
Lightweight Heavy
Faster Slower
Easy to parse Difficult to parse
Less storage space More storage space
Uses key-value pairs Uses tags
Example JSON
"name":"Rahul",
"age":20
Example XML
<student>
<name>Rahul</name>
<age>20</age>
</student>
JSON is generally preferred in modern web applications because it is smaller, faster, and easier to work with. (MDN
Web Docs)
Most Frequently Asked Unit 5 Topics
1. Introduction to jQuery
2. Advantages of jQuery
3. jQuery Syntax
4. Document Ready Function
5. jQuery Selectors
6. jQuery Events
7. click(), hover(), submit()
8. JSON Introduction
9. JSON Syntax
10. JSON Arrays
11. JSON vs XML
12. [Link]()
13. [Link]()
14. Practical jQuery Programs
15. Event Handling using jQuery
These topics cover the majority of Unit 5 theory and practical examination questions. (GeeksforGeeks)
You might also like
- Internet Programming Fundamentals GuideNo ratings yetInternet Programming Fundamentals Guide21 pages
- JDBC-ODBC Bridge and Web Development BasicsNo ratings yetJDBC-ODBC Bridge and Web Development Basics3 pages
- Understanding Network Protocols and HTTPNo ratings yetUnderstanding Network Protocols and HTTP22 pages
- Web Engineering and Neutral Networks Easy To Understand NotesNo ratings yetWeb Engineering and Neutral Networks Easy To Understand Notes7 pages
- Introduction to Web and Internet ConceptsNo ratings yetIntroduction to Web and Internet Concepts51 pages
- L1 - Internet and World Wide Web (WWW) - Client-Server Architecture, Web Clients and Web ServersNo ratings yetL1 - Internet and World Wide Web (WWW) - Client-Server Architecture, Web Clients and Web Servers24 pages
- Understanding the World Wide Web BasicsNo ratings yetUnderstanding the World Wide Web Basics20 pages
- Understanding Web Servers and HTML BasicsNo ratings yetUnderstanding Web Servers and HTML Basics74 pages
- Client-Server Architecture & Web BasicsNo ratings yetClient-Server Architecture & Web Basics13 pages
- HTML Basics: Structure & Elements GuideNo ratings yetHTML Basics: Structure & Elements Guide77 pages
- Understanding HTTP and Client-Server ArchitectureNo ratings yetUnderstanding HTTP and Client-Server Architecture81 pages
- Web Basics Lesson1 Internet ArchitectureNo ratings yetWeb Basics Lesson1 Internet Architecture6 pages
- Unit - I 1. Introduction To Internet AnswerNo ratings yetUnit - I 1. Introduction To Internet Answer24 pages
- (Ortu Et Al. 201x) The JIRA Repository Dataset - Understanding Social Aspects of Software DevelopmentNo ratings yet(Ortu Et Al. 201x) The JIRA Repository Dataset - Understanding Social Aspects of Software Development4 pages
- 15-Day Full Stack Web Development SyllabusNo ratings yet15-Day Full Stack Web Development Syllabus6 pages
- Web Technologies Overview and PracticesNo ratings yetWeb Technologies Overview and Practices114 pages
- Tutorial:Creating A Basic Joomla! TemplateNo ratings yetTutorial:Creating A Basic Joomla! Template6 pages
- Cyber Security and Software Engineering CurriculumNo ratings yetCyber Security and Software Engineering Curriculum11 pages