Scribd
Upload
3 views76 pages

Complete Notes

The document provides a comprehensive introduction to the Internet and the World Wide Web, explaining key concepts such as the differences between the two, web architecture, HTTP requests and responses, and the roles of web servers and browsers. It also covers HTML basics, including its structure, tags, attributes, lists, hyperlinks, tables, and forms. The content is structured in a question-answer format, making it easy to understand and reference.

Uploaded by

nsznz95
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 views76 pages

Complete Notes

The document provides a comprehensive introduction to the Internet and the World Wide Web, explaining key concepts such as the differences between the two, web architecture, HTTP requests and responses, and the roles of web servers and browsers. It also covers HTML basics, including its structure, tags, attributes, lists, hyperlinks, tables, and forms. The content is structured in a question-answer format, making it easy to understand and reference.

Uploaded by

nsznz95
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

Unit 1: Introduc on to Web (Ques on–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 collec on 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. Differen ate between Internet and Web.

Answer

Internet Web

Network of networks Service running on Internet

Infrastructure Informa on 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 Defini on

Internet: A global network connec ng millions of computers worldwide.

Web: A collec on 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 communica on model in which:

 Client requests services.

 Server provides services.


Components

Client

The device or so ware reques ng informa on.

Examples:

 Chrome

 Firefox

 Edge

Server

The computer that stores and serves web pages.

Examples:

 Apache Server

 Nginx Server

Example

When you search "Opera ng System Notes":

 Browser = Client

 Google Server = Server

Exam Defini on

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:

h ps://[Link]

Browser sends:

GET /

HTTP/1.1

Host: [Link]

Common Request Methods

Method Purpose

GET Retrieve data

POST Send data


Method Purpose

PUT Update data

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 a er 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

h ps://[Link]/mobile

Parts of URL

h ps://[Link]/mobile

│ │ │

│ │ └── 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 so ware or hardware that stores websites and delivers web pages to users.

Func ons

 Receive requests

 Process requests

 Send responses

Examples

 Apache HTTP Server

 Nginx

 Microso 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 so ware used to access and display web pages.

Func ons

 Sends HTTP requests

 Receives responses

 Renders HTML pages

Examples

 Google Chrome

 Mozilla Firefox

 Microso 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 iden fy 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 Hos ng?


Answer

Web Hos ng 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 hos ng server.

Popular Hos ng Providers

 Hos nger

 Bluehost

 GoDaddy

Example Flow

Website Files

Hos ng Server

Internet

Users Access Website

Important 5-Mark Exam Ques on

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 ques on is one of the most frequently asked ques ons from Unit 1 and is worth preparing thoroughly.

Unit 2: HTML (Ques on–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>

< tle>My First Page</ tle>

</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="h ps://[Link]">Google</a>

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 Ques on

Differen ate 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 A ributes in HTML?

Answer

A ributes provide addi onal informa on about an HTML element.

They are wri en inside the opening tag.

Syntax

<tagname a ribute="value">

Example
<a href="h ps://[Link]">Google</a>

Here:

 href = A ribute

 h ps://[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>

< tle>My Website</ tle>

</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. < tle>

Page tle 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 Declara on

<!DOCTYPE html>

Importance

 Ensures proper rendering.

 Prevents compa bility 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

 Documenta on

 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 A ribute

<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 A ribute

<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 A ribute in Ordered Lists?

Answer

The start a ribute specifies the star ng 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 Defini on List?

Answer

A defini on list displays terms and their defini ons.

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="h ps://[Link]">

Google

</a>

Q14. What is the href A ribute?

Answer

The href a ribute specifies the des na on URL.

Example

<a href="h ps://[Link]">

YouTube

</a>

Q15. Explain the target A ribute.

Answer

The target a ribute specifies where the linked page will open.

Example

<a href="h ps://[Link]"

target="_blank">

Google

</a>

Values

Value Meaning

_blank New tab

_self Same tab

Q16. Differen ate Between Absolute and Rela ve URLs.

Answer

Absolute URL

Contains complete web address.

<a href="h ps://[Link]">

Google

</a>

Rela ve URL
Contains local file path.

<a href="[Link]">

About Us

</a>

Difference

Absolute URL Rela ve URL

Full address Par al address

Used for external pages Used for internal pages

Q17. What are Internal Links?

Answer

Internal links move to a specific sec on within the same webpage.

Example

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

<h2 id="contact">

Contact Sec on

</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 mul ple 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 mul ple 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 Ac on and Method A ributes?

Answer

Ac on

Specifies where data is sent.

<form ac on="[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 Bu on

<input type="radio">

Checkbox

<input type="checkbox">

Submit

<input type="submit">

Reset

<input type="reset">

Bu on

<input type="bu on" value="Click">

Q26. What are Name, Value and Required A ributes?

Answer

Name

Used to iden fy 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 <op on>.

Example

<select>

<op on>Delhi</op on>

<op on>Mumbai</op on>

<op on>Noida</op on>

</select>

Q28. What is Textarea?

Answer

Textarea allows mul -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="fl[Link]">

Q30. Explain img A ributes.

src

Image loca on.

src="fl[Link]"

alt

Alterna ve text.

alt="Flower Image"

width

width="300"
height

height="200"

Complete Example

<img src="fl[Link]"

alt="Flower"

width="300"

height="200">

Q31. What are Frames?

Answer

Frames divide the browser window into mul ple sec ons, each displaying a different webpage.

Note: Frames are obsolete in HTML5 but may s ll 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 ver cal 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 Ques on

Create a Student Registra on Form using HTML.

<!DOCTYPE html>

<html>

<head>

< tle>Registra on Form</ tle>

</head>

<body>

<form ac on="[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>

<op on>Delhi</op on>

<op on>Noida</op on>

<op on>Gurugram</op on>

</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 rela ve 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 Declara on

These 10 topics cover the majority of Unit 2 examina on ques ons.

Unit 3: CSS (Ques on–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 presenta on
(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 presenta on.

Without CSS

<h1>Welcome</h1>

Output is plain text.

With CSS

h1{

color:blue;
text-align:center;

Output becomes a rac ve and properly forma ed.

Advantages

1. Be er 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 Defini on

A CSS rule consists of a selector and a declara on 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

 Declara ons = 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 wri en directly inside the HTML element using the style a ribute.

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 wri en inside the <style> tag within the <head> sec on.

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 Proper es in CSS.

Answer

Background proper es 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 Ver cal repeat

Background Posi on

background-posi on:center;

Values

 top

 bo om

 le

 right

 center

Q11. Explain Text Forma ng Proper es.

Answer

Text forma ng changes text appearance.

Text Color
p{

color:red;

Text Alignment

h1{

text-align:center;

Values

 le

 right

 center

 jus fy

Text Decora on

text-decora on:underline;

Values

Value Meaning

underline Underline

overline Line above

line-through Strike text

none No decora on

Text Transform

text-transform:uppercase;

Values

Value Result

uppercase ABC

lowercase abc

capitalize Abc

Q12. Explain Font Proper es.

Answer
Font proper es 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 iden fy 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 par cular class.

Syntax

.classname

Example

HTML:

<p class="note">

Hello

</p>

CSS:

.note{

color:red;

Important Point

A class can be reused many mes. (MDN Web Docs)

Q17. What is ID Selector?

Answer

ID selector selects one unique element.

Syntax

#idname

Example

HTML:

<h1 id=" tle">


Welcome

</h1>

CSS:

# tle{

color:green;

Important Point

An ID should be unique within a webpage. (MDN Web Docs)

Q18. Differen ate Between ID and Class.

Answer

ID Class

Unique Reusable

Uses # Uses .

One element Mul ple elements

Higher specificity Lower specificity

Example

#header{

color:red;

.menu{

color:blue;

This is one of the most important exam ques ons. (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 a er h1.

Q22. What is CSS Cascade?

Answer

Cascade determines which CSS rule is applied when mul ple rules target the same element. (DevDoc)

Factors

1. Inheritance

2. Specificity

3. Source Order

Q23. What is Inheritance?

Answer

Child elements inherit some proper es 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 wri en 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-bo om:10px;

padding-le :20px;

Shorthand

padding:10px 20px 10px 20px;

(top right bo om le )

Q32. What is Border?

Answer

Border surrounds the padding and content.

Example

border:2px solid black;

Q33. Explain Border Proper es.

Border Style

border-style:solid;

Values:

 solid

 do ed

 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-bo om:10px;

margin-le :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;

Calcula on

Total Width =

Margin Le

+ Border Le

+ Padding Le

+ Content Width

+ Padding Right
+ Border Right

+ Margin Right

= 10 + 5 + 20 + 200 + 20 + 5 + 10

= 270px

This is a very important numerical exam ques on. (Wikipedia)

Most Important 5-Mark Exam Ques on

Explain CSS Box Model with Diagram.

Answer:

The CSS Box Model describes how every HTML element is represented as a rectangular box consis ng 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 Introduc on

2. Ways to Apply CSS

3. CSS Syntax and Rules

4. Class vs ID

5. CSS Selectors

6. Specificity and Cascade

7. Background Proper es

8. Text Forma ng

9. Font Proper es
10. Display Property

11. Box Model

12. Margin vs Padding

13. Border Proper es

14. Width Calcula on in Box Model

15. List and Table Styling

These topics usually cover the majority of Unit 3 theory and prac cal ques ons.

Unit 4: JavaScript (Ques on–Answer Format)

Core Idea: Interac vity and Logic in Web Pages

JavaScript is a programming language used to make web pages interac ve. It can respond to user ac ons, validate
forms, manipulate HTML elements, and perform calcula ons. (MDN Web Docs)

Q1. What is JavaScript?

Answer

JavaScript (JS) is a scrip ng language used to add interac vity and dynamic behavior to web pages.

Example

<bu on onclick="alert('Hello!')">

Click Me

</bu on>

When the bu on is clicked, an alert box appears.

Uses

 Form valida on

 Anima ons

 Interac ve bu ons

 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=" tle">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, a ribute, 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 par cular 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 inten onally 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

 Func on 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 func ons are global.

Example

let name = "Rahul";

func on show(){

[Link](name);

Accessible everywhere.

Q19. What is Local Scope?

Answer

Variables declared inside func ons are local.

Example

func on show(){

let age = 20;

Cannot be accessed outside func on.

Q20. What is a Func on?

Answer

A func on is a reusable block of code.

Syntax

func on name(){
}

Example

func on greet(){

alert("Welcome");

(MDN Web Docs)

Q21. How are Func ons Called?

Answer

Func ons are executed by calling their name.

Example

func on greet(){

alert("Hello");

greet();

Q22. What are Parameters?

Answer

Parameters receive values passed to func ons.

Example

func on 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 func on.

Example
func on 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 ac ons performed by users or browsers.

Examples

 Clicking bu on

 Loading page

 Submi ng form

 Moving mouse

(DevDoc)

Q28. What is onclick Event?

Answer

Triggered when user clicks an element.

Example

<bu on onclick="show()">

Click

</bu on>

<script>

func on show(){

alert("Bu on 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')">
<op on>HTML</op on>

</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 submi ed.

Example

<form onsubmit="return validate()">

Mostly used for valida on.

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 op on from mul ple 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 condi on remains true.

Example

let i=1;

while(i<=5){
[Link](i);

i++;

Q37. What is break Statement?

Answer

Stops loop execu on.

Example

for(let i=1;i<=10;i++){

if(i==5){

break;

[Link](i);

Output:

1234

Q38. What is con nue Statement?

Answer

Skips current itera on.

Example

for(let i=1;i<=5;i++){

if(i==3){

con nue;

[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. Loca on

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 Loca on Object?

Answer

Contains URL informa on.

Example
loca [Link];

Gets current URL.

Q44. What is Navigator Object?

Answer

Provides browser informa on.

Example

[Link];

Q45. What is String Object?

Example

let text = "Hello";

Method

[Link]

Output:

Q46. What is Array?

Answer

Array stores mul ple 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 me.

Q53. What is Number Object?

Example

let num = Number("100");

Converts string to number.

Q54. Explain Arithme c Operators.

Operator Meaning

+ Addi on

- Subtrac on

* Mul plica on

/ Division
Operator Meaning

% Modulus

Example

10 % 3

Output:

Q55. Explain Comparison Operators.

Operator Meaning

== Equal value

=== 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 Valida on?

Answer

Form valida on checks whether user input is correct before submi ng data.

Examples

 Empty field check

 Email valida on

 Password matching

 Numeric range valida on

JavaScript valida on 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>
func on 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 Ques on

Write a JavaScript program for Form Valida on.

<!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>

func on 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 prac cal ques ons in exams.

Most Frequently Asked Unit 4 Topics

1. DOM and DOM Methods

2. Data Types

3. var vs let vs const

4. Func ons and Return Values

5. Events (onclick, onsubmit, onload)

6. if-else and switch

7. Loops (for, while)

8. break and con nue

9. BOM (Window, Document, History, Loca on, Navigator)

10. Arrays (push, pop, length)

11. Math Object

12. Date Object

13. Operators

14. Form Valida on

15. Password Matching Valida on

These topics usually cover the majority of Unit 4 theory and prac cal exam ques ons. (MDN Web Docs)

Unit 5: jQuery and JSON (Ques on–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 applica ons. (GeeksforGeeks)

Part A: jQuery

Q1. What is jQuery?


Answer

jQuery is a fast, lightweight JavaScript library that simplifies HTML manipula on, event handling, anima ons, and
AJAX opera ons.

Its famous slogan is:

"Write Less, Do More"

This means tasks that require many lines of JavaScript can o en 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 compa bility issues

3. Makes DOM manipula on easier

4. Simplifies event handling

5. Provides anima on effects

(jQuery)

Q3. How to Include jQuery in a Webpage?

Answer

There are two methods:

1. Using CDN

<script src=

"h ps://[Link]/ajax/libs/jquery/3.6.0/[Link]">

</script>

2. Downloading jQuery

<script src="[Link]">

</script>

(GeeksforGeeks)
Q4. What is the Syntax of jQuery?

Answer

Basic jQuery syntax:

$(selector).ac on();

Components

Part Meaning

$ jQuery symbol

selector HTML element selec on

ac on() Opera on to perform

Example

$("p").hide();

This hides all paragraphs.

(GeeksforGeeks)

Q5. What is the $ Symbol in jQuery?

Answer

The $ symbol represents the jQuery func on.

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 a er the webpage is fully loaded.

Syntax

$(document).ready(func on(){

});

Example

$(document).ready(func on(){
$("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 manipula on.

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

$("# tle")

Selects:

<h1 id=" tle">

Welcome

</h1>

Q10. What is Class Selector in jQuery?


Answer

Selects elements having a par cular class.

Syntax

$(".classname")

Example

$(".note")

Selects:

<p class="note">

Hello

</p>

Q11. What is A ribute Selector?

Answer

Selects elements based on a ributes.

Syntax

$("[a ribute]")

Example

$("[href]")

Selects all elements having href a ribute.

Q12. What are jQuery Events?

Answer

Events are ac ons 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

$("bu on").click(func on(){


alert("Bu on Clicked");

});

Q14. What is dblclick() Event?

Answer

Triggered when user double-clicks an element.

Example

$("p").dblclick(func on(){

$(this).hide();

});

Q15. What is mouseenter() Event?

Answer

Triggered when mouse enters an element.

Example

$("p").mouseenter(func on(){

alert("Mouse Entered");

});

Q16. What is mouseleave() Event?

Answer

Triggered when mouse leaves an element.

Example

$("p").mouseleave(func on(){

alert("Mouse Le ");

});
Q17. What is keypress() Event?

Answer

Triggered when keyboard key is pressed.

Example

$("input").keypress(func on(){

alert("Key Pressed");

});

Q18. What is submit() Event?

Answer

Triggered when a form is submi ed.

Example

$("form").submit(func on(){

alert("Form Submi ed");

});

Q19. What is change() Event?

Answer

Triggered when element value changes.

Example

$("select").change(func on(){

alert("Selec on Changed");

});

Q20. What is hover() Event?

Answer

hover() combines mouseenter() and mouseleave().


Example

$("p").hover(

func on(){

$(this).css("color","red");

},

func on(){

$(this).css("color","black");

);

Most Important Prac cal Ques on (jQuery)

Hide Paragraph on Bu on Click

<!DOCTYPE html>

<html>

<head>

<script src=

"h ps://[Link]/ajax/libs/jquery/3.6.0/[Link]">

</script>

<script>

$(document).ready(func on(){

$("#btn").click(func on(){

$("p").hide();

});
});

</script>

</head>

<body>

<p>Hello World</p>

<bu on id="btn">

Hide Paragraph

</bu on>

</body>

</html>

Working

1. Page loads.

2. Bu on click event ac vates.

3. Paragraph hides.

This is one of the most frequently asked jQuery prac cal ques ons. (GeeksforGeeks)

Part B: JSON

Q21. What is JSON?

Answer

JSON stands for:

JavaScript Object Nota on

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 Func ons?

Answer

No.

JSON stores only data, not func ons.

Invalid Example

"name":"Rahul",

"show":func on(){}

This is not valid JSON.

JSON contains only:

 Strings

 Numbers

 Objects
 Arrays

 Boolean values

 Null

(MDN Web Docs)

Q27. Differen ate 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 Ques on

Differen ate Between JSON and XML.

JSON XML

JavaScript Object Nota on 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 applica ons because it is smaller, faster, and easier to work with. (MDN
Web Docs)

Most Frequently Asked Unit 5 Topics

1. Introduc on to jQuery

2. Advantages of jQuery

3. jQuery Syntax

4. Document Ready Func on

5. jQuery Selectors

6. jQuery Events

7. click(), hover(), submit()

8. JSON Introduc on

9. JSON Syntax

10. JSON Arrays

11. JSON vs XML

12. [Link]()

13. [Link]()

14. Prac cal jQuery Programs

15. Event Handling using jQuery

These topics cover the majority of Unit 5 theory and prac cal examina on ques ons. (GeeksforGeeks)

You might also like