Web Technologies - Solved Important Topics

& Questions
This document provides detailed explanations for the frequently asked Web Technology
topics identified from the 2021, 2022, and 2023 exam papers, presented in an exam-like
style.

Compulsory Short Notes (Question 1)

(Total 15 Marks, typically 2.5 or 3 Marks per Note)

1. PHP (Hypertext Preprocessor)

Definition: PHP is a widely-used, open-source, server-side scripting language

primarily designed for web development to create dynamic web content.
Execution: PHP code is executed on the web server, and the resulting HTML (or
other output) is sent to the client's browser. It can be embedded directly
within HTML using <?php ... ?> tags.
Key Uses: Managing dynamic content, database interaction (MySQL, PostgreSQL
etc.), session tracking, form processing, building e-commerce sites and Content
Management Systems (CMS).
Specifics:
Comments: Single-line ( // or # ), multi-line ( /* ... */ ).
Foreach Loop: Iterates over arrays ( foreach ($array as $value) or
foreach ($array as $key => $value) ).

2. URL (Uniform Resource Locator)

Definition: A URL is the unique address used to locate resources (web pages,
images, files) on the Internet.
Structure: Typically includes:
Protocol/Scheme: http , https , ftp (defines how to access).
Host/Domain Name: www.example.com (identifies the server).
Port: (Optional) e.g., :80 (specific gate).
Path: /path/to/resource.html (location on the server).
Query String: (Optional) ?param=value (sends data to the server).
Fragment: (Optional) #section (points to a specific part of the page).

3. XSL (Extensible Stylesheet Language)

Definition: XSL is a language family for transforming and presenting XML

documents, separating data (XML) from presentation.
Components:
XSLT (XSL Transformations): Transforms XML structure into other formats
(XML, HTML, text) using templates and XPath.
XPath (XML Path Language): Navigates and selects nodes within an XML
document, used heavily by XSLT.
XSL-FO (XSL Formatting Objects): Defines visual formatting for XML (less
common now for web, CSS often preferred for HTML output).

4. AJAX (Asynchronous JavaScript and XML)

 Definition: AJAX is a set of techniques for creating asynchronous web
applications, allowing parts of a web page to be updated without a full page
reload.
Mechanism: Uses XMLHttpRequest object (or Fetch API) in JavaScript to
send/receive data from a server in the background. Data format is often JSON
(though originally XML). JavaScript updates the page content dynamically via
the DOM.
Benefit: Creates faster, more responsive, and interactive user experiences.

5. WWW (World Wide Web)

Definition: The WWW is a global information system of interlinked hypertext

documents and other resources, accessed via the Internet using URLs and HTTP.
Relationship to Internet: The WWW is a service on the Internet. The Internet is
the underlying network infrastructure; the WWW is the system of linked web
pages and resources.
Core Technologies: HTTP, HTML, URLs, Web Browsers, Web Servers.

6. Web Server

Definition: Software and/or hardware that stores website files and responds to
requests from web browsers (clients) using HTTP.
Function: Listens for HTTP requests, processes them (locating files or running
scripts like PHP), and sends back HTTP responses containing the requested
resources (HTML, CSS, images, etc.).
Examples: Apache HTTP Server, Nginx, Microsoft IIS.

7. Internet

Definition: A global system of interconnected computer networks using the

TCP/IP protocol suite to link devices worldwide.
Function: Provides the communication infrastructure for services like the WWW,
email, FTP, etc. Works via packet switching, where data is broken down,
addressed (IP), routed, and reassembled (TCP).

8. DOM (Document Object Model)

Definition: A programming interface (API) for HTML and XML documents. It

represents the logical structure of a document as a tree of objects (nodes).
Purpose: Allows scripts (like JavaScript) to dynamically access and manipulate
the content, structure, and style of a web page after it's loaded. Essential
for dynamic updates in AJAX and interactive web pages.

9. CSS (Cascading Style Sheets)

Definition: A stylesheet language used to describe the presentation (styling

and layout) of documents written in HTML or XML.
Purpose: Separates content structure (HTML) from presentation (CSS), allowing
for easier maintenance, consistency, and flexibility in design.
Class Selectors: A type of CSS selector that targets elements based on their
class attribute value. Syntax starts with a period ( . ), e.g., .my-class {
color: red; } . Multiple elements can share the same class.

10. XML (Extensible Markup Language)

Definition: A markup language designed for storing and transporting data in a

self-descriptive format. Users define their own tags relevant to their data.
 Characteristics: Focuses on data structure, not presentation; human-readable;
platform-independent; strict syntax rules.
Checking Validity: Ensures an XML document adheres not only to basic syntax
(well-formedness) but also to a specific structure defined by a DTD (Document
Type Definition) or XSD (XML Schema Definition).

11. HTML (HyperText Markup Language)

Definition: The standard markup language for creating web pages and defining
their structure and content.
Mechanism: Uses tags (e.g., <h1> , <p> , <a> ) to structure content, which
browsers interpret to render the page.
Definition Lists: Created using <dl> (list), <dt> (term), and <dd>
(description) tags to present items and their definitions.

12. MIME (Multipurpose Internet Mail Extensions)

Definition: An internet standard extending the format of email to support non-

ASCII text, attachments (images, audio, video), multi-part messages, and non-
ASCII headers.
Working: Uses headers like Content-Type (e.g., image/jpeg , application/pdf )
and Content-Transfer-Encoding (e.g., base64 ) within messages to tell the
client how to interpret the content. Also used in HTTP to specify content
types.

13. Network

Definition: A collection of interconnected computers, servers, mainframes,

network devices, or other devices that can communicate with each other.
Web Context: Refers to the underlying infrastructure (like the Internet or a
local network) over which web communications (HTTP requests/responses) travel
between clients (browsers) and servers.

14. Query

Web Context: Often refers to:

Query String: The part of a URL after a ? used to pass data to the
server (e.g., search.php?query=web+tech ).
Database Query: A request sent to a database management system (DBMS) to
retrieve, manipulate, or manage data (e.g., an SQL query like SELECT *
FROM users WHERE id=1 ). AJAX/PHP applications frequently involve
constructing and executing database queries based on user input.

Unit I: Introduction & HTML/CSS

(Typically 15 Marks, may be split)

Internet: (Weightage: 15 Marks / 7.5-8 Marks)

Definition & Scope: The Internet is a global network-of-networks

connecting millions of computers using the standardized TCP/IP protocol
suite. It provides the infrastructure for various services like the WWW,
email, FTP, etc.
History: Originated from ARPANET (1960s US DoD project), evolved with
TCP/IP standardization (70s/80s), explosion in use with the advent of
 the WWW (Tim Berners-Lee, 1990s) and graphical browsers, leading to the
modern broadband, mobile, and cloud-centric internet.
Working: Based on packet switching. Data is broken into packets, each
addressed with source/destination IP. Packets are routed independently
across networks by routers. TCP ensures reliable delivery (sequencing,
error checking, retransmission), while IP handles addressing and
routing. DNS translates domain names to IP addresses. The client-server
model is dominant, where clients (browsers) request resources from
servers.
Protocols: Core: TCP/IP. Application Layer examples: HTTP/HTTPS (Web),
FTP (File Transfer), SMTP/POP3/IMAP (Email), DNS (Name Resolution).
Advantages: Global information access, instant communication, e-
commerce, entertainment, collaboration, education.
Disadvantages: Security threats (malware, phishing), privacy concerns,
information overload/misinformation, digital divide, potential for
addiction.

CSS (Cascading Style Sheets): (Weightage: 15 Marks / 5-7.5 Marks)

Definition & Purpose: CSS is a language for describing the presentation

(style, layout, formatting) of documents written in HTML or XML. It
enables the separation of content structure (HTML) from presentation
rules (CSS).
Benefits of Separation: Easier maintenance, consistent look-and-feel
across pages, improved accessibility, reduced file size (styles defined
once), flexibility to adapt presentation for different devices
(responsive design).
Types (Inclusion Methods):
External CSS: Styles defined in a separate .css file, linked via
<link> tag in HTML <head> . Best for multi-page sites
(consistency, caching, maintainability).
Internal CSS: Styles defined within <style> tags inside the HTML
<head> . Useful for single-page styling or page-specific
overrides.
Inline CSS: Styles applied directly to HTML elements using the
style attribute. Lowest maintainability, used for specific
overrides or dynamic styling.

Cascading & Specificity: The "cascade" refers to the order rules are
applied: Browser defaults -> User styles -> Author styles (External ->
Internal -> Inline). Specificity determines which rule wins if multiple
rules target the same element (e.g., ID selectors are more specific than
class selectors, which are more specific than type selectors).
!important can override specificity.
Selectors: Patterns to target HTML elements: Type ( p ), Class ( .info ),
ID ( #header ), Attribute ( [type="text"] ), Pseudo-classes ( :hover ),
Pseudo-elements ( ::before ), Combinators (descendant , child > ,
adjacent + , sibling ~ ), Universal ( * ), Grouping ( , ).

HTML: (Weightage: 7.5-10 Marks, often combined with CSS)

Definition & Purpose: HTML (HyperText Markup Language) is the standard

language for creating the structure and content of web pages. It uses
tags to define elements like headings, paragraphs, images, links, etc.
 Basic Document Structure: <!DOCTYPE html> , <html> (root), <head>
(metadata: title , meta , link , style , script ), <body> (visible
content).
Parsing: Browsers parse the HTML text, build a DOM (Document Object
Model) tree representing the structure, fetch linked resources (CSS, JS,
images), apply CSS styles, execute JavaScript, and finally render the
visual page.
Common Tags & Usage:
Structure: <h1> to <h6> (headings), <p> (paragraph), <div>
(division/container), <span> (inline container).
Text Formatting: <strong> (bold importance), <em> (emphasized
italic), <b> (bold offset), <i> (italic offset). (Prefer
strong/em for semantics).
Links: <a> (anchor) with href attribute.
Images: <img> with src and alt attributes.
Lists: <ul> (unordered), <ol> (ordered), <li> (list item),
<dl>/<dt>/<dd> (definition lists).
Tables: <table> , <tr> (row), <th> (header cell), <td> (data
cell), <caption> , <thead> , <tbody> , <tfoot> .
Forms: <form> , <input> (various types: text, password,
checkbox, radio, submit, etc.), <textarea> , <select> , <option> ,
<button> , <label> .

Deprecated Tags: <frame> , <font> should be avoided; use CSS instead.

Web Server & Web Browser: (Weightage: 15 Marks / 7 Marks)

Web Browser (Client): Software (Chrome, Firefox) on the user's device

that requests web resources using HTTP(S), interprets HTML/CSS/JS, and
renders the visual web page for the user. Manages user interaction,
cookies, cache.
Web Server (Server): Software (Apache, Nginx) or hardware that stores
website content (HTML, CSS, JS, images, data) and responds to HTTP(S)
requests from browsers. It processes requests (serving static files or
executing server-side scripts like PHP), manages connections, and sends
back responses.
Request-Response Cycle:
1. Browser sends HTTP request (e.g., GET /page.html) to server's
IP/port.
2. Server receives request, finds file or runs script.
3. Server sends HTTP response (status code + content) back to
browser.
4. Browser receives response and renders the page.

Differences: Client vs. Server roles; Requesting vs. Serving content;

User device vs. Hosting infrastructure; Rendering vs.
Processing/Storing.
Types of Web Server Software: Apache (flexible, module-based), Nginx
(high performance, event-driven, reverse proxy), IIS (Microsoft Windows
integrated), LiteSpeed (high performance, Apache compatible).

E-mail: (Weightage: 15 Marks)

Working: Email relies on several components and protocols:

 MUA (Mail User Agent): Email client software (Outlook, Gmail web
interface).
MSA (Mail Submission Agent): Server receiving email from MUA.
MTA (Mail Transfer Agent): Server software relaying email between
servers using SMTP (uses DNS MX records).
MDA (Mail Delivery Agent): Server component storing email in
recipient's mailbox.

Protocols:
SMTP (Simple Mail Transfer Protocol): For sending emails between
servers. Ports 25, 587, 465.
POP3 (Post Office Protocol version 3): For retrieving emails
(typically downloads and deletes from server). Ports 110, 995.
IMAP (Internet Message Access Protocol): For accessing emails on
the server (keeps emails on server, syncs state). Ports 143, 993.

Website Planning & Navigation: (Weightage: 7.5 Marks)

Planning Steps: Define Goals -> Target Audience -> Content Strategy ->
Sitemap/IA -> Wireframing/Mockups -> Technology Selection ->
Design/Development -> Testing -> Deployment & Maintenance.
Navigation Principles: Clarity, Consistency, Simplicity, Context
(feedback), Accessibility.
Navigation Types: Global (main menu), Local (sub-menu), Contextual (in-
content links), Breadcrumbs (path), Footer.

Unit II: XML Technologies

(Typically 15 Marks, may be split)

XML (Definition, Features, Applications, Namespace): (Weightage: 15 Marks)

Definition: XML (Extensible Markup Language) is a markup language

designed to store and transport data self-descriptively. It uses tags
defined by the user, focusing on data structure rather than
presentation.
Features: Extensible (custom tags), Human-Readable (text-based), Self-
Descriptive (tags explain data), Separates Data from Presentation,
Platform/Language Independent (W3C Standard), Supports Hierarchy, Allows
Validation (via DTD/XSD), Supports Unicode.
Applications: Data Exchange (B2B, Web Services like SOAP/RSS),
Configuration Files, Web Publishing (storing content), Document Formats
(XHTML, DocBook), Metadata (RDF), Vector Graphics (SVG).
Namespace: A mechanism to avoid naming conflicts when using tags from
different XML vocabularies in one document. Declared using
xmlns:prefix="URI" or default xmlns="URI" . Ensures uniqueness for
elements like <bk:title> vs <auth:title> .

XML (Syntax, Tags, Elements, Declaration): (Weightage: 15 Marks)

Syntax Rules: Must have one root element; all elements need closing tags
or be self-closing ( <tag/> ); properly nested; case-sensitive tags;
attribute values quoted; special characters ( < , > , & , etc.) escaped
( &lt; , &gt; , &amp; ).
 Tags & Elements: Elements are the structural units (e.g., <book>...
</book> ). Tags ( <book> , </book> ) mark the start and end. Elements
contain content (text, other elements) and optionally attributes. Empty
elements can use self-closing tags ( <image/> ).
Attributes: Provide metadata within the start tag ( <book isbn="123"> ).
Values must be quoted.
XML Declaration: Optional first line: <?xml version="1.0" encoding="UTF-
8" standalone="yes"?> . Specifies XML version (required if decl.
present), character encoding (optional, UTF-8 default), and if external
DTD is needed (standalone, optional).

XSL/XSLT: (Weightage: Part of 15 Marks or Short Note)

XSL (Extensible Stylesheet Language): Family of languages for

transforming/presenting XML.
XSLT (XSL Transformations): The core transformation language. An XML-
based language itself, it uses templates that match nodes in the input
XML (via XPath) and defines how to generate output (XML, HTML, text).
Processor applies XSLT stylesheet to input XML to produce output
document.
XPath (XML Path Language): Essential part of XSLT; used to navigate the
XML tree and select specific elements/attributes/text nodes to be
processed by XSLT templates.

SOAP (Simple Object Access Protocol): (Weightage: Part of 15 Marks)

Definition: An XML-based protocol for exchanging structured information

in Web Services. Platform and language independent.
Message Structure: XML document with: <Envelope> (root), <Header>
(optional metadata), <Body> (required payload), <Fault> (optional
error details).
Transport: Typically uses HTTP/HTTPS but can use other protocols (SMTP,
etc.).

SAX (Simple API for XML): (Weightage: Part of 15 Marks)

Definition: An event-based API for parsing XML documents sequentially.

Mechanism: Parser reads XML start-to-end, triggering events
(startElement, endElement, characters, etc.). Programmer provides
handler functions to react to these events.
Contrast with DOM: SAX is faster, uses minimal memory (good for large
files), forward-only, cannot modify the document during parsing. DOM
builds an in-memory tree, allowing random access and modification, but
uses more memory.

XML Objects & X Pointer: (Weightage: Part of 15 Marks)

XML Objects (DOM): Refers to the Document Object Model representation of

XML. A DOM parser creates an in-memory tree where each part (element,
attribute, text) is an object/node. APIs allow navigation and
manipulation of this tree.
XPointer (XML Pointer Language): Language for addressing specific
parts/fragments (points, ranges, selections) within an XML document,
extending XPath. Useful for fine-grained linking into XML resources.
Unit III: Server-Side Scripting (PHP)
(Typically 15 Marks, may be split)

PHP Core Concepts (Description, Structure, Functions, Syntax, Variables,

Constants): (Weightage: 15 Marks)

Description: PHP (Hypertext Preprocessor) is a popular server-side

scripting language for web development, designed to create dynamic web
pages and interact with databases. Open-source, widely supported.
Structure & Syntax: Code enclosed in <?php ... ?> . Semicolon ;
terminates statements. Case-insensitive for functions/keywords, case-
sensitive for variables. Can be embedded within HTML. Comments: // , # ,
/* ... */ . Output using echo or print .
Functions: Extensive library of built-in functions (string, array, date,
math, database, etc.). Users can define custom functions using function
functionName($param1, ...) { ... } .
Variables: Start with $ . Loosely typed (type determined at runtime).
Assignment with = . Scope: local, global (use global keyword or
$_GLOBALS ), static. Superglobals ( $_GET , $_POST , $_SESSION ,
$_COOKIE , etc.) are available everywhere.
Constants: Values that don't change. Defined using define("NAME",
value); (global scope) or const NAME = value; (class context mainly).
Accessed by name without $ . Conventionally uppercase.

Cookies: (Weightage: Part of 15 Marks)

Definition: Small text files stored by a web server on the client's

browser to maintain state over the stateless HTTP protocol.
Purpose: Session management (logins, carts), personalization (themes),
tracking.
Mechanism: Server sends Set-Cookie header; Browser stores cookie;
Browser sends Cookie header in subsequent requests to the same domain.
PHP: Set using setcookie(name, value, expire, path, domain, secure,
httponly); before any output. Read using $_COOKIE['cookie_name'] .
Delete by setting expiry time in the past.

Client/Server Environment: (Weightage: Part of 15 Marks)

Model: Architecture dividing tasks between clients (service requesters,

e.g., browsers) and servers (service providers, e.g., web servers).
Web Context: Browser (client) sends HTTP request to Web Server. Web
Server processes (serves static file or runs server-side script like
PHP, possibly interacts with Database Server) and sends HTTP response
back to Browser. Browser renders the response.

Operator Precedence in PHP: (Weightage: Part of 15 Marks)

Concept: Rules defining the order in which operators are evaluated in an

expression. Higher precedence operators execute first. Associativity
(left/right) resolves order for same-precedence operators.
Importance: Crucial for correct calculations and logic. Use parentheses
() to override precedence and ensure clarity.
Example Order (High to Low): ++ -- , ! , * / % , + - . (concatenation),
comparison ( < > <= >= ), equality ( == != === !== ), logical AND ( && ),
 logical OR ( || ), ternary ? : , assignment ( = += -= etc. ), and , or .
(Refer to PHP docs for full table).

Unit IV: AJAX

(Typically 15 Marks, may be split)

AJAX Core Concepts (Description, Working, Form Submission): (Weightage: 15

Marks)

Description: AJAX (Asynchronous JavaScript and XML) enables updating

parts of a web page without a full reload. It's a set of techniques
using: XMLHttpRequest /Fetch API, JavaScript, DOM, CSS, HTML, and
XML/JSON for data transfer.
Working (Asynchronous Flow): Event triggers JS -> JS creates
XMLHttpRequest -> JS configures & sends request to server -> User
continues interacting -> Server processes & sends response -> JS
callback function receives response -> JS processes response (parses
JSON/XML) -> JS updates page content via DOM.
Form Submission without Refresh: JS intercepts default form submit ->
Collects form data -> Sends data via AJAX ( POST ) to server script ->
Server processes (validation, DB interaction) -> Server sends back
response (success/error/data) -> JS callback receives response -> JS
updates page (shows message, clears form, updates relevant section)
without navigating away.

AJAX with PHP: (Weightage: 7 Marks)

Interaction: Client-side JavaScript uses XMLHttpRequest /Fetch to send

an asynchronous request (GET or POST) containing data to a specific PHP
script on the server.
PHP Role: The PHP script receives the data (via $_GET or $_POST ),
performs necessary server-side logic (calculations, file operations,
etc. - often including database interaction), formats a concise response
(usually JSON using json_encode() , or plain text/HTML), and uses echo
to send it back. It does not output a full HTML page.
JS Role: The JavaScript callback function receives the response from
PHP, parses it if necessary (e.g., JSON.parse() ), and manipulates the
DOM to update the user interface dynamically based on the response.

AJAX Database Interaction: (Weightage: 8 Marks)

Concept: This is a specific use case of AJAX with PHP (or other server-
side tech) where the core server-side task involves interacting with a
database.
PHP+DB Role: The PHP script connects to a database (e.g., MySQL using
mysqli/PDO). It constructs and executes SQL queries (SELECT, INSERT,
UPDATE, DELETE) based on data received from the AJAX request, using
prepared statements to prevent SQL injection. It fetches results (for
SELECT) or checks success (for others), processes these results, formats
them (usually as JSON), closes the DB connection, and echoes the JSON
response.
JS Role: The JavaScript callback receives the JSON data (e.g., an array
of search results, status message), parses it, and updates the DOM to
display the information (e.g., populate a table, show success/error
message).