Scribd
Upload
2 views6 pages

Web Development Exam Notes

The document provides detailed exam notes on web development, covering the evolution of the WWW, HTTP protocol, web browsers, static vs dynamic websites, and website planning steps. It also includes sections on HTML structure, common tags, CSS syntax and properties, as well as JavaScript basics and DOM manipulation. Each unit is structured to facilitate understanding of key concepts and practices in web development.

Uploaded by

mayikissyou2358
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views6 pages

Web Development Exam Notes

The document provides detailed exam notes on web development, covering the evolution of the WWW, HTTP protocol, web browsers, static vs dynamic websites, and website planning steps. It also includes sections on HTML structure, common tags, CSS syntax and properties, as well as JavaScript basics and DOM manipulation. Each unit is structured to facilitate understanding of key concepts and practices in web development.

Uploaded by

mayikissyou2358
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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!"); });

You might also like