Web and Internet Technology
Assignment Questions
1) Describe the HTML code required for adding a form to a webpage.
Ans.To add a form to a webpage using HTML, you can use the <form> element. Below is
a simple example of an HTML form with different input types:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form Example</title>
</head>
<body>
<h1>Contact Us</h1>
<!-- Start of the form -->
<form action="/submit-form" method="POST">
<!-- Name eld -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<!-- Email eld -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<!-- Gender selection (radio buttons) -->
<label>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>
<br><br>
<!-- Dropdown (select element) -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
fi
fi
<br><br>
<!-- Message (textarea element) -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" required></textarea>
<br><br>
<!-- Submit and Reset buttons -->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<!-- End of the form -->
</body>
</html>
Explanation:
• <form action="/submit-form" method="POST">: This de nes the form
and sets the action attribute to the URL where the form data will be sent. The method
attribute is POST, which is typically used when submitting form data to a server.
• <input type="text">: A text eld for entering the user's name.
• <input type="email">: A eld for entering an email address, which provides email
validation.
• <input type="radio">: Radio buttons for selecting the user's gender.
• <select>: A dropdown menu for selecting a country.
• <textarea>: A larger text area for entering a message.
• <input type="submit">: A button to submit the form.
• <input type="reset">: A button to reset all form elds to their default values.
2) Explain the html DOM. How it is used to design the web page.
Ans. The HTML DOM (Document Object Model) is a programming interface for
HTML documents that de nes the logical structure of the document and the way it
can be accessed and manipulated. The DOM represents the page as a tree structure
where each node is an object representing a part of the document (like an element,
attribute, or piece of text).
How the DOM Is Used to Design Web Pages:
1. Dynamic Content:
◦ You can modify the content of a page after it has loaded without refreshing the
page.
2. Styling:
• The DOM allows you to manipulate the CSS styles of elements. Using style properties in
JavaScript, you can change element sizes, colors, visibility, etc.
fi
fi
fi
fi
fi
3. Event Handling:
• The DOM is crucial for handling events like mouse clicks, form submissions, or keyboard
input.
4. Form Validation:
• The DOM can help in form validation. You can check if a form eld is lled correctly before
allowing the form to be submitted.
5. Creating Elements Dynamically:
• You can dynamically create new elements and add them to the document.
3)What is xml. Write xml le to store personal and educational information of
student.
Ans.XML (eXtensible Markup Language) is a markup language used to store and
transport data in a structured format. Unlike HTML, which is used for
displaying data, XML focuses on storing and organizing data in a way that is
both human-readable and machine-readable. XML is both exible and
platform-independent, making it a widely used format for data exchange
between systems.
Below is an example of an XML le storing personal and educational
information about a student.
<?xml version="1.0" encoding="UTF-8"?>
<StudentInformation>
<PersonalDetails>
<FirstName>John</FirstName>
<LastName>Doe</LastName>
<DateOfBirth>1998-03-25</DateOfBirth>
<Gender>Male</Gender>
<ContactDetails>
<Email>
[email protected]</Email>
<PhoneNumber>+1234567890</PhoneNumber>
<Address>
<Street>1234 Elm Street</Street>
<City>Spring eld</City>
<State>Illinois</State>
<ZipCode>62704</ZipCode>
</Address>
</ContactDetails>
</PersonalDetails>
<EducationalDetails>
<Institution>
fi
fi
fi
fi
fl
fi
<Name>Spring eld University</Name>
<Degree>Bachelor of Science in Computer Science</Degree>
<StartYear>2016</StartYear>
<EndYear>2020</EndYear>
<GPA>3.8</GPA>
</Institution>
<Institution>
<Name>Spring eld High School</Name>
<Degree>High School Diploma</Degree>
<StartYear>2012</StartYear>
<EndYear>2016</EndYear>
<GPA>3.9</GPA>
</Institution>
</EducationalDetails>
</StudentInformation>
4) What is XML Schema. Explain creating element declarations in XML schema.
Ans.An XML Schema de nes the structure, content, and data types of XML documents. It
is used to validate whether an XML document adheres to the speci ed rules and constraints.
The XML Schema itself is written in XML, making it a structured and machine-readable
language that can describe the legal building blocks of an XML document.
XML Schema is often referred to as XSD (XML Schema De nition).
Element Declaration in XML Schema
An element declaration de nes an XML element and speci es the data type and constraints
on its content. These declarations specify the properties of the elements, including:
• Name: The name of the element.
• Type: The data type (e.g., string, integer, boolean, etc.).
• Cardinality: The number of times an element can appear (using minOccurs and
maxOccurs attributes).
• Default and Fixed Values: Optionally speci es default or xed values for elements.
Example of an Element Declaration
XML Document:
<?xml version="1.0" encoding="UTF-8"?>
<StudentInformation>
<FirstName>John</FirstName>
<LastName>Doe</LastName>
fi
fi
fi
fi
fi
fi
fi
fi
fi
<Age>22</Age>
</StudentInformation>
Corresponding XML Schema (XSD):
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<!-- Root element declaration -->
<xs:element name="StudentInformation">
<xs:complexType>
<xs:sequence>
<xs:element name="FirstName" type="xs:string" />
<xs:element name="LastName" type="xs:string" />
<xs:element name="Age" type="xs:integer" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
5) Write a JavaScript program to:
(i) Print this pattern.
*
**
***
****
*****
(ii) To print all prime numbers from 1 to 100.
(iii) That accepts two integers and display the larger.
// Function to print the center-aligned triangle pattern
function printCenterAlignedTriangle(rows) {
for (let i = 1; i <= rows; i++) {
// Print leading spaces for center alignment
let spaces = ' '.repeat(rows - i);
// Print stars
let stars = '*'.repeat(2 * i - 1);
console.log(spaces + stars);
}
}
// Call the function to print the pattern with 5 rows
printCenterAlignedTriangle(5);
Ans.(ii)JavaScript Program to Print All Prime Numbers from 1 to 100
// Function to check if a number is prime
function isPrime(num) {
if (num <= 1) return false;
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) return false;
}
return true;
}
// Function to print all prime numbers from 1 to 100
function printPrimes(limit) {
console.log("Prime numbers from 1 to " + limit + ":");
for (let i = 1; i <= limit; i++) {
if (isPrime(i)) {
console.log(i);
}
}
}
// Call the function to print prime numbers from 1 to 100
printPrimes(100);
Ans.(iii)JavaScript Program to Accept Two Integers and Display the Larger.
// Function to nd and display the larger of two integers
function displayLargerNumber(num1, num2) {
if (num1 > num2) {
console.log(num1 + " is larger than " + num2);
} else if (num2 > num1) {
console.log(num2 + " is larger than " + num1);
} else {
console.log("Both numbers are equal.");
}
}
// Example usage: Accepting two integers as input
let number1 = parseInt(prompt("Enter the rst number:"));
let number2 = parseInt(prompt("Enter the second number:"));
// Call the function with user inputs
displayLargerNumber(number1, number2);
fi
fi
6) Explain the difference between client side and server side JavaScript.
Ans.Comparison Table:
Aspect Client-side JavaScript Server-side JavaScript
Execution Environment Browser (client) Server
Purpose UI interactions, DOM manipulation Backend logic, data
processing
Security Less secure, code is visible More secure, code is hidden
Depends on client’s browser and Depends on server
Performance
device infrastructure
Examples Form validation, DOM Database access, API
manipulation responses
Popular Libraries/
jQuery, React, Vue.js, Angular Node.js, Express.js, NestJS
Frameworks
Receives requests, processes
Data Flow Sends requests to server, updates UI
data
7) Explain XML parser along with its types.
Ans.An XML parser is a software component that reads XML documents, checks
them for proper formatting (well-formedness), and optionally validates them against a
de ned structure (like an XML Schema or DTD). Once parsed, the XML content can
be processed, manipulated, or used by a program.
Types of XML Parsers
There are two main types of XML parsers:
1. DOM (Document Object Model) Parser
2. SAX (Simple API for XML) Parser
1. DOM (Document Object Model) Parser
The DOM parser reads the entire XML document and loads it into memory as a
hierarchical (tree-like) structure. It represents the XML document as a tree of nodes,
where each node corresponds to an element in the document. The program can then
traverse, manipulate, or query the tree structure.DOM parsers are great for small
documents where you need random access and manipulation.
2. SAX (Simple API for XML) Parser
The SAX parser reads the XML document sequentially, element by element. It
doesn't load the entire document into memory. Instead, it triggers events as it
encounters different parts of the XML (start of an element, end of an element, text
data, etc.).SAX parsers are ef cient for large documents but are more complex and
only suitable for reading.
fi
fi
8) Explain XMLHttpRequest Object methods and Properties.
Ans.The XMLHttpRequest object is a key component in JavaScript used for
making asynchronous HTTP requests to servers. It allows you to send and
receive data from a server without refreshing the entire web page, enabling
dynamic web applications. Below are the main methods and properties of the
XMLHttpRequest object.
Properties of XMLHttpRequest
1. readyState
◦ Represents the current state of the request.
◦ Possible values:
▪ 0: UNSENT - The request has been initialized but not yet sent.
▪ 1: OPENED - The request has been opened but not sent.
▪ 2: HEADERS_RECEIVED - The request has been sent, and the response
headers have been received.
▪ 3: LOADING - The response is being received (data is being downloaded).
▪ 4: DONE - The request is complete, and the response is fully received.
2. status
◦ Contains the HTTP status code returned by the server (e.g., 200 for OK, 404 for
Not Found).
◦ A status of 0 may indicate that the request was not completed or failed.
3. statusText
◦ Contains the status message corresponding to the status code (e.g., "OK" for status
200).
4. responseText
◦ Contains the response data as a string. This property is populated after the request
has completed (i.e., readyState is 4).
5. responseXML
◦ Contains the response data as an XML document, which is available when the
response content type is XML.
6. timeout
◦ Represents the timeout value (in milliseconds) for the request. If the request takes
longer than this time, it will be aborted.
7. withCredentials
◦ A boolean property that indicates whether the request should include credentials (like
cookies) in cross-origin requests.
Methods of XMLHttpRequest
open(method, url, async, user, password)
• Initializes a new request.
2.send(data)
• Sends the request to the server.
3. setRequestHeader(header, value)
• Sets the value of an HTTP request header.
• Must be called after open() and before send().
4. abort()
• Aborts the current request.
5. getAllResponseHeaders()
• Returns all the response headers as a single string, separated by newline
characters.
6. getResponseHeader(header)
• Returns the value of a speci c response header.
9) Differentiate between:
a) HTML and DHTML.
b) XML Schema De nition and Document Type De nition
Ans.
HTML DHTML
Hyper Text Markup Dynamic Hyper Text
Full-Form
Language Markup Language
A standard markup language It is a combination of technologies (HTML,
Definition used to create and design web CSS, and JavaScript) used to make
pages. webpages dynamic and interactive.
Consists solely of HTML tags Combines HTML for structure, CSS for
Components and elements. design and JavaScript for interactivity
Static, i.e., displays the same Dynamic, i.e., content can be changed in
Nature content every time the page is response to user action without reloading the
loaded. page.
Browser Supported by all the web
Generally, all the web browser supports
DHTML. But in case it is not supported, you
browsers.
Support need plug-ins.
Database No need for database
Database connectivity is not needed.
connectivity.
Connectivity
fi
fi
fi
Dependencie No dependencies on other
Depends on HTML, CSS, and JavaScript
programming languages.
s
Development Basic text editors like Notepad,
Specialized editors like VS
Visual Studio Code with appropriate plug-ins
that support HTML, CSS, and JavaScript.
Tools Code or sublime text.
Ideal for creating interactive web
Ideal for creating a basic
Usage webpage with static content.
applications, animation, and dynamic web
content.
Blogs, Articles, and company Online calculator, interactive forms and
Example information pages. games.
Difference Between DTD and XSD
DTD XSD
DTD are the declarations that
XSD describes the elements in
de ne a document type for
a XML document.
SGML.
It doesn’t support namespace. It supports namespace.
It is comparatively harder than It is relatively more simpler
XSD. than DTD.
It doesn’t support datatypes. It supports datatypes.
SGML syntax is used for DTD. XML is used for writing XSD.
It is not extensible in nature. It is extensible in nature.
fi
It doesn’t give us much control It gives us more control on
on structure of XML document. structure of XML document.
Any element which is made
It speci es only the root
global can be done as root as
element.
markup validation.
It doesn’t have any restrictions It speci es certain data
on data used. restrictions.
It is not much easy to learn . It is simple in learning.
File in XSD is saved as .xsd
File here is saved as .dtd
le.
It is not a strongly typed It is a strongly typed
mechanism. mechanism.
It uses #PCDATA which is a It uses fundamental and
string data type. primitive data types.
10) Write short notes on:
i) XLinks and Xpointer
ii) AJAX
iii) PHP
iv) ASP
Ans. i) XLinks and Xpointer
XLinks
• De nition: XLinks (XML Linking Language) is a speci cation that extends
XML to provide a richer model for creating links between resources.
fi
fi
fi
fi
fi
• Features: Unlike traditional hyperlinks in HTML, XLinks can de ne more
complex relationships, such as linking to multiple resources, creating
bidirectional links, and establishing links with additional metadata (like title,
type, and role).
• Use Cases: XLinks are useful for applications that require dynamic linking,
such as digital documents, web applications, and multimedia content.
XPointer
• De nition: XPointer is a language for addressing parts of XML documents,
enabling more precise linking than what is available with standard URLs.
• Features: XPointer allows users to specify not just the resource to link to but
also speci c parts of the resource, such as individual elements, attributes, or
text nodes within an XML document.
• Use Cases: It is commonly used in conjunction with XLinks to create dynamic
links that point to speci c locations within XML resources, enhancing
navigation and content retrieval.
ii) AJAX
AJAX (Asynchronous JavaScript and XML)
• De nition: AJAX is a technique used to create asynchronous web applications
that allow for data retrieval and updates without requiring a full page refresh.
• How It Works: It uses the XMLHttpRequest object to send requests to the
server and receive data (usually in XML, JSON, or plain text) in the
background. This enables parts of a web page to be updated dynamically.
• Bene ts: Improves user experience by making web applications more
responsive and interactive, allowing for seamless data updates (e.g., form
submissions, content loading) without interrupting the user interface.
• Common Use Cases: Loading new content, form validation, interactive maps,
and real-time noti cations in web applications.
iii) PHP
PHP (Hypertext Preprocessor)
• De nition: PHP is a server-side scripting language designed for web
development, but it can also be used as a general-purpose programming
language.
• Features:
◦ Easily integrates with HTML, allowing developers to embed PHP code
directly into web pages.
fi
fi
fi
fi
fi
fi
fi
fi
◦Supports various databases, making it suitable for building dynamic
websites and applications.
◦ Extensive support for various protocols (HTTP, FTP, etc.) and libraries
(e.g., image processing, XML parsing).
• Bene ts: PHP is open-source, widely used, and has a large community,
providing abundant resources and frameworks (like Laravel and Symfony) to
streamline web development.
• Common Use Cases: Content management systems (like WordPress), e-
commerce platforms, and web applications that require server-side processing.
iv) ASP
ASP (Active Server Pages)
• De nition: ASP is a server-side scripting environment developed by Microsoft
for building dynamic web pages and applications.
• Features:
◦ Allows embedding of server-side scripts (written in VBScript, JScript, or
other languages) within HTML to generate dynamic content.
◦ Supports components and libraries, enabling interaction with databases
and other server resources.
◦ Utilizes a request-response model, where the server processes the script
and sends the generated HTML back to the client.
• Bene ts: ASP simpli es web development by providing a framework for
managing sessions, state, and database connections.
• Common Use Cases: Web applications that require dynamic content
generation, such as user authentication systems, forums, and data-driven
websites.
fi
fi
fi
fi
