📘 HTML

💡 What is HTML?

HTML = HyperText Markup Language
It is the standard language used to create web pages.
Every Internet Banking page, KYC form, UPI info page, CBDC (Digital Rupee) info portal, NPCI website → built using HTML + CSS + JavaScript.

Tiny Text Diagram

User Browser  ➡  Reads HTML Code  ➡  Shows Web Page (Internet Banking, KYC Form etc.)

👉 One-line formula:
HTML = Structure of Web Page (skeleton)
CSS = Design
JavaScript = Behaviour (actions)

📚 CHAPTER 1 – Basics of HTML

1.1 Meaning & Purpose

HTML: A markup language (not a programming language).
Uses tags like <html>, <body>, <p>, <a>, etc.
Browser reads tags and displays:
- Text
- Images
- Links
- Forms (login, KYC, loan application)

1.2 Where HTML is Used in Banking?

✔ Net Banking login page
✔ KYC / CKYC / Customer Update forms
✔ Online Loan Application forms
✔ CBDC / Digital Rupee info pages
✔ UPI / NPCI information & FAQs

1.3 HTML File Basics

File extension: .html or .htm
Example filename:
- index.html – default home page
- kyc-form.html – KYC form page

📚 CHAPTER 2 – Structure of an HTML Page

2.1 Basic Skeleton

<!DOCTYPE html>
<html>
  <head>
    <title>Bank of XYZ - Net Banking</title>
  </head>
  <body>
    <h1>Welcome to Net Banking</h1>
    <p>Login to view your account.</p>
  </body>
</html>

2.2 Important Parts

<!DOCTYPE html>
- Tells browser this is HTML5 document.
<html>...</html>
- Root element for full page.
<head>...</head>
- Contains title, metadata, CSS links, scripts.
<title>...</title>
- Name shown on browser tab.
<body>...</body>
- Everything visible to user on the page.

👉 Mnemonic:
H T B = Head – Title – Body → page skeleton order (inside <html>).

📚 CHAPTER 3 – Tags, Elements & Attributes

3.1 Tag, Element, Attribute – Simple

Tag: Keyword in angle brackets
- Example: <p>, </p>, <h1>.
Element: Complete structure
- Example: <p>Welcome</p>.
Attribute: Extra information inside opening tag
- Example: <img src="logo.png" alt="Bank Logo">
- Here: src, alt are attributes.

3.2 Types of Tags

Type	Meaning	Example
Paired tags	Opening + Closing	`<p>...</p>`
Empty tags	No closing tag, self-contained	`<br>`, `<img>`, `<hr>`

📚 CHAPTER 4 – Common HTML Tags

4.1 Heading & Paragraph

Headings: <h1> to <h6>
- <h1> = biggest, <h6> = smallest
Paragraph: <p>...</p>

Example (bank site):

<h1>Bank of Baroda</h1>
<h2>Digital Rupee (e₹) Information</h2>
<p>Know more about RBI's Central Bank Digital Currency.</p>

4.2 Links (Anchor Tag)

Tag: <a>...</a>
Key attribute: href

<a href="https://www.rbi.org.in">Visit RBI Website</a>

Can open in new tab:

<a href="https://www.npci.org.in" target="_blank">NPCI</a>

4.3 Images

Tag: <img>
Important attributes: src, alt

<img src="bob_logo.png" alt="Bank of Baroda Logo">

alt text is read by screen readers → accessibility.

4.4 Lists

Unordered list (bullets): <ul> + <li>
Ordered list (numbered): <ol> + <li>

<ul>
  <li>Internet Banking</li>
  <li>Mobile Banking</li>
  <li>UPI Services</li>
</ul>

4.5 Table (Useful in Banking Data)

<table>
  <tr>
    <th>Account No</th>
    <th>Balance (₹)</th>
  </tr>
  <tr>
    <td>123456</td>
    <td>50,000</td>
  </tr>
</table>

Tags:
- <table> – table container
- <tr> – table row
- <th> – table header (bold, centered)
- <td> – table cell (data)

4.6 Div & Span

<div>: Block-level container (full line).
Used for sections like header, footer, and content.
<span>: Inline container.
Used for styling small portion inside text.

<div>
  <h2>Net Banking</h2>
  <p>Welcome, <span>Raj Kumar</span></p>
</div>

📚 CHAPTER 5 – Attributes & Formatting

5.1 Common Attributes

Attribute	Use	Example
id	Unique identifier	`<div id="header">`
class	Grouping for CSS styling	`<p class="warning">Alert!</p>`
style	Inline CSS	`<p style="color:red;">Error</p>`
title	Tooltip text on hover	`<abbr title="Know Your Customer">KYC</abbr>`
href	Link URL	`<a href="...">`
src	Image or script source	`<img src="...">`
alt	Alternate text for image	`<img alt="Logo">`

👉 Mnemonic:
I C S T = id, class, style, title → most common general attributes.

📚 CHAPTER 6 – Forms in HTML

👉 Used for:
✔ Net Banking Login
✔ KYC / Re-KYC forms
✔ Online Loan Application
✔ Credit Card Application
✔ Digital Rupee registration / trial forms

6.1 Basic Form Structure

<form action="/submitKYC" method="post">
  <label>Name:</label>
  <input type="text" name="customerName">
  
  <label>Mobile:</label>
  <input type="tel" name="mobile">

  <input type="submit" value="Submit KYC">
</form>

<form>: Wraps the whole form.
- action: Where data goes (server URL).
- method: Usually GET or POST.
<input>: Field for user.

6.2 Common Input Types

Input Type	Use in Banking
`text`	Name, address, branch name
`password`	Net banking password
`email`	Customer email
`tel`	Mobile number
`number`	Amount, age, income
`date`	DOB, KYC update date
`checkbox`	Agree to terms, select services
`radio`	Gender, account type, “Resident/Non-Resident”
`submit`	Submit form button

👉 Exam Tip:
Forms are the main connection between HTML front-end and banking server back-end.

📚 CHAPTER 7 – HTML5 & Semantic Elements

7.1 What is HTML5?

Latest major version of HTML.
Supports:
- Audio/Video tags
- Semantic tags
- Better support for mobile & responsive design.

7.2 Semantic Tags

Used for meaningful page structure (helpful in large portals like banks, RBI, NPCI).

Tag	Use
`<header>`	Top section (logo, nav)
`<nav>`	Navigation links
`<section>`	Section of content
`<article>`	Independent content piece
`<footer>`	Bottom (contact, copyright)

Example:

<header>Bank of XYZ</header>
<nav>Home | Digital Rupee | Loans</nav>
<section>
  <h2>Digital Rupee (e₹)</h2>
  <p>CBDC information for customers.</p>
</section>
<footer>© Bank of XYZ</footer>

📚 CHAPTER 8 – Advantages, Limitations, Risks

8.1 Advantages of HTML

✔ Simple & easy to learn
✔ Open standard, works on all browsers
✔ No license cost
✔ Essential for any digital banking portal, government site, RBI/NPCI site

8.2 Limitations of HTML

❌ Only structure, no advanced design (needs CSS)
❌ No complex logic (needs JavaScript / backend language)
❌ Static by default (needs server-side for dynamic data like balance details)

8.3 Security & Risks

HTML alone is not secure – it is just front-end.
Sensitive banking actions require:
- HTTPS (TLS encryption)
- Server-side validations
- Input validation to avoid attacks (e.g., XSS)
Phishing sites can copy HTML of real bank websites to fool users.

👉 Key Point:
HTML is only the “face”; security depends mainly on server, HTTPS, and coding practices.

🔥 Most Important

HTML = HyperText Markup Language → used to create web pages.
HTML is a markup language, not a programming language.
Basic structure: <!DOCTYPE html>, <html>, <head>, <title>, <body>.
Common tags:
- Headings: <h1>–<h6>
- Paragraph: <p>
- Link: <a href="...">
- Image: <img src="..." alt="...">
- List: <ul>, <ol>, <li>
- Table: <table>, <tr>, <th>, <td>
Form tags: <form>, <input>, <label>, type="text/password/email/submit"...
Important attributes: id, class, style, href, src, alt, title.
HTML5 → Semantic tags: <header>, <nav>, <section>, <article>, <footer>.
Used in banking: net banking, KYC forms, loan applications, CBDC/Digital Rupee info pages.
HTML alone cannot provide security; needs HTTPS + server-side controls.
HTML + CSS + JavaScript = Complete web experience.

🧾 Full Summary

✅ Chapter 1 – Basics

HTML = language to create web pages.
Every banking web interface is built with HTML.

✅ Chapter 2 – Structure

HTML document structure: Doctype → html → head → body.
Head = metadata, Body = what user sees.

✅ Chapter 3 – Tags & Elements

Tag, Element, Attribute concepts.
Paired tags & empty tags.

✅ Chapter 4 – Common Tags

Headings, paragraphs, links, images, lists, tables, div/span.
Very exam-friendly tag questions.

✅ Chapter 5 – Attributes & Formatting

Important attributes: id, class, style, href, src, alt, title.
Used to identify and style elements and create links/images.

✅ Chapter 6 – Forms

Forms critical for online banking transactions.
Input types for collecting user data.

✅ Chapter 7 – HTML5 & Semantic Tags

HTML5 is modern; supports semantic tags.
Semantic tags improve structure and accessibility for large sites (like RBI/NPCI portals).

✅ Chapter 8 – Advantages & Risks

HTML is simple, universal, free.
But security and dynamic behaviour depend on other technologies.

📊 Visual Summary

1️⃣ Overview

Topic	Key Points
HTML	HyperText Markup Language, builds web pages
Role	Structure of page (text, images, forms, tables)
Used in	Net banking, KYC, loan apps, CBDC info, NPCI sites

2️⃣ Basic Structure Tags

Tag	Meaning	Example Use
`<!DOCTYPE html>`	Declares HTML5	First line of document
`<html>`	Root element	Wraps whole page
`<head>`	Metadata, CSS, scripts	`<title>`, `<meta>`, `<link>`
`<title>`	Browser tab title	“Bank of XYZ – Net Banking”
`<body>`	Page content	All visible elements

3️⃣ Common Tags & Usage

Tag	Purpose	Banking Example
`<h1>`	Main heading	Bank name, portal title
`<p>`	Paragraph	Instructions, notices
`<a>`	Link	Link to RBI, NPCI, fee chart
`<img>`	Show image	Bank logo, product icons
`<ul>/<ol>`	Lists	Features, benefits, required documents
`<table>`	Tabular data	Interest rate table, charges table
`<div>`	Section container	Header, content, footer division
`<span>`	Inline styling	Highlighted word within a sentence

4️⃣ Forms & Inputs

Tag/Attribute	Purpose	Example
`<form>`	Wraps form fields	KYC, login form
`action`	Target URL	`/submitLogin`
`method` (`GET/POST`)	Request type	Sensitive data → usually POST
`<input type="text">`	Text fields	Name, branch
`<input type="password">`	Password field	Net banking password
`<input type="submit">`	Submit button	“Login”, “Submit KYC”

5️⃣ HTML5 Semantic Tags

Tag	Meaning	Example
`<header>`	Top of page	Bank name + logo
`<nav>`	Navigation links	Home, Accounts, Loans
`<section>`	Page section	Digital Rupee info block
`<article>`	Independent piece	Blog/news item
`<footer>`	Bottom section	Copyright, contact info

⏳ Revision Sheet

🧠 Core Concepts (Remember These Lines)

HTML stands for HyperText Markup Language.
It defines the structure of web pages using tags.
HTML is used in all banking web portals – login, KYC, loan, Digital Rupee info, NPCI pages.
Not a programming language, but a markup language.

🧩 Key Structure

Main skeleton: <!DOCTYPE html> → <html> → <head> → <title> → <body>
Head: invisible info (title, CSS, scripts).
Body: visible content.

📝 Forms (Very Banking-Relevant)

<form action="..." method="post"> → form start
<input type="text"> → customer name
<input type="password"> → password
<input type="number"> → amount, income
<input type="submit" value="Login"> → submit button

👉 Used in Net Banking login, KYC, loan applications, Digital Rupee enrolment etc.

🏷️ Common Attributes

id – unique element ID
class – group for styling
href – link target
src – image/script source
alt – alternative text for images
style – inline CSS style

🌐 HTML5 & Semantic Tags

HTML5 → latest standard.
Semantic tags: <header>, <nav>, <section>, <article>, <footer>.
Used in large sites like RBI, NPCI, bank portals for clear structure.

⚖️ Advantages vs Limitations (One-Liners)

✔ Simple, free, universal, essential for web.
❌ No complex logic, no design by itself, no security by itself.

👉 Security in banking comes mainly from HTTPS, backend validation, and secure coding – not from HTML alone.

📘 JAVASCRIPT

💡 What is JavaScript?

JavaScript (JS) is a client-side scripting language used to make web pages interactive, dynamic, and responsive.
Works along with:
- HTML → Structure
- CSS → Design
- JavaScript → Action/Behaviour

👉 Super Simple Definition:
JavaScript allows a web page to react, calculate, validate, change content, and interact with users without reloading the entire page.

📍 Example Diagram (Text-Based)

HTML (Structure)
        +
CSS (Design)
        +
JavaScript (Action / Logic / Interaction)
                ➡ Modern Web Apps (Net Banking, UPI portals, KYC forms, CBDC dashboards)

📚 CHAPTER 1 — Key Concepts & Basics

1.1 Why JavaScript?

✔ Makes websites interactive
✔ Validates input data in forms (e.g., KYC / Login)
✔ Used in online banking dashboards
✔ Provides real-time updates, without page reload
✔ Makes front-end + back-end communication easier

1.2 Features of JavaScript

Lightweight & Fast
Interpreted language (executed line-by-line in browser)
Event-driven programming
Supports OOP (Object-Oriented Programming concepts)
Runs on browsers, servers (Node.js), databases, apps, IoT

📚 CHAPTER 2 — Where JavaScript is Used

Use Case in Banking & Finance	Benefit using JavaScript
Net Banking Login validation	Prevent wrong inputs before sending to server
Digital payment dashboards	Live transaction updates
KYC / Loan application form checks	Field validation (PAN, mobile, email)
Trading / stock market charts	Real-time graph updates
Chatbots	Fast interactions without reload
CBDC / Digital Rupee portals	Instant wallet balance refresh
AML / Fraud monitoring dashboards	Auto alerts & UI updates

📚 CHAPTER 3 — Syntax and Fundamentals

Basic Example

document.write("Welcome to Net Banking Portal");

Variables

Store values (data)

let amount = 5000;
const bankName = "BOB";
var accountNo = 12345;

Data Types

String, Number, Boolean, Array, Object, Null, Undefined

Operators

Type	Example
Arithmetic	`+ - * / %`
Comparison	`== != === > < >= <=`
Logical	`&&` `

Functions

Reusable blocks of code

function greet(){
  alert("Welcome to Internet Banking");
}

Events

Execute code on user actions

Event	Explanation	Example
`onclick`	Click event	Button click
`onchange`	Field input change	KYC field validation
`onload`	Page load	Show welcome popup

Example:

<button onclick="alert('KYC Submitted')">Submit</button>

DOM Manipulation

(Changing website content dynamically)

document.getElementById("balance").innerHTML = "₹50,000";

📚 CHAPTER 4 — Advantages & Limitations

Advantages

✔ Fast execution inside browser
✔ Excellent user experience (no full reload)
✔ Reduces server load
✔ Can run on server as well via Node.js
✔ Highly used in digital banking front-end

Limitations

❌ Client-side scripts can be visible and modifiable
❌ Needs security precautions
❌ Browser dependency
❌ Cannot directly access databases without backend

Security Risks

🚨 Client-side JavaScript can be attacked if not used properly

XSS – Cross Site Scripting
Code injection
Phishing pages copying bank scripts

👉 Solution:
Use HTTPS + Input sanitization + Server validation + Content Security Policy (CSP)

📚 CHAPTER 5 — JavaScript vs HTML vs CSS

Feature	HTML	CSS	JavaScript
Role	Structure	Style	Logic/Interaction
Type	Markup	Styling	Scripting
Example	`<h1>`	`color: red;`	`alert("Hi")`

👉 Memory Trick: H C J = Structure – Style – Action

📚 CHAPTER 6 — JavaScript Frameworks & Libraries

Framework / Library	Use Case
React JS	Banking dashboards, charts, UI apps
Angular	Enterprise web apps, portals
Vue JS	Lightweight apps
Node JS	Server-side JavaScript
D3.js / Chart.js	Graphs for trading & banking analytics

📚 CHAPTER 7 — Latest Trends & Use in India

Technology	Use
CBDC Digital Rupee Wallet UI	Interactive UI built with JS frameworks
UPI / NPCI portals	JavaScript for dynamic transaction status
AI/ML dashboards (SupTech & RegTech)	Real-time charts & monitoring
Neo banking & FinTech apps	JavaScript front-end + Node backend
Trade finance digital portals	Automated workflows

🔥 Most Important for Exams

JavaScript = Scripting language used to create dynamic and interactive web pages
Used for validation, real-time updates, and UI logic
Works with HTML & CSS together
Runs in browsers & servers (Node.js)
Used widely in KYC, AML dashboards, loan systems, CBDC portals
Supports events, functions, and DOM manipulation
Security concern: XSS attacks
Frameworks: React / Angular / Node.js

🧠 Quick Memory Tricks

Concept	Trick
JS purpose	“J = Jumping Webpages” (dynamic pages)
HTML vs CSS vs JS	H=Home, C=Colour, J=Jump Action
DOM Manipulation	Touching page elements

📝 Chapter-Wise Full Summary

Chapter 1

JavaScript makes websites dynamic & interactive; used heavily in digital banking.

Chapter 2

Used for validation, live updates, dashboards, CBDC UI, chatbots.

Chapter 3

Variables, functions, operators, events, DOM.

Chapter 4

Lightweight and fast, but security risks like XSS.

Chapter 5

HTML = body, CSS = dress, JS = brain.

Chapter 6

React/Angular/Node major tools for banking web apps.

Chapter 7

JS essential to modern fintech & regulatory supervision tools.

📊 Visual Summary

One-Page Printable Table

Area	Key Points
Type	Client-side scripting language
Purpose	Create interactivity & logic
Used in Banking	KYC, AML dashboards, Chatbots, Digital Rupee
Core Elements	Variables, Functions, Events, DOM
Key Benefits	Fast, responsive UI
Key Risks	XSS & Injection attacks
Frameworks	React, Angular, Node

⏳ Quick Revision Sheet

🧠 Key Facts

JavaScript = Action language of the web.
Controls buttons, input validation, pop-ups, forms, dashboards.
Used in Net Banking, UPI apps, CBDC wallets, AML analytics.
Works with HTML & CSS.

🎯 Core Concepts to Memorize

Topic	One-Liner
Variable	Stores data
Function	Reusable code
Event	User action trigger
DOM	Modify page elements
Node.js	JavaScript on server
XSS	JavaScript attack risk

📜 Basic Template

<script>
alert("Welcome to Internet Banking");
</script>

Mandatory Remember

⭐ Validation happens first in JavaScript before sending to server.
⭐ Reduces server load & improves user experience.

📘 CSS

💡 What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to design, style, and format the layout of web pages.

👉 Simple Definition:
HTML = Structure | CSS = Design
like Skeleton + Clothes

✔ CSS controls colors, fonts, spacing, layout, responsiveness, animations
✔ Mandatory in Net Banking portals, KYC pages, Digital Rupee dashboards, UPI websites, AML monitoring apps

📍 Text Diagram

HTML (Structure: login form / KYC form)
            +
CSS (Design & Styling: Colors, alignment, button style)
                    ➡ Modern Banking Websites

📚 CHAPTER 1 — Key Concepts & Basics

Why CSS is Needed?

✔ Makes websites beautiful and easy to use
✔ Allows consistent design across all pages
✔ Improves user experience & readability
✔ Helps build responsive mobile-friendly designs
✔ Reduces coding effort (style once & reuse)

CSS Works With

Technology	Purpose
HTML	Structure
CSS	Design & Layout
JavaScript	Action & Interactivity

👉 Memory Trick:
H-C-J = Home, Colour, Jump Action

📚 CHAPTER 2 — Ways to Use CSS

Type	Explanation	Example
Inline CSS	Inside HTML element	`<p style="color:red;">Alert</p>`
Internal CSS	Inside `<style>` tag	`<style> h1{color:blue;} </style>`
External CSS	Separate file `.css`	`<link rel="stylesheet" href="style.css">`

👉 Best Practice in banking systems = External CSS
(used in Net Banking, UPI, CBDC wallets)

📚 CHAPTER 3 — CSS Selectors

Selector	Description	Example
Element	Selects by tag name	`p {color:blue;}`
ID	Unique element	`#loginBtn {background:red;}`
Class	Group styling	`.inputField {padding:10px;}`

📚 CHAPTER 4 — Properties

Text Properties

color, font-size, font-weight, text-align

Box Model

➡ Most common exam topic

Part	Meaning
Content	text/image
Padding	space inside
Border	boundary
Margin	space outside

👉 Formula:
Total space = Margin + Border + Padding + Content

Background

background-color: blue;
background-image: url("bank.jpg");

Layout

Property	Use
`display`	block/inline behavior
`position`	absolute, relative, fixed
`float`	left / right
`flex`	responsive design
`grid`	advanced layout

📚 CHAPTER 5 — Responsive CSS

Used in UPI apps, Digital Rupee dashboards, Net Banking UI
Ensures correct display on mobile / tablet / desktop

@media screen and (max-width:600px){
  h1{font-size:20px;}
}

📚 CHAPTER 6 — Advantages & Limitations

Advantages

✔ Faster page load (one shared stylesheet)
✔ Professional UI & easy maintenance
✔ Responsive mobile support (critical for digital banking)
✔ Better customer experience & accessibility

Limitations

❌ No logic capability (needs JS)
❌ Browser differences may need adjustments
❌ Overuse can slow performance

Security Risks

🚨 CSS alone is safe but can assist phishing page appearance copying
🚨 Can be used to spoof real banking page design

👉 Solution:
✔ Verify HTTPS, ✔ domain authenticity, ✔ secure backend validation

📚 CHAPTER 7 — CSS in Banking

Banking Area	Use of CSS
Net Banking Login UI	Attractive buttons, smooth layout
KYC / CKYC update forms	Input form styling & alignment
Trade Finance portals	Dashboard structure & tables
AML dashboards	Color-coded alerts (red = suspicious)
CBDC Digital Rupee UI	Mobile responsive design
UPI / Wallet apps	Flexbox & grid layouts

Example button used in banking login:

button{
 background-color: #FF5A00; /* Bank of Baroda theme */
 color:white;
 padding:10px;
 border-radius:8px;
}

🔥 Most Important

CSS = Cascading Style Sheets
Used to style web pages (colors, layout, fonts, spacing)
Works with HTML + JavaScript
Three types: Inline, Internal, External (best = External)
Selectors: ID (#), Class (.), Element
Box Model must be remembered
Responsive CSS via @media queries
Used heavily in Net Banking, UPI portals, CBDC dashboards
Not a programming language
No security by itself → needs HTTPS + backend controls

🧠 Quick Memory Tricks

Concept	Trick
CSS purpose	“Makes Webpages Beautiful”
Selector types	I-C-E = ID, Class, Element
Box Model	PMBC = Padding, Margin, Border, Content
H vs C vs JS	Home – Colour – Jump

📝 Chapter-wise Full Summary

Chapter	Summary
Basics	CSS styles web design and improves UI
Types	Inline, Internal, External
Selectors	Element, ID, Class
Properties	Text, Background, Layout, Box Model
Responsive	Used in mobile-compatible banking apps
Pros/Cons	Powerful but needs JS for logic
Banking Use	KYC, UPI, Digital Rupee, AML dashboards

📊 Visual Summary

Item	One-line Explanation
CSS	Styles web pages
File Extension	`.css`
Where used	All digital banking portals
Best method	External CSS
Key exam topic	Box Model
Frameworks	Bootstrap, Tailwind, Material UI
Responsive Unit	@media queries

⏳ Quick Revision Sheet

🧾 Must Know Fast Facts

CSS = Styling / Formatting language
Works with HTML structure & JS logic
Controls colors, spacing, alignment, layout
Box Model = Padding + Border + Margin + Content
Selectors: #id, .class, tag
Use in banking: Net banking UI, KYC pages, CBDC dashboards
Responsive design required for mobile banking
Not for backend or logic

🎯 Quick Example

<link rel="stylesheet" href="style.css">

<style>
h1 { color: blue; text-align:center; }
</style>

🧠 HTML, CSS, JavaScript – 50 MCQs

CHAPTER 1: Web Basics & Overview (HTML + CSS + JS) – 12 MCQs

Q1. HTML in a web application is mainly used for which purpose?
a) Styling web pages
b) Storing data in databases
c) Structuring the content of a web page
d) Executing server-side code
Answer: c) Structuring the content of a web page
Explanation: HTML defines the structure and elements of a web page like headings, forms, tables. 👉 (HIGHLY IMPORTANT)

Q2. CSS in web development is primarily used for:
a) Database connectivity
b) Applying design, layout, and formatting to web pages
c) Handling online transactions
d) Validating server inputs
Answer: b) Applying design, layout, and formatting to web pages
Explanation: CSS controls appearance—colors, fonts, spacing, layout, responsiveness. 👉 (HIGHLY IMPORTANT)

Q3. JavaScript in a banking web portal is mainly used to:
a) Store customer data permanently
b) Provide logic and interactivity on web pages
c) Print passbooks
d) Manage core banking system
Answer: b) Provide logic and interactivity on web pages
Explanation: JavaScript handles actions like form validation, popups, dynamic content, etc. 👉 (HIGHLY IMPORTANT)

Q4. Which of the following correctly matches the roles of HTML, CSS and JavaScript?
a) HTML–Logic, CSS–Database, JS–Design
b) HTML–Design, CSS–Structure, JS–Logic
c) HTML–Structure, CSS–Design, JS–Logic/Interaction
d) HTML–Database, CSS–Security, JS–Printing
Answer: c) HTML–Structure, CSS–Design, JS–Logic/Interaction
Explanation: HTML builds skeleton, CSS beautifies, JavaScript adds behaviour.

Q5. Which combination is most suitable to build an internet banking login page’s front end?
a) HTML + CSS + JavaScript
b) SQL + C
c) Python + Shell Script
d) COBOL + Mainframe JCL
Answer: a) HTML + CSS + JavaScript
Explanation: Front-end interfaces are typically built with HTML, CSS and JS. 👉 (HIGHLY IMPORTANT)

Q6. The correct expansion of CSS is:
a) Cascading Script Sheets
b) Cascading Style Sheets
c) Central Style Sheets
d) Custom Style Scripts
Answer: b) Cascading Style Sheets
Explanation: CSS stands for Cascading Style Sheets.

Q7. Which of the following is true about JavaScript?
a) It is a server-only programming language
b) It runs only inside databases
c) It is primarily a client-side scripting language that runs in browsers
d) It is used only for operating systems
Answer: c) It is primarily a client-side scripting language that runs in browsers
Explanation: JavaScript is mainly executed by the browser on the client side (can also run on server via Node.js).

Q8. In a responsive mobile banking website, CSS is mainly responsible for:
a) Encrypting customer data
b) Adjusting layout for different screen sizes
c) Approving loan proposals
d) Calculating interest
Answer: b) Adjusting layout for different screen sizes
Explanation: CSS (via media queries, flex, grid) handles responsive design.

Q9. Which of the following file extensions is MOST commonly used for HTML files?
a) .css
b) .js
c) .html
d) .java
Answer: c) .html
Explanation: HTML files use .html or .htm as extension.

Q10. Which technology among the following is NOT a core front-end web technology?
a) HTML
b) CSS
c) JavaScript
d) SQL
Answer: d) SQL
Explanation: SQL is used for databases, not front-end design or behaviour. 👉 (HIGHLY IMPORTANT)

Q11. In a Digital Rupee (CBDC) web dashboard, real-time graphs and interactive filters will most likely use:
a) Only HTML
b) HTML + CSS + JavaScript
c) CSS only
d) SQL only
Answer: b) HTML + CSS + JavaScript
Explanation: Structure with HTML, design with CSS, and interactivity with JS.

Q12. For bank’s AML (Anti-Money Laundering) dashboard front-end, which role is correct?
a) HTML styles alerts in red
b) CSS fetches suspicious transaction data
c) JavaScript can highlight suspicious rows based on risk rules
d) SQL changes font color
Answer: c) JavaScript can highlight suspicious rows based on risk rules
Explanation: JS can apply logic to dynamically modify display based on risk values.

CHAPTER 2: HTML – Structure, Tags, Forms & Banking Use – 14 MCQs

Q13. Which HTML tag represents the root element of an HTML document?
a) <head>
b) <body>
c) <html>
d) <root>
Answer: c) <html>
Explanation: All HTML elements are contained within the <html> tag.

Q14. The <head> section of an HTML page usually contains:
a) Actual page content visible to user
b) Bank account statements for download
c) Metadata, title, CSS links, scripts
d) Database connection information
Answer: c) Metadata, title, CSS links, scripts
Explanation: <head> holds non-visible information like title, styles, and scripts.

Q15. Which tag is used to show the title in the browser tab for a bank’s net banking site?
a) <heading>
b) <title>
c) <tab>
d) <head>
Answer: b) <title>
Explanation: The <title> tag defines the text shown in browser tab. 👉 (HIGHLY IMPORTANT)

Q16. The <body> tag in HTML contains:
a) Only CSS styles
b) Only JavaScript code
c) All the content visible to users on the web page
d) Database code
Answer: c) All the content visible to users on the web page
Explanation: Visible text, images, forms, etc., are inside <body>.

Q17. Which HTML tag is best suited to create a hyperlink to RBI’s website?
a) <link>
b) <href>
c) <a>
d) <url>
Answer: c) <a>
Explanation: The anchor <a> tag is used to create hyperlinks.

Q18. What does the href attribute in an <a> tag specify?
a) Heading style
b) Image source
c) Target URL of the link
d) Font color
Answer: c) Target URL of the link
Explanation: href holds the URL where the link points.

Q19. Which HTML tag is used to display an image such as a bank logo on a login page?
a) <image>
b) <logo>
c) <pic>
d) <img>
Answer: d) <img>
Explanation: <img> is used for embedding images.

Q20. In <img src="logo.png" alt="Bank Logo">, the alt attribute is used to:
a) Set alternate URL
b) Provide alternate text if image doesn’t load
c) Set background color
d) Link to another site
Answer: b) Provide alternate text if image doesn’t load
Explanation: alt is important for accessibility and when image fails to load.

Q21. Which HTML tags are used to create a table for showing interest rate slabs on a bank’s website?
a) <table>, <tr>, <th>, <td>
b) <div>, <span>
c) <ul>, <li>
d) <form>, <input>
Answer: a) <table>, <tr>, <th>, <td>
Explanation: These tags together define table and its rows, headers, and cells. 👉 (HIGHLY IMPORTANT)

Q22. HTML forms used for net banking login or KYC updates are defined using which tag?
a) <input>
b) <form>
c) <div>
d) <table>
Answer: b) <form>
Explanation: <form> groups input fields and sends data to server.

Q23. In an HTML form, which input type is BEST suited for a customer’s password field?
a) <input type="text">
b) <input type="password">
c) <input type="number">
d) <input type="email">
Answer: b) <input type="password">
Explanation: type="password" hides characters while typing. 👉 (HIGHLY IMPORTANT)

Q24. Which attribute of <form> defines how form data is sent to the server in a banking application?
a) style
b) class
c) method
d) name
Answer: c) method
Explanation: method="GET" or method="POST" specifies HTTP method for sending data.

Q25. For sensitive data like login passwords, which form method is usually preferred?
a) GET
b) POST
c) HEAD
d) TRACE
Answer: b) POST
Explanation: POST does not append data in URL and is safer for sensitive data (along with HTTPS).

Q26. Which HTML5 semantic tags are suitable to structure a large bank portal page?
a) <header>, <nav>, <section>, <footer>
b) <h1>, <b>, <i>
c) <up>, <down>, <left>
d) <sem>, <area>
Answer: a) <header>, <nav>, <section>, <footer>
Explanation: These semantic tags give meaningful structure to the page. 👉 (HIGHLY IMPORTANT)

CHAPTER 3: CSS – Styling, Box Model, Layout, Responsiveness – 14 MCQs

Q27. Which HTML tag is used to link an external CSS file to a bank’s website?
a) <style>
b) <script>
c) <link>
d) <css>
Answer: c) <link>
Explanation: <link rel="stylesheet" href="style.css"> connects external CSS file. 👉 (HIGHLY IMPORTANT)

Q28. Which CSS selector is used to style all <p> tags?
a) .p
b) #p
c) p
d) *p
Answer: c) p
Explanation: Using the element name selects all elements of that type.

Q29. In CSS, the # symbol is used to select:
a) A class
b) An ID
c) All elements
d) A pseudo-element
Answer: b) An ID
Explanation: #idName targets an element with that specific id.

Q30. In CSS, .warning refers to:
a) An element with id warning
b) Any element with class warning
c) An HTML tag named warning
d) A CSS file name
Answer: b) Any element with class warning
Explanation: Dot notation .className selects all elements with that class.

Q31. Which CSS property changes the text color of content in KYC form labels?
a) background-color
b) font-style
c) color
d) border-color
Answer: c) color
Explanation: color sets text color.

Q32. The CSS Box Model includes which set of properties in correct order from inside to outside?
a) Margin → Border → Padding → Content
b) Content → Padding → Border → Margin
c) Border → Content → Margin → Padding
d) Content → Margin → Padding → Border
Answer: b) Content → Padding → Border → Margin
Explanation: Box model layers from inside to outside.

Q33. Which CSS property is used to set the space outside the border of an element, for example around a button on a banking site?
a) padding
b) margin
c) border
d) spacing
Answer: b) margin
Explanation: Margin creates space outside the border. 👉 (HIGHLY IMPORTANT)

Q34. To make a “Login” button have rounded corners, which CSS property is used?
a) border-style
b) border-radius
c) corner-style
d) radius-style
Answer: b) border-radius
Explanation: border-radius sets how rounded the corners are.

Q35. Which CSS property is MOST useful for making a horizontal navigation bar for net banking links?
a) display: inline-block;
b) text-decoration: underline;
c) float: none;
d) font-style: italic;
Answer: a) display: inline-block;
Explanation: inline-block allows items to appear horizontally while retaining block features (or flex in modern designs).

Q36. Responsive design for mobile banking websites is mainly achieved using:
a) SQL queries
b) Media queries in CSS
c) HTML comments only
d) XML configuration
Answer: b) Media queries in CSS
Explanation: @media rules adjust styles based on screen size. 👉 (HIGHLY IMPORTANT)

Q37. Which CSS property controls the font size of headings on a bank homepage?
a) font-weight
b) font-size
c) text-size
d) heading-size
Answer: b) font-size
Explanation: font-size sets the size of text.

Q38. To remove the underline from links (e.g., in navigation menu), which CSS property is used?
a) text-decoration: none;
b) font-style: none;
c) border: 0;
d) link-style: off;
Answer: a) text-decoration: none;
Explanation: text-decoration controls underline, overline, etc.

Q39. Which method of applying CSS is the best practice for large banking portals with many pages?
a) Inline CSS
b) Internal CSS
c) External CSS
d) No CSS
Answer: c) External CSS
Explanation: External CSS allows reuse and centralized style control across pages.

Q40. On a risk dashboard, CSS can be used to show high-risk rows in red background using:
a) Database triggers
b) A CSS class with background-color: red;
c) HTML comment
d) Browser settings
Answer: b) A CSS class with background-color: red;
Explanation: A class can be applied to elements to visually emphasize high-risk entries.

CHAPTER 4: JavaScript – Logic, DOM, Validation & Security – 10 MCQs

Q41. Which HTML tag is normally used to include JavaScript code in a web page?
a) <js>
b) <javascript>
c) <script>
d) <code>
Answer: c) <script>
Explanation: <script> tag is used for embedding or linking JS code. 👉 (HIGHLY IMPORTANT)

Q42. Which of the following is a valid JavaScript function definition used in validating a loan form?
a) function validateLoan() { ... }
b) def validateLoan() { ... }
c) fun validateLoan() { ... }
d) proc validateLoan() { ... }
Answer: a) function validateLoan() { ... }
Explanation: function keyword is used to define functions in JavaScript.

Q43. JavaScript can be used on a KYC form to:
a) Store final data in database directly
b) Apply bank policy automatically on server
c) Validate inputs (e.g., mobile, PAN format) before sending to server
d) Change SQL queries in database
Answer: c) Validate inputs (e.g., mobile, PAN format) before sending to server
Explanation: JS performs client-side validation to reduce server load and user errors. 👉 (HIGHLY IMPORTANT)

Q44. The document.getElementById("balance") in JavaScript is used to:
a) Get customer account from database
b) Access an HTML element with id “balance”
c) Open a new browser
d) Change bank’s interest rate
Answer: b) Access an HTML element with id “balance”
Explanation: getElementById is a DOM method to access a specific element.

Q45. Which event is triggered when a user clicks a “Submit” button in a banking form?
a) onload
b) onclick
c) onhover
d) onsubmit
Answer: b) onclick
Explanation: onclick event fires when an element is clicked (form has its own onsubmit).

Q46. A common security risk related to JavaScript in web applications is:
a) Deadlock
b) Cross Site Scripting (XSS)
c) Paging
d) Spooling
Answer: b) Cross Site Scripting (XSS)
Explanation: XSS injects malicious scripts into web pages to steal data or sessions. 👉 (HIGHLY IMPORTANT)

Q47. Which statement about JavaScript and banking applications is MOST correct?
a) JavaScript alone is enough to secure transactions
b) JavaScript is not needed in any banking site
c) JavaScript is mainly for user interface logic and must be combined with secure server-side checks
d) JavaScript automatically encrypts data
Answer: c) JavaScript is mainly for user interface logic and must be combined with secure server-side checks
Explanation: JS improves UX but security depends on backend and HTTPS.

Q48. To show a popup message “KYC submitted successfully” in JavaScript, which function is used?
a) prompt("...")
b) confirm("...")
c) log("...")
d) alert("...")
Answer: d) alert("...")
Explanation: alert() shows a simple popup message to the user.

Q49. Which variable declaration in JavaScript is recommended for a value that must not change, like a fixed GST rate in display?
a) var GST = 18;
b) let GST = 18;
c) const GST = 18;
d) static GST = 18;
Answer: c) const GST = 18;
Explanation: const creates a constant whose value cannot be reassigned.

Q50. In a modern banking web app using React/Angular, JavaScript is used mainly to:
a) Design passbook cover
b) Build component-based, dynamic user interfaces
c) Configure ATMs directly
d) Define RTGS timings
Answer: b) Build component-based, dynamic user interfaces
Explanation: Frameworks like React/Angular are JS-based and used for dynamic UIs in digital banking and fintech portals.

Web Development

📘 HTML

💡 What is HTML?

📚 CHAPTER 1 – Basics of HTML

1.1 Meaning & Purpose

1.2 Where HTML is Used in Banking?

1.3 HTML File Basics

📚 CHAPTER 2 – Structure of an HTML Page

2.1 Basic Skeleton

2.2 Important Parts

📚 CHAPTER 3 – Tags, Elements & Attributes

3.1 Tag, Element, Attribute – Simple

3.2 Types of Tags

📚 CHAPTER 4 – Common HTML Tags

4.1 Heading & Paragraph

4.2 Links (Anchor Tag)

4.3 Images

4.4 Lists

4.5 Table (Useful in Banking Data)

4.6 Div & Span

📚 CHAPTER 5 – Attributes & Formatting

5.1 Common Attributes

📚 CHAPTER 6 – Forms in HTML

6.1 Basic Form Structure

6.2 Common Input Types

📚 CHAPTER 7 – HTML5 & Semantic Elements

7.1 What is HTML5?

7.2 Semantic Tags

📚 CHAPTER 8 – Advantages, Limitations, Risks

8.1 Advantages of HTML

8.2 Limitations of HTML

8.3 Security & Risks

🔥 Most Important

🧾 Full Summary

✅ Chapter 1 – Basics

✅ Chapter 2 – Structure

✅ Chapter 3 – Tags & Elements

✅ Chapter 4 – Common Tags

✅ Chapter 5 – Attributes & Formatting

✅ Chapter 6 – Forms

✅ Chapter 7 – HTML5 & Semantic Tags

✅ Chapter 8 – Advantages & Risks

📊 Visual Summary

1️⃣ Overview

2️⃣ Basic Structure Tags

3️⃣ Common Tags & Usage

4️⃣ Forms & Inputs

5️⃣ HTML5 Semantic Tags

⏳ Revision Sheet

🧠 Core Concepts (Remember These Lines)

🧩 Key Structure

🔤 Important Tags (Tag → Use)

📝 Forms (Very Banking-Relevant)

🏷️ Common Attributes

🌐 HTML5 & Semantic Tags

⚖️ Advantages vs Limitations (One-Liners)

📘 JAVASCRIPT

💡 What is JavaScript?

📍 Example Diagram (Text-Based)

📚 CHAPTER 1 — Key Concepts & Basics

1.1 Why JavaScript?

1.2 Features of JavaScript

📚 CHAPTER 2 — Where JavaScript is Used

📚 CHAPTER 3 — Syntax and Fundamentals

Basic Example

Variables

Data Types

Operators

Functions

Events

DOM Manipulation

📚 CHAPTER 4 — Advantages & Limitations

Advantages

Limitations

Security Risks

📚 CHAPTER 5 — JavaScript vs HTML vs CSS

📚 CHAPTER 6 — JavaScript Frameworks & Libraries

📚 CHAPTER 7 — Latest Trends & Use in India

🔥 Most Important for Exams

🧠 Quick Memory Tricks