HTML/CSS

WEB TECHNOLOGY – Acts as an interface between the web client and the web server.

INTERNET - Global network that connects millions of computers & devices worldwide allowing them to communicate.

WORLD WIDE WEB - System that allows people to access and share information on the internet using web pages.

BASIC INTERNET P ROTOCOLS

Protocols are rules that define how data is sent, received, and interpreted over the internet.

1. IP (Internet Protocol) - Assigns unique IP addresses to devices, ensuring data reaches the correct destination.
Data is broken down into small packets each containing the source and destination IP address of the packet.

2. TCP (Transmission Control Protocol) - Ensures complete and error-free data transfer between devices.
The packets which are split are numbered, and TCP ensures that they reach the destination in same order.

3. UDP (User Datagram Protocol) - Sends data quickly without checking if it arrives properly.
Sends packets without waiting for confirmation, it prioritizes speed over accuracy.

4. HTTP (Hyper Text Transfer Protocol) – Transfers web pages from servers to browsers.
Your browser sends an HTTP request to a server and the server responds with the requested webpage.

5. FTP (File Transfer Protocol) - Transfers large files between computers over the internet.
A user connects to an FTP server with a username & password. Files can be uploaded or downloaded.

6. SMTP (Simple Mail Transfer Protocol) - Sends emails from a sender to an email server.
Email clients use SMTP to send email to the recipient’s email server.

7. POP3 (Post Office Protocol 3) - Downloads emails from a server to your device.
Our Email client (Outlook) connects to the email server. Downloads emails to device and deletes them from server.

8. SNMP (Simple Network Management Protocol) - Monitors and manages network devices like routers and servers.
A network admin uses SNMP to check if devices are working properly. If a device fails, SNMP sends an alert.

HTTP REQUEST MESSAGE

Message sent by a web browser (or any client) to a web server to request a webpage, file, or resource.
A HTTP Request has 3 main parts:
1. Request Line – what we want
a. <method> - GET, POST, PUT, DELETE etc.
b. <URI> - index.html It is a combination of URL(Uniform Resource Locator) and URN(Uniform Resource Name).
c. <HTTP Version> - HTTP/1.1

2. Headers – extra details

3. Body – data sent (only for POST requests)

HTTP RESPONSE MESSAGE

Message sent by a web server back to a web browser in response to an HTTP request. Contains requested data.
A HTTP Response Message has 3 main parts:
1. Status Line – What happened
a. <HTTP Version> - HTTP/1.1
b. <Status Code> - 200 (OK) ; 404 (NOT FOUND) ; 500 (SERVER ERROR)
c. <Status Message>

2. Headers – Extra details (type of data being sent, size of data being sent, name of server handling requests)

3. Body – Actual Content

If request is for a webpage, body contains the actual HTML code.
WEB CLIENTS
Software that requests and receives data from a web server over the internet. Asks for web pages, images, videos etc
A Web Browser is a software application that acts as a web client. It helps users access and interact with websites.
The functions of a web browser are:
1. Sending HTTP Requests (Fetching Web Pages)
2. Receiving & Processing HTTP Responses
3. Rendering Web Pages (Displaying Content)
4. Managing Caching (Saving Data for Faster Access)
5. Convert the domain name entered by the user into the corresponding IP address (DNS)

A URL (Uniform Resource Locator) is the address used to access a webpage or resource on the internet.

https://www.example.com/products/shoes.html

Protocol | Domain Name | Path (specific page)

Absolute URL - Complete web address that includes the protocol, domain name, and full path to a resource.
https://www.example.com/products/shoes.html. Will work anywhere on the internet no matter where its used.

Relative URL - shortened web address that only includes the path to a resource. It assumes the base domain.
/products/shoes.html. Browser assumes it’s part of the current website and will only work inside www.example.com.

WEB SERVERS
Computer/software that stores, processes, and delivers web pages to users. It handles requests from web browsers
(clients) and responds with the requested files, like HTML pages, images, or videos. The functions of web server are:
1. Storing Website Files – Keeps HTML, CSS, JavaScript, images, and other resources.
2. Handling Client Requests → Listens to browser requests (HTTP/HTTPS).
3. Processing Dynamic Content → Runs scripts (PHP, Python, etc.) for dynamic websites.
4. Serving Web Pages → Delivers requested webpages to users.
5. Managing Security → Supports HTTPS, authentication, and access control.
6. Logging and Monitoring → Tracks requests, errors, and visitor data.
7. Load Balancing → Distributes traffic across multiple servers to prevent overload.

WORKING PRINCIPLE OF A WEB SERVER

1. Client Request → A web browser sends an HTTP request to the web server.
2. Server Processing → The web server locates the requested file.
3. Response Delivery → The web server sends the requested webpage back to the browser.

APACHE
Open-source web server developed by the Apache Software Foundation. One of the most popular web servers, often
used for hosting websites on Linux.

IIS (INTERNET INFORMATION SERVICES)

It is a web server from Microsoft. Used mainly for hosting ASP.NET and Windows-based websites. Provides built-in
security and integration with Windows Server.

HTML
HyperText Markup Language is the standard language used to create web pages. It defines the structure of a
webpage using tags.
1. Document Type
2. HTML element within which all HTML code is written
3. Head section that contains all the styles, titles and other stuff
4. Body section that contains content displayed on browser
5. Character encoding
6. External style sheet that is used along with HTML document
7. External JavaScript files that can be associated with HTML file
HTML ELEMENTS
HTML elements define the structure of a webpage. Some of the HTML elements are:
1. Headings (<h1> to <h6>)
h1 being the largest and h6 being the smallest. Headings help organize content and improve readability.
<h1>Main Heading</h1>
<h2>Subheading</h2>

2. Paragraph (<p>)
Used to write regular text content. Automatically adds space between paragraphs for readability.
<p>This is a paragraph of text.</p>

3. Line Break (<br>)

Adds a line break without starting a new paragraph. Useful for breaking text into multiple lines.
<p>This is line one.<br>This is line two.</p>

4. Font Style (<b>, <i>, <u>)

<b> → Bold ; <i> → Italic ; <u> → Underline
<p>This is <b>bold</b> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <u>underlined</u> text.</p>

5. Text Align (text-align:left, text-align:center, text-align:right)

Aligns text either to the left, centre or to the right.
<p style="text-align:left;">Left-aligned text</p>
<p style="text-align:center;">Centered text</p>
<p style="text-align:right;">Right-aligned text</p>

6. Font and Color (font-size, font-family, color)

Changes font size, font family and font color.
<p style="font-size:20px;">This is large text.</p>
<p style="font-family:Arial;">This text uses Arial font.</p>
<p style="color:red;">This text is red.</p>

LINKS
Links in HTML allow users to navigate between webpages, download files, or open media like images, audio, and
videos. The <a> (anchor) tag is used to create hyperlinks.

<a href="URL">Clickable Text</a> href="URL" → Specifies the link destination.

<a href="https://www.google.com"> Go to Google </a> Clicking this will open Google.
<a href="https://www.google.com" target="_blank"> New tab </a> Clicking this will open Google in new tab.

You can make an image clickable by placing it inside an <a> tag.

<a href="https://www.google.com">
<img src="image.jpg" alt="Click me" width="200"> Clicking the image will open google.com
</a>

Uses of the Link tag:

1. Linking Stylesheets (CSS)
2. Adding a favicon
3. Importing fonts from external sources
4. Preload important resources for faster runtime
FRAMES
Used to divide a webpage into multiple sections, each displaying a separate document. They allowed users to view
multiple pages simultaneously.
Frames use the <frameset> tag to define the layout of the screen and <frame> tags to load different pages inside
the sections.

<frameset cols="50%, 50%"> This divides the screen into two vertical sections 50/50 in size.
<frame src="page1.html"> page1.html loads in the first frame, and page2.html in the second frame.
<frame src="page2.html">
</frameset>

<frameset rows="30%, 70%"> This divides the screen into two horizontal sections 30/70 in size.
<frame src="page1.html"> page1.html loads in the first frame, and page2.html in the second frame.
<frame src="page2.html">
</frameset>

Attributes of Frame Tag – src, name, scrolling, border etc.

LISTS
Used to organize and display information in a structured way. There are two main types of lists:
1. Unordered List
Order doesn’t matter, like a list of features or items.

<ul>
<li>Apple</li> . Apple
<li>Banana</li> . Banana
<li>Mango</li> . Mango
</ul>

2. Ordered List
Order of items matters, like steps in a process or rankings.

<ol>
<li>Boil Water</li> 1. Boil Water
<li>Add Tea Leaves</li> 2. Add Tea Leaves
<li>Pour into Cup</li> 3. Pour into Cup
</ol>

TABLES
Tables in HTML are used to organize data in rows and columns. A table in HTML is created using the <table> tag

1. Rows (<tr>) → Defines a row name. 2. Columns/Cells (<td>) → Holds the actual data in each row.
3. Headers (<th>) → Defines the column heading.

<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>

<tr>
<td>Amit</td> <th colspan = “2”> Full Name </th>

<td>22</td>
</tr>
<tr>
<td>Riya</td>
<td>21</td> </tr> </table> <td rowspan = “2”> Amit </td>
IMAGES
Images are added using the <img> tag.
<img src="image.jpg" alt="A beautiful sunset">
src → Defines the file path(source).
alt → Alternative text if image doesn’t load

FORMS
To collect user input, like login details or feedback. Contain various fields like text boxes, buttons, and checkboxes.

<form>
<input type="text" name="name">
<input type="submit">
</form>

Creates a single-line text box

<input type="text" name="username" placeholder="Enter your name">

Hides the typed characters (e.g., *****)

<input type="password" name="password">

Allows selecting only one option from multiple choices

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Allows selecting multiple options

<input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter

Creates a dropdown list

<select name="country">
<option value="india">India</option>
<option value="usa">USA</option>
</select>

Sends the form data when clicked

<input type="submit" value="Send">

Allows users to upload a file (like a resume or image)

<input type="file" name="resume">
CSS
Cascading Style Sheets is used to style and format web pages. It controls the layout, colours, fonts, spacing, and
responsiveness of HTML elements.

BASIC CSS SYNTAX

selector { → Selects an HTML Element

property: value; → Defines what to style: specifies style
}

p{ → Selector (selects element)

color: blue; → property:value
font-size: 18px; → property:value
}

SELECTORS
CSS selectors are used to target and style specific HTML elements. Define which elements should get a certain style.

Simple Selector
Targets HTML elements directly by using their tag name.
p{
color: red; Styles all <p> elements with red text.
}

Class Selector
Targets elements with a specific class (used for multiple elements).
.red-text {
color: red; All elements with class="red-text" will have red text.
}

<p class="red-text">This is red.</p>

ID Selector
Targets a unique element with an ID (should be used only once per page).
#main-heading {
color: red; Only the <h1> with id="main-heading" gets color: red
}

<h1 id= “main-heading”> This is red </h1>

Universal Selector
Applies styles to all elements on the page.
*{
color: red; Applies color as red for all elements.
}

Attribute Selector
Targets elements based on their attributes.
element[attribute] { input[type= “text”] { Only the <input> with type="text" gets a red color.
property: value; color: red;
} }

Pseudo-Classes
Styles elements in a specific state (like hover, focus, first-child, etc.).
a:hover {
color: red; Link turns red when hovered over
}

<a href="#">Hover over me</a>

CSS IN HTML
1. Inline CSS
Styles are written directly inside an HTML tag using the style attribute. Only affects that specific tag.

<p style="color: red">This is a red paragraph.</p>

This is however hard to manage if there are many elements.

2. Internal CSS
Styles are written inside the <head> section of the HTML page, inside <style>. Affects all matching elements.

<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
}
</style>
</head>

<body>
<p>This is a blue paragraph.</p>
<p>This is also blue.</p>
</body>
</html>

Styles are applied only to one page and can’t be reused for multiple pages.

3. External CSS
Styles are written in a separate .css file and linked in the <head> section. Can be used for multi-page projects.

styles.css index.html
p{ <!DOCTYPE html>
color: red; <html>
} <head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p> This is red </p>
</body>
</html>

Keeps CSS separate for better organization and maintainability.

CASCADING
When multiple CSS rules target the same element, the browser decides which one to apply based on priority.

Priority Order (Highest to Lowest):

1. Inline Styles (style="" in HTML)

2. ID Selector (#id)

3. Class Selector (.class)

4. Element Selector (p, h1, div)

5. Default Browser Styles → Lowest priority

p{
color: blue; /* (Element selector) */
}

.special { <p id="unique" class="special" style="color: orange;">

color: green; /*(Class selector) */ This is a paragraph.
} </p>

#unique { Text will be Orange – Because inline styles have the highest priority.
color: red; /* (ID selector) */
}

INHERITANCE
Some properties automatically inherited from parent elements to child elements.

div { <div>
color: red; <h1> This text is red </h1>
} <p> This text is also red </p>
<div>

The <h1> and <p> inside <div> automatically inherit color: red;
 JavaScript and DOM
JavaScript (JS) is a programming language used to make web pages interactive.

FEATURES OF JAVASCRIPT
1. Client-Side Execution → Runs in the browser, no server needed.
2. Dynamic & Interactive → Can update content without refreshing the page.
3. Event-Driven → Executes code when users interact (e.g., clicks, inputs).
4. Lightweight & Fast → Doesn't require heavy processing.
5. Works with HTML & CSS → Controls web elements directly.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<script> --------------------------------> JavaScript code written inside this <script> tag
document.write("Hello, World!"); ---> Prints text directly on the webpage
</script>
</body>
</html>

VARIABLES (“LET”)
A variable is like a container that stores a value. You can use the value later or change it when needed.

let name = “John”;

let age = 25;

console.log(name);
console.log(age);

OUTPUT METHODS
1. console.log(“Hello World”) -------------------------------> Prints directly in console, for devs
2. document.write(“Hello World”) -------------------------> Writes text on webpage
3. alert(“Hello World”) ----------------------------------------> Shows a popup alert box with message

INPUT METHODS
1. let name = prompt(“What’s your name:”); -------> Asks user for input and stores it in variable name
2. let name = confirm(“Is your name correct?”);---------> Shows a yes/no confirmation box and stores if TRUE

CONDITIONAL STATEMENTS
1. IF Statement 3. IF ELSEIF ELSE Statement
let age = 18; let marks = 85;
if (age >= 18) { if (marks >= 90) {
console.log("You are eligible to vote!"); console.log("Grade: A");
} }

2. IF ELSE Statement else if (marks >= 75) {

let age = 16; console.log("Grade: B");
if (age >= 18) { }
console.log("You can vote!"); else {
} console.log("Grade: C");
else { }
console.log("You cannot vote yet.");
}
SWITCH STATEMENT
The switch statement is used to handle multiple conditions efficiently.
let day = 2;

switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
}

LOOPS
1. While Loop 2. Do While Loop 3. For Loop
let i = 1; let i = 1; for (let i = 1; i <= 5; i++) {
while (i <= 5) { do { console.log(i);
console.log(i); console.log(i); }
i++; i++;
} } while (i <= 5);

FUNCTIONS
1. Defining a Function 2. Calling a function 3. Function with Arguments
function greet( ) { function greet( ) { function greet(name) {
console.log("Hello, World!"); console.log("Hello, World!"); console.log("Hello, " + name + "!");
} } }
greet( ); greet("Bob");

OBJECTS
Collections of key-value pairs, where keys are called properties, and values can be data or functions.
1. Math Object 2. Number Object 3. Date Object
console.log(Math.PI); console.log(num.toFixed(2)); console.log(today);
console.log(Math.sqrt(16)); console.log(num.toString()); console.log(today.getFullYear());
console.log(Math.round(4.7)); console.log(Number.MAX_VALUE); console.log(today.getMonth());
console.log(Math.random()); console.log(Number.MIN_VALUE); console.log(today.getDate());
console.log(Math.pow(2, 3)); console.log(today.getHours());

ARRAYS
1. Initializing Arrays 2. Defining Elements of an Array
let fruits = ["Apple", "Banana", "Mango"]; let colors = ["Red", "Blue", "Green"];
colors[2] = "Yellow"; ----> Changes green to Yellow

3. Looping through Array 4. Adding Array element 3. Sorting an Array

let numbers = [10, 20, 30, 40]; let animals = ["Dog", "Cat"]; let letters = ["B", "A", "D", "C"];
for (let i = 0; i < numbers.length; i++) { animals.push("Elephant"); letters.sort();
console.log(numbers[i]); ["Dog", "Cat", “Elephant”]; [“A”, “B”, “C”, “D”]
}

JAVASCRIPT DEBUGGER
A debugger is a tool that helps find and fix errors (bugs) in JavaScript code.
It allows pausing execution, inspecting variables, and running code step by step.
1. Setting Breakpoints → A breakpoint is a point where execution stops temporarily so the developer can inspect
2. Step-by-Step Execution → Debuggers allow running code one line at a time to analyze behavior.
3. Inspecting Variables → Developers can check variable values at any point in execution.
4. Fixing Bugs → After identifying issues, developers can fix and test the code again.
DOM
Represents an HTML or XML document as a structured tree. It allows JavaScript to access, modify, and manipulate
the elements of a web page dynamically.
The entire HTML document is represented as a tree where each element (like <html>, <body>, <p>) is a node.
JavaScript can use the DOM to read, update, add, or remove elements on a web page.

<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="heading">Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html> JS can move thru this tree structure to access/modify elements.

Every element in the tree is called a node.

The topmost node is called the root.
Every child has a parent node.
The bottom-most nodes are called leaf nodes.
Nodes having common parent are called siblings.

MODIFYING ELEMENT STYLE – Changing its appearance dynamically using JavaScript and the DOM.
1. Accessing Elements using DOM
getElementById( ) – Selects an element by its id
let title = document.getElementById("title");

<html>
<head>
<title> Heading </title>
</head>
<body>
<h1 id="title">This is a title </h1>
<script>
let heading = document.getElementById("title");
heading.style.color="red"
</script>
</body>
</html>

2. Modifying Elements Using DOM

Appending Element Inserting Element
let newPara = document.createElement("p"); let newPara = document.createElement("p");
newPara.innerText = "This is a new paragraph."; newPara.innerText = "New paragraph added!";
document.body.appendChild(newPara); document.getElementById("container").appendChild(newPara);

Removing Element
let para = document.getElementById("text");
if (para) {
para.remove();
}
ANGULARJS
JavaScript framework used to create dynamic web applications. It allows developers to add features like data binding,
templating, and dependency injection to HTML, making it more powerful and interactive.

Key Directives for Data Binding:

1. ng-app – Initializing AngularJS. Without ng-app, AngularJS will not work.
<body ng-app=" ">
.
.
</body>

2. ng-model – Two Way Data Binding. ng-model="name" connects the input box to a variable name.
<input type="text" ng-model="name">
<p>You typed: {{ name }}</p>

3. ng-bind – One Way Data Binding. ng-bind="message" sets the text of <p> to match the message variable.
<input type="text" ng-model="message">
<p ng-bind="message"></p>

4. {{ }} (Expressions) – Displaying values. {{ 5 + 5 }} calculates and displays 10 directly.

<p>{{ 5 + 5 }}</p>

JQUERY
Lightweight JavaScript library that simplifies tasks like event handling, animations, and AJAX much easier.

Key Advantages:
1. Simplifies JavaScript – Less code needed for common tasks.
2. Cross-Browser Compatibility – Works on all major browsers.
3. Easy DOM Manipulation – Easily change or update HTML elements.
4. Built-in Effects & Animations – Simple methods for fade, slide, and hide/show.
5. AJAX Support – Load data without refreshing the page.
6. Event Handling Made Easy – Simple way to handle clicks, key presses, etc.
7. Lightweight & Fast – Small file size, quick execution.

JQuery Syntax
$(selector).action();
$ -------------> Defines JQuery
selector ----> Selects the HTML element
action ( ) ---> Performs an operation on element