Page |1

Sample
Solution
 Page |2

Group A
1. What is the purpose of the <meta> tag in HTML? Provide an
example to specify UTF-8 character encoding.
The <meta> tag provides metadata about an HTML document, such as
character set, author, and description. It helps browsers interpret the content
correctly.
Example:
<meta charset="UTF-8">

This sets the character encoding to UTF-8, supporting most characters and
symbols.

2. Define HTTP briefly and state its default port number.

HTTP (HyperText Transfer Protocol) is used to request and transfer web
pages on the internet. It follows a request-response model between clients
and servers.
Default port number: 80

3. Explain the purpose of the action and method attributes in the

<form> tag.
The action attribute defines the URL where form data is sent after
submission.
The method attribute specifies how the data is sent—commonly using GET
(URL parameters) or POST (request body).
Example:

<form action="[Link]" method="post">

4. What is HTTPS? Mention its default port number.

HTTPS (HyperText Transfer Protocol Secure) is a secure version of HTTP
that uses SSL/TLS encryption to protect data transferred between the client
and server.
Default port number: 443
 Page |3

5. State the purpose of the alt attribute in the <img> tag. Provide an
example.
The alt attribute provides alternative text for an image, shown when the
image cannot load. It also improves accessibility for screen readers.
Example:

<img src="[Link]" alt="Company Logo">

6. Write HTML code to create an unordered nested list with three

items in each level.

<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Peas</li>
<li>Beans</li>
</ul>
</li>
<li>Dairy
<ul>
<li>Milk</li>
<li>Cheese</li>
<li>Butter</li>
</ul>
</li>
</ul>
 Page |4

7. Compare HTTP and TCP protocols.

 HTTP is an application-level protocol used to transfer web content

such as HTML, CSS, and images.
 TCP is a transport-layer protocol that ensures reliable, ordered
delivery of data.
HTTP relies on TCP to deliver its data packets.

8. Differentiate between a website and a home page.

 A website is a collection of related web pages under a common

domain name, like a complete project.
 A home page is the main or first page of a website that users land on;
it serves as a navigation hub to other pages.

9. Demonstrate inline and external CSS with syntax examples.

 Inline CSS is written directly inside an HTML element using the

style attribute.
Example:
 <p style="color: blue;">Hello World</p>
 External CSS is stored in a separate file and linked using the <link>
tag.
Example in HTML:
 <link rel="stylesheet" href="[Link]">

Example in [Link]:

p{
color: blue;
}

10. Which attribute is used to open a hyperlink in a new browser tab?

Write example code.
The target="_blank" attribute in the <a> tag is used to open a hyperlink in a
new browser tab.
Example:

<a href="[Link] target="_blank">Visit Google</a>

 Page |5

11. Name and briefly describe two commonly used JavaScript

keyboard events.

1. keydown: Triggered when a key is pressed down.

2. keyup: Triggered when a key is released.
These events allow capturing user input from the keyboard.

12. Write the syntax of the HTML <img> tag and mention any two of
its attributes.
Syntax:

<img src="[Link]" alt="Description">

Attributes:

 src: Specifies the image file path.

 alt: Provides alternate text if the image fails to load.

13. What is the difference between class selector and ID selector in

CSS? Provide examples.
 Class selector (.): Used for multiple elements.
Example: .menu { color: blue; }
 ID selector (#): Used for a unique element.
Example: #header { font-weight: bold; }

14. How are comments added in JSP?

JSP comments are written like this:

<%-- This is a JSP comment --%>

These comments are not visible in the client-side source code.

15. Write HTML code to create a dropdown menu with options: Apple,
Banana, and Cherry.
<select name="fruits">
<option>Apple</option>
<option>Banana</option>
<option>Cherry</option>
</select>
 Page |6

16. Define a hyperlink. Provide an example using an anchor tag.

A hyperlink is a link to another web page or resource.
Example:

<a href="[Link] Example</a>

17. Write the syntax of a JSP scriptlet that declares and initializes an
integer variable count to 10.
<%
int count = 10;
%>

18. Explain the role of CSS in web development.

CSS defines how HTML elements are styled and displayed. It controls
layout, fonts, colors, and spacing, improving website appearance and user
experience.

19. Name and describe the protocols used to send and retrieve emails.

 SMTP (Simple Mail Transfer Protocol): Sends emails from client

to server.
 IMAP/POP3: Used to retrieve emails. IMAP keeps email on the
server; POP3 downloads it to the device.

20. What is the CSS box model? Explain briefly.

The box model includes:
 Content: Actual text/image.
 Padding: Space around content.
 Border: Surrounds padding.
 Margin: Space outside the border.
It defines how elements are spaced and sized on a webpage.

21. Write JavaScript code to display "Welcome!" in an alert box when

the page loads.
<script>
[Link] = function() {
alert("Welcome!");
};
</script>
 Page |7

22. What is the purpose of the <div> tag in HTML?

The <div> tag groups block-level content and allows CSS or JavaScript to
be applied to the group.

23. Analyze and explain the output of the following JavaScript code:
let a = 10;
let b = "10";
[Link](a == b); // true
[Link](a === b); // false

Explanation:

 == compares values with type conversion, so 10 equals "10" → true.

 === checks both value and type. Number ≠ String → false.

24. What is the use of the <span> tag in HTML?

The <span> tag is an inline container used to style or manipulate a portion
of text using CSS or JavaScript.
 Page |8

Group B
1. Write a JavaScript function checkEvenOrOdd() that prints "Even"
or "Odd" based on input.

function checkEvenOrOdd(number) {
if (number % 2 === 0) {
[Link]("Even");
} else {
[Link]("Odd");
}
}

Example usage:

checkEvenOrOdd(4); // Output: Even

checkEvenOrOdd(7); // Output: Odd

Explanation:
The function uses the modulus operator % to check the remainder when the
number is divided by 2. If the remainder is 0, it's even; otherwise, it's odd.

2. Explain a static web page. Illustrate CSS child selector with an

example.
A static web page is a web page with fixed content that does not change
unless manually edited by a developer. It is written using HTML and CSS
only and does not interact with the server after being loaded.

Features of a static web page:

 Simple and fast to load

 Suitable for small websites
 Cannot display dynamic content (like user input or real-time updates)

CSS Child Selector Example:

The child selector (>) selects elements that are direct children of a specific
element.
 Page |9

HTML:
<div class="parent">
<p>This is a direct child</p>
<span>
<p>This is a nested child</p>
</span>
</div>

CSS:

.parent > p {
color: blue;
}

Explanation:
Only the first <p> tag will be selected and styled because it is a direct child
of .parent.

3. Write a JavaScript function sumArray() that returns the sum of

array elements.

function sumArray(arr) {
let sum = 0;
for (let i = 0; i < [Link]; i++) {
sum += arr[i];
}
return sum;
}

Example usage:

let numbers = [10, 20, 30, 40];

[Link](sumArray(numbers)); // Output: 100

Explanation:
The function uses a for loop to iterate through each element of the array and
accumulates the total sum in the sum variable.
 P a g e | 10

4. Define a dynamic web page. Explain the CSS class selector with
example.

A dynamic web page displays content that can change in response to user
interaction or server data. It is created using HTML, CSS, and scripting
languages like JavaScript or server-side technologies like JSP, PHP, etc.

Characteristics:
 Content updates dynamically (e.g., shopping carts, login systems)
 Responds to user input
 Frequently connected to a database

CSS Class Selector Example:

HTML:
<p class="highlight">This is a highlighted paragraph.</p>

CSS:

.highlight {
background-color: yellow;
font-weight: bold;
}

Explanation:
The class selector (.highlight) targets all HTML elements with the class
"highlight" and applies the defined styles.
 P a g e | 11

5. Differentiate among JSP Scriptlet, Expression, Directive,

Declaration, and Action tags with examples.

Tag Type Purpose Syntax Example

Scriptlet Contains Java code that is <% int x = 10; %>
executed
Expression Evaluates and displays output <%= x * 2 %>
to the client
Directive Provides instructions to JSP <%@ page
engine (e.g., imports) language=”java” %>
Declaration Declares variables or methods <%! Int count = 0; %>
Action Tag Uses XML-like tags to control <jsp:include
behavior or objects page=”[Link]” />

Explanation:

 Scriptlet: Adds business logic or conditions

 Expression: Outputs result directly into HTML
 Directive: Sets global properties (e.g., language, imports)
 Declaration: Declares fields/methods used across JSP
 Action Tag: Invokes JSP actions like including another file
Here are the model answers for your 5-mark questions (6–14), clearly
written for exam use:

6. Write JavaScript to multiply a positive number by 2 without using *

operator. Explain ==.
You can multiply a number by 2 using addition:

function multiplyByTwo(num) {
return num + num;
}
[Link](multiplyByTwo(7)); // Output: 14

Explanation of ==:
The == operator compares two values for equality after type conversion.
Example:

[Link](5 == "5"); // true

Here, JavaScript converts the string "5" to number before comparing.

 P a g e | 12

7. Write JSP code to display a multiplication table of 5 using a for loop.

<%@ page language="java" %>
<html>
<body>
<h3>Multiplication Table of 5</h3>
<%
for (int i = 1; i <= 10; i++) {
[Link]("5 x " + i + " = " + (5 * i) + "<br>");
}
%>
</body>
</html>

8. Write JavaScript to divide a number by 2 without using / operator.

Explain ===.
Division by 2 can be done using right shift >> operator:

function divideByTwo(num) {
return num >> 1;
}
[Link](divideByTwo(10)); // Output: 5

Explanation of ===:
The === operator checks for both value and data type equality.
Example:

[Link](5 === “5”); // false

Unlike ==, no type conversion is done with ===.

 P a g e | 13

9. Create an HTML form that collects user name and email with a
submit button.

<form action="[Link]" method="post">

<label for="username">Name:</label>
<input type="text" id="username" name="username" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<input type="submit" value="Submit">

</form>

10. Explain internal vs. external CSS with suitable examples.

 Internal CSS is defined inside a <style> tag within the HTML

document.

<head>
<style>
p { color: blue; }
</style>
</head>

 External CSS is written in a separate file (e.g., [Link]) and linked

using <link>.

<head>
<link rel=”stylesheet” href=”[Link]”>
</head>

Example in [Link]:

p{
color: green;
}
 P a g e | 14

11. Explain the CSS box model and its components. Write CSS to style a <div>
with margin, border, padding, and width. Also, write CSS for a green hover
effect on a button.

Box Model Components:

 Content – The actual content (text/image)

 Padding – Space between content and border
 Border – Edge around the padding
 Margin – Space outside the border

CSS Example:
div {
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 30px;
}

button:hover {
background-color: green;
}
12. Differentiate between JavaScript and JSP. Provide a valid use case of the
JavaScript modulus operator.

Feature JavaScript JSP

Type Client-side scripting Server-side technology
Runs In Browser Web server
Use Form validation, interactivity Dynamic content, DB integration
File Extension .js .jsp

Use of Modulus %:

let num = 7;
if (num % 2 === 0) {
[Link]("Even");
} else {
[Link]("Odd");
} Explanation: % is used to find the remainder (e.g., for
checking even/odd numbers).
 P a g e | 15

13. Write a JavaScript function isPalindrome() to check if a string is a

palindrome.

function isPalindrome(str) {
let reversed = [Link]('').reverse().join('');
return str === reversed;
}
[Link](isPalindrome("madam")); // true
[Link](isPalindrome("hello")); // false

Explanation:
The function reverses the string and compares it with the original. If they
match, it's a palindrome.

14. Write a JavaScript function to validate an email input in an HTML

form.
<form onsubmit="return validateEmail()">
<input type="text" id="email" placeholder="Enter email">
<input type="submit" value="Submit">
</form>
<script>
function validateEmail() {
let email = [Link]("email").value;
let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

if ([Link](email)) {
alert("Valid Email");
return true;
} else {
alert("Invalid Email");
return false;
}
}
</script>
 P a g e | 16

Group C
Group C
1. Explain the architecture of JSP. Describe the life cycle of a JSP page
with a neat diagram.
Also, explain the role of the JSP engine in processing a client request.
Write JSP code to store and retrieve a user's name using a session object.

JSP Architecture: JSP (JavaServer Pages) is built on the Java EE platform

and follows a client-server model. It allows embedding Java code inside
HTML to generate dynamic content.

JSP architecture components:

 Client (Browser): Sends HTTP requests to the server.

 Web Server with JSP engine (e.g., Apache Tomcat): Processes JSP
files.
 JSP Translator: Converts JSP into servlet.
 Servlet Engine: Compiles and executes the servlet.
 Database (Optional): For data storage and retrieval.

Life Cycle of a JSP Page:

1. Translation Phase: JSP is converted into a servlet by the JSP engine.
2. Compilation Phase: The generated servlet is compiled into bytecode.
3. Loading and Instantiation: Servlet class is loaded and instantiated.
4. Initialization: The jspInit() method is called.
5. Request Handling: The jspService() method is called for each
request.
 P a g e | 17

Role of JSP Engine:

 Converts JSP code into a Java servlet.
 Compiles and loads servlet for execution.
 Manages JSP lifecycle methods (jspInit(), jspService(), jspDestroy()).
 Handles session, exception, and request management.

JSP Code to Store and Retrieve User's Name Using Session:

<%-- Store name in session --%>
<%
String userName = [Link]("name");
[Link]("user", userName);
%>

<%-- Retrieve name from session --%>

<%
String storedName = (String) [Link]("user");
[Link]("Welcome, " + storedName);
%>
 P a g e | 18

2. Explain the use of <iframe> and <frame> along with their

applications, with suitable examples.
What are the security concerns associated with <iframe>?
With respect to CSS, how does the browser resolve conflicting rules?

Use of <iframe>:

 <iframe> is used to embed another HTML page within the current

page.
 It allows displaying external or internal content in a sub-window.

Example:
<iframe src="[Link]" width="400" height="300"></iframe>

Use of <frame> (Deprecated):

 Used within <frameset> to divide the browser window into sections.
 Each frame can load a separate HTML document.
 Not recommended in modern HTML as it's obsolete in HTML5.

Example:
<frameset cols="50%,50%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>

Security Concerns with <iframe>:

1. Clickjacking Attacks: Malicious sites can load another site in a

hidden iframe and trick users into clicking.
2. Data Leakage: Embedding content from third-party sites may expose
session data.
3. Cross-Origin Restrictions: Access to iframe content is restricted if it
is from a different origin.
Security Best Practice: Use X-Frame-Options HTTP header to prevent
embedding in iframes.
 P a g e | 19

CSS Conflict Resolution (Cascading Rules):

When multiple CSS rules apply to the same element, the cascade
determines which rule takes precedence.

Factors considered:
1. Specificity: More specific selectors win (e.g., #id > .class > tag)
2. Source Order: Later rules override earlier ones.
3. Importance: !important overrides all normal rules.

Example:
p { color: black; } /* Low specificity */
#main p { color: blue; } /* Higher specificity */
p { color: red !important; } /* Wins due to !important */

3. Create an HTML page that displays the following:

• An ordered list of five programming languages
• An unordered list of five web development tools
Apply CSS to:
• Change the bullet style of the unordered list to square
• Change list item color and font
• Add a hover effect to list items

HTML and CSS Code:--------

 P a g e | 20

< html>
<html>
<head>
<style>
ul {
list-style-type: square;
}
li {
font-family: Arial, sans-serif;
color: darkblue;
transition: 0.3s;
}
li:hover {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Ordered List: Programming Languages</h2>
<ol>
<li>Python</li>
<li>Java</li>
<li>JavaScript</li>
<li>C++</li>
<li>Ruby</li>
</ol>
<h2>Unordered List: Web Development Tools</h2>
<ul>
<li>VS Code</li>
<li>Chrome DevTools</li>
<li>Git</li>
<li>Postman</li>
<li>Figma</li>
</ul>
</body> </html>
 P a g e | 21

4. Provide the flowchart of the if - else if condition in JavaScript.

Explain with a suitable example.
Explain, with a valid example, the role of Cyclic Redundancy Check (CRC)
in ensuring data integrity in web communication.

Flowchart Description:

A typical if - else if - else decision structure works as follows:

1. Start
2. Evaluate first condition
• If true → execute corresponding block → End
• If false → check next condition
3. Repeat until a condition is true
4. If no conditions are true → execute else block
5. End

Flowchart (Text Format):

 P a g e | 22

JavaScript Example:

let score = 72;

if (score >= 90) {

[Link]("Grade: A");
} else if (score >= 75) {
[Link]("Grade: B");
} else if (score >= 60) {
[Link]("Grade: C");
} else {
[Link]("Grade: D");
}

Explanation:
This code checks the value of score and assigns a grade. It evaluates the
conditions one by one until a match is found. If none match, the else
block runs.

Explain, with a valid example, the role of Cyclic Redundancy Check

(CRC) in ensuring data integrity in web communication.

What is CRC?

Cyclic Redundancy Check (CRC) is an error-detection technique used in

digital networks and storage to detect accidental changes to raw data.

How CRC Works:

1. The sender applies a polynomial division algorithm to the data and
appends the CRC value (remainder) to the end.
2. The receiver performs the same CRC calculation.
3. If the result is zero, the data is considered valid.
4. If not, it indicates that the data was corrupted during transmission.

Example:
Let’s say the data to be sent is:
Data: 1101011011
Generator Polynomial: 10011
 P a g e | 23

 Sender divides the data by the polynomial and appends the

remainder (CRC bits) to the data.
 Receiver performs the same division on the received data.
 If the remainder is 0, the data is considered correct.

Why CRC is Important in Web Communication:

 Detects errors in packets during transmission over unreliable
networks.
 Ensures that the integrity of the message is maintained.
 Used in Ethernet, TCP/IP, and storage systems like hard drives and
SSDs

5. Create an HTML table to display student data (Name, Roll No, and
Marks in 3 subjects).
Use CSS to:
• Apply a border to the table and cells
• Set alternating row colors
• Highlight the header row with a background color

HTML + CSS Code (using color names):

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px 0;
}

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

th {
background-color: lightgreen;
color: black;
 P a g e | 24

tr:nth-child(even) {
background-color: lightgray;
}

tr:nth-child(odd) {
background-color: white;
}
</style>
</head>
<body>

<h2>Student Data Table</h2>

<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Math</th>
<th>Science</th>
<th>English</th>
</tr>
<tr>
<td>Alice</td>
<td>101</td>
<td>88</td>
<td>92</td>
<td>85</td>
</tr>
<tr>
<td>Bob</td>
<td>102</td>
<td>76</td>
<td>81</td>
<td>78</td>
</tr>
<tr>
<td>Charlie</td>
<td>103</td>
 P a g e | 25

<td>90</td>
<td>87</td>
<td>91</td>
</tr>
</table>
</body>
</html>

Explanation:

 The table and cells have a black border.

 The header row uses lightgreen as background.
 Even rows have lightgray background, and odd rows have
white.

6. Provide the flowchart of the do - while condition in JavaScript.

Explain with a suitable example.
Discuss how CRC (Cyclic Redundancy Check) is used to detect errors
in data transmission over the web, using a valid example.

Flowchart Description
 P a g e | 26

JavaScript Example:
let i = 1;

do {
[Link]("Number is: " + i);
i++;
} while (i <= 5);

Explanation:
The do-while loop always runs at least once, even if the condition is false
on the first check. In this example, it prints numbers from 1 to 5.

Cyclic Redundancy Check (CRC): Role and Example

What is CRC?
CRC is a data error detection technique used in digital networks and
storage to detect accidental changes in transmitted data.

How CRC Works:

 A CRC generator polynomial is used at the sender’s end to compute
a checksum (remainder).
 This CRC value is appended to the data and sent.
 The receiver recomputes the CRC on the received data.
 If the remainder is zero, the data is valid. Otherwise, it is considered
corrupted.

Example:

 Data to Send: 11010011101100

 Generator Polynomial (Divisor): 1011
 Sender performs binary division and appends the CRC (remainder).
 Receiver divides the full message again using the same polynomial.
 If remainder ≠ 0 → error detected.

Importance of CRC in Web Communication:

 CRC is used in Ethernet, Wi-Fi, modems, and data link layer
protocols.
 It prevents corrupted data from being processed by the application
layer, ensuring data integrity during transmission.
 P a g e | 27

7. Write a JavaScript program that:

• Declares an array of 5 numbers
• Uses a loop to calculate and display the sum and average of the numbers
• Displays the result in the browser using [Link]()
 P a g e | 28

Explanation:
 The array numbers contains five values.
 A for loop calculates the total sum.
 The average is computed by dividing the sum by the array’s length.
 Results are displayed using [Link]() directly into the
webpage.

8. Develop a small web page with an HTML structure for a to-do list, styled
with CSS and functional using JavaScript.
The page should allow adding new tasks, marking tasks as completed, and
deleting tasks.
Explain how the three technologies (HTML, CSS, and JS) work together in
this project. Use comments for better code readability.
Give an example of inline CSS with a suitable code snippet.

<!DOCTYPE html>
<html>
<head>
<style>
li { background: lightyellow; margin: 5px; padding: 5px; }
.done { text-decoration: line-through; color: gray; }
</style>
</head>
<body>

<input id="task" placeholder="New task">

<button onclick="add()">Add</button>
<ul id="list"></ul>

<script>
function add() {
let t = [Link]();
if (t === "") return;
let li = [Link]("li");
[Link] = t;
[Link] = () => [Link]("done");
[Link] = e => { [Link](); [Link](); };
[Link](li);
[Link] = "";
 P a g e | 29

}
</script>

</body>
</html>

Explanation (Brief):

 HTML creates the input box, button, and list.

 CSS styles the tasks and completed effect.
 JavaScript adds tasks, toggles them as done on click, and removes
them on right-click.

Inline CSS Example (Short):

<p style="color:blue;">This is inline CSS</p>

9. Write a JavaScript function that takes a number as input and checks

whether the number is even or odd.
Display the result using alert(). Also, include HTML code to allow the
user to input the number and call the function using a button click.

<input id="num" type="number" placeholder="Enter number">

<button onclick="check()">Check</button>

<script>
function check() {
let n = [Link]("num").value;
if (n % 2 == 0) alert("Even");
else alert("Odd");
}
</script>

Explanation (Brief):

 The user types a number into the input field.

 When the button is clicked, the check() function runs.
 It uses % to check if the number is divisible by 2.
 Result is shown using alert().
 P a g e | 30

10. Create a user registration form using HTML and validate the inputs
using JavaScript.
Ensure that the form checks for empty fields, a valid email format,
password length (minimum 8 characters), and matching password
confirmation.
Use comments for better code readability.
Give an example of external CSS with a suitable code snippet.

143143
P a g e | 31
 P a g e | 32

✅ External CSS ([Link]):

input, button {
margin: 5px;
padding: 6px;
border: 1px solid gray;
}

✅ Explanation (Short):

 HTML creates the form structure.

 JavaScript checks for:
o Empty fields
o Valid email format using regex
o Password length (≥8)
o Password confirmation
 External CSS is used for styling via link tag.
 P a g e | 33

PYQ
Solution
 P a g e | 34

Group A
1. Answer the following questions.

1. Explain the utility of FTP protocol.

FTP (File Transfer Protocol) is used to transfer files between a client and
server over a network. It allows uploading, downloading, and managing
files on a remote server.
2. Explain the difference between TCP and UDP.

TCP (Transmission Control UDP (User Datagram Protocol)

Protocol)
Connection-oriented protocol Connectionless protocol
Reliable – ensures data delivery Unreliable – no guarantee of
delivery
Slower due to error checking Faster with minimal overhead
Data is received in order Data may arrive out of order
Used in web, email, file transfer Used in video streaming, gaming

3. What is malware, and what are the common types of malware that
target networks?
Malware is harmful software designed to damage or disrupt systems.
Common types include viruses, worms, trojans, ransomware, and spyware.
4. How scripting language differs from HTML?
HTML defines the structure and layout of a webpage, while scripting
languages (like JavaScript) provide interactivity and dynamic behavior.
5. How do you create an ordered and unordered list in HTML?

 Ordered list: <ol><li>Item</li></ol>

 Unordered list: <ul><li>Item</li></ul>

6. What is the purpose of the <title> tag in an HTML document?

Give an example of how it is used.
The <title> tag sets the text shown in the browser tab.
Example: <title>My Website</title>
 P a g e | 35

7. Explain the difference between the display: none; and

visibility: hidden; properties in CSS.
display: none; hides the element and removes it from the layout.
visibility: hidden; hides the element but keeps its space.
8. What are the benefits and drawbacks of using a DOM?
Benefits: Allows easy access and manipulation of HTML elements using
JavaScript. Drawbacks: Can be slow and memory-intensive for large pages.
OR
What would be the result of 3 + 2 + "7"? Also explain how the
operation works.
The result is "57". First, 3 + 2 = 5, then 5 + "7" gives the string
"57" due to string concatenation.
9. List the various dialog boxes in JavaScript.

 alert() – displays a message

 prompt() – takes input from the user
 confirm() – asks for confirmation (OK/Cancel)

10. How would you write the HTML to draw a horizontal rule 20 pixels
wide?
<hr style="width:20px;">
OR
How are cookies used for session tracking in JSP?
JSP uses cookies to store user-specific data on the client side. The server
reads these cookies in each request to maintain the user session.
 P a g e | 36

Group B
2. What are the objectives of using Cascading Style Sheets? Briefly
explain about linking of external style sheets and fixing the
backgrounds. (2+2+1 marks)

Objectives of Using Cascading Style Sheets (CSS):

1. Separation of Content and Style: CSS separates content (HTML)

from presentation (design), making it easier to manage and update the
visual design without affecting the structure.
2. Consistency in Design: CSS ensures uniform styling across multiple
web pages, which helps maintain a consistent look for the website.
3. Improved Website Performance: External CSS files can be cached
by the browser, reducing page load times and improving site speed.
4. Easier Maintenance: Updating design elements is simpler since all
styles are in one place, making it easier to manage and maintain the
website.

Linking External Style Sheets:

To link an external CSS file to an HTML document, the <link> tag is used
within the <head> section. The syntax is:

<link rel="stylesheet" type="text/css" href="[Link]">

This links the "[Link]" file to the HTML page, applying the styles from
the external file.

Fixing the Background:

To fix a background image, use the background-attachment property. For
example:

body {

background-image: url('[Link]');

background-attachment: fixed;

This ensures the background stays fixed while the content scrolls.
 P a g e | 37

[Link]
How can you create a responsive design using CSS? How is CSS class
selector different from universal selector? (2+3 marks)

Creating a Responsive Design Using CSS:

Responsive design is achieved using media queries. These queries allow
styles to be applied based on the screen size. For example:

@media screen and (max-width: 768px) {

.container {

width: 100%;

This adjusts the layout for smaller screens, making it responsive.

Difference Between CSS Class Selector and Universal Selector:

CSS Class Selector CSS Universal Selector

Targets elements with a specific class Targets all elements on the page.
attribute.

Used to apply styles to specific Used to apply styles universally to

groups of elements. every element.

.button { background- * { margin: 0; padding:

color: blue; } 0; }
More efficient as it targets specific Can slow down performance since it
elements. affects all elements.

Applied only to elements with the Affects all elements across the
defined class. webpage.
 P a g e | 38

3.
Give the difference between client-side scripting and server-side scripting.
Explain how the request–response mechanism works over the Internet. (3+2
marks)
Client-side scripting and server-side scripting are two essential concepts in
web development that handle different tasks.

Aspect Client-Side Scripting Server-Side Scripting

Execution Executes on the user's Executes on the web server
browser
Language HTML, CSS, JavaScript PHP, Python, Ruby,
Used [Link]
Purpose Handles user interaction, Handles database operations,
dynamic content changes, user authentication, page
form validation generation
Speed Faster because it doesn't Slower due to communication
require a server request with the server
Security Less secure, as the source More secure, as the source
code is visible to users code is hidden on the server

The request-response mechanism over the Internet is how web browsers

and servers communicate. A client (typically a browser) sends a request for
a web resource (like a page, image, etc.) to the server. The server processes
the request, generates the appropriate response (HTML, CSS, etc.), and
sends it back to the client. This process involves protocols like
HTTP/HTTPS, and the client then renders the content for the user.
 P a g e | 39

[Link]
Explain the role and benefits of client-side scripting in web development.
Provide examples of common tasks performed using client-side scripting.
(3+2 marks)

Role and Benefits of Client-Side Scripting:

Client-side scripting plays a crucial role in making websites interactive and
responsive. It enables tasks to be performed directly in the user's browser,
reducing the need for constant communication with the server.

Benefits:

1. Speed: Since execution happens in the user's browser, it speeds up

interaction by reducing server load.
2. Reduced Server Load: Less interaction with the server allows for
better performance.
3. Improved User Experience: Enables features like real-time updates,
animations, and form validation without requiring page reloads.

Common Tasks Performed Using Client-Side Scripting:

1. Form Validation: Ensures the user has entered the correct data before
submission.
2. Dynamic Content Update: Allows sections of a page to be updated
without reloading the entire page (using AJAX).
3. Animation and Effects: Adds interactivity, such as image sliders or
hover effects.
 P a g e | 40

4.
Explain different components of JSP architecture. Write a JavaScript
function that takes two numbers as parameters and returns their sum. (2+3
marks)
Components of JSP Architecture:

1. Client: The client is typically a browser that sends a request for a

specific JSP page to the web server.
2. Web Server: A server that handles client requests, processes them,
and returns responses. It often contains a JSP engine for processing
JSP files.
3. JSP Page: A JSP page is an HTML page embedded with Java code.
The Java code can be used to dynamically generate content like
HTML or XML based on user input or other factors.
4. Servlet Container: The servlet container is part of the web server
responsible for managing and executing JSP files. It compiles JSPs
into servlets and processes the client requests accordingly.
5. JSP Engine: The JSP engine translates the JSP into a Java servlet if
not already done, manages its lifecycle, and communicates with the
servlet container.

JavaScript Function to Add Two Numbers:

function addNumbers(num1, num2) {
return num1 + num2;
}

This function takes two parameters, num1 and num2, and returns their
sum.
 P a g e | 41

[Link]
Explain the lifecycle of a JSP page with a diagram. What do you mean by
MVC architecture? (3+2 marks)

Lifecycle of a JSP Page:

Lifecycle of a JSP Page:

1. Translation: When a JSP page is first requested, it is converted into a
servlet by the JSP engine.
2. Compilation: The servlet is compiled into bytecode by the Java
compiler.
3. Initialization: The servlet container creates a servlet instance and
initializes it by calling the init() method (if implemented).
4. Request Processing: For each request, the service() method is called,
which processes the request and generates a response.
5. Destruction: When the JSP is no longer needed, the destroy() method
is called to clean up resources.
 P a g e | 42

MVC Architecture:
MVC stands for Model-View-Controller, a design pattern used in web
development for separating concerns.

 Model: Represents the data and the business logic of the application.
It directly manages the data, logic, and rules of the application.
 View: Represents the UI of the application. It is responsible for
displaying the data to the user.
 Controller: Acts as an intermediary between the Model and View. It
takes user input from the View, processes it (using the Model), and
updates the View accordingly.

MVC improves maintainability, scalability, and separation of concerns in

web applications.
 P a g e | 43

5.
Explain the use of the ‘this’ keyword in JavaScript. Provide HTML
script/code to display in web browser the following expression:
f(x) = 5x² + 4x + 3 (2+3 marks)
Use of the this Keyword in JavaScript:
The this keyword in JavaScript refers to the context in which the function is
executed. It can refer to:

 Object Methods: this refers to the object the method belongs to.
 Regular Functions: this refers to the global object (window in
browsers).
 Arrow Functions: this inherits from the surrounding context.
 Event Handlers: this refers to the element that triggered the event.

This script calculates f(x) = 5x² + 4x + 3 for x = 2 and displays it.

 P a g e | 44

[Link]
Explain how you would write a function in JavaScript to check if a given
number is prime. Differentiate between var and let keywords in JavaScript
with example. (3+2 marks)

Function to Check if a Number is Prime in JavaScript:

A prime number is a number greater than 1 that has no divisors other than 1
and itself. Here's how you can write a function to check if a number is
prime:

This function returns true if the number is prime, otherwise false.

Difference between var and let:

Aspect var let

Scope Function scope (only within Block scope (limited to
the function it's declared) the block where it's
declared)
Re- Can be re-declared in the Cannot be re-declared in
declaration same scope the same scope
Hoisting Hoisted to the top of the Hoisted to the top of the
function but initialized as block but not initialized
undefined
Example var x = 10; var x = 20; let x = 10; let x = 20;
(valid) (error)
 P a g e | 45

6.
Describe what HTTP and HTTPS protocols are. How do they differ, and
why is HTTPS important? (2+3 marks)

HTTP (HyperText Transfer Protocol):

HTTP is a protocol used for transferring data over the web. It is an
application layer protocol that defines how messages are formatted and
transmitted between clients (like web browsers) and servers. It operates
over port 80 and is not secure, meaning data sent through HTTP is not
encrypted.

HTTPS (HyperText Transfer Protocol Secure):

HTTPS is the secure version of HTTP. It uses SSL/TLS encryption to
protect data transmitted between the client and the server. It operates over
port 443 and ensures that communication is encrypted and secure.

Differences between HTTP and HTTPS:

Aspect HTTP HTTPS

Security No encryption Uses encryption (SSL/TLS)
Port 80 443
Protocol Unsecured Secured
Data Data can be intercepted or Data is protected from
Integrity altered interception

Why HTTPS is Important:

 Security: HTTPS ensures that data transferred between the client and
server is encrypted, preventing interception by hackers.
 Trust: Websites using HTTPS have a secure connection, enhancing
user trust.
 SEO: Search engines like Google prefer HTTPS websites and rank
them higher.
 P a g e | 46

[Link]
Explain the significance of accessibility in web design. What are some best
practices for making a website accessible to users with disabilities? (3+2
marks)

Significance of Accessibility in Web Design:

Accessibility in web design ensures that websites are usable by people with
a variety of disabilities, including visual, auditory, motor, and cognitive
impairments. It is important because it promotes inclusivity, ensuring that
all users, regardless of their abilities, can access information and services
online. Additionally, accessible websites comply with legal requirements
and improve user experience, helping businesses reach a broader audience.

Best Practices for Accessibility:

1. Text Alternatives: Use alt text for images to help screen readers.
2. Clear Navigation: Ensure easy navigation with descriptive links.
3. Keyboard Accessibility: Make the site navigable via keyboard.
4. Sufficient Contrast: Use high contrast for readability.
5. Accessible Forms: Label forms clearly and provide error messages.

7.
What is the purpose of the <!DOCTYPE> declaration in HTML? Why is
JavaScript called an object-based language?

Purpose of the <!DOCTYPE> Declaration in HTML:

The <!DOCTYPE> declaration is used to define the document type and
version of HTML being used in a webpage. It ensures that the web browser
renders the page correctly according to the specified HTML version.
Without this declaration, browsers may switch to "quirks mode," which can
lead to inconsistent rendering across different browsers.

Why JavaScript is Called an Object-Based Language:

JavaScript is considered an object-based language because it uses objects to
store data and functions. In JavaScript, almost everything is an object,
including arrays and functions. Though JavaScript does not have full
object-oriented programming features like classes (as in traditional OOP
languages), it still allows the creation and manipulation of objects, making
it object-based. This approach provides flexibility in data handling and
functionality.
 P a g e | 47

7. OR
Describe the CSS box model and explain how the properties margin,
border, padding, and content affect the layout of an element.

Answer:

CSS Box Model:

The CSS box model is a concept used to define the layout of elements on a
webpage. It describes the rectangular structure of an element, consisting of
four areas: content, padding, border, and margin. These areas affect how the
element is displayed on the page and how it interacts with other elements.
1. Content: The area where the element's actual content (text, images) is
displayed.
2. Padding: Space between the content and the border.
3. Border: Surrounds the padding and content, adding thickness and
color.
4. Margin: Space outside the border, creating separation from other
elements.

Effect of Properties on Layout:

Property Effect on Layout

Content The main area where the element's content (text, images, etc.)
is displayed.
Padding Adds space inside the element, between the content and the
border, affecting the element's size.
Border Surrounds the padding and content, increasing the total size of
the element.
Margin Adds space outside the border, pushing other elements away,
without affecting the element's size.
 P a g e | 48

Group C
8.
How is the OSI layer different from the TCP/IP layer? Discuss the
advantages and disadvantages of 2-tier and 3-tier client-server architecture.
Explain Denial-of-Service (DoS) attack. (4+4+2 marks)

1. Difference between OSI and TCP/IP Layers:

Aspect OSI Model TCP/IP Model

Layers 7 layers: Physical, Data Link,
4 layers: Network
Network, Transport, Session,
Interface, Internet,
Presentation, Application Transport, Application
Purpose A theoretical framework forA practical model used
network protocols in real-world
networking
Development Developed by ISO (International Developed by
Organization for ARPANET for the
Standardization) internet
Flexibility More detailed and abstract More simplified and
focused on practical
use

The OSI model is a conceptual framework with 7 layers used for

understanding network protocols, whereas the TCP/IP model has 4 layers,
and it is more streamlined for real-world implementation in networking.
 P a g e | 49

Advantages and Disadvantages of 2-tier and 3-tier Client-Server

Architecture:

2-Tier Architecture:

 Advantages:
1. Simplicity in design and development.
2. Lower cost due to fewer layers.
3. Faster communication between client and server.
 Disadvantages:
1. Limited scalability and performance as the number of clients
increases.
2. Less flexibility for adding new features or handling complex
applications.
3. Can become a bottleneck with a large number of users.

3-Tier Architecture:

 Advantages:
1. Better scalability and flexibility.
2. Separation of concerns, allowing for easier maintenance and
updates.
3. Improved performance by distributing workloads across
multiple servers (e.g., database, application, presentation).
 Disadvantages:
1. More complex design and implementation.
2. Higher cost due to the need for multiple servers and increased
infrastructure.
3. Increased latency due to additional communication between
layers.

Denial-of-Service (DoS) Attack:

A Denial-of-Service (DoS) attack is a malicious attempt to disrupt the
normal traffic of a targeted server, service, or network by overwhelming it
with a flood of traffic, making it unable to handle legitimate requests. This
causes the system to crash or become very slow, denying service to
authorized users.
 P a g e | 50

[Link]
Differentiate between a DDoS attack and a DoS attack. Differentiate
between computer worm and virus. What is the utility of the alt keyword in
HTML? What is the difference between class selectors and ID selectors in
CSS? (3+2+2+3 marks)

1. Difference between DDoS and DoS Attack:

Aspect DoS (Denial of DDoS (Distributed Denial of

Service) Service)
Source Originates from a Originates from multiple
single source or system. distributed sources (often
botnets).
Impact Can overwhelm a More powerful and difficult to
system, but limited in mitigate due to the volume of
scale. requests.
Complexity Easier to launch and More complex and harder to
identify. trace, as attacks come from many
sources.

A DoS attack is launched from a single system, whereas a DDoS attack

involves multiple systems working together, making it harder to defend
against and mitigate.

Difference between Computer Worm and Virus:

Aspect Worm Virus

Self- Can replicate itself and spread Requires a host file to
Replication across networks without user attach itself and spread.
intervention.
Spread Spreads over networks and systems Needs to be activated by
Method on its own. the user (e.g., opening a
file).
Impact Often used for large-scale network Usually causes damage to
disruption. files and systems.

A worm can spread autonomously over networks, while a virus needs to

attach to a host file and relies on user actions to spread.
 P a g e | 51

Utility of the alt Keyword in HTML:

The alt (alternative text) attribute in HTML is used to describe the content
of an image for users who cannot see the image, such as visually impaired
users using screen readers. It also serves as a fallback when the image
cannot be displayed.

Example:

<img src="[Link]" alt="Company Logo">

Difference between Class Selectors and ID Selectors in CSS:

Aspect Class Selector ID Selector

Syntax Prefixed with a period (.). Prefixed with a hash
(#).
Uniqueness Can be used multiple times on the Must be unique within
same page. a page.
Specificity Lower specificity compared to ID Higher specificity.
selectors.

A class selector is used for styling multiple elements, while an ID selector

targets a single, unique element on the page.
 P a g e | 52

9.
You are a web developer tasked with creating a registration form for a new
social media platform. The form requires users to input their username,
email, password, and confirm password. The form should ensure the
following:

 Username: Must be between 5 to 15 characters long and contain only

alphanumeric characters.
 Email: Must be in a valid email format.
 Password: Must be at least 8 characters long, contain at least one
uppercase letter, one lowercase letter, and one digit.
 Confirm Password: Must match the password.
A. How would you validate the username field using JavaScript?
B. Write a JavaScript function to validate the email format.
C. Describe how to validate the password according to the given
requirements.
D. How can you ensure that the "Confirm Password" field matches the
"Password" field? (2.5 × 4 marks)

A. Validate the Username Field:

To validate the username, it should be between 5 to 15 characters long and
contain only alphanumeric characters.

B. Validate the Email Format:

To validate the email, check if the input matches the common email format
(e.g., user@[Link]).
 P a g e | 53

C. Validate the Password:

To validate the password, ensure it is at least 8 characters long and contains
at least one uppercase letter, one lowercase letter, and one digit.

D. Ensure Confirm Password Matches Password:

To ensure the confirm password matches the password, simply compare
both values.

These functions validate the form fields to ensure the input meets the
specified criteria before submission.
 P a g e | 54

[Link]
Describe the use of the this keyword in JavaScript. How does it behave
differently in various contexts (e.g., global scope, object methods,
constructor functions)? What is the Document Object Model (DOM)? How
does JavaScript interact with the DOM? Write a code snippet to describe
the working principle of a JavaScript global variable. (3+3+2+2 marks)

1. Use of the this Keyword in JavaScript:

The this keyword refers to the context in which the function is called. In the
global scope, this refers to the global object. In object methods, it refers to
the object itself. In constructor functions, it refers to the instance of the
object being created.
 P a g e | 55

Document Object Model (DOM):

The DOM is a programming interface that allows JavaScript to manipulate
the structure, style, and content of a web page. It represents the page as a
tree of objects.

Code Snippet for JavaScript Global Variable:

A global variable is accessible throughout the script, even inside functions.
 P a g e | 56

10.
Suppose there is a website which allows users to convert between different
units of measurement (e.g., kilometers to miles, Celsius to Fahrenheit).
Perform the following tasks:
A. Create an HTML webpage with input fields for value, starting unit, and
a dropdown for target units.
B. A button triggers the conversion.
C. JavaScript function handles conversion based on user input.
D. Get value and units from input fields. Only numeric values should be
accepted.
E. Use if statements to perform calculations based on selected units.
(5 × 2 marks)
P a g e | 57
 P a g e | 58

[Link]
Deploy JavaScript and HTML to perform addition, subtraction, and LCM
of two numbers. You should take user input for two numbers.
Write a JavaScript program using onclick button where the number will
increase by 1 every time the button is clicked. (6+4 marks)

1. JavaScript and HTML to Perform Addition, Subtraction, and LCM of

Two Numbers
 P a g e | 59

2. JavaScript Program to Increase a Number by 1 on Button Click