AWD PAPER 1

1. Explain any five input tags used for forms with example

The <input> tag in HTML is used to create various types of input

fields for forms. Here are five common types of input tags, their
purposes, and examples:

1. Text Input (type="text")

Purpose: Allows the user to input a single line of text.
Attribute:
maxlength: Limits the number of characters.
placeholder: Displays a hint to the user.
Example:
html
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"
placeholder="Enter your name">
</form>

2. Password Input (type="password")

Purpose: Masks the input for sensitive information, such as
passwords.
Attributes:
maxlength: Limits the number of characters.
Example:
html
<form>
<label for="password">Password:</label>
 <input type="password" id="password" name="password"
maxlength="16" placeholder="Enter your password">
</form>

3. Email Input (type="email")

Purpose: Validates that the input is in the format of an email
address.
Attributes:
required: Ensures the field must be filled before submission.
Example:
html
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required
placeholder="Enter your email">
</form>

4. Radio Button (type="radio")

Purpose: Allows the user to select only one option from a
group of predefined options.
Attributes:
name: Groups radio buttons together.
value: The value submitted when selected.
Example:
html
<form>
<p>Gender:</p>
 <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>
</form>

5. File Input (type="file")

Purpose: Allows the user to upload a file.
Attributes:
accept: Specifies the type of files accepted (e.g., images,
PDFs).
Example:
html
<form>
<label for="profilepic">Upload Profile Picture:</label>
<input type="file" id="profilepic" name="profilepic"
accept="image/">
</form>

These examples showcase how diverse <input> types can be

used to handle different kinds of user input effectively.
2. Define DOM. List any three methods of finding elements on
page.

Definition of DOM
The Document Object Model (DOM) is a programming interface
for web documents. It represents the structure of a document
(e.g., HTML or XML) as a tree of objects, allowing developers to
interact with and manipulate the content, structure, and styling
of the document using scripting languages like JavaScript.

In the DOM:
Every HTML element becomes a node.
Developers can access, modify, add, or delete elements
dynamically.

Three Methods to Find Elements on a Page

1. getElementById()
Finds an element by its unique id attribute.
Syntax: document.getElementById("id")
Example:
javascript
const header = document.getElementById("mainheader");
console.log(header.textContent);

2. getElementsByClassName()
Finds all elements that have a specific class name.
Returns a live HTMLCollection (arraylike object).
Syntax: document.getElementsByClassName("className")
Example:
javascript
 const items =
document.getElementsByClassName("listitem");
console.log(items[0].textContent); // Access the first item

3. querySelector()
Finds the first element that matches a CSS selector.
Syntax: document.querySelector("selector")
Example:
javascript
const button = document.querySelector(".btnprimary");
console.log(button.innerText);

Each method has its use case:

Use getElementById for a single unique element.
Use getElementsByClassName for groups of elements with the
same class.
Use querySelector for flexible CSSbased selection.

3. Write a JavaScript Program to Calculate the Area of a Triangle.

function calculateTriangleArea(base, height) {

if (base <= 0 || height <= 0) {
return "Base and height must be positive numbers.";
}
return 0.5 * base * height;
}
// Example usage
const base = parseFloat(prompt("Enter the base of the triangle: "));
const height = parseFloat(prompt("Enter the height of the triangle:
"));

const area = calculateTriangleArea(base, height);

if (typeof area === "number") {
console.log(`The area of the triangle is ${area}`);
} else {
console.log(area); // In case of invalid input
}

4. Explain Clientserver Architecture.

o A client and server networking model is a model in which computers

such as servers provide the network services to the other computers
such as clients to perform a user based tasks. This model is known
as clientserver networking model.
o The application programs using the clientserver model should follow
the given below strategies:
 o An application program is known as a client program, running on the
local machine that requests for a service from an application
program known as a server program, running on the remote
machine.
o A client program runs only when it requests for a service from the
server while the server program runs all time as it does not know
when its service is required.
o A server provides a service for many clients not just for a single
client. Therefore, we can say that clientserver follows the
manytoone relationship. Many clients can use the service of one
server.
o Services are required frequently, and many users have a specific
clientserver application program. For example, the clientserver
application program allows the user to access the files, send email,
and so on. If the services are more customized, then we should have
one generic application program that allows the user to access the
services available on the remote computer.

Client
A client is a program that runs on the local machine requesting service from
the server. A client program is a finite program means that the service
started by the user and terminates when the service is completed.

Server
A server is a program that runs on the remote machine providing services to
the clients. When the client requests for a service, then the server opens the
door for the incoming requests, but it never initiates the service.
A server program is an infinite program means that when it starts, it runs
infinitely unless the problem arises. The server waits for the incoming
requests from the clients. When the request arrives at the server, then it
responds to the request.

Advantages of Clientserver networks:

o Centralized: Centralized backup is possible in clientserver
networks, i.e., all the data is stored in a server.
o Security: These networks are more secure as all the shared
resources are centrally administered.
o Performance: The use of the dedicated server increases the speed
of sharing resources. This increases the performance of the overall
system.
o Scalability: We can increase the number of clients and servers
separately, i.e., the new element can be added, or we can add a
new node in a network at any time.

Disadvantages of ClientServer network:

o Traffic Congestion is a big problem in Client/Server networks.
When a large number of clients send requests to the same server
may cause the problem of Traffic congestion.
o It does not have a robustness of a network, i.e., when the server is
down, then the client requests cannot be met.
o A client/server network is very decisive. Sometimes, regular
computer hardware does not serve a certain number of clients. In
such situations, specific hardware is required at the server side to
complete the work.
o Sometimes the resources exist in the server but may not exist in the
client. For example, If the application is web, then we cannot take
the print out directly on printers without taking out the print view
window on the web.
5.How to insert an image in HTML? Explain with example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth,
initialscale=1.0">
<title>Insert Image Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>

<! Inserting an image >

<img src="https://via.placeholder.com/300" alt="Sample
Placeholder Image" width="300" height="200" title="Hover Text
Example" />

<p>This is an example of how to insert an image in HTML.</p>

</body>
</html>
 5.Define loop. Explain different loops used in JavaScript.
A loop is a programming construct that allows a sequence of instructions to
be executed repeatedly, either for a specific number of times or until a
certain condition is met. Loops are fundamental in programming as they
enable repetitive tasks to be handled efficiently without writing redundant
code.

While Loop
The while loop creates a loop that is executed as long as a
specified condition evaluates to true. The loop will continue to
run until the condition evaluates to false. The condition is
specified before the loop, and usually, some variable is
incremented or altered in the while loop body to determine
when the loop should stop.
while (condition) {
// Code block to be executed
}
For example:
let i = 0;

while (i < 5) {
console.log(i);
i++;
}

The output would be:

0
1
2
3
4
Do…While Loop
A do…while statement creates a loop that executes a block
of code once, checks if a condition is true, and then repeats
the loop as long as the condition remains true. They are used
when the loop body needs to be executed at least once. The
loop ends when the condition evaluates to false.
let x = 0;
let i = 0;

do {
x = x + i;
console.log(x);
i++;
} while (i < 5);

The output would be:

0
1
3
6
10

For Loop
A for loop declares looping instructions, with three important
pieces of information separated by semicolons ;:
 The initialization defines where to begin the loop by
declaring (or referencing) the iterator variable.
  The stopping condition determines when to stop looping
(when the expression evaluates to false).
 The iteration statement updates the iterator each time the
loop is completed.
for (let i = 0; i < 4; i += 1) {
console.log(i);
}

The output would be:

0
1
2
3

for...of Loop

A for...of loop iterates over an object’s values rather than

their keys. This allows for direct access to the items, as
opposed to indexreference. Examples of iterable objects
include:
 An Array of elements.
 A String of characters.
 A Map of key/value pairs.
const items = ['apple', 'banana', 'cherry'];

for (const item of items) {

console.log(item);
}

The output would be:

apple
banana
cherry

for...in Loop

A for..in.. loop iterates over any object with string type keys
and allows for access to the values by indexreference. The
following accesses the keys:
const shoppingCart = { banana: 2, apple: 5,
cherry: 0 };

for (const fruit in shoppingCart) {

console.log(fruit);
}

The output would be:

banana
apple
cherry

To access the values:

const shoppingCart = { banana: 2, apple: 5,
cherry: 0 };

for (const fruit in shoppingCart) {

console.log(shoppingCart[fruit]);
}

The output would be:

2
5
0

Reverse Loop
A for loop can iterate “in reverse” by initializing the loop
variable to the starting value, testing for when the variable hits
the ending value, and decrementing (subtracting from) the
loop variable at each iteration.
const items = ['apricot', 'banana', 'cherry'];

for (let i = items.length 1; i >= 0; i = 1) {

console.log(${i}. ${items[i]});
}

The output would be:

2. cherry
1. banana
0. apricot
7.Explain following tags with example.
a. <a> b. <iframe> c. <strong> d. <sup> e. <em>
Explanation of Tags with Examples

a. <a> Tag (Anchor Tag)

The <a> tag is used to create hyperlinks, allowing users to navigate to another page, section,

or external resource.

Attributes:

href: Specifies the URL of the link.

target: Specifies where to open the link (_blank, _self, etc.).

Example:

html

<a href="https://www.google.com" target="_blank">Visit Google</a>

Output:

Displays a clickable link "Visit Google" that opens in a new tab.

b. <iframe> Tag

The <iframe> tag is used to embed another HTML document or resource (e.g., a webpage,

video, or map) within the current page.

Attributes:

src: Specifies the URL of the embedded content.

width and height: Set the dimensions of the iframe.

Example:

html

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Output:

Embeds the webpage from https://www.example.com within a 600x400 frame.

c. <strong> Tag

The <strong> tag is used to define text with strong importance. Browsers typically render it

as bold text.

Purpose: Indicates that the content is significant.

Example:

html

<p>You should <strong>always</strong> wear a helmet while riding.</p>

Output:

"always" appears in bold: You should always wear a helmet while riding.

d. <sup> Tag

The <sup> tag is used to display text as superscript (smaller text raised above the baseline).

Commonly used for exponents, footnotes, or mathematical notations.

Example:

html

<p>E = mc²</p>

Output:

Displays: E = mc²
e. <em> Tag

The <em> tag is used to emphasize text. Browsers typically render it as italic text.

Purpose: Indicates that the content is stressed or emphasized.

Example:

html

<p>Please <em>read carefully</em> before proceeding.</p>

Output:

"read carefully" appears in italics: Please read carefully before proceeding.