Web Programming — BCA Study Guide

📚 How the Internet & Web Work

The Internet is a global network of interconnected computers that communicate using standardized protocols. The World Wide Web (WWW) is a service that runs ON the internet — it's the collection of websites and web pages you access via a browser.

Key Terms:

Term	Meaning
URL	Uniform Resource Locator — the address of a web page. Example: https://www.google.com/search?q=hello
HTTP/HTTPS	Protocol for transferring web pages. HTTPS = encrypted (secure) version
HTML	HyperText Markup Language — defines the STRUCTURE of web pages
CSS	Cascading Style Sheets — defines the APPEARANCE (colors, fonts, layout)
JavaScript	Programming language that makes web pages INTERACTIVE
Web Browser	Software that displays web pages (Chrome, Firefox, Edge, Safari)
Web Server	Computer that stores and serves web pages to browsers (Apache, Nginx)
DNS	Domain Name System — converts domain names (google.com) to IP addresses (142.250.x.x)
IP Address	Unique numerical address of every device on the internet (like a phone number)

How a website loads:

You type URL → Browser asks DNS for IP → Browser sends HTTP request to server → Server sends back HTML/CSS/JS → Browser renders the page

Client-Side vs Server-Side:

Client-Side (Front-end)	Server-Side (Back-end)
Runs in the user's browser	Runs on the web server
HTML, CSS, JavaScript	PHP, Python, Node.js, Java
Handles: UI, animations, form validation	Handles: databases, authentication, business logic
User can see the code (View Source)	Code is hidden from users

📚 HTML Basics — The Skeleton of Web Pages

HTML (HyperText Markup Language) is NOT a programming language — it's a markup language that uses tags to define the structure and content of web pages. Every web page is an HTML document.

Basic HTML Document Structure:

<!DOCTYPE html>          <!-- Tells browser this is HTML5 -->
<html lang="en">         <!-- Root element, language=English -->
<head>
    <meta charset="UTF-8">                   <!-- Character encoding -->
    <meta name="viewport" content="width=device-width">  <!-- Mobile responsive -->
    <title>My First Page</title>             <!-- Browser tab title -->
    <link rel="stylesheet" href="style.css"> <!-- Link external CSS -->
</head>
<body>
    <!-- ALL visible content goes inside body -->
    <h1>Hello World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

HTML Tags — Complete Reference:

Headings & Text:

<h1>Heading 1 (largest)</h1>   <!-- Use only ONE h1 per page -->
<h2>Heading 2</h2>            <!-- Sub-heading -->
<h3>Heading 3</h3> to <h6>Heading 6 (smallest)</h6>
<p>Paragraph of text.</p>     <!-- Block of text -->
<br>                          <!-- Line break (self-closing, no end tag) -->
<hr>                          <!-- Horizontal line -->
<b>Bold</b> or <strong>Bold (semantic)</strong>
<i>Italic</i> or <em>Emphasized (semantic)</em>
<u>Underline</u>
<mark>Highlighted text</mark>
<sub>Subscript (H<sub>2</sub>O)</sub>
<sup>Superscript (x<sup>2</sup>)</sup>
<pre>Preformatted text   preserves   spacing</pre>
<blockquote>Indented quote block</blockquote>

Links & Images:

<!-- Hyperlink -->
<a href="https://google.com">Click Here</a>
<a href="page2.html">Go to Page 2</a>       <!-- Link to local file -->
<a href="#section1">Jump to Section 1</a>   <!-- Link within same page -->
<a href="file.pdf" target="_blank">Open in New Tab</a>

<!-- Image (self-closing) -->
<img src="photo.jpg" alt="Description of image" width="300" height="200">
<!-- alt text is important for accessibility and if image fails to load -->

Lists:

<!-- Unordered (bullet) List -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<!-- Ordered (numbered) List -->
<ol>
    <li>First</li>
    <li>Second</li>
</ol>

<!-- Description List -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
</dl>

📚 HTML Tables & Forms

Tables:

<table border="1">
    <thead>                          <!-- Table header section -->
        <tr>                         <!-- Table Row -->
            <th>Name</th>           <!-- Table Header cell (bold, centered) -->
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>                          <!-- Table body section -->
        <tr>
            <td>Sajid</td>          <!-- Table Data cell -->
            <td>20</td>
            <td>Delhi</td>
        </tr>
        <tr>
            <td colspan="2">Spans 2 columns</td>  <!-- Merge cells -->
            <td>Mumbai</td>
        </tr>
    </tbody>
</table>

Forms (collecting user input):

<form action="/submit" method="POST">
    <!-- Text Input -->
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter name" required>

    <!-- Email -->
    <input type="email" name="email" placeholder="email@example.com">

    <!-- Password (characters hidden) -->
    <input type="password" name="pass" placeholder="Password">

    <!-- Number -->
    <input type="number" name="age" min="1" max="100">

    <!-- Radio Buttons (choose ONE) -->
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    <!-- Same "name" groups them — only one can be selected -->

    <!-- Checkboxes (choose MULTIPLE) -->
    <input type="checkbox" name="hobby" value="reading"> Reading
    <input type="checkbox" name="hobby" value="gaming"> Gaming

    <!-- Dropdown -->
    <select name="city">
        <option value="">Select City</option>
        <option value="delhi">Delhi</option>
        <option value="mumbai">Mumbai</option>
    </select>

    <!-- Text Area (multi-line) -->
    <textarea name="message" rows="4" cols="40"></textarea>

    <!-- Submit Button -->
    <button type="submit">Submit</button>
</form>

<!-- Form attributes: -->
<!-- action = WHERE to send data -->
<!-- method = GET (data in URL) or POST (data hidden) -->
<!-- GET: search queries, bookmarkable. POST: login, file upload, sensitive data -->

Semantic HTML5 Tags (give MEANING to structure):

<header>   Site header, logo, navigation        </header>
<nav>      Navigation links                      </nav>
<main>     Main content of the page               </main>
<article>  Self-contained content (blog post)     </article>
<section>  Thematic grouping of content           </section>
<aside>    Sidebar content                        </aside>
<footer>   Page footer, copyright, links          </footer>
<figure>   Image with caption                     </figure>

📚 CSS Fundamentals

CSS controls the visual presentation. Without CSS, HTML pages would be plain black text on white background. CSS handles colors, fonts, spacing, layout, animations, and responsive design.

3 Ways to Add CSS:

<!-- 1. Inline (directly on element — avoid, hard to maintain) -->
<p style="color: red; font-size: 20px;">Red text</p>

<!-- 2. Internal (in <head> — OK for single page) -->
<style>
    p { color: blue; }
</style>

<!-- 3. External (separate file — BEST practice!) -->
<link rel="stylesheet" href="styles.css">

CSS Syntax:

selector {
    property: value;       /* Each rule = property: value; */
    another-property: value;
}

/* Examples: */
h1 {
    color: #333333;        /* Text color (hex code) */
    font-size: 24px;       /* Font size in pixels */
    font-family: Arial, sans-serif;  /* Font (fallback if first unavailable) */
    text-align: center;    /* center, left, right, justify */
    text-transform: uppercase;  /* uppercase, lowercase, capitalize */
}

CSS Selectors (how to TARGET elements):

Selector	Syntax	Targets
Element	p { }	ALL <p> elements
Class	.highlight { }	Elements with class="highlight" (REUSABLE)
ID	#header { }	Element with id="header" (UNIQUE — only one!)
Universal	* { }	ALL elements
Descendant	div p { }	<p> inside <div> (any level deep)
Child	div > p { }	<p> directly inside <div> (immediate child only)
Group	h1, h2, h3 { }	All h1, h2, AND h3 elements
Pseudo-class	a:hover { }	When mouse hovers over a link
Attribute	input[type="text"] { }	Input elements with type="text"

CSS Specificity (Which rule wins when conflicts?):

Inline style (1000) > ID (100) > Class (10) > Element (1)

Higher specificity wins. If equal, the LAST rule in the file wins.

📚 Box Model & Layout

Every HTML element is a rectangular box. The CSS Box Model defines its dimensions:

Total width = content + padding + border + margin

.box {
    width: 200px;          /* Content area width */
    padding: 20px;         /* Space INSIDE the border (around content) */
    border: 2px solid #000; /* The visible border line */
    margin: 10px;          /* Space OUTSIDE the border (between elements) */
    
    /* box-sizing: border-box; makes width INCLUDE padding+border — much easier! */
    box-sizing: border-box;  /* Now total = exactly 200px always */
}

Display Types:

Value	Behavior	Examples
block	Takes full width, starts on new line	div, h1-h6, p, form
inline	Takes only needed width, stays on same line	span, a, strong, em, img
inline-block	Inline but respects width/height	Buttons, badges
none	Completely hidden	Hiding elements
flex	Flexible layout container	Modern layouts

Flexbox (modern layout):

.container {
    display: flex;                /* Activate flexbox */
    justify-content: center;     /* Horizontal: center, space-between, space-around */
    align-items: center;         /* Vertical: center, flex-start, flex-end */
    flex-direction: row;         /* row (horizontal) or column (vertical) */
    gap: 10px;                   /* Space between flex items */
    flex-wrap: wrap;             /* Items wrap to next line if no space */
}

Position Property:

Value	Behavior
static	Default. Normal document flow.
relative	Positioned relative to its normal position. Use top/left to offset.
absolute	Positioned relative to nearest positioned ancestor. Removed from flow.
fixed	Stays in same spot even when scrolling. Relative to viewport.
sticky	Normal until scroll point, then sticks (like a sticky note).

Colors in CSS:

color: red;                /* Named colors */
color: #FF0000;            /* Hex (Red=FF, Green=00, Blue=00) */
color: rgb(255, 0, 0);     /* RGB values (0-255 each) */
color: rgba(255, 0, 0, 0.5);  /* RGBA: last value = opacity (0=transparent, 1=solid) */
color: hsl(0, 100%, 50%);  /* HSL: Hue(0-360), Saturation(%), Lightness(%) */

📚 JavaScript Basics

JavaScript is the ONLY programming language that runs natively in web browsers. It makes web pages interactive: form validation, animations, dynamic content, API calls, games, and more.

Adding JavaScript to HTML:

<!-- 1. Internal (inside HTML) -->
<script>
    alert("Hello!"); // Shows popup
</script>

<!-- 2. External file (BEST practice) -->
<script src="script.js"></script>

<!-- Place scripts at END of body for faster page load -->

Variables:

// 3 ways to declare variables:
var name = "Sajid";      // Old way — function scoped, avoid in modern JS
let age = 20;            // Modern — block scoped, can be reassigned
const PI = 3.14159;      // Modern — block scoped, CANNOT be reassigned

// Data types (JavaScript figures out the type automatically):
let num = 42;            // Number (integers and decimals are both "number")
let text = "Hello";      // String (text — use quotes)
let isTrue = true;       // Boolean (true or false)
let empty = null;        // Null (intentionally empty)
let notDefined;          // Undefined (declared but no value assigned)
let arr = [1, 2, 3];    // Array (ordered collection)
let obj = {name: "Sajid", age: 20};  // Object (key-value pairs)

// typeof checks the type
typeof 42;        // "number"
typeof "hello";   // "string"
typeof true;      // "boolean"

Operators:

// Arithmetic: + - * / % **
5 + 3;     // 8
10 % 3;    // 1 (remainder)
2 ** 3;    // 8 (power: 2³)

// Comparison:
5 == "5";   // true  (loose equality — converts types!)
5 === "5";  // false (strict equality — checks type too!) ← USE THIS!
5 != "5";   // false
5 !== "5";  // true  ← USE THIS!

// Logical:
true && false;  // AND → false (both must be true)
true || false;  // OR  → true  (at least one true)
!true;          // NOT → false (flips)

// String concatenation:
"Hello" + " " + "World";   // "Hello World"
`Hello ${name}`;            // Template literal (modern — uses backticks!)

Control Flow:

// if-else
let marks = 85;
if (marks >= 90) {
    console.log("Grade A");
} else if (marks >= 80) {
    console.log("Grade B");
} else {
    console.log("Grade C");
}

// for loop
for (let i = 0; i < 5; i++) {
    console.log(i);    // 0, 1, 2, 3, 4
}

// while loop
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// for...of (iterate array values)
let fruits = ["Apple", "Banana", "Cherry"];
for (let fruit of fruits) {
    console.log(fruit);  // Apple, Banana, Cherry
}

📚 Functions & Arrays in JavaScript

Functions:

// Function Declaration
function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("Sajid"));  // "Hello, Sajid!"

// Arrow Function (modern, shorter syntax)
const add = (a, b) => a + b;
console.log(add(5, 3));  // 8

// Function with default parameter
function power(base, exp = 2) {
    return base ** exp;
}
power(3);    // 9  (uses default exp=2)
power(3, 3); // 27

Arrays (ordered collections):

let fruits = ["Apple", "Banana", "Cherry"];

fruits.length;              // 3
fruits[0];                  // "Apple" (index starts from 0)
fruits[fruits.length - 1];  // "Cherry" (last element)

// Modifying arrays:
fruits.push("Date");        // Add to END: ["Apple","Banana","Cherry","Date"]
fruits.pop();               // Remove from END: ["Apple","Banana","Cherry"]
fruits.unshift("Avocado");  // Add to START
fruits.shift();             // Remove from START
fruits.splice(1, 1);        // Remove 1 element at index 1

// Useful array methods:
fruits.indexOf("Banana");   // 1 (position of element, -1 if not found)
fruits.includes("Apple");   // true (does it exist?)
fruits.join(", ");           // "Apple, Banana, Cherry" (array to string)
fruits.reverse();            // Reverses the array
fruits.sort();               // Sorts alphabetically

// Modern iteration methods:
fruits.forEach(fruit => console.log(fruit));  // Loops through each
let upper = fruits.map(f => f.toUpperCase()); // Creates new transformed array
let long = fruits.filter(f => f.length > 5);  // Filters by condition

Objects (key-value pairs):

let student = {
    name: "Sajid",
    age: 20,
    grades: [85, 90, 78],
    greet: function() {
        return "Hi, I'm " + this.name;
    }
};

// Accessing properties:
student.name;          // "Sajid" (dot notation)
student["age"];        // 20 (bracket notation)
student.greet();       // "Hi, I'm Sajid"

// Add/modify properties:
student.email = "sajid@example.com";
student.age = 21;

// Loop through object:
for (let key in student) {
    console.log(key + ": " + student[key]);
}

📚 DOM Manipulation — Changing the Page with JavaScript

The DOM (Document Object Model) is a tree representation of the HTML page. JavaScript can read and change ANY element on the page through the DOM.

// SELECTING elements:
document.getElementById("myId");           // By ID (returns one element)
document.getElementsByClassName("myClass"); // By class (returns collection)
document.getElementsByTagName("p");         // By tag (returns collection)
document.querySelector(".myClass");         // CSS selector (returns FIRST match)
document.querySelectorAll(".myClass");      // CSS selector (returns ALL matches)

// CHANGING content:
let heading = document.getElementById("title");
heading.textContent = "New Title";       // Change text (no HTML)
heading.innerHTML = "<b>Bold Title</b>"; // Change with HTML

// CHANGING styles:
heading.style.color = "red";
heading.style.fontSize = "24px";         // camelCase in JS (not font-size)
heading.style.backgroundColor = "#f0f0f0";

// CHANGING attributes:
let img = document.querySelector("img");
img.setAttribute("src", "new-image.jpg");
img.getAttribute("alt");

// ADDING/REMOVING classes:
heading.classList.add("highlight");        // Add a CSS class
heading.classList.remove("highlight");     // Remove a class
heading.classList.toggle("active");        // Add if missing, remove if present

// CREATING elements:
let newPara = document.createElement("p");
newPara.textContent = "I was created by JavaScript!";
document.body.appendChild(newPara);        // Add to end of body

Events (react to user actions):

// Method 1: addEventListener (BEST practice)
let btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
    alert("Button clicked!");
});

// Method 2: Inline (avoid for large projects)
// <button onclick="alert('Clicked!')">Click</button>

// Common events:
// click       — user clicks an element
// dblclick    — double click
// mouseover   — mouse enters element
// mouseout    — mouse leaves element
// keydown     — key pressed
// keyup       — key released
// submit      — form submitted
// change      — input value changed
// load        — page finished loading
// input       — user types in input field

// Form validation example:
document.querySelector("form").addEventListener("submit", function(e) {
    let name = document.getElementById("name").value;
    if (name.trim() === "") {
        e.preventDefault();    // STOP form submission
        alert("Name is required!");
    }
});

📚 JSON — Data Exchange Format

JSON (JavaScript Object Notation) is a lightweight data format used to exchange data between server and browser. It looks like JavaScript objects but is pure text.

// JSON format (keys MUST be in double quotes):
{
    "name": "Sajid",
    "age": 20,
    "isStudent": true,
    "courses": ["Math", "Programming", "English"],
    "address": {
        "city": "Delhi",
        "pin": "110001"
    }
}

// Converting between JS objects and JSON:
let obj = {name: "Sajid", age: 20};

// Object → JSON string (for sending to server):
let jsonStr = JSON.stringify(obj);
// Result: '{"name":"Sajid","age":20}'

// JSON string → Object (for using in code):
let parsed = JSON.parse(jsonStr);
console.log(parsed.name);  // "Sajid"

🌐 Introduction to Web Programming