Web Development Exam Revision Notes
Exam preparation ke liye yeh raha Detailed Note aur
Important Questions ka complete package. Har unit ko
point-wise explain kiya gaya hai taaki aap exam mein points
bana kar likh sakein.
UNIT 1: World Wide Web
1. Core Concepts:
World Wide Web (WWW): It is an information system
where documents and other web resources are
identified by URLs (Uniform Resource Locators) and
are accessible over the Internet. It uses the HTTP
protocol.
Web Page: A single digital document stored on a web
server, viewed using a web browser (e.g.,
[Link] ).
Website: A collection of related web pages linked
together under a single domain name.
Web Browser: Application software used to access
and view websites (e.g., Chrome, Firefox). It interprets
HTML code and renders it visually.
2. Static vs. Dynamic Website (Exam Favorite):
Feature Static Website Dynamic Website
Definition Web pages with Web pages typically
fixed content. connected to a database;
content changes.
Feature Static Website Dynamic Website
Interaction No user User can login, comment,
interaction search, upload.
(read-only).
Technology HTML, CSS. PHP, Python, [Link],
MySQL, JS.
Updates Code must be Content updated via Admin
edited manually. Panel/CMS.
Loading Faster (no Slower (processes logic on
database query). server).
content_copy
3. Client-Server Computing:
Shutterstock
Concept: The web works on a Request-Response
model.
Client (The Browser): The "Customer". It sends a
request (e.g., "Show me
[Link]
Server (The Computer): The "Shopkeeper". It
receives the request, finds the file, and sends it back
to the client.
Scripting Languages:
Client-Side Scripting: Runs on the user's browser
(e.g., JavaScript). Used for validation, animations,
and UI logic. It reduces server load.
Server-Side Scripting: Runs on the web server
(e.g., PHP, JSP). Used to connect to databases,
handle passwords, and process sensitive data.
📝 Important Questions (Unit 1):
1. Differentiate between Static and Dynamic websites
with examples.
2. Explain Client-Server architecture with a neat diagram.
3. What is the difference between Client-side and
Server-side scripting languages?
UNIT 2: HTML (HyperText Markup Language)
1. Basics of HTML:
HTML stands for HyperText Markup Language. It
describes the structure of a web page.
Structure:
HTML content_copy
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
</body>
</html>
2. Formatting & Lists:
Formatting: <b> (Bold), <i> (Italic), <u>
(Underline), <sup> (Superscript x2 ), <sub>
(Subscript H2 O ).
Lists:
Ordered List ( <ol> ): Numbered items (1, 2, 3).
Unordered List ( <ul> ): Bullet points.
Definition List ( <dl> ): Terms ( <dt> ) and
Descriptions ( <dd> ).
3. Tables (High Probability): Used to arrange data in rows
and columns.
Tags: <table> , <tr> (Row), <th> (Heading), <td>
(Data).
Attributes: border , rowspan (merge rows), colspan
(merge columns).
4. Forms: The most critical part for user input.
Tag: <form method="POST" action="[Link]">
Input Types:
Text: <input type="text">
Password: <input type="password">
Radio (Select one): <input type="radio">
Checkbox (Select multiple): <input
type="checkbox">
Submit Button: <input type="submit">
5. HTML5 Features:
Semantic Tags: Tags with meaning ( <header> ,
<footer> , <article> , <nav> ) instead of generic
<div> .
Multimedia: Native support for Audio ( <audio> ) and
Video ( <video> ) without plugins like Flash.
New Input Types: date , email , color , range .
📝 Important Questions (Unit 2):
1. Explain the basic structure of an HTML document.
2. How do you create a Table in HTML? Explain rowspan
and colspan with code.
3. Design a Registration Form code containing Name,
Email, Gender (Radio), and Submit button.
4. What are the new features introduced in HTML5?
UNIT 3: CSS (Cascading Style Sheets)
1. Introduction & Syntax:
CSS is used to style HTML elements (Color, Layout,
Fonts).
Syntax: Selector { Property: Value; }
Example: p { color: blue; font-size: 14px; }
2. Ways to Insert CSS:
1. Inline: Inside HTML tag ( <p style="color:red;"> ).
Priority: Highest.
2. Internal: Inside <head> using <style> tag.
3. External: Separate .css file linked using <link>
tag. Priority: Lowest (but best for large sites).
3. The Box Model (Must Draw Diagram):
Every element in web design is a rectangular box.
1. Content: The actual image or text.
2. Padding: Transparent area around the content (inside
the border).
3. Border: A line going around the padding and content.
4. Margin: Space outside the border (separates element
from neighbors).
4. Backgrounds & Positioning:
Background: background-color , background-image ,
background-repeat .
Positioning:
static : Default.
relative : Moved relative to its normal position.
absolute : Removed from flow, positioned relative
to parent.
fixed : Stuck to the screen (like a sticky chat
button).
📝 Important Questions (Unit 3):
1. What is CSS? Explain the three ways to include CSS in
a web page.
2. Explain the CSS Box Model with a diagram. (Most
Important)
3. Differentiate between Class ( .classname ) and ID
( #idname ) selectors.
UNIT 4: JavaScript
1. Basics:
A scripting language used to make web pages
interactive.
Data Types: Number, String, Boolean, Object,
Undefined.
Control Statements: if-else , switch , for loop ,
while loop (Same as C/C++).
2. Functions & Dialog Boxes:
Function: Reusable block of code.
JavaScript content_copy
function add(a, b) { return a + b; }
Dialog Boxes:
1. alert("Message") : Warning popup.
2. prompt("Enter Name") : Takes input.
3. confirm("Are you sure?") : Returns True/False.
3. DOM (Document Object Model):
When a web page loads, the browser creates a DOM of
the page.
It views the HTML as a Tree of Objects.
JavaScript can change HTML elements
( [Link] ), change CSS styles, and
react to events.
4. Event Handling: Actions that happen on a web page.
onclick : User clicks an element.
onchange : User changes content of a field.
onmouseover : Mouse moves over an element.
onload : Browser finishes loading the page.
📝 Important Questions (Unit 4):
1. What is JavaScript? Explain the different types of
Dialog Boxes.
2. What is DOM? How does JavaScript interact with
DOM?
3. Write a JS program to validate a form (check if a text
field is empty).
4. Explain Event Handling with examples like onclick
and onmouseover .
UNIT 5: XML (Extensible Markup Language)
1. Introduction:
XML is designed to store and transport data. It does
not do anything (it's just plain text info).
Key Feature: Tags are not predefined. You must define
your own tags (e.g., <student> , <rollno> ).
2. HTML vs. XML:
Feature HTML XML
Purpose Display data (Look & Transport/Store data
Feel). (Structure).
Tags Fixed (Pre-defined). User-defined (Extensible).
Syntax Lenient (Case Strict (Case sensitive).
insensitive).
Errors Browser ignores Parser stops on error.
errors.
content_copy
3. Well-Formed XML Rules:
1. Must have one root element.
2. All tags must be closed.
3. Tags must be properly nested ( <b><i>Text</i></b>
is correct).
4. Attribute values must be in quotes.
4. DTD (Document Type Definition):
It defines the legal building blocks of an XML
document.
It tells the parser what tags are allowed inside the XML
file.
📝 Important Questions (Unit 5):
1. Differentiate between HTML and XML. (Guaranteed
Question)
2. What are the rules for creating a "Well-Formed" XML
document?
3. What is a DTD? Why is it used?
UNIT 6: PHP and MySQL
1. PHP Basics:
PHP (Hypertext Preprocessor) is a server-side
scripting language.
Syntax: Code goes inside <?php ... ?> .
Variables: Start with $ . Example: $count = 10; .
Echo: Used to output data. echo "Hello World"; .
2. Form Handling (GET vs POST):
Feature GET Method POST Method
Data Visible in URL (address Hidden (sent in HTTP
Visibility bar). body).
Security Not secure (never use Secure.
for passwords).
Data Size Limited (approx 2000 No size limit (good
chars). for file upload).
Usage Searching (Google Login, Registration
search). forms.
content_copy
3. Advanced Features:
Cookies: Small text files stored on the Client's
browser. Used to identify a user (e.g., remembering
username).
Sessions: Data stored on the Server. Used to keep
data accessible across multiple pages (e.g., Shopping
Cart, Login State). Sessions are more secure than
cookies.
4. PHP-MySQL Connectivity: Steps to connect PHP to a
Database:
1. Connect: mysqli_connect("localhost", "user",
"pass", "dbname");
2. Check Connection: if (!$conn) { die("Connection
failed"); }
3. Execute Query: mysqli_query($conn, $sql);
4. Close Connection: mysqli_close($conn);
📝 Important Questions (Unit 6):
1. Explain the difference between GET and POST
methods.
2. What is the difference between Cookies and Sessions?
3. Write a PHP script to connect to a MySQL database
and fetch data from a table.
4. Explain the basic syntax of PHP variables and arrays.
Exam Tips for High Marks:
1. Headings: Use H1/H2 style headings for every answer.
2. Comparison Tables: Whenever asked "Difference
between A and B", draw a table. Don't write
paragraphs.
3. Code: Write small snippets of code (HTML tags, CSS,
or PHP lines) even if not explicitly asked, to show
technical knowledge.
4. Diagrams: Use diagrams for "Client-Server", "DOM",
and "Box Model".