IWT Long

Long Answer Type
1) a) Briefly discuss HTTP request and response phases.
Ans -
HTTP (Hypertext Transfer Protocol) involves a request-response cycle between a client (like a web browser) and a
server. Sure, HTTP (Hypertext Transfer Protocol) involves a request-response cycle between a client (like a web
browser) and a server.
1. Request Phase -
• Client initiates request - The client sends an HTTP request to a server to retrieve or send information.
• Request Types - There are various request methods (GET, POST, PUT, DELETE, etc.) indicating the action to
be performed.
• Headers and Body - The request contains headers (metadata) and, in some cases, a body (payload/data)
carrying additional information.
2. Response Phase -
• Server processes the request - The server receives the request, processes it, and generates an appropriate
response.
• Status Codes - The server sends back a status code indicating the success, failure, or other status of the
request (e.g., 200 for success, 404 for not found, etc.).
• Headers and Body - Similar to requests, responses include headers with metadata and a body containing
the requested data or an error message.
1) b) Briefly discuss the major features of web 1.0, web 2.0 and web 3.0.
Ans -
Web 1.0 -
• Static Websites - Web 1.0 was characterized by static web pages where content was primarily read-only.
• HTML-Based - Content was created in HTML format without much user interaction.
• One-Way Communication - Information was pushed from publishers to users without much interaction or
user-generated content.
Web 2.0 -
• Interactive and User-Centric - Users became active participants, generating content and interacting with
each other in a social manner.
• Social Media and Networking - Platforms like Facebook, YouTube, and Twitter emerged, allowing user-
generated content, sharing, and collaboration.
• Rich Multimedia - Integration of rich media like videos, audio, and interactive elements became prevalent.
• Dynamic Web Applications - Introduction of dynamic websites and applications allowing real-time
interaction and data exchange.
Web 3.0 -
• Artificial Intelligence and Machine Learning - Integration of AI and ML to enhance user experience, predict
user needs, and automate tasks.
• Decentralization and Blockchain - Emphasis on decentralization, using blockchain and distributed ledger
technologies for security, privacy, and trustless transactions.
• Interoperability - Greater interoperability between different platforms and technologies, enabling
seamless sharing and usage of data across applications.
• Personalized and Contextualized Experiences - Tailoring content and services more precisely to individual
preferences and contexts through advanced algorithms and data analysis.
2) Write an HTML code for creating a enquiry form
Ans -
<!DOCTYPE html>
<html>
<head>
<title>Enquiry Form</title>
</head>
<body>
<form id="enquiryForm" onsubmit="submitForm(); return false;">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" maxlength="25" placeholder="Enter your name here"

required><br><br>
<label for="dob">Date of Birth:</label>
<input type="text" id="dob" name="dob" placeholder="MM/DD/YYYY" required>
<input type="date" id="dobCalendar" name="dobCalendar"><br><br>
<label for="email">Email ID:</label>
<input type="email" id="email" name="email" required><br><br>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<label>Hobbies:</label>
<input type="checkbox" id="singing" name="hobby" value="singing">
<label for="singing">Singing</label>
<input type="checkbox" id="painting" name="hobby" value="painting">
<label for="painting">Painting</label>
<input type="checkbox" id="outdoorGame" name="hobby" value="outdoor game">
<label for="outdoorGame">Outdoor Game</label><br><br>
<label for="state">State:</label>
<select id="state" name="state">
<option value="state1">State 1</option>
</select><br><br>
<label for="comment">Comment:</label><br>
<textarea id="comment" name="comment" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<script>
function submitForm() {
var name = document.getElementById('name').value;
var gender = document.querySelector('input[name="gender"]:checked').value;
alert('Thank you Mr/Mrs ' + name + '. Your gender is ' + gender + '.');
document.getElementById('enquiryForm').reset();
</script>
</body>
</html>
3) Briefly discuss about <table> tag. Write required HTML code for displaying the following table in a page.
Ans -
The <table> tag is a fundamental HTML element used to create tables within a web page. It's a container that
allows you to organize data into rows and columns, making it easier to present and structure tabular information.
• Structure: The <table> tag is the main container for creating tables. It's supplemented by other tags like
<tr> (table row), <th> (table header), and <td> (table data/cell) to define the structure.
• Rows and Columns: Tables are built with rows (<tr>) containing individual cells (<td>) or header cells
(<th>) arranged in columns. The <tr> tag defines each row, while <td> and <th> define the cells within
those rows.
• Headers: <th> elements are used to define table headers. They are typically bold and centered by default,
distinguishing them from regular data cells (<td>).
Code:
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<style>
table, th, td {
border: 1px solid;
</style>
</head>
<body>
<table>
<tr>
<td>
<p>This is a paragraph </p>
<p>This is another paragraph</p>
</td>
<td>
<p>This cell contains a table:</p>

<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p>This cell contains a table:</p>
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
4) a) Design a web page that allows the user to choose from a series of images and to view the image in color and
grayscale.
Ans -
<!DOCTYPE html>
<html>
<head>
<title>Image Color Toggle</title>
</head>
<body>
<div>
<button onclick="toggleColor('color')">Color</button>
<button onclick="toggleColor('grayscale')">Grayscale</button>
</div>
<div>
<img id="image1" src="image01.jpg" alt="Image">
</div>
<script>
function toggleColor(type) {
const image = document.getElementById('image');
if (type === 'color') {
image.style.filter = 'grayscale(0%)'; // Set image to color
} else if (type === 'grayscale') {
image.style.filter = 'grayscale(100%)'; // Set image to grayscale
</script>
</body>
</html>
4) b) Create a web page giving the following train details.

Ans -
<!DOCTYPE html>
<html>
<head>
<title>Train Details</title>
<style>
table {
border: 1px solid #000;
border-collapse: collapse;
margin: 0 auto;
th, td {
border: 1px solid #000;
padding: 8px;
text-align: center;
</style>
</head>
<body>
<table>
<caption>Time Table and Fare List</caption>
<thead>
<tr>
<th>Train Name</th>
<th>Starting Place</th>
<th>Destination</th>
<th>Arrival Time</th>
<th>Departure Time</th>
<th>Fare</th>
</tr>
</thead>
<tbody>
<tr>
<td>Express Train</td>
<td>City A</td>
<td>City B</td>
<td>08:00 AM</td>
<td>08:30 AM</td>
<td>$50</td>
</tr>
<tr>
<td>Local Train</td>
<td>City C</td>
<td>City D</td>
<td>09:15 AM</td>
<td>09:45 AM</td>
<td>$20</td>
</tr>
</tbody>
</table>
</body>
</html>
5) a) Briefly discuss the box model of CSS.
Ans -
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding,
borders and margins. The image below illustrates the box model:
Explanation of the different parts:
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.
5) b) What is the use of position property in CSS? Compare absolute, fixed and sticky values of position.
Ans -
Position : The Position property in CSS specifies the positioning for an HTML element or entity.
Absolute:
• Positioning: Element removes itself from the normal document flow and is positioned relative to its
nearest positioned ancestor (or the viewport if there's no ancestor).
• Movement: You can offset the element using top, right, bottom, and left properties.
• Scrolling: Element stays in place relative to its ancestor even when the page is scrolled.
Fixed:
• Positioning: Element removes itself from the normal document flow and is positioned relative to the
viewport (browser window).
• Movement: Similar to absolute, but offset relative to the viewport.
• Scrolling: Stays fixed in its position regardless of scrolling.
Sticky:
• Positioning: Element behaves like relative until it reaches a specified scroll position, then switches to fixed
and sticks to the edge of the viewport (similar to fixed).
• Movement: You can define the offset at which the element becomes sticky using top, right, bottom, and
left.
• Scrolling: Transitions between relative and fixed based on the scroll position.
6) Write short notes on : i) Flex ii) Grid.
Ans -
Flex :
• Purpose: Flexbox is a one-dimensional layout model designed to create a more efficient way to arrange,
align, and distribute space among items in a container even when their size is unknown or dynamic.
• Container and Items: It requires a flex container (`display: flex;`), which holds flex items. The container's
direct children become flex items automatically.
• Main Axis and Cross Axis: Flexbox operates along a main axis (defined by `flex-direction`) and a cross axis
(perpendicular to the main axis). The `justify-content` and `align-items` properties control alignment along
these axes.
• Flex Properties: `flex-grow`, `flex-shrink`, and `flex-basis` determine how flex items grow, shrink, and
initially size themselves within a flex container. `flex` shorthand combines these properties.
Grid
• Purpose: CSS Grid is a two-dimensional layout system that allows the creation of complex grid-based
layouts.
• Grid Container and Items: It works with a grid container (`display: grid;`) and its direct children become
grid items. Grid allows items to be placed in rows and columns within the grid.
• Rows and Columns: Grid allows explicit control over rows and columns using `grid-template-rows` and
`grid-template-columns` properties.
• Grid Properties: Grid provides precise control over alignment, spacing, and sizing of grid items using
properties like `justify-items`, `align-items`, `grid-gap`, etc.
7) a) Write a JavaScript with required HTML code that will show a login form where the user can enter username
and password.
Ans -
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<button type="button" onclick="checkCredentials()">Login</button>
</form>
<div id="message"></div>
<script>
function checkCredentials() {
var storedUsername = "user123"; // Replace with your stored username
var storedPassword = "pass123"; // Replace with your stored password
var enteredUsername = document.getElementById('username').value;
var enteredPassword = document.getElementById('password').value;
if (enteredUsername === storedUsername && enteredPassword === storedPassword) {
document.getElementById('message').innerHTML = "Welcome " + enteredUsername;
} else {
document.getElementById('message').innerHTML = "Insufficient credentials";
</script>
</body>
</html>
7) b) Write a JavaScript program to display the biggest element in the array.
Ans -
function findLargestElement(arr) {
if (arr.length === 0) {
return "Array is empty";
let largest = arr[0];
for (let i = 1; i < arr.length; i++) {
if (arr[i] > largest) {
largest = arr[i];
return largest;
const numbers = [10, 5, 20, 8, 15];

const largestElement = findLargestElement(numbers);
console.log("The largest element in the array is: " + largestElement);
8) a) What do you understand by DOM in JavaScript? Discuss any three methods of document object to access
HTML element with example.
Ans -
• The DOM treats an HTML or XML document as a tree structure of nodes, where each element, attribute,
and piece of text is represented by a node in the tree.
• This tree structure allows JavaScript to access and modify the document's elements and their attributes,
enabling dynamic changes to the web page without reloading the entire page.
Three methods of the Document Object to access HTML elements are:
The Document Object Model (DOM) in JavaScript is a programming interface that represents the structure of
HTML and XML documents as a tree-like structure. It provides a way to interact with and manipulate the content,
structure, and style of a web page dynamically.
The DOM treats an HTML or XML document as a tree structure of nodes, where each element, attribute, and piece
of text is represented by a node in the tree. This tree structure allows JavaScript to access and modify the
document's elements and their attributes, enabling dynamic changes to the web page without reloading the entire
page.
Three methods of the Document Object to access HTML elements are:
1. getElementById() - This method retrieves an element from the document by its unique ID attribute.
Example:
<div id="myDiv">Hello, World!</div>
<script>
const element = document.getElementById('myDiv');
console.log(element.textContent);
</script>
// Output: Hello, World!
2. getElementsByClassName()- This method returns a collection of elements that have a specified class name.
- Example:
<p class="paragraph">First paragraph</p>
<p class="paragraph">Second paragraph</p>
<script>
const elements = document.getElementsByClassName('paragraph');
for (let i = 0; i < elements.length; i++) {
console.log(elements[i].textContent);
</script>
// Output:
// First paragraph
// Second paragraph
3. getElementsByTagName() - This method returns a collection of elements with a specified tag name.
- Example:
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
<script>
const listItems = document.getElementsByTagName('li');
for (let i = 0; i < listItems.length; i++) {
console.log(listItems[i].textContent);
// Output:
// Apple
// Orange
// Banana
8) b) Write a JavaScript program to create the following simple calculator.
Ans -
<!DOCTYPE HTML>
<html>
<head>
<style>
table, td, th
border: 1px solid black;
text-align: center;
table {margin: auto; }
input {text-align:right; }
</style>
<script type="text/javascript">
function calc(clicked_id)
var val1 = parseFloat(document.getElementById("value1").value);
var val2 = parseFloat(document.getElementById("value2").value);
if (isNaN(val1)||isNaN(val2))
alert("ENTER VALID NUMBER");
else if(clicked_id=="add")
document.getElementById("answer").value=val1+val2;
else if(clicked_id=="sub")
document.getElementById("answer").value=val1-val2;
else if(clicked_id=="mul")
document.getElementById("answer").value=val1*val2;
else if(clicked_id=="div")
document.getElementById("answer").value=val1/val2;
function cls()
value1.value="0";
value2.value="0";
answer.value="";
}
</script>
</head>
<body>
<table>
<tr>
<th colspan="4"> SIMPLE CALCULATOR </th>
</tr>
<tr>
<td>value1</td><td><input type="text" id="value1" value="0"/></td>
<td>value2</td><td><input type="text" id= "value2" value="0"/></td>
</tr>
<tr>
<td><input type="button" value="Addition" id = "add" onclick="calc(this.id)"/></td>
<td><input type="button" value="Subtraction" id = "sub" onclick="calc(this.id)"/></td>
<td><input type="button" value="Multiplication" id = "mul" onclick="calc(this.id)"/></td>
<td><input type="button" value="Division" id ="div" onclick="calc(this.id)"/></td>
</tr>
<tr>
<td>Answer:</td><td> <input type= "text" id="answer" value="" disabled/></td>
<td colspan="2"><input type= "button" value="CLEAR ALL" onclick="cls()"/><td>
</tr>
</table
</body>
</html>
9) a) Explain database connectivity in PHP with reference to MYSQL.
Ans -
Database connectivity in PHP with MySQL involves establishing a connection between PHP and a MySQL database,
allowing PHP scripts to interact, query, and manipulate data stored in the MySQL database.
The key steps involved in establishing database connectivity using PHP and MySQL:
Establishing Connection:
• To establish a connection using mysqli, you use the mysqli_connect() function, providing the host,
username, password, and database name as arguments.
Executing Queries:
• Once the connection is established, you can execute SQL queries to perform various operations like
selecting data, inserting, updating, or deleting records in the database.
• Use mysqli_query() to execute SQL queries and fetch results.
Handling Errors and Closing Connection:
• It's essential to handle errors properly to ensure robustness in database operations.

• Use mysqli_error() to display error messages if queries fail.
• Close the database connection when done with the operations using mysqli_close().
Prepared Statements (Optional but Recommended):
• Prepared statements provide better security against SQL injection attacks by parameterizing queries.
• They can be used with mysqli or PDO to execute queries with parameters.
• Example (prepared statement with mysqli):
9) b) What is XML ? How it differs from HTML ? Describe the syntax of XML ?
Ans -
XML -
• XML (Extensible Markup Language) is a markup language designed to store and transport data, allowing
users to define their own customized tags to structure and describe information in a hierarchical format.
• It's both human-readable and machine-readable, making it versatile for data exchange between different
systems.
Differences between XML and HTML:
• Purpose:
HTML (HyperText Markup Language) is used for creating structured documents and displaying content
on the web, primarily focused on defining the structure and appearance of web pages.
XML, on the other hand, is designed to carry and describe data. It's more flexible and extensible, allowing
users to define their own tags, making it suitable for storing and transporting structured data.
• Usage:
HTML is used for presenting information on the web, creating web pages with text, images, links,
and interactive elements.
XML is used for data representation and exchange, often in contexts such as configuration files, data
storage, web services, and more.
Syntax of XML:

IWT Long

Uploaded by

Copyright:

Available Formats

You might also like

IWT Long

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IWT Long

Uploaded by

Copyright:

Available Formats

Long Answer Type

1) a) Briefly discuss HTTP request and response phases.

2) Write an HTML code for creating a enquiry form

<form id="enquiryForm" onsubmit="submitForm(); return false;">

<label for="name">Your Name:</label>

<input type="text" id="name" name="name" maxlength="25" placeholder="Enter your name here"

<label for="dob">Date of Birth:</label>

<input type="text" id="dob" name="dob" placeholder="MM/DD/YYYY" required>

<input type="date" id="dobCalendar" name="dobCalendar"><br><br>

<label for="email">Email ID:</label>

<input type="email" id="email" name="email" required><br><br>

<input type="radio" id="male" name="gender" value="male" checked>

<input type="radio" id="female" name="gender" value="female">

<input type="checkbox" id="painting" name="hobby" value="painting">

<input type="checkbox" id="outdoorGame" name="hobby" value="outdoor game">

<label for="outdoorGame">Outdoor Game</label><br><br>

<select id="state" name="state">

<option value="state1">State 1</option>

<option value="state2">State 2</option>

<option value="state3">State 3</option>

<textarea id="comment" name="comment" rows="4" cols="50"></textarea><br><br>

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

<input type="reset" value="Reset">

var name = document.getElementById('name').value;

var gender = document.querySelector('input[name="gender"]:checked').value;

border: 1px solid;

<p>This is a paragraph </p>

<p>This is another paragraph</p>

<p>This cell contains a table:</p>

<p>This cell contains a table:</p>

<title>Image Color Toggle</title>

<img id="image1" src="image01.jpg" alt="Image">

<img id="image2" src="image02.jpg" alt="Image">

<img id="image3" src="image03.jpg" alt="Image">

<img id="image4" src="image04.jpg" alt="Image">

const image = document.getElementById('image');

if (type === 'color') {

image.style.filter = 'grayscale(0%)'; // Set image to color

} else if (type === 'grayscale') {

image.style.filter = 'grayscale(100%)'; // Set image to grayscale

4) b) Create a web page giving the following train details.

border: 1px solid #000;

border: 1px solid #000;

<caption>Time Table and Fare List</caption>

5) a) Briefly discuss the box model of CSS.

Explanation of the different parts:

6) Write short notes on : i) Flex ii) Grid.

<input type="text" id="username" name="username" required><br><br>

<input type="password" id="password" name="password" required><br><br>

<button type="button" onclick="checkCredentials()">Login</button>

var storedUsername = "user123"; // Replace with your stored username

var storedPassword = "pass123"; // Replace with your stored password

var enteredUsername = document.getElementById('username').value;

var enteredPassword = document.getElementById('password').value;

if (enteredUsername === storedUsername && enteredPassword === storedPassword) {

document.getElementById('message').innerHTML = "Welcome " + enteredUsername;

document.getElementById('message').innerHTML = "Insufficient credentials";