Web Revision

🌐🔥 UNIT–I : THE INTERNET & INTERNET

PROTOCOLS 🔥🌐

1. Definition / Introduction 🎯
Internet = Global network of interconnected computers using standard protocols to share
data.

“Network of Networks”

Works on TCP/IP model

2. Key Concepts ⚡
🌐 BASIC INTERNET SERVICES

• FILE TRANSFER → Transfer files between systems (FTP)

• TELNET → Remote login to another computer
• USENET → Online discussion groups (like forums)
• GOPHER → Menu-based information retrieval system
• WAIS → Wide Area Information Server (search system)
• ARCHIE → Searches FTP files
• VERONICA → Searches Gopher menus
3. Important Points / Characteristics 💡
• Internet uses CLIENT–SERVER model
• Communication via PROTOCOLS
• Early services (Gopher, WAIS) now mostly obsolete
• Search evolution:
o ARCHIE → VERONICA → Modern Search Engines

Memory Trick:

“FTT UGW AV”

(File, Telnet, Usenet, Gopher, WAIS, Archie, Veronica)

4. Step-by-Step (How Internet Works) 🔄

1. User enters URL
2. Request sent via HTTP
3. DNS converts domain → IP address
4. Server processes request
5. Response sent back to browser
6. Webpage displayed

5. Examples 📌
• Upload file using FTP
• Login to remote system using Telnet
• Participate in discussions via Usenet
6. Diagram / Illustration ✏️
Draw in exam:

User (Browser)
↓
Internet
↓
Web Server
↓
Response (Webpage)

🌐 INTERNET PROTOCOLS

1. Definition 🎯
Protocols = Set of rules that govern communication over the internet.

2. Key Protocols ⚡
📡 HTTP (HyperText Transfer Protocol)

• Used for web pages transfer

• Works on port 80
• Stateless protocol
📂 FTP (File Transfer Protocol)

• Used for file uploading/downloading

• Works on port 21
• Requires authentication

📧 SMTP (Simple Mail Transfer Protocol)

• Used for sending emails

• Works on port 25
• Only for sending (not receiving)

3. Important Points 💡
• HTTP → Web browsing
• FTP → File transfer
• SMTP → Email sending

Memory Trick:

“HFS = Web, File, Send Mail”

4. Process (Protocol Working) 🔄

HTTP Flow:

1. Client sends request

2. Server responds
 3. Connection closes

FTP Flow:

1. User login
2. File transfer
3. Logout

SMTP Flow:

1. Compose mail
2. Send via SMTP server
3. Delivered to receiver

5. Examples 📌
• Opening website → HTTP
• Uploading project → FTP
• Sending email → SMTP

6. Diagram ✏️
Client → Protocol → Server
(HTTP / FTP / SMTP)
1. Definition / Introduction 🎯
World Wide Web (WWW) = System of interlinked web pages accessed via Internet using
browsers.

Works on HTTP + Web Browsers + Web Servers

Information in form of HTML pages

2. Key Concepts ⚡
🌐 ELEMENTS OF WEB

• WEB PAGE → Single document (HTML)

• WEB SITE → Collection of pages
• URL → Address of resource
• WEB SERVER → Stores & serves pages
• WEB BROWSER → Access & display pages

🌐 WEB BROWSER & ARCHITECTURE

• USER INTERFACE → Address bar, buttons

• RENDERING ENGINE → Displays HTML/CSS
• NETWORKING → Handles HTTP requests
• JS ENGINE → Executes JavaScript
• STORAGE → Cookies, cache

Shortcut:
 “URNJS” = UI, Rendering, Networking, JS, Storage

🌐 WEB SERVER

• Stores web pages

• Responds to client requests
• Uses HTTP protocol

🌐 PROXY SERVER

• Acts as INTERMEDIATE between client & server

• Improves SECURITY + SPEED
• Used for filtering & caching

🌐 MICROSOFT INTERNET EXPLORER

• Early popular WEB BROWSER

• Supports HTML, CSS, JS
• Used for browsing, email, news, chat

🌐 BROWSER USAGE

• VIEW PAGES → Open websites

• MAIL → Send/receive emails
• NEWS → Access newsgroups
• CHAT → Online communication
3. Important Points / Characteristics 💡
• WWW is SERVICE over Internet
• Uses CLIENT–SERVER MODEL
• Browser = Client, Server = Host
• Proxy adds CONTROL + SECURITY

Memory Trick:

“BSPP”

(Browser, Server, Proxy, Pages)

4. Step-by-Step (Working of WWW) 🔄

1. Enter URL in browser
2. Browser sends HTTP request
3. Server processes request
4. Response sent back
5. Browser renders page

5. Examples 📌
• Opening Google → Web page
• Using browser chat → Messaging
• Sending email via browser → Mail service
6. Diagram / Illustration ✏️
Draw:

Client (Browser)
↓
Proxy Server (optional)
↓
Web Server
↓
Web Page Response

🔐 SECURITY & PRIVACY ISSUES

1. Definition 🎯
Security & Privacy = Protection of data and user identity on web.

2. Key Concepts ⚡
🍪 COOKIES

• Small data stored in browser

• Track user activity
• Used for login/session
🔥 FIREWALL

• Security barrier between networks

• Blocks unauthorized access

🔒 DATA SECURITY

• Protects data from theft & misuse

• Uses encryption

⚙️ EXECUTABLE APPLETS & SCRIPTS

• Programs run in browser

• Can be useful or harmful

🚫 BLOCKING SYSTEM

• Blocks ads, pop-ups, harmful sites

• Improves security

3. Important Points 💡
• Cookies can affect privacy
• Firewalls ensure network safety
• Scripts may cause security risks

Memory Trick:

“CFDSB”
(Cookies, Firewall, Data, Scripts, Blocking)

4. Process (Basic Security Flow) 🔄

1. User sends request
2. Firewall checks traffic
3. Server responds securely
4. Browser stores cookies
5. Blocking filters harmful content

5. Examples 📌
• Login site remembers user → Cookies
• Antivirus blocks attack → Firewall
• Ad blocker stops ads → Blocking system

6. Diagram ✏️
User → Firewall → Internet → Server
↓
Security Check
💻🔥 UNIT–II : HTML FUNDAMENTALS 🔥💻

1. Definition / Introduction 🎯
HTML (HyperText Markup Language) = Standard language used to create and structure
web pages.

Uses TAGS to define content

Backbone of every website

2. Key Concepts ⚡
🧩 HTML ELEMENTS

• TAG + CONTENT = ELEMENT

• Example: <p>Hello</p>

🧠 HTML SEMANTICS

• Meaningful tags
• Improves SEO + readability
• Examples:
o <article>, <header>, <footer>

📄 HTML5 DOCTYPE

• Declares HTML version

• Syntax: <!DOCTYPE html>

🏗️ NEW STRUCTURE TAGS

• <section> → Section of page

• <nav> → Navigation links
• <article> → Independent content
• <aside> → Side content
• <header> → Top part
• <footer> → Bottom part

Memory Trick:
 “SNAASHF”

(Section, Nav, Article, Aside, Header, Footer)

🏷️ HTML ATTRIBUTES

• Provide extra info

• Written inside tag
• Example: href, class, id

🔤 BASIC TAGS

• HEADINGS → <h1> to <h6>

• PARAGRAPH → <p>
• STYLE → Inline styling
• QUOTATION → <blockquote>
• BLOCKS → <div>, <span>
• CLASSES → Group elements

📐 LAYOUT & IFRAME

• LAYOUT → Page structure using <div>

• IFRAME → Embed another page

3. Important Points / Characteristics 💡

• HTML is NOT a programming language
• Case-insensitive (but use lowercase)
• Tags mostly come in PAIRS
 • Structure = HEAD + BODY

Memory Trick:

“HTBS”

(Head, Tags, Body, Structure)

4. Step-by-Step (Creating HTML Page) 🔄

1. Open text editor
2. Write basic structure
3. Add content using tags
4. Save as .html
5. Open in browser

5. Examples 📌
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is HTML</p>
</body>
</html>
6. Diagram / Illustration ✏️
Draw structure:

<html>
<head>
</head>
<body>
</body>
</html>

🔗 ADVANCED HTML FEATURES

1. HYPERLINKS 🌐
• Connect pages
• Tag: <a href="url">Link</a>

2. HORIZONTAL RULE & GRAPHICS 🎨

• <hr> → Line separator
• Images → <img src="[Link]">
3. HTML TABLES 📊
• <table> → Table
• <tr> → Row
• <td> → Data

Trick:

“TRD” = Table Row Data

4. HTML FORMS 📝
• Collect user input
• Tags:
o <form>
o <input>
o <textarea>
o <button>

5. Important Points 💡
• Forms used for LOGIN / SIGNUP
• Tables for data display
• Links for navigation

Memory Trick:

“LTF”

(Links, Tables, Forms)

6. Examples 📌
• Click link → opens page
• Login form → user input
• Table → marks list

1. Definition / Introduction 🎯
HTML Image Techniques & Website Development = Methods to display images in web
pages and process of creating, designing, and publishing a website.

Focus = VISUAL + STRUCTURE + PLANNING

2. Key Concepts ⚡
🖼️ HTML IMAGE TECHNIQUES

• <img> tag → Display image

• src → Image path
• alt → Alternative text (important )
• width / height → Size control
• align / style → Positioning

Example:

<img src="[Link]" alt="Sample" width="200">

📄 HTML PAGE

• Basic unit of website

• Built using HTML structure
• Contains:
o Text
o Images
o Links
o Forms

🌍 WEBSITE DEVELOPMENT

• Process of creating full website

• Includes:
o Planning
o Design
o Development
o Publishing

🧭 PLANNING

• Decide:
o Purpose
o Target users
o Content

🧭 NAVIGATION

• How users move in site

• Use:
o Menus
o Links
🎨 THEMES

• Overall design style

• Includes:
o Colors
o Fonts
o Layout

🧱 ELEMENTS OF WEB PAGE

• Header → Top section

• Content → Main data
• Sidebar → Extra info
• Footer → Bottom section

Memory Trick:

“HCSF” (Header, Content, Sidebar, Footer)

3. Important Points / Characteristics 💡

• Images improve VISUAL APPEAL
• Use ALT attribute for accessibility
• Good navigation = User Friendly
• Theme should be consistent

Memory Trick:

“VAN”

(Visual, Accessibility, Navigation)

4. Step-by-Step (Creating Website) 🔄
1. Planning → Define purpose
2. Design → Layout & theme
3. Development → Create HTML pages
4. Testing → Check errors
5. Publishing → Upload to server
6. Publicizing → Promote website

5. Examples 📌
• Blog site → Articles + images
• College site → Info + navigation menu
• E-commerce → Products with images

6. Diagram / Illustration ✏️
Draw page layout:

---------------------
| HEADER |
---------------------
| CONTENT | SIDEBAR |
---------------------
| FOOTER |
---------------------
🌐 STRUCTURING WEBSITE

1. Key Concepts ⚡
• LINEAR STRUCTURE → Page → Next page
• HIERARCHICAL → Tree structure
• NETWORK → Interconnected pages

2. Important Points 💡
• Hierarchical = Most common
• Structure affects:
o Navigation
o User experience

Memory Trick:

“LHN”

(Linear, Hierarchical, Network)

🎨🔥 UNIT–III : CASCADING STYLE SHEETS
(CSS) 🔥🎨

1. Definition / Introduction 🎯
CSS (Cascading Style Sheets) = Language used to style and design HTML web pages.

Controls COLOR, LAYOUT, FONTS, SPACING

Makes web pages ATTRACTIVE + RESPONSIVE

2. Key Concepts ⚡
🎨 UNDERSTANDING STYLE SHEETS

• Separates CONTENT (HTML) from DESIGN (CSS)

• Improves:
o Readability
o Reusability
o Maintenance

🧾 CSS SYNTAX

selector {
property: value;
}

• Selector → Target element

• Property → What to change
• Value → How to change

Example:

p {
color: red;
}

🔗 APPLYING CSS TO HTML

🟢 INLINE CSS

• Inside HTML tag

• Example:

<p style="color: blue;">Text</p>

🟡 INTERNAL CSS

• Inside <style> tag (in <head>)

<style>
p { color: green; }
</style>

🔵 EXTERNAL CSS ⭐ (MOST IMPORTANT)

• Separate .css file

<link rel="stylesheet" href="[Link]">

Memory Trick:

“IIE”

(Inline, Internal, External)

🎯 CSS SELECTORS

• Used to select HTML elements

Types:

• ELEMENT SELECTOR → p, h1
• CLASS SELECTOR → .className
• ID SELECTOR → #idName
• GROUP SELECTOR → h1, p

Memory Trick:

“ECIG”

(Element, Class, ID, Group)

3. Important Points / Characteristics 💡

• CSS follows CASCADE RULE (priority order):

INLINE > INTERNAL > EXTERNAL

• ID > Class > Element (priority)

• External CSS = BEST PRACTICE

Memory Trick:

“ICE” Priority

(Inline > Internal > External)

4. Step-by-Step (Applying CSS) 🔄

1. Create HTML page
2. Choose CSS type (Inline/Internal/External)
3. Write CSS rules
4. Link or apply CSS
 5. Open in browser → View styled page

5. Examples 📌
• Change text color → CSS property
• Apply same style to multiple pages → External CSS
• Highlight specific element → ID selector

6. Diagram / Illustration ✏️
Draw relation:

HTML (Structure)
↓
CSS (Design)
↓
Styled Web Page
1. Definition / Introduction 🎯
CSS Styling & Layout = Techniques to design, format, and arrange web page content
using CSS and frameworks.

Focus = LOOK + LAYOUT + RESPONSIVENESS

2. Key Concepts ⚡
🧱 <DIV> TAG

• Block-level container
• Used for grouping elements
• Works with CSS for layout

Example:

<div class="box">Content</div>

🏷️ USING CLASS & ID

• CLASS (.class) → Used for multiple elements

• ID (#id) → Unique element

Example:

.box { color: blue; }

#main { background: yellow; }

Memory Trick:

“C = Common, I = Individual”
🎨 STYLING BACKGROUNDS

• background-color
• background-image
• background-repeat

🟫 STYLING BORDERS

• border-width
• border-style
• border-color

🔤 STYLING TEXT

• color
• text-align
• text-decoration

🔡 STYLING FONTS

• font-family
• font-size
• font-weight

🔗 STYLING LINKS

• States:
o :link
o :hover
 o :visited
o :active

Trick:

“LoVe HAte”

(Link, Visited, Hover, Active)

📋 STYLING LISTS

• list-style-type
• list-style-position

📊 STYLING TABLES

• border
• padding
• text-align

📏 MARGIN

• Space outside element

• Controls layout spacing

📦 FLEXBOX

• One-dimensional layout
• Align items in row/column
🧱 GRID

• Two-dimensional layout
• Rows + Columns

Memory Trick:

“FLEX = 1D, GRID = 2D”

3. Important Points / Characteristics 💡

• <div> used for layout building
• Class reusable, ID unique
• Flex = simple alignment
• Grid = complex layout

Memory Trick:

“DCS FMG”

(Div, Class, Style, Flex, Margin, Grid)

4. Step-by-Step (Designing Layout) 🔄

1. Use <div> to divide page
2. Assign class/ID
3. Apply CSS styles
4. Use Flex/Grid for layout
5. Adjust margin & spacing
5. Examples 📌
• Navbar → Flexbox
• Page layout → Grid
• Highlight section → ID
• Repeated style → Class

6. Diagram / Illustration ✏️
Flex vs Grid:

Flex → [ Item Item Item ] (Row/Column)

Grid →
[ Item | Item ]
[ Item | Item ]

🚀 BOOTSTRAP & CMS

1. Bootstrap 🎯
• CSS framework
• Used for responsive design
• Provides:
o Predefined classes
o Grid system
 Example:

<div class="container">Content</div>

2. CMS (Content Management System)

• Tool to create/manage websites without coding

📦 BANKS OF CMS

• Collection of CMS platforms

Examples:

• Joomla
• WordPress

3. Joomla / WordPress Installation ⚙️

1. Download CMS
2. Setup server (XAMPP etc.)
3. Install CMS
4. Configure database
5. Start designing site
4. Website Design & Development 🌐
🧭 DESIGN

• Layout
• Colors
• Theme

⚙️ DEVELOPMENT

• HTML + CSS + Content

5. Important Points 💡
• Bootstrap = Fast design
• CMS = No coding required
• WordPress = Most popular

Memory Trick:

“BCW”

(Bootstrap, CMS, WordPress)

⚡🔥 UNIT–IV : JAVASCRIPT FUNDAMENTALS
& CONTROL FLOW 🔥⚡

1. Definition / Introduction 🎯
JavaScript (JS) = Client-side scripting language used to make web pages interactive and
dynamic.

Runs in browser

Adds logic + behavior

2. Key Concepts ⚡
📜 SCRIPTING LANGUAGE

• Executes line-by-line instructions

• Used for:
o Validation
o Interactivity
o Calculations

💻 CLIENT-SIDE SCRIPTING

• Runs on user’s browser

• Faster response
• No need to contact server every time

🧠 MEMORY CONCEPTS

• Variables store data

• Stored in RAM during execution
• Types:
o Number
o String
o Boolean

➕ ARITHMETIC & DECISION MAKING

• Operators:
o + - * / %
 • Decision:
o if, if-else, switch

🔁 CONTROL STRUCTURES

• Looping:
o for
o while
o do-while

Trick:

“FWD”

(For, While, Do-while)

⚙️ JAVASCRIPT FUNCTIONS

• Block of reusable code

• Defined using function

Example:

function add(a, b) {
return a + b;
}

📢 JS POPUP BOXES

• alert() → Show message

• confirm() → OK/Cancel
• prompt() → Input from user
 Trick:

“ACP”

(Alert, Confirm, Prompt)

🖱️ EVENTS

• Action triggered by user

• Examples:
o onclick
o onmouseover
o onload

🧩 PROGRAM MODULES

• Dividing program into functions/modules

• Improves:
o Readability
o Reusability

🧾 FUNCTION DEFINITIONS & IDENTIFIERS

• Identifiers = Names of variables/functions

• Rules:
o Cannot start with number
o No spaces

⏳ DURATION OF IDENTIFIERS

• Lifetime of variable
 • Exists until:
o Function ends
o Page reloads

🌍 SCOPE RULES

• LOCAL SCOPE → Inside function

• GLOBAL SCOPE → Whole program

Trick:

“LG” (Local, Global)

🔄 CONTROLLING PROGRAM FLOW

• Decision + loops control execution

• Based on:
o Conditions
o Iterations

3. Important Points / Characteristics 💡

• JS = Client-side dynamic language
• Functions = Reusable blocks
• Events = User interaction
• Scope controls variable access

Memory Trick:

“VFECS”

(Variables, Functions, Events, Control, Scope)

4. Step-by-Step (JS Execution) 🔄
1. Write JS code
2. Browser loads page
3. JS executes line-by-line
4. Events trigger actions
5. Output displayed

5. Examples 📌
• Click button → alert shows
• Form validation → JS checks input
• Loop → print numbers

6. Diagram / Illustration ✏️
Draw flow:

User Action → Event → JS Code → Output

1. Definition / Introduction 🎯
Advanced JavaScript = Concepts used to build interactive, secure, and dynamic web
applications.
 Focus = Logic + Interaction + Validation + Security

2. Key Concepts ⚡
🔁 RECURSION

• Function calling itself

• Used for repeated tasks

Example:

function fact(n){
if(n==1) return 1;
return n * fact(n-1);
}

Trick:

“Function calls itself”

🌍 JAVASCRIPT GLOBAL FUNCTIONS

• Built-in functions available everywhere

• Examples:
o parseInt()
o parseFloat()
o isNaN()
o eval()
📦 ARRAYS HANDLING

• Collection of values
• Indexed (start from 0)

Example:

let arr = [10,20,30];

• Operations:
o Access → arr[0]
o Add → push()
o Remove → pop()

🧱 JAVASCRIPT OBJECT MODEL (DOM)

• Represents HTML as tree structure

• Allows:
o Access elements
o Modify content

Example:

[Link]("demo").innerHTML="Hello";

📝 DEVELOPING INTERACTIVE FORMS

• Use JS to:
o Take input
o Respond to user
• Example:
o Login form
o Registration form
✅ VALIDATION OF FORMS

• Checks user input before submission

Types:

• Required field
• Email format
• Number check

Trick:

“REN”

(Required, Email, Number)

🍪 COOKIES IN JAVASCRIPT

• Store small data in browser

• Used for:
o Login session
o User preferences

🔐 JAVASCRIPT SECURITY

• Protect from:
o Unauthorized access
o Malicious scripts

Includes:

• Input validation
• Secure coding
🖼️ CONTROLLING FRAMES

• Frames = Divide page into sections

• JS controls:
o Load content
o Switch frames

⚙️ CLIENT-SIDE JS CUSTOM

• Custom scripts for:

o Dynamic content
o UI changes
• Runs in browser

3. Important Points / Characteristics 💡

• Recursion used for complex repetition
• DOM = Most important
• Validation prevents wrong data
• Cookies store user data

Memory Trick:

“RADFC”

(Recursion, Array, DOM, Forms, Cookies)

4. Step-by-Step (Form Validation) 🔄
1. User enters data
2. JS checks conditions
3. If valid → Submit
4. If invalid → Show error

5. Examples 📌
• Factorial → Recursion
• List of marks → Array
• Change text → DOM
• Login form → Validation
• Remember user → Cookies

6. Diagram / Illustration ✏️
DOM Structure:

HTML
↓
DOM Tree
↓
JavaScript Access & Modify
All the Best...