Q-1) Explain different design issues at the time of designing an

effective website.
ANS)
Effective website design involves addressing various challenges to ensure a
seamless user experience. The following design issues are crucial to consider:
1. High Bounce Rate: Visitors abandoning the site quickly due to poor design,
slow loading times, or unclear navigation. Address this by optimizing content,
improving responsiveness, and streamlining user flows.
2. Outdated Design: Failing to refresh designs to keep pace with current trends
and user expectations. Regularly update designs to maintain a modern and
engaging appearance.
3. Confusing Navigation: Poorly organized menus, unclear labeling, or too many
options overwhelming users. Implement intuitive navigation, clear labeling,
and a limited number of options to facilitate easy exploration.
4. Inadequate Accessibility: Failing to consider users with disabilities, leading to
poor usability and compliance issues. Ensure website accessibility by following
WCAG guidelines, providing alternative text for images, and using semantic
HTML.
5. Slow Loading Times: Long page loads frustrating users and negatively
impacting search engine rankings. Optimize images, leverage browser caching,
and use efficient coding practices to reduce load times.
6. Too Much Competition for Attention: Overwhelming users with too many
options, features, or calls-to-action. Prioritize essential elements, use
whitespace effectively, and focus on a clear message to avoid visual clutter.
7. Inconsistent Design: Inconsistent typography, color schemes, or layouts
confusing users and undermining brand identity. Establish a consistent design
language throughout the site.
8. Lack of Responsiveness: Failing to adapt designs to different devices and
screen sizes, resulting in poor usability on mobile or tablet devices. Ensure
responsive design by using flexible grids, images, and media queries.
9. Poor Content Organization: Unclear hierarchy, too much text, or inadequate
use of headings and subheadings making content difficult to consume.
Organize content logically, use headings effectively, and prioritize concise
language.
10. Insufficient Testing: Failing to thoroughly test websites for usability,
accessibility, and performance issues, leading to poor user experiences.
Conduct rigorous testing, gather feedback, and iterate on design and
development to ensure an effective website.

Q-2) List and explain the website design principles.

ANS)
Q-3) Explain Architecture of Browser.
ANS)
Q-4) What is HTTP ? What are HTTP request and response?
ANS)

An HTTP request is a message sent by a client (typically a web browser or a

mobile app) to a server to request a specific action or resource. It consists of
three main parts:
1. Request-Line: This line begins with a method token (e.g., GET, POST, PUT,
DELETE), followed by the Request-URI (Uniform Resource Identifier), and
ends with the protocol version (HTTP/1.1). The elements are separated
by space characters.
 2. Request-Headers: These are key-value pairs that provide additional
information about the request. They can include fields such as:
o User-Agent: identifies the client software
o Host: specifies the domain or IP address of the server
o Accept-Language: specifies the preferred language for the
response
o Accept-Encoding: specifies the preferred compression format for
the response
o Connection: specifies connection management options
3. Request-Body: This is optional and contains data associated with the
request, such as the content of an HTML form or a file upload.
An HTTP response is a message sent by a server to a client in response to an
HTTP request. It also consists of three main parts:
1. Status-Line: This line includes a status code (e.g., 200 OK, 404 Not
Found), a status text (a brief description of the status code), and the
protocol version (HTTP/1.1).
2. Response-Headers: These are key-value pairs that provide additional
information about the response. They can include fields such as:
o Content-Type: specifies the format of the response body
o Content-Length: specifies the size of the response body
o Set-Cookie: sets a cookie on the client
3. Response-Body: This is optional and contains the actual data or resource
requested by the client.

Q-5) Difference Between GET and POST. Difference between web

browser and web server
ANS)
Q-6) What is CORS ? Write code to implement simple cross-origin
resource sharing and wildcards
ANS)
Cross-Origin Resource Sharing (CORS) is a mechanism that allows web pages to
make requests to resources located on a different origin (domain, protocol, or
port) than the one the web page was loaded from. This is a relaxation of the
same-origin policy, which restricts web pages from accessing resources from a
different origin.
CORS works by adding specific HTTP headers to responses from the server,
indicating which origins are allowed to access the resource. The browser then
checks these headers and allows or denies the request accordingly.

Q-7) What do you mean by meta tags?

ANS)

Q-8) What is the different between HTML and XHTML ? Explain

ordered and unordered list with example.
ANS)
An ordered list, also known as a numbered list, is used to display a sequence of
items with a specific order. Each item in the list is marked with a number,
starting from 1 and incrementing sequentially.

Unordered List (UL)

An unordered list, also known as a bulleted list, is used to display a collection of
items without a specific order. Each item in the list is marked with a bullet (•)
or other symbol.

Q-9) What is HTML table ? Explain table element row span and col
span with necessary attributes . Write HTML code for following table.
ANS)
An HTML table is a representation of data arranged in rows and columns, used
to present tabular information in a structured and organized manner. It is a
fundamental element in HTML (Hypertext Markup Language) used to define
the layout and content of data.
In HTML tables, rowspan and colspan are two attributes used to merge table
cells vertically and horizontally, respectively. These attributes allow you to
create complex table layouts by combining cells into a single, larger cell.
Row Span (rowspan)
The rowspan attribute specifies how many rows a cell should span vertically. It
is applied to a <td> or <th> element and takes a positive integer value as its
value. The value indicates the number of rows the cell should occupy.
Col Span (colspan)
The colspan attribute specifies how many columns a cell should span
horizontally. It is also applied to a <td> or <th> element and takes a positive
integer value as its value. The value indicates the number of columns the cell
should occupy.

Q-10) List and explain various list tags in HTML with example.
ANS)
1. Unordered List (Bulleted List)
1. Used to create a list of items without a specific order or
sequence.
2. Each list item is preceded by a bullet (•) or a disc symbol (⋅).
3. Example:

2. Ordered List (Numbered List)

o Used to create a list of items with a specific order or sequence.
o Each list item is numbered sequentially (1, 2, 3, etc.).
o Example:

4. Description List (Definition List)

Used to create a list of terms with their corresponding descriptions.
Each term is defined using the <dt> tag, and its description is defined
using the <dd> tag.
Q-11) Design Registration page in HTML

ANS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Register</h1>
</header>
<form>
<div class="form-group">
<label for="firstname">Firstname:</label>
<input type="text" id="firstname" name="firstname" required>
</div>
<div class="form-group">
<label for="lastname">Lastname:</label>
<input type="text" id="lastname" name="lastname" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required>
</div>
<div class="form-group">
<label for="confirmpassword">Confirm Password:</label>
 <input type="password" id="confirmpassword"
name="confirmpassword" required>
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender"
value="female">
<label for="female">Female</label>
</div>
<div class="form-group">
<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea>
</div>
<button type="submit">Register</button>
</form>
</div>

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

Q-12) What do you mean by “ class ” and “ id ” in CSS ? Explain with

Example. OR Explain types of selectors with example.
ANS)
In CSS, class and id are two types of selectors used to target HTML elements
and apply styles to them.
Class: A class is a way to group multiple HTML elements with similar styles. It’s
a common attribute for multiple elements, allowing you to define a set of
styles that can be applied to any element with that class. Class selectors start
with a dot (.) followed by the class name, for example: .header.
Id: An id is a unique identifier for a single HTML element. It’s used to target a
specific element and apply styles only to that one element. Id selectors start
with a hash symbol (#) followed by the id name,
for example:

Selectors are the foundation of CSS, used to target specific HTML elements and
apply styles. There are several types of selectors, including:
1. Type Selector (element)
Selects all elements of a specific type (e.g., p, div, img, etc.).
Example: p { font-size: 16px; } - applies font size 16px to all <p> elements.
2. ID Selector (#id)
Selects a single element with a specific ID attribute.
Example: #firstname { color: blue; } - applies blue color to the element
with id="firstname".
3. Class Selector (. class)
Selects all elements with a specific class attribute.
Example: .intro { font-style: italic; } - applies italic font style to all elements
with class="intro".
4. Combinator Selector (element, element, ...)
Selects multiple elements of different types.
Example: div, p { text-align: center; } - applies center alignment to
both <div> and <p> elements.
5. Attribute Selector (element[attribute])
Selects elements based on specific attribute values.
Example: a[hreflang="en"] { color: green; } - applies green color to
all <a> elements with hreflang="en" attribute.
6. Universal Selector (*)
Selects all elements on the page.
Example: * { font-family: Arial; } - applies Arial font family to all elements on the
page.
7. Child Selector (parent > child)
Selects direct child elements of a specific parent element.
Example: div > p { font-size: 18px; } - applies font size 18px to all <p> elements
that are direct children of <div> elements.
8. Descendant Selector (ancestor descendant)
Selects elements that are descendants of a specific ancestor element.
Example: #container p { font-size: 16px; } - applies font size 16px to
all <p> elements that are descendants of the element with id="container".
Q-13 ) What is positioning in CSS ? Also explain margin and padding
with example.
ANS)
Positioning in CSS refers to the way an element is placed within its parent
element or the viewport (the visible area of the browser window). There are
several values for the position property, each with its own behavior:
1. Static: The default value, where the element is positioned according to
the normal document flow.
2. Relative: The element is positioned relative to its normal position,
allowing for offsetting using top, right, bottom, and left properties.
3. Absolute: The element is positioned relative to its closest positioned
ancestor (if any) or the initial containing block. Its final position is
determined by the top, right, bottom, and left properties.
4. Fixed: The element is positioned relative to the viewport, ignoring its
parent element’s position and size.
5. Sticky: The element is positioned relative to its parent element, but
becomes fixed when it reaches the top or bottom of the viewport.
Margin and Padding
Margin and padding are two related but distinct concepts in CSS:
Margin:
 Refers to the outer space around an element, outside its border.
 Controls the distance between an element and its adjacent elements.
 Can be set using the margin property, which accepts one, two, three, or
four values (e.g., margin: 10px 20px 30px 40px).
 Negative values are allowed, which can draw an element closer to its
neighbors.
 Margins do not affect the size of the element’s content area.
Padding:
 Refers to the inner space within an element, inside its border.
  Controls the distance between an element’s content and its border.
 Can be set using the padding property, which accepts one, two, three, or
four values (e.g., padding: 10px 20px 30px 40px).
 Negative values are not allowed.
 Padding does affect the size of the element’s content area.

Q-14) What is Cascading Style Sheet ? Compare inline, embedded

and external style sheet with example.
ANS)
Cascading Style Sheets (CSS) is a stylesheet language used to describe the
presentation of a document written in HTML or XML. It defines how elements
should be rendered on screen, on paper, in speech, or on other media. CSS
enables you to separate the presentation of a document from its structure,
making it easier to maintain and update.
Inline Style Sheet
 Location: Within an HTML tag using the style attribute
 Reusability: Not reusable; styles are applied only to a single element
 File Size: Increases the HTML file size, affecting page load time
 Example:

Embedded Style Sheet

 Location: Within the <head> section of an HTML document
  Reusability: Can be reused on multiple elements within the same HTML
document
 File Size: Part of the HTML file, increasing its size
 Example:

External Style Sheet

 Location: A separate .css file
 Reusability: Can be reused on multiple HTML documents or an entire
website
 File Size: Reduces HTML file size and can be cached for faster page loads
 Example:

Q-15) Write a Java Script program which read number and check
whether that number is prime or not?
ANS)

Q-16) What do you mean by event in JavaScript ? Give at least two

examples of events with their handling.
ANS)
In JavaScript, an event is a notification sent by a user interface component,
such as a button, link, or form input, when a specific action occurs, like a click,
hover, or key press. Events allow JavaScript code to react to user interactions
and respond accordingly.
Here are two examples of events with their handling:
Example 1: Onclick Event
 Event: click on a button element
 Handling: Assign a JavaScript function to the onclick attribute of the
button element

In this example, when the user clicks the button, the alert function is executed,
displaying a message box with the text “Button clicked!”.
Example 2: Onchange Event
 Event: change on a text input element (e.g., when the user types
something and focuses away)
 Handling: Assign a JavaScript function to the onchange attribute of the
text input element

Q-17) Write a JavaScript program to validate an Email address.

ANS)

Q-18) Explain pop-up boxes in JavaScript with example.

ANS)
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt
box.
 Alert Box
An alert box is often used if you want to make sure information comes
through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Example
alert("I am an alert box!");
  Confirm Box
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel"
to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box
returns false.
Example
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
 Prompt Box
A prompt box is often used if you want the user to input a value before
entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel"
to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel"
the box returns null.
Example
let person = prompt("Please enter your name", "Harry Potter");
let text;
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello " + person + "! How are you today?";
}

Q-19) Write the difference between Client Side Scripting and Server
Side Scripting
ANS)
Q-20) Explain any two types of events in Java Script with Example
ANS)
Q-16

Q-21) Write Java Script for find first 10 prime numbers.

ANS)

Q-22) Explain the Document Object Model with example

ANS)
The Document Object Model (DOM) is a programming interface for HTML and
XML documents that represents the structure of a document as a tree-like data
structure. It allows scripts to dynamically access and update the content,
structure, and style of a webpage.
DOM Tree Structure
The DOM tree consists of nodes, which represent elements, attributes, and text
content of the document. Each node has a parent node, except for the root
node (the document itself), and can have multiple child nodes. The nodes are
organized in a hierarchical structure, with the root node at the top and the leaf
nodes (text nodes) at the bottom.

DOM Nodes
In this example, the DOM nodes are:
1. Document (root node)
2. html (child node of Document)
3. head (child node of html)
4. title (child node of head)
5. body (child node of html)
6. h1 (child node of body)
7. p (child node of body)

Q-23) Differentiate client side scripting and server side scripting.

ANS) Q-19)

Q-24) Explain Callback function in JavaScript with example

ANS)
JavaScript Callback Explained
A callback function in JavaScript is a function that is passed as an argument to
another function and is executed by that function at a later time. In other
words, a callback function is a function that is invoked by another function,
often as a result of an asynchronous operation.
Example 1: Simple Callback
Suppose we want to create a greetUser function that takes a username as an
argument and displays a welcome message. We can use a callback function to
achieve this:

In this example:
1. greetUser is the outer function that takes a username and
a callback function as arguments.
2. saveUserName is the inner function that simulates an asynchronous
operation (e.g., fetching user data) and calls greetUser with
the username and a callback function.
3. When greetUser is executed, it logs the welcome message and then calls
the callback function, which logs “Callback executed!”.

Q-25) What are the different types of arrays in PHP ? Explain with
example to process the arrays in PHP.
ANS)
Q-26) Explain the PHP session and PHP cookie with an example.
ANS)
A PHP session is a way to store data on the server-side, specific to a particular
user and browser session. It’s a more secure and reliable option compared to
cookies, as the data is stored on the server and not accessible to the user.
Here’s an example of how to create and use a PHP session:
1. Initialize the session using session_start() before sending any output to
the browser.
2. Store data in the $_SESSION superglobal array,
e.g., $_SESSION['favorite_color'] = 'blue';.
3. On subsequent requests, the session data can be accessed
using $_SESSION['favorite_color'].
Q-27) Give full form of following acronym. (1) DOM (2) XSL (3) DTD
(4) HTTP (5) PHP (6) XML
ANS)
1. DOM: Document Object Model
2. XSL: Extensible Stylesheet Language
3. DTD: Document Type Definition
4. HTTP: Hypertext Transfer Protocol
5. PHP: Hypertext Preprocessor (originally Personal Home Page Tools)
6. XML: Extensible Markup Language

Q-28) How to write in PHP? Explain with example

ANS)
PHP (Hypertext Preprocessor) is a server-side scripting language used for web
development. It’s executed on the server, and the resulting HTML output is
sent to the client’s web browser.
Syntax
PHP code is embedded within HTML documents using special tags: <?php and ?
>. The code inside these tags is executed on the server, and the resulting HTML
is sent to the client.
Example 1: Printing “Hello World!”
Create a file named hello.php with the following content:

Example 2: Using Variables

Create a file named greeting.php with the following content: