Web Development (B24-SEC-201) - Detailed Exam Notes
Unit I - Internet & Components
1. Evolution & History of the WWW
- ARPANET (1969) was the beginning of internet research.
- Tim Berners-Lee (1989) created the World Wide Web to allow document linking via hypertext.
- The web evolved from static HTML pages to dynamic content, including CSS, JavaScript, multimedia, and interactive
apps.
- Web 1.0: Read-only websites
Web 2.0: Interactive, user-generated content
Web 3.0: Semantic web, AI integration
2. HTTP Protocol
- HTTP (HyperText Transfer Protocol) is the foundation of web communication.
- Request Message: Sent by the client (browser). Includes method (GET/POST), URL, headers, and optional body (for
POST).
- Response Message: Sent by the server. Includes status code (200 OK, 404 Not Found), headers, and body
(HTML/CSS/JSON).
- Stateless: Each request is independent.
3. Web Browsers, Servers & Clients
- Browser: Software to view web pages (e.g., Chrome, Firefox).
- Web Server: Hosts and serves web content (e.g., Apache, Nginx).
- Client: Any user device that sends a request to the server via the browser.
4. Static vs Dynamic Websites
- Static: Pre-written HTML pages. Content doesn't change unless manually edited. Fast and simple (e.g., portfolio
pages).
- Dynamic: Content generated on-the-fly using scripts (PHP, Node.js). Uses databases (e.g., blogs, e-commerce).
Requires server-side programming.
5. Hosting & Domain
- Hosting: Space on a server where website files are stored.
- Domain: Human-friendly address (e.g., example.com). Mapped to IP using DNS (Domain Name System).
6. Website Planning Steps
1. Requirement Analysis
2. Site Architecture (Sitemap)
3. Wireframing
4. UI/UX Design
5. Development (HTML/CSS/JS)
6. Testing
7. Deployment & Maintenance
Unit II - HTML
1. Tags vs Elements
- Tag: <tagname>
- Element: Tag + content + closing tag. E.g., <p>Hello</p> is a paragraph element.
2. Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
3. Common Tags
- Text: <p>, <h1> to <h6>, <div>, <span>
- Media: <img src="url" alt="desc">
- Links: <a href="url"> - Internal: /about.html, External: https://google.com
4. List Tags
- Ordered List: <ol><li>Item</li></ol>
- Unordered List: <ul><li>Item</li></ul>
- Definition List: <dl><dt>Term</dt><dd>Definition</dd></dl>
5. Form Tags
- <form method="POST" action="submit.php">
- Inputs: <input type="text">, <textarea></textarea>, <input type="submit">
- GET: Appends data to URL
- POST: Sends data securely in body
6. Table Tags
<table>
<tr>
<td rowspan="2">A</td>
<td>B</td>
</tr>
<tr><td>C</td></tr>
</table>
- <tr>: Table row, <td>: Table cell
- Attributes: colspan="2", rowspan="2"
Unit III - CSS
1. CSS Syntax
selector {
property: value;
2. Types of CSS
- Inline: <h1 style="color:red">
- Internal: <style> in <head>
- External: Linked .css file
3. Selectors
- Element: p {}
- ID: #id {}
- Class: .class {}
4. Properties
- Text: font-size, color, text-align
- Background: background-color, background-image
- Box: width, height, margin, padding, border
5. Box Model (VERY IMPORTANT)
Margin
Border
Padding
Content
6. Positioning & Display
- position: static, relative, absolute, fixed
- float: left, right
- display: block, inline, inline-block, none
7. CSS3 Features
- Media queries, animations (@keyframes), transitions, Flexbox/Grid (basic)
Unit IV - JavaScript
1. History and Features
- Created in 1995 by Brendan Eich
- Runs on browsers (client-side)
- Features: Interactivity, DOM manipulation, validation
2. JS Basics
- Variables: let x = 5; const y = 10;
- Operators: +, -, ==, ===
- Control Statements: if, else, for, while
- Functions: function greet(name) { return "Hi " + name; }
3. JS OOPs
- Objects: let person = {name: "John", age: 30};
- Inheritance:
class Animal { speak() { console.log("Sound"); } }
class Dog extends Animal { bark() { console.log("Bark"); } }
4. DOM Manipulation
- document.getElementById("id")
- document.querySelector(".class")
- element.innerHTML = "New Text";
- element.addEventListener("click", function() { alert("Clicked!"); });
