[Web Assignment]

SUBJECT: WEB TECHNOLOGY

ASSIGNMENT: SEMESTER EXAM PREPARATION
SEMESTER: [FIFTH SEMESTER]
SUBMITTED BY: [ARYAN SURYAVANSHI]
ROLL NO: [2310013135029]

UNIT 1: Web Fundamentals &

Architecture

QUES 1: Explain the architecture of the Web in detail.

Discuss all protocols governing the web.

Answer:
1. Introduction to Web Architecture
The architecture of the World Wide Web (WWW) is a client-server model that
facilitates the exchange of information over the internet. It is designed to be
scalable, simple, and platform-independent. The architecture relies on three core
specifications: HTML (for content), URI (for addressing), and HTTP (for
communication).
2. Key Components
● The Client (User Agent): This is typically a web browser (like Google
Chrome, Firefox, or Safari) or a mobile application. The client's role is to
request resources and display them to the user.
● The Web Server: A powerful computer running server software (like Apache
or Nginx). It stores website files (HTML documents, images, CSS, scripts) and
serves them to clients upon request.
● The Database Server: For dynamic websites, a database stores data (like
user profiles, products, or posts). The web server queries this database to
generate content.
● The Internet: The physical network infrastructure (cables, routers, switches)
that connects clients and servers globally.
3. Diagram of Web Architecture
Shutterstock
Explore

(Description: The diagram illustrates the interaction where a Client sends a request
through the Internet cloud to a Web Server. The Web Server interacts with a
Database and sends a response back to the Client.)
4. Protocols Governing the Web
Protocols are the set of rules that allow different machines to understand each
other.
● HTTP (HyperText Transfer Protocol): The application-layer protocol used
for transmitting hypermedia documents. It defines how messages are
formatted and transmitted.
● TCP/IP (Transmission Control Protocol/Internet Protocol):
○ IP: Handles the addressing and routing of packets so they reach the
correct destination.
○ TCP: Manages the reliability of the connection, ensuring data is broken
into packets and reassembled correctly without errors.
 ● DNS (Domain Name System): Translates human-readable domain names
(e.g., [Link]) into machine-readable IP addresses.

QUES 2: Explain HTTP in detail. Discuss request methods,

status codes, and message structure.

Answer:
1. Overview of HTTP
HTTP stands for HyperText Transfer Protocol. It is the foundation of data
communication on the WWW. It functions on a Request-Response model and is
stateless, meaning the server treats every request as a new one and does not
remember previous interactions by default.
2. HTTP Request Methods
These "verbs" tell the server what action to perform:
● GET: Requests data from a specified resource. It is used for viewing pages and
should not change data on the server.
● POST: Submits data to be processed to a specified resource. It is used for
forms, logins, and uploading files.
● PUT: Uploads a representation of a resource, usually replacing the current
version.
● DELETE: Deletes the specified resource.
● HEAD: Same as GET but returns only the headers (no body content).
3. HTTP Status Codes
When a server responds, it sends a 3-digit code indicating the result:
● 1xx (Informational): Request received, continuing process.
● 2xx (Success): The action was successfully received.
○ 200 OK: Standard response for successful requests.
● 3xx (Redirection): Further action is needed.
○ 301 Moved Permanently: The URL has changed.
● 4xx (Client Error): The request contains bad syntax or cannot be fulfilled.
○ 404 Not Found: The resource does not exist.
● 5xx (Server Error): The server failed to fulfill a valid request.
○ 500 Internal Server Error: Generic server failure.
4. HTTP Message Structure
● Request Message:
○ Start Line: GET /[Link] HTTP/1.1
○ Headers: Host: [Link], Accept: text/html
○ Body: (Optional, used in POST).
● Response Message:
○ Status Line: HTTP/1.1 200 OK
○ Headers: Content-Type: text/html, Content-Length: 342
○ Body: The HTML content of the page.
QUES 3: Explain Client-Server Architecture. How does
communication take place between them?

Answer:
1. Definition
Client-Server architecture is a distributed computing model where tasks are
partitioned between providers of resources/services (Servers) and requesters
(Clients). This is the dominant model of the internet.
2. Architecture Components
● Client: The "front-end" interface (browser, app). It has limited processing
power compared to the server and focuses on presentation and user
interaction.
● Server: The "back-end" system. It runs on high-performance hardware,
manages network resources, files, and databases, and handles security and
concurrency.

Shutterstock
Explore
3. Communication Process (The Request-Response Loop)
The communication follows a strict sequence:
1. User Action: A user types a URL or clicks a link.
2. DNS Lookup: The client asks a DNS server for the IP address of the domain.
 3. Connection Establishment: The client initiates a TCP connection to the
server's IP address.
4. Request: The client sends an HTTP request message.
5. Processing: The server receives the request, interprets it, runs any necessary
scripts, and fetches data from the database if required.
6. Response: The server sends an HTTP response packet back to the client.
7. Rendering: The client browser parses the HTML/CSS and displays the page to
the user.

QUES 4: What are the key steps in a Web Development

Life Cycle (WDLC)? Explain each with an example.

Answer:
1. Introduction
The Web Development Life Cycle (WDLC) is a methodology used by developers to
design, develop, and maintain high-quality web applications.
2. Stages of WDLC
● Phase 1: Information Gathering & Planning:
○ Goal: Define the purpose, target audience, and goals.
○ Example: Deciding to build an "Online Bookstore" for college students.
● Phase 2: Analysis:
○ Goal: Detailed requirements and technical specifications.
○ Example: Determining that the site needs a "Shopping Cart," "User
Login," and "Credit Card Integration."
● Phase 3: Design:
○ Goal: Creating the look and feel (UI/UX) and database structure.
○ Example: Drawing wireframes (sketches) of the homepage and designing
the SQL database schema.
● Phase 4: Development (Coding):
○ Goal: Writing the actual code.
○ Example: Front-end developers write HTML/CSS; Back-end developers
write Java/PHP code.
● Phase 5: Testing:
○ Goal: Verifying functionality and fixing bugs.
○ Example: Checking if the "Checkout" button works and if the site loads
correctly on Mobile phones.
● Phase 6: Deployment:
○ Goal: Making the site live.
○ Example: Uploading the code to a hosting server and pointing the
domain name to it.
● Phase 7: Maintenance:
○ Goal: Ongoing updates and support.
 ○ Example: Fixing security holes or adding a new "Best Sellers" section
next month.

QUES 5: Compare Static and Dynamic Websites. Explain

the advantages and disadvantages of each type.

Answer:
1. Static Websites
● Definition: Websites where the content is stored in fixed HTML files. Every
user sees the exact same content until the developer manually edits the file.
● Advantages:
○ Easy and cheap to develop (requires only HTML/CSS).
○ Fast loading (no database query required).
○ Secure (no database to hack).
● Disadvantages:
○ Difficult to update (requires coding skills).
○ No interactivity or personalization.
○ Not suitable for large sites.
2. Dynamic Websites
● Definition: Websites where content is generated on-the-fly. The layout is a
template, but the text/images are pulled from a database based on the user or
time.
● Advantages:
○ Highly functional and interactive (login systems, search results).
○ Easy Content Management (CMS like WordPress).
○ Personalized experience (e.g., "Welcome back, John").
● Disadvantages:
○ More expensive and complex to build.
○ Slower (server must process code before sending the page).
○ Higher security risk (SQL Injection).

(Page Break)

UNIT 2: HTML & CSS

QUES 1: Explain HTML Forms. Discuss form attributes and

all major input types.
Answer:
1. Introduction
HTML Forms are the primary method for websites to collect data from visitors. They
are defined using the <form> tag.
2. Key Form Attributes
● action: Specifies the URL where the form data will be sent when the user clicks
submit.
● method: Defines how data is sent.
○ GET: Data is visible in the URL (e.g., search bars).
○ POST: Data is hidden in the body (e.g., passwords).
● enctype: Used for file uploads (multipart/form-data).
3. Major Input Types
● Text Field: <input type="text"> for single-line names.
● Password: <input type="password"> hides characters.
● Radio Button: <input type="radio"> allows selecting only one option.
● Checkbox: <input type="checkbox"> allows selecting multiple options.
● Submit Button: <input type="submit"> sends the form data.
Example Code:

HTML

<form action="/register" method="POST">

<label>Name:</label> <input type="text" name="fname"><br>
<label>Password:</label> <input type="password" name="pass"><br>
<input type="submit" value="Sign Up">
</form>

QUES 2: Explain HTML Tables. Discuss rowspan, colspan,

thead, tbody, and tfoot with examples.

Answer:
1. Structure of a Table
Tables allow data to be arranged in rows and columns.
● <table>: Container for the table.
● <tr>: Table Row.
● <th>: Table Header (bold and centered).
● <td>: Table Data (standard cell).
2. Semantic Grouping
● <thead>: Wraps the header rows.
● <tbody>: Wraps the main data.
● <tfoot>: Wraps the footer rows (e.g., totals).
3. Merging Cells
● colspan: Merges cells horizontally (across columns).
● rowspan: Merges cells vertically (across rows).
Example Code:

HTML

<table border="1">
<thead>
<tr> <th>Product</th> <th>Price</th> </tr>
</thead>
<tbody>
<tr> <td>Laptop</td> <td>$500</td> </tr>
</tbody>
<tfoot>
<tr> <td colspan="2">Total: $500</td> </tr>
</tfoot>
</table>

QUES 3: What is the CSS Box Model? Explain each part

with a diagram.

Answer:
1. Definition
The CSS Box Model is a fundamental concept in web design. It means that every
element on a web page is essentially a rectangular box.
2. Components of the Box Model
● Content: The actual information (text, image). Size defined by width and
height.
● Padding: Transparent space inside the border, between content and border.
● Border: A line wrapping the padding and content.
● Margin: Transparent space outside the border. It separates the element from
others.
3. Diagram Description
Shutterstock
Explore

4. Calculation
Total Visible Width = width + padding-left + padding-right + border-left + border-
right.

QUES 4: Explain CSS Selectors (simple, combinators,

pseudo-class, pseudo-elements) with code.

Answer:
1. Simple Selectors
● Element Selector: p { color: red; } (All paragraphs).
● ID Selector: #nav { background: blue; } (Unique element).
● Class Selector: .btn { border: 1px solid; } (Group of elements).
2. Combinators
● Descendant Selector (Space): div p { ... } (All <p> inside <div>).
● Child Selector (>): div > p { ... } (Only direct children).
3. Pseudo-Classes
● :hover: When the mouse is over the element.
● :nth-child(n): Selects the nth element.
4. Pseudo-Elements
● ::first-line: Styles the first line of a text block.
● ::before: Inserts content before the element content.

QUES 5: Explain positioning in CSS (static, relative,

absolute, fixed, sticky) with examples.

Answer:
1. Static (Default)
The element is positioned according to the normal flow. top, bottom have no effect.
2. Relative
Positioned relative to its normal position.
● Example: top: 10px moves it down 10px from where it should be.
3. Absolute
Removed from normal flow and positioned relative to the nearest positioned
ancestor.
● Example: Placing an icon in the corner of a card.
4. Fixed
Positioned relative to the browser window (viewport). It stays in place when
scrolling.
● Example: A persistent Navigation Bar.
5. Sticky
Toggles between relative and fixed depending on scroll position.

(Page Break)

UNIT 3: XML (eXtensible Markup

Language)
QUES 1: What is XML? Explain its features and advantages
over HTML.

Answer:
1. Definition
XML (eXtensible Markup Language) is a text-based format designed to store and
transport data. Unlike HTML, which displays data, XML carries data.
2. Key Features
● Self-Descriptive: Tags describe the data (e.g., <price>).
● Extensible: Users can define their own tags.
● Platform Independent: Can be read by any OS/Language.
3. Advantages over HTML
| Feature | HTML | XML |
| :--- | :--- | :--- |
| Purpose | Display data. | Store/Transport data. |
| Tags | Pre-defined. | User-defined. |
| Strictness | Lenient. | Strict (must close tags). |

QUES 2: Explain Document Type Definition (DTD). Write

internal and external DTD examples.

Answer:
1. Definition
A DTD (Document Type Definition) defines the valid structure of an XML document
(legal elements and attributes).
2. Internal DTD
Declared inside the XML file.

XML

<!DOCTYPE note [
<!ELEMENT note (to,from,body)>
<!ELEMENT to (#PCDATA)>
]>

3. External DTD
Saved in a separate .dtd file and linked.

XML
<!DOCTYPE note SYSTEM "[Link]">

QUES 3: Explain XML Schema (XSD). Compare it with DTD.

Answer:
1. Definition
XSD (XML Schema Definition) is an XML-based alternative to DTD. It describes the
structure of an XML document but is more powerful.
2. Advantages of XSD over DTD
● Data Types: XSD supports int, date, boolean, string. DTD does not.
● XML Syntax: XSD is written in XML. DTD uses a unique syntax.
● Namespaces: XSD supports namespaces.
3. Comparison
● DTD: Simpler, no data types, non-XML syntax.
● XSD: Complex, strong data typing, XML syntax.

QUES 4: Explain well-formed and valid XML documents

with examples.

Answer:
1. Well-Formed XML
Follows basic syntax rules:
● One root element.
● All tags closed.
● Case sensitive.
● Properly nested.
● Example: <msg>Hello</msg>
2. Valid XML
An XML document that is Well-Formed AND conforms to a specific DTD or XSD.
● Example: An XML file that strictly follows the structure defined in its linked
DTD.

QUES 5: Explain XML Transformation using XSLT with

example.

Answer:
1. Definition
XSLT (Extensible Stylesheet Language Transformations) is used to transform XML
documents into other formats (HTML, Text).
2. Workflow
● Source: XML (Raw Data).
● Stylesheet: XSLT (Formatting Rules).
● Result: HTML (Displayed Page).
3. Example Snippet

XML

<xsl:template match="/">
<html>
<body>
<h2>My Books</h2>
<xsl:value-of select="library/book/title"/>
</body>
</html>
</xsl:template>

(Page Break)

UNIT 4: JavaScript & Client-Side

Scripting

QUES 1: Write detailed notes on Event Handling. Explain

all major events.

Answer:
1. Concept
Events are signals that something has happened (click, keypress). Event handlers
are codes that run in response.
2. Major Events
● Mouse: onclick (click), onmouseover (hover), onmouseout (leave).
● Keyboard: onkeydown (press), onkeyup (release).
● Form: onsubmit (send form), onchange (value changed), onfocus (selected).
● Window: onload (page finished loading).
Example:
JavaScript

<button onclick="alert('Clicked!')">Click Me</button>

QUES 2: Explain JavaScript Variables, Data Types, and

Operators with examples.

Answer:
1. Variables
● var: Function scoped.
● let: Block scoped.
● const: Constant value.
2. Data Types
● String: "Hello"
● Number: 10, 3.14
● Boolean: true, false
● Object: {name:"John"}
3. Operators
● Arithmetic: +, -, *, /.
● Comparison: == (value), === (value & type).
● Logical: &&, ||.

QUES 3: What are JavaScript Objects? Explain built-in and

user-defined objects.

Answer:
1. Definition
Objects are collections of properties (key:value pairs).
2. User-Defined Object

JavaScript

var car = {
type: "Fiat",
model: "500",
start: function() { return "Vroom"; }
};
3. Built-in Objects
● String: [Link], [Link]().
● Math: [Link], [Link]().
● Date: new Date().

QUES 4: What is AJAX? Explain how asynchronous

communication works with diagram.

Answer:
1. Definition
AJAX (Asynchronous JavaScript And XML) allows updating parts of a web page
without reloading the whole page.
2. Workflow
1. Event: User triggers action.
2. Request: JS sends XMLHttpRequest to server.
3. Process: Server processes request.
4. Response: Server sends data back.
5. Update: JS updates the DOM.

Getty Images
Explore

QUES 5: What is CGI? Explain CGI architecture using a

diagram and example.

Answer:
1. Definition
CGI (Common Gateway Interface) is a protocol for web servers to interact with
external programs to generate dynamic content.
2. Architecture
● Client -> Request -> Server.
● Server -> Launches CGI Script (Process).
● Script -> Processes Data -> Returns Output.
● Server -> Sends Response to Client.
3. Drawback
Creates a new process for every request, causing high memory usage.

(Page Break)

UNIT 5: Server-Side Technologies

(JSP)

QUES 1: Explain the architecture of JSP. Discuss the

lifecycle of a JSP page.

Answer:
1. Architecture
JSP pages are translated into Java Servlets by the Web Container (JSP Engine).
2. Lifecycle Phases
1. Translation: JSP to Servlet (.java).
2. Compilation: Servlet to Bytecode (.class).
3. Loading & Instantiation: Servlet loaded.
4. Initialization: jspInit() called once.
5. Execution: _jspService() called for every request.
6. Destruction: jspDestroy() called on shutdown.
QUES 2: What are JSP Objects? Explain all 9 implicit
objects.

Answer:
1. Definition
Implicit objects are created automatically by the JSP container.
2. List of Objects
1. request: The HTTP request.
2. response: The HTTP response.
3. out: Writer for outputting content.
4. session: User-specific session data.
5. application: Global application data.
6. config: Servlet configuration.
7. pageContext: Context of the page.
8. page: The servlet instance itself.
9. exception: For error handling.

QUES 3: Explain session management techniques.

Answer:
1. Problem
HTTP is stateless; the server forgets the user after every request.
2. Techniques
● Cookies: Stored on the client browser.
● Hidden Fields: <input type="hidden"> in forms.
● URL Rewriting: Appending ID to URL (url?id=123).
● Session Object: Server-side memory (most secure).

QUES 4: Explain JSP Scripting Elements with examples.

Answer:
1. Scriptlet <% ... %>
Contains Java code executed during request processing.

Java

<% int i = 10; %>

2. Expression <%= ... %>

Prints a value directly.

Java

<%= "Hello World" %>

3. Declaration <%! ... %>

Declares global variables/methods.

Java

<%! int count = 0; %>

QUES 5: Explain JSP Application Design using MVC

architecture.

Answer:
1. MVC Pattern
Separates logic, data, and presentation.
2. Components
● Model (JavaBeans): Holds data and logic.
● View (JSP): Displays the data.
● Controller (Servlet): Handles requests, updates Model, selects View.
3. Flow
Request -> Controller -> Model (Process) -> View (Display) -> Response.