M2-R5 Chapter 1: Introduction to Web Design – Internet, WWW, Website, Client-Server, Responsive Hindi Notes, 50 MCQs (NIELIT O Level 2026)

📑 Table of Contents — किसी भी topic पर सीधे जाएँ

1.0

Web Design क्या है? — पूरे Module की नींव

Web Design वह प्रक्रिया है जिसमें एक website का layout, structure, color scheme, typography (fonts) व navigation इस तरह design किया जाता है कि वह visually appealing (देखने में सुंदर) और user-friendly (उपयोग में आसान) बने।

📖 Definition

“Web Design is the process of planning, conceptualizing, and arranging content intended for the Internet.” — यानी Internet के लिए content को planning करके, सोच-समझकर व्यवस्थित (arrange) करने की प्रक्रिया ही Web Design है।

सरल शब्दों में — Web Design एक ऐसा process है जिसमें हम किसी web page या website को इस तरह बनाते हैं कि वह users को आकर्षित करे और उपयोग में आसान हो।

💡 समझें: Web Design सिर्फ "सुंदर दिखना" नहीं है — website का logically organized (तार्किक रूप से व्यवस्थित) और responsive (हर device पर सही) होना भी उतना ही ज़रूरी है।

🎨 Web Design vs Web Development

आधार	Web Design	Web Development
मतलब	Website कैसी दिखेगी व महसूस होगी (look & feel)	Website अंदर से कैसे काम करेगी (functionality)
Focus	Layout, colors, fonts, UX	Coding, logic, database
Tools	HTML, CSS, Figma, Photoshop	JavaScript, PHP, Python, MySQL

Exam Point: Web Design = website के layout, structure, colors, fonts व content को plan करके arrange करने की प्रक्रिया, ताकि वह attractive व user-friendly बने। इसकी 3 मूलभूत technologies — HTML, CSS, JavaScript।

1.1

Importance व Major Components — अच्छी Design क्यों ज़रूरी है?

एक अच्छी Web Design user के experience को बेहतर बनाती है और किसी organization या business की credibility (विश्वसनीयता) बढ़ाती है।

⭐ Importance of Web Design (महत्व)

First Impression: Website देखते ही user company की image बना लेता है — पहली छाप आखिरी छाप।
User Experience (UX): बेहतर design user को आसानी से navigate करने में मदद करता है।
SEO (Search Engine Optimization): Clean HTML structure search ranking सुधारता है।
Accessibility: हर device (mobile, tablet, PC) पर website का अच्छा दिखना।
Branding: Consistent colors व fonts से brand identity मज़बूत होती है।

📘 Example: Amazon या Flipkart जैसी websites अपने user-friendly interface के कारण popular हैं — search bar, filter options, cart icons — सब logically designed हैं।

🧩 Major Components of Web Design

Component	क्या करता है
Layout	Page structure — header, footer, sidebar, content area
Color Scheme	Branding व readability के लिए सही रंग संयोजन
Typography	Font style, size व spacing जिससे text साफ़ व attractive दिखे
Navigation	Menu, links, buttons जो user को घूमने में मदद करें
Graphics & Media	Images, icons, videos जो content को visual बनाते हैं
Responsiveness	हर device पर layout का सही adjust होना

एक Web Page का Layout — मुख्य हिस्से

Exam Point: Web Design के 6 major components — Layout, Color Scheme, Typography, Navigation, Graphics & Media, Responsiveness। Layout में header, nav, main content, sidebar व footer आते हैं।

1.2

Principles of Good Web Design — अच्छे डिज़ाइन के सिद्धांत

Web design में कुछ basic principles follow करना ज़रूरी है ताकि site functional व user-centered (user को ध्यान में रखकर बनी) हो।

Clarity (स्पष्टता): Simple layout, readable text, clean colors।
Consistency (एकरूपता): हर page पर same font, color व navigation style।
Accessibility (सुगम्यता): Visually impaired users के लिए alt text व अच्छा contrast।
Usability (उपयोगिता): Menu आसानी से समझ आने वाला व responsive हो।
Speed (गति): Fast loading images व optimized code।

⚙️ Tip: Website का homepage सिर्फ 3 seconds में load होना चाहिए — वरना लगभग 50% users site छोड़ (bounce) देते हैं। इसीलिए Speed एक बड़ा principle है।

💻 Example — एक Simple, Well-Structured Web Page

🌐 basic-layout.html — web design के 4 basic parts

<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>

  <nav>
    <a href="#">Home</a> |
    <a href="#">About</a> |
    <a href="#">Contact</a>
  </nav>

  <main>
    <p>This is a simple example of a well-structured web page.</p>
  </main>

  <footer>
    <p>© 2025 My Website</p>
  </footer>
</body>
</html>

समझें: यह structure दिखाता है कि एक web page के basic parts कौन-से होते हैं — Header, Navigation, Content (main) व Footer।

Exam Point: Good Web Design के 5 principles — Clarity, Consistency, Accessibility, Usability, Speed। "Website 3 सेकंड में load हो" — यह Speed principle से जुड़ा famous point है।

1.3

Introduction of Internet — इंटरनेट का परिचय

Internet एक global network है जो लाखों computers, mobile devices व servers को आपस में जोड़ता है। यह दुनिया भर में data, files, emails व web pages को साझा (share) करने की सुविधा देता है।

📖 Definition

“The Internet is a worldwide system of interconnected computer networks that use the TCP/IP protocol to communicate and exchange data.” — यानी Internet आपस में जुड़े computer networks की एक worldwide व्यवस्था है जो TCP/IP protocol से communicate करती है।

🔑 Key Features of Internet

Global Connectivity: पूरी दुनिया के computers आपस में connected रहते हैं।
Information Sharing: Users documents, images, videos आदि साझा कर सकते हैं।
Communication: Email, chat, video call जैसे माध्यमों से संपर्क।
Accessibility: 24×7 उपलब्ध सेवा — किसी भी समय उपयोग किया जा सकता है।
Decentralized Network: किसी एक authority के नियंत्रण में नहीं है।

💡 Remember: Internet केवल websites तक सीमित नहीं है — यह emails, FTP, VoIP, cloud computing व IoT devices को भी connect करता है।

📜 History of Internet (संक्षिप्त इतिहास)

1969 — ARPANET (Advanced Research Projects Agency Network) से शुरुआत।
1983 — TCP/IP protocol officially अपनाया गया।
1991 — WWW (World Wide Web) publicly introduced by Tim Berners-Lee।
आज — Internet हमारे जीवन का अभिन्न हिस्सा बन चुका है।

🎯 Uses of Internet

क्षेत्र	उपयोग
Education	Online Education व E-Learning
Business	E-Commerce व Online Shopping
Communication	Social Networking व messaging
Storage	Cloud Storage व File Sharing
Finance	Online Banking व Digital Payments
Entertainment	Music, Videos, Games

📘 Example: जब आप browser में www.google.com टाइप करते हैं, तो आपका device Internet के माध्यम से Google के server से जुड़ता है और web page को fetch करके display करता है।

⚖️ Advantages व Disadvantages

✅ Advantages	⚠️ Disadvantages / Risks
Instant Information Access	Cyber Crime व Data Theft
Global Communication	Privacy Issues
Cost-Effective Connectivity	Fake News व Misinformation
Online Services व Convenience	Internet Addiction
Remote Work व Collaboration	Viruses व Malware का खतरा

Tip: हमेशा strong passwords व antivirus protection का उपयोग करें ताकि internet browsing सुरक्षित रहे।

🛠️ Internet Services (Examples)

Service	Protocol / Tool	उपयोग
Web Browsing	HTTP / HTTPS	Websites access करना
Email	SMTP, POP3, IMAP	Messages भेजना व प्राप्त करना
File Transfer	FTP	Files upload / download करना
Chat / Messaging	IRC, XMPP	Real-time text communication
Remote Login	Telnet, SSH	Remote server access
Streaming	RTSP / HTTP Live	Audio-video streaming

Exam Point: Internet = worldwide network, TCP/IP protocol पर आधारित; शुरुआत 1969 में ARPANET से। यह decentralized है (किसी एक authority का नहीं)। Internet services — Web (HTTP), Email (SMTP/POP3/IMAP), File Transfer (FTP), Remote Login (Telnet/SSH)।

1.4

World Wide Web (WWW) — वर्ल्ड वाइड वेब

World Wide Web (WWW) Internet की सबसे लोकप्रिय सेवा है। यह एक ऐसा system है जो interlinked web pages को hyperlinks के माध्यम से जोड़ता है। Users इन pages को Web Browser की मदद से देखते हैं।

📖 Definition

“The World Wide Web (WWW) is a collection of interlinked hypertext documents and multimedia content that can be accessed via the Internet using web browsers.” — यानी WWW आपस में जुड़े hypertext documents व multimedia का collection है जिसे Internet पर browsers से access किया जाता है।

💡 Remember: WWW = Web Pages + Hyperlinks + Web Browsers + Internet। यह Internet पर चलने वाली एक service है — खुद Internet नहीं।

📜 History of WWW

Invented by: Sir Tim Berners-Lee (1989)
First Browser: WorldWideWeb (बाद में नाम बदलकर Nexus)
First Website: info.cern.ch (CERN, Switzerland)
Public Launch: 1991 — जब यह आम जनता के लिए उपलब्ध हुआ।

⚙️ How the WWW Works (Client-Server)

WWW का कार्य client–server model पर आधारित है। जब user browser में URL टाइप करता है, request web server को जाती है और server response में web page भेजता है।

WWW कैसे काम करता है — Request व Response का सफ़र

User browser में URL डालता है (जैसे https://example.com)।
Browser DNS server से IP address प्राप्त करता है।
Browser HTTP/HTTPS request server को भेजता है।
Web Server HTML, CSS, JS files के साथ response भेजता है।
Browser इन files को render करके final page दिखाता है।

📘 Example: जब आप https://www.wikipedia.org खोलते हैं, तो आपका browser Wikipedia के server से HTML file व images fetch करके दिखाता है।

🧱 Components of WWW

Component	Description	Examples
Web Browser	User-side application जो web pages render करता है	Chrome, Firefox, Edge, Safari
Web Server	Files/data store करने वाला computer जो content भेजता है	Apache, Nginx, IIS
Web Page	HTML document — text, images, links, video	index.html, about.html
URL	Unique address जिससे page access होता है	https://boostingskills.com
HTTP / HTTPS	Client-server के बीच data भेजने वाला protocol	HyperText Transfer Protocol

🆚 Difference between Internet and WWW (⭐ सबसे important question)

Basis	Internet	World Wide Web (WWW)
Definition	आपस में जुड़े computers का global network	Internet पर web pages से चलने वाली service
Function	Communication व data exchange	Browsers से information व multimedia access
Existence	1969 (ARPANET)	1989 (Tim Berners-Lee)
Includes	Email, FTP, VoIP, Cloud आदि	केवल Web-based documents
Dependency	Independent	Internet पर निर्भर

💡 आसान तरीका याद रखने का: Internet = Highway System 🚗 (रास्ता); WWW = उस रास्ते पर चलने वाली गाड़ियाँ। रास्ता (Internet) के बिना गाड़ियाँ (WWW) नहीं चल सकतीं।

Exam Point: WWW = Tim Berners-Lee (1989), पहली website info.cern.ch, public launch 1991। WWW Internet पर चलने वाली service है (Internet नहीं)। WWW के 5 components — Browser, Web Server, Web Page, URL, HTTP/HTTPS।

1.5

Website — वेबसाइट

Website web pages का एक organized collection है जो एक ही domain name के अंतर्गत आते हैं और आपस में hyperlinks से जुड़े होते हैं। हर website का एक home page होता है जो entry point (शुरुआती द्वार) होता है।

📖 Definition

“A Website is a collection of related web pages under a single domain, hosted on a web server, accessible via the Internet.”

⭐ Characteristics of a Good Website

Clear Purpose: Informational, e-commerce, portfolio, LMS आदि का स्पष्ट उद्देश्य।
Usability: Easy navigation, readable typography, accessible color contrast।
Performance: Fast loading, optimized assets, caching/CDN।
Security: HTTPS, updated backend, input validation।
Responsive: Mobile-first layouts, media queries, flexible grids।
SEO Basics: Semantic HTML, title/description, internal links, clean URLs।

🗂️ Types of Websites (High-Level)

Type	Description	Examples
Informational	Knowledge/content oriented	Wikipedia, Blogs
E-commerce	Products व payments	Amazon, Flipkart
Portfolio	Work showcase	Designer/Developer sites
Web App	Interactive application	Gmail, Trello
LMS	Learning management	SWAYAM, Coursera
Government	Public services	india.gov.in

💻 Example — Minimal Site Structure

🗂️ एक छोटी website का folder structure

/ (root)
├─ index.html        → Home page
├─ about.html        → About
├─ contact.html      → Contact
├─ /assets
│   ├─ styles.css
│   ├─ app.js
│   └─ logo.png
└─ /products
    └─ list.html

💡 Tip: तीन शब्दों में फर्क समझें — Domain = नाम (example.com), Hosting/Server = घर, Website = घर के अंदर के पेज।

Exam Point: Website = एक ही domain के अंतर्गत आपस में जुड़े related web pages का collection, जो web server पर host होता है। इसका पहला page = home page (entry point)।

1.6

Working of Websites — वेबसाइट कैसे काम करती है

Website का काम Client–Server model पर होता है। Browser (client) request भेजता है, Server response भेजता है, और Browser उस page को render करता है।

🔄 Step-by-Step Flow

URL Entry: User browser में https://example.com टाइप करता है।
DNS Lookup: Domain का IP address प्राप्त होता है।
TCP Handshake + TLS: Connection establish होता है (HTTPS पर encryption)।
HTTP Request: Browser server से HTML/CSS/JS/images माँगता है।
Server Response: Server resources वापस भेजता है (status codes के साथ)।
Rendering: Browser HTML parse → CSS apply → JS execute → final UI दिखाता है।
Caching: Static assets cache करके performance improve की जाती है।

🧠 Important Concepts

Concept	Meaning	क्यों ज़रूरी
HTTP/HTTPS	Web transfer protocol / secure version	Security, SEO, Trust
DNS	Domain → IP resolution	Reachability
CDN	Geo-distributed static delivery	Faster load
Minification	CSS/JS size कम करना	Performance
Compression	Gzip/Brotli	Smaller payload
Caching	Browser/Server cache	Repeat speed

💻 Example — HTTP Request व Response

⚙️ एक real HTTP request-response कैसा दिखता है

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Chrome/Android
Accept: text/html

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Cache-Control: max-age=86400

💡 Note: First meaningful paint (page जल्दी दिखे) के लिए CSS ऊपर रखें व heavy JavaScript को deferred/async करें।

Exam Point: Website working के steps — URL Entry → DNS Lookup → TCP/TLS Handshake → HTTP Request → Server Response → Rendering → Caching। HTTP status code 200 OK = successful response।

1.7

Webpages — वेबपेज

Webpage एक single HTML document होता है जिसे browser render करता है। इसमें text, images, videos, forms, links आदि हो सकते हैं। कई webpages मिलकर एक Website बनाते हैं।

🗂️ Types of Webpages

Type	Description	Technology
Static Page	Fixed content, manual updates	HTML/CSS
Dynamic Page	Data-driven, user/context आधारित	Server-side + DB
Interactive Page	Client-side logic heavy	JS / SPA frameworks
Landing Page	Focused marketing / CTA	Optimized UI/SEO

🧱 Basic Structure (Semantic HTML)

🌐 semantic-page.html — सही structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <main>Content</main>
  <aside>Sidebar</aside>
  <footer>© 2025</footer>
</body>
</html>

✅ Good Practices

Semantic tags (header, main, footer) का उपयोग करें।
Meta title/description accurate रखें।
Images पर alt text दें (accessibility + SEO)।
Mobile-first CSS, readable line-height व contrast।
Internal linking (breadcrumbs/TOC) बेहतर करें।

💡 Tip: एक page की primary heading सिर्फ एक बार <h1> में रखें — SEO के लिए ज़रूरी।

Exam Point: Webpage = single HTML document; कई webpages मिलकर website बनाते हैं। Types — Static, Dynamic, Interactive, Landing। Semantic tags (header, nav, main, aside, footer) SEO व accessibility सुधारते हैं।

1.8

Front-End — फ्रंट-एंड (जो user देखता है)

Front-End वह हिस्सा है जो user देखता व उससे interact करता है — UI (layout, colors, typography) व UX (interaction, flow, feedback)। इसे "client-side" भी कहते हैं।

🧩 Core Technologies

HTML: Structure / semantics (page का ढाँचा)।
CSS: Styling / layout — Flexbox, Grid, Media Queries।
JavaScript: Interactivity / logic — DOM, fetch, events।

🛠️ Typical Front-End Stack

Layer	Options	Purpose
CSS	Plain CSS, Tailwind, Bootstrap	Styling / Layout
JS	Vanilla JS, jQuery	Interactivity
SPA	React, Vue, Angular	Component-based UI
Build	Vite, Webpack, Parcel	Bundle / Optimize
Testing	Jest, Playwright	Quality Assurance

💻 Example — Simple Interaction

🌐 button click पर message दिखाना (JS)

<button id="greetBtn">Say Hi</button>
<p id="out"></p>

<script>
  document.getElementById('greetBtn').onclick = () => {
    document.getElementById('out').textContent = 'Hello, Web!';
  };
</script>

OUTPUT (button दबाने पर)Hello, Web!

✅ Front-End Best Practices

Mobile-first, responsive grid/flex।
Accessible forms, keyboard navigation, ज़रूरत पर ARIA।
Assets minify/compress करें, images lazy-load करें।
SEO के लिए semantic HTML का उपयोग करें।

💡 Tip: CSS में rem/em units व CSS variables से scalable (आसानी से बढ़ने वाला) design बनता है।

Exam Point: Front-End = client-side, जो user देखता है; इसकी 3 core technologies — HTML (structure), CSS (style), JavaScript (interactivity)। SPA frameworks — React, Vue, Angular।

1.9

Back-End — बैक-एंड (जो पर्दे के पीछे काम करता है)

Back-End server-side भाग है जो business logic, authentication, authorization व database operations संभालता है। User इसे सीधे नहीं देखता, पर हर dynamic site का आधार यही है।

🖥️ Common Back-End Technologies

Language / Runtime	Frameworks	उपयोग
Node.js (JavaScript)	Express, Nest	APIs, real-time apps
Python	Django, Flask, FastAPI	Web apps, APIs
PHP	Laravel, CodeIgniter	Traditional web apps
Java	Spring Boot	Enterprise apps
.NET	ASP.NET Core	Enterprise / web APIs

🗄️ Databases

Relational (SQL): MySQL, PostgreSQL — tables, relations, ACID।
NoSQL: MongoDB, Redis — documents/key-value store, flexible schema।

🔄 Typical Back-End Flow (API)

Client → POST /login (email, password)।
Server → user validate (DB query, hash compare)।
Server → token/session issue करता है।
Client → authenticated requests (token headers के साथ)।

💻 Example — Pseudo REST Response

⚙️ server से आने वाला JSON response

HTTP/1.1 200 OK
Content-Type: application/json

{
  "status": "success",
  "data": { "userId": 101, "role": "student" },
  "token": "eyJhbGciOi..."
}

✅ Back-End Best Practices

HTTPS का उपयोग, inputs validate, outputs sanitize करें (OWASP)।
Environment configs (.env) व secrets सुरक्षित रखें।
Pagination, caching, indexing से performance बढ़ाएँ।
Logs/monitoring व backups enable रखें।

💡 Tip: Authentication (आप कौन हैं?) ≠ Authorization (आप क्या कर सकते हैं?) — दोनों अलग concepts हैं।

Exam Point: Back-End = server-side; business logic + authentication + database संभालता है। Databases — SQL (MySQL, PostgreSQL) व NoSQL (MongoDB, Redis)। Authentication (पहचान) ≠ Authorization (अनुमति)।

1.10

Client & Server Scripting — क्लाइंट व सर्वर स्क्रिप्टिंग

Client-side scripting browser में चलती है (UI/UX, interactivity), जबकि Server-side scripting server पर चलती है (business logic, database, authentication)। दोनों मिलकर modern dynamic websites बनाते हैं।

🖱️ Client-side Scripting (Browser में)

Primary Language: JavaScript (ES6+), साथ में TypeScript (JS में transpile होती है)।
Purpose: DOM manipulation, animations, validations, API calls (fetch/AJAX)।
Frameworks: React, Vue, Angular, jQuery।
Pros: तेज़ UI updates, simple कामों के लिए server round-trip नहीं।
Cons: Code user को दिखता है — security-sensitive काम client पर नहीं।

🌐 Client-side email validation (JavaScript)

<form id="f">
  <input id="email" type="email" placeholder="Enter email" required>
  <button>Submit</button>
</form>
<p id="msg"></p>

<script>
  document.getElementById('f').addEventListener('submit', e => {
    e.preventDefault();
    const ok = /\S+@\S+\.\S+/.test(document.getElementById('email').value);
    document.getElementById('msg').textContent = ok ? 'Valid!' : 'Invalid email';
  });
</script>

🖥️ Server-side Scripting (Server पर)

Languages: Node.js, Python (Django/Flask), PHP (Laravel), Java (Spring), .NET (C#)।
Purpose: Auth, DB CRUD, sessions/tokens, business rules, server-rendered HTML।
Pros: Secure data handling, central control, DB integration।
Cons: Server resources चाहिए, latency संभव।

⚙️ Server-side login endpoint (Node.js pseudo)

// Node.js Express (pseudo code)
app.post('/login', async (req, res) => {
  const { email, password } = req.body;
  const user = await users.findOne({ email });
  if (!user || !compareHash(password, user.hash))
    return res.status(401).json({ error: 'Invalid' });
  const token = signJWT({ uid: user.id });
  res.json({ status: 'ok', token });
});

🆚 Client vs Server — कब क्या करें?

Task	Client-side	Server-side
Form basic validation	Yes (fast UX)	दोबारा भी validate (security)
Auth, payments	No (exposed)	Yes (secure)
UI state / animations	Yes	No
DB operations	No	Yes
SEO (SSR/SSG)	Hydration only	अक्सर (crawl सुधारता है)

Security Rule: Client पर हुई validation को कभी final न मानें — server पर हमेशा दोबारा validate करें (OWASP)।

Exam Point: Client-side scripting = browser में (JavaScript), Server-side scripting = server पर (PHP, Python, Node)। Security-sensitive काम (auth, payment) हमेशा server-side। Client validation को कभी अंतिम न मानें।

1.11

Responsive Web Design — हर Device पर सही

Responsive Web Design (RWD) का उद्देश्य है कि website हर device (mobile, tablet, desktop) पर सही layout व अच्छा पढ़ने का अनुभव दे। यह fluid grids, flexible images व media queries पर आधारित है।

एक ही Website, हर Device पर Adjust

🎯 Core Principles

Fluid Grid: width percentages में, CSS Grid/Flexbox से।
Flexible Media: images/videos max-width:100%।
Media Queries: breakpoints पर layout बदलना।
Mobile-first: पहले small screens, फिर बड़ी screens के लिए upscale।
Touch Targets: buttons कम-से-कम 44px height व अच्छी spacing।

💻 Example — Media Query + Fluid Image

📱 responsive.css — mobile-first breakpoints

/* Base (mobile-first) */
.container { padding: 12px; }
.card { padding: 16px; }
img.resp { max-width: 100%; height: auto; display: block; }

/* Tablet and up */
@media (min-width: 768px) {
  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .grid { grid-template-columns: 1fr 1fr 1fr; }
}

📊 Responsive Tables (Technique)

Small screens पर table wrapper को overflow-x:auto दें।
Alternate: "card-rows" में columns को stack करें।

📊 table को mobile पर scrollable बनाना

.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; }

⚡ Performance for Mobile

Images: modern formats (WebP/AVIF), lazy-loading।
CSS/JS minify, HTTP/2, compression (Brotli)।
Critical CSS inline, non-critical CSS defer।

💡 Tip: Lighthouse/PageSpeed से real-device reports देखें; LCP, CLS, TTI जैसे metrics बेहतर करें।

Exam Point: Responsive Web Design के 3 आधार — Fluid Grid, Flexible Media, Media Queries। Approach = Mobile-first। Media query syntax — @media (min-width: 768px) { ... }।

1.12

Static vs Dynamic Websites — वेबसाइट के दो मुख्य प्रकार

Broadly websites दो प्रकार की होती हैं — Static (fixed pages) व Dynamic (data-driven, runtime पर बनने वाले pages)। ज़रूरत व budget के अनुसार चुनाव किया जाता है।

📄 Static Website (स्थिर)

Tech: HTML, CSS, थोड़ा JavaScript।
Hosting: सस्ता/मुफ़्त (Netlify, GitHub Pages)।
Speed: बहुत तेज़ (server processing नहीं)।
Use Cases: Portfolio, Landing page, Docs।
Limits: बार-बार content बदलना कठिन (manual deploy)।

📄 static page snippet — content HTML में fixed

<h1>Welcome</h1>
<p>This is a static page. Content is fixed in HTML.</p>

⚙️ Dynamic Website (गतिशील)

Tech: Server scripting + DB (Node, PHP, Python + MySQL/Mongo)।
Content: DB से आता है; user/session के हिसाब से बदलता है।
Use Cases: E-commerce, LMS, Social, Dashboards।
Pros: Admin panel, search, filters, personalization।
Cons: Server cost, security/maintenance।

⚙️ dynamic route — server DB से content लाता है (pseudo)

// Dynamic route (pseudo)
GET /product/42
  → server DB से product #42 ढूँढेगा
  → HTML/JSON बनाकर client को देगा
     (price, stock, reviews)

🆚 Static vs Dynamic — Comparison (⭐ important table)

Aspect	Static	Dynamic
Content	Fixed files	DB-driven
Speed	बहुत तेज़	Server/DB पर निर्भर
Cost	कम hosting	ज़्यादा (server + DB)
Updates	Manual deploy	Admin panel / API
Security	Attack surface कम	Hardening चाहिए (auth, validation)
Examples	Portfolio, Docs	Shop, LMS, Social

🔀 Hybrid Approaches

SSG (Static Site Generators): Next.js/Eleventy — build-time पर pages बनते हैं।
ISR/SSR: कुछ pages dynamic, बाकी static → speed + freshness का balance।
Headless CMS: Content API से आता है; front-end static/SPA।

🧭 Decision Guide: Small site, कम edits → Static। बार-बार edits, user accounts, search, payments → Dynamic/Headless।

Exam Point: Static = HTML/CSS, fixed content, तेज़, सस्ता (portfolio/docs)। Dynamic = server + DB, content DB से, admin panel/login/search (shop/LMS)। सबसे बड़ा फर्क — content fixed है या database-driven।

1.13

Summary — Quick Revision (Exam से पहले पढ़ें)

Web Design = website के layout, colors, fonts, navigation व content को plan करके arrange करना; 3 core tech — HTML, CSS, JavaScript।
Principles: Clarity, Consistency, Accessibility, Usability, Speed।
Internet = worldwide network, TCP/IP आधारित, शुरुआत 1969 (ARPANET), decentralized।
WWW = Tim Berners-Lee (1989), Internet पर चलने वाली service; components — Browser, Web Server, Web Page, URL, HTTP।
Internet vs WWW: Internet = highway (network), WWW = उस पर चलने वाली service (web pages)।
Website = एक domain के अंतर्गत जुड़े web pages का collection; पहला page = home page।
Working: URL → DNS → TCP/TLS → HTTP Request → Server Response → Rendering → Caching। 200 OK = success।
Front-End = client-side (HTML/CSS/JS); Back-End = server-side (logic + DB)।
Scripting: Client-side (JavaScript, browser), Server-side (PHP/Python/Node, server); auth हमेशा server-side।
Responsive: Fluid Grid + Flexible Media + Media Queries; mobile-first approach।
Static = fixed HTML, तेज़, सस्ता; Dynamic = server+DB, admin panel, personalization।

1.14

Model Questions — 50 MCQs + 15 Theory Questions

❓ A. Multiple Choice Questions (50)

#	प्रश्न व उत्तर
1	Web Design का मुख्य उद्देश्य क्या है? (a) सिर्फ coding(b) attractive व user-friendly site(c) सिर्फ hosting(d) database बनाना ✔ सही उत्तर: (b) attractive व user-friendly site
2	Web Design की 3 core technologies हैं — (a) HTML, CSS, JS(b) C, C++, Java(c) PHP, MySQL, Apache(d) Word, Excel, PPT ✔ सही उत्तर: (a) HTML, CSS, JS
3	इनमें से web design का component नहीं है — (a) Layout(b) Typography(c) Compiler(d) Navigation ✔ सही उत्तर: (c) Compiler
4	Fonts व text style से जुड़ा component — (a) Layout(b) Typography(c) Hosting(d) Protocol ✔ सही उत्तर: (b) Typography
5	"हर page पर same font व color" — यह principle है — (a) Speed(b) Consistency(c) Clarity(d) Security ✔ सही उत्तर: (b) Consistency
6	Internet किस protocol पर आधारित है? (a) HTTP(b) FTP(c) TCP/IP(d) SMTP ✔ सही उत्तर: (c) TCP/IP
7	Internet की शुरुआत किससे हुई? (a) WWW(b) ARPANET(c) NASA(d) Google ✔ सही उत्तर: (b) ARPANET1969 में।
8	ARPANET किस वर्ष शुरू हुआ? (a) 1969(b) 1983(c) 1991(d) 2000 ✔ सही उत्तर: (a) 1969
9	Email भेजने का protocol है — (a) HTTP(b) SMTP(c) FTP(d) SSH ✔ सही उत्तर: (b) SMTP
10	Files upload/download का protocol है — (a) FTP(b) SMTP(c) IMAP(d) HTTP ✔ सही उत्तर: (a) FTP
11	WWW का आविष्कार किसने किया? (a) Dennis Ritchie(b) Tim Berners-Lee(c) Bill Gates(d) Guido van Rossum ✔ सही उत्तर: (b) Tim Berners-Lee
12	WWW किस वर्ष invent हुआ? (a) 1969(b) 1989(c) 1995(d) 2004 ✔ सही उत्तर: (b) 1989
13	WWW असल में क्या है? (a) खुद Internet(b) Internet पर एक service(c) एक browser(d) एक protocol ✔ सही उत्तर: (b) Internet पर एक service
14	दुनिया की पहली website थी — (a) google.com(b) info.cern.ch(c) yahoo.com(d) w3.org ✔ सही उत्तर: (b) info.cern.ch
15	Web pages को जोड़ने वाला link कहलाता है — (a) Hyperlink(b) Protocol(c) Cookie(d) Cache ✔ सही उत्तर: (a) Hyperlink
16	इनमें से Web Browser है — (a) Apache(b) Nginx(c) Chrome(d) MySQL ✔ सही उत्तर: (c) Chrome
17	इनमें से Web Server है — (a) Firefox(b) Apache(c) Safari(d) Edge ✔ सही उत्तर: (b) Apache
18	Domain name को IP address में बदलता है — (a) DNS(b) CDN(c) FTP(d) URL ✔ सही उत्तर: (a) DNS
19	किसी web page का पूरा address कहलाता है — (a) DNS(b) URL(c) IP(d) HTML ✔ सही उत्तर: (b) URL
20	HTTPS में 'S' किसके लिए है? (a) Speed(b) Server(c) Secure(d) System ✔ सही उत्तर: (c) Secure
21	HTTP का पूरा नाम है — (a) High Transfer Text Protocol(b) HyperText Transfer Protocol(c) Host Transfer Text Program(d) Hyper Terminal Text Path ✔ सही उत्तर: (b) HyperText Transfer Protocol
22	Successful HTTP response का status code है — (a) 404(b) 500(c) 200(d) 301 ✔ सही उत्तर: (c) 200200 OK।
23	"Page Not Found" का status code है — (a) 200(b) 404(c) 302(d) 403 ✔ सही उत्तर: (b) 404
24	Website का पहला/मुख्य page कहलाता है — (a) Landing page(b) Home page(c) Login page(d) Error page ✔ सही उत्तर: (b) Home page
25	Website के सभी pages एक ही होते हैं — (a) Domain के अंतर्गत(b) Browser में(c) Protocol में(d) OS में ✔ सही उत्तर: (a) Domain के अंतर्गत
26	Front-End वह है जिसे — (a) user देखता है(b) server चलाता है(c) DB store करता है(d) कोई नहीं देखता ✔ सही उत्तर: (a) user देखता है
27	Page का structure बनाता है — (a) CSS(b) HTML(c) JS(d) PHP ✔ सही उत्तर: (b) HTML
28	Page की styling/design करता है — (a) HTML(b) CSS(c) SQL(d) FTP ✔ सही उत्तर: (b) CSS
29	Page में interactivity लाता है — (a) CSS(b) HTML(c) JavaScript(d) DNS ✔ सही उत्तर: (c) JavaScript
30	इनमें से Front-End framework है — (a) React(b) Django(c) Laravel(d) Spring ✔ सही उत्तर: (a) React
31	Back-End मुख्य रूप से संभालता है — (a) रंग व fonts(b) logic व database(c) animations(d) hover effects ✔ सही उत्तर: (b) logic व database
32	इनमें से Relational (SQL) database है — (a) MongoDB(b) Redis(c) MySQL(d) Firebase ✔ सही उत्तर: (c) MySQL
33	इनमें से NoSQL database है — (a) MySQL(b) PostgreSQL(c) MongoDB(d) Oracle ✔ सही उत्तर: (c) MongoDB
34	"आप कौन हैं?" — यह process है — (a) Authorization(b) Authentication(c) Validation(d) Encryption ✔ सही उत्तर: (b) Authentication
35	Client-side scripting की main language है — (a) PHP(b) Python(c) JavaScript(d) Java ✔ सही उत्तर: (c) JavaScript
36	इनमें से Server-side language है — (a) HTML(b) CSS(c) PHP(d) JSON ✔ सही उत्तर: (c) PHP
37	Login व payment जैसे काम होने चाहिए — (a) सिर्फ client-side(b) server-side(c) browser cache में(d) CSS में ✔ सही उत्तर: (b) server-sidesecure रहते हैं।
38	Client-side validation को माना जाना चाहिए — (a) अंतिम(b) server पर दोबारा check(c) पर्याप्त(d) ज़रूरी नहीं ✔ सही उत्तर: (b) server पर दोबारा check
39	Responsive design का आधार नहीं है — (a) Fluid Grid(b) Media Queries(c) Flexible Media(d) FTP Upload ✔ सही उत्तर: (d) FTP Upload
40	Responsive design में screen size के अनुसार layout बदलता है — (a) Media Query(b) Hyperlink(c) DNS(d) Cookie ✔ सही उत्तर: (a) Media Query
41	Responsive design का सही approach है — (a) Desktop-first(b) Mobile-first(c) Print-first(d) Tablet-only ✔ सही उत्तर: (b) Mobile-first
42	Images को responsive बनाने के लिए — (a) max-width:100%(b) width:2000px(c) display:none(d) float:left ✔ सही उत्तर: (a) max-width:100%
43	Static website मुख्यतः बनी होती है — (a) HTML/CSS से(b) PHP+DB से(c) Python+DB से(d) Node+Mongo से ✔ सही उत्तर: (a) HTML/CSS से
44	Dynamic website का content आता है — (a) fixed HTML से(b) database से(c) browser cache से(d) CSS file से ✔ सही उत्तर: (b) database से
45	इनमें से dynamic website का example है — (a) साधारण Portfolio(b) E-commerce site(c) एक static docs page(d) एक HTML resume ✔ सही उत्तर: (b) E-commerce site
46	Static website का सबसे बड़ा फायदा — (a) बहुत तेज़ व सस्ती(b) admin panel(c) personalization(d) live search ✔ सही उत्तर: (a) बहुत तेज़ व सस्ती
47	CDN का मुख्य लाभ है — (a) faster loading(b) database backup(c) email भेजना(d) login सुरक्षा ✔ सही उत्तर: (a) faster loading
48	CSS/JS का size कम करने की प्रक्रिया — (a) Minification(b) Caching(c) Hosting(d) Indexing ✔ सही उत्तर: (a) Minification
49	SEO सुधारने के लिए किसका उपयोग करें — (a) Semantic HTML(b) inline style(c) heavy images(d) hidden text ✔ सही उत्तर: (a) Semantic HTML
50	एक page पर `<h1>` tag होना चाहिए — (a) कई बार(b) सिर्फ एक बार(c) कभी नहीं(d) सिर्फ footer में ✔ सही उत्तर: (b) सिर्फ एक बार

📝 B. 15 Theory Questions (Short Answers)

Web Design क्या है? इसकी मुख्य technologies लिखिए।Web Design वह प्रक्रिया है जिसमें website के layout, colors, fonts, navigation व content को plan करके arrange किया जाता है ताकि वह attractive व user-friendly बने। मुख्य technologies — HTML, CSS, JavaScript।
Web Design के कोई 5 principles लिखिए।Clarity (स्पष्टता), Consistency (एकरूपता), Accessibility (सुगम्यता), Usability (उपयोगिता) व Speed (तेज़ loading)।
Web Design के major components कौन-से हैं?Layout, Color Scheme, Typography, Navigation, Graphics & Media, व Responsiveness।
Internet क्या है? यह किस protocol पर काम करता है?Internet आपस में जुड़े computers का worldwide network है जो data sharing व communication संभव बनाता है। यह TCP/IP protocol पर काम करता है; शुरुआत 1969 में ARPANET से हुई।
Internet की कोई 4 services लिखिए।Web Browsing (HTTP/HTTPS), Email (SMTP/POP3/IMAP), File Transfer (FTP), व Remote Login (Telnet/SSH)।
WWW क्या है? इसका आविष्कार किसने किया?WWW hyperlinks से जुड़े web pages का collection है जिसे browsers से देखा जाता है — यह Internet पर चलने वाली service है। आविष्कार Tim Berners-Lee ने 1989 में किया।
Internet और WWW में अंतर लिखिए।Internet आपस में जुड़े computers का global network है (highway जैसा) जबकि WWW उस Internet पर web pages से चलने वाली एक service है (गाड़ियों जैसी)। Internet 1969, WWW 1989 में आया।
Website क्या है? इसका home page क्या होता है?Website एक ही domain के अंतर्गत आपस में hyperlinks से जुड़े related web pages का collection है, जो web server पर host होता है। इसका पहला page = home page, जो entry point होता है।
Website कैसे काम करती है? Steps लिखिए।URL Entry → DNS Lookup → TCP/TLS Handshake → HTTP Request → Server Response → Browser Rendering → Caching। यह पूरा client-server model पर आधारित है।
Front-End और Back-End में अंतर लिखिए।Front-End वह हिस्सा है जो user देखता व interact करता है (HTML/CSS/JS)। Back-End server-side भाग है जो business logic, authentication व database operations संभालता है — user इसे सीधे नहीं देखता।
Client-side और Server-side scripting में अंतर बताइए।Client-side scripting browser में चलती है (JavaScript) और UI/interactivity के लिए है; Server-side scripting server पर चलती है (PHP, Python, Node) और logic, database व security के लिए है।
Authentication और Authorization में अंतर लिखिए।Authentication = "आप कौन हैं?" यह user की पहचान verify करता है (login)। Authorization = "आप क्या कर सकते हैं?" यह user की permissions/access तय करता है।
Responsive Web Design क्या है? इसके आधार लिखिए।Responsive Web Design वह technique है जिसमें website हर device पर layout automatically adjust कर लेती है। इसके 3 आधार — Fluid Grid, Flexible Media व Media Queries; approach mobile-first।
Static और Dynamic website में अंतर लिखिए।Static website HTML/CSS से बनी होती है, content fixed रहता है, तेज़ व सस्ती है (portfolio/docs)। Dynamic website server + database से चलती है, content DB से आता है व user के अनुसार बदलता है (shop/LMS)।
HTTP और HTTPS में अंतर लिखिए।HTTP (HyperText Transfer Protocol) एक basic web protocol है जो data plain भेजता है; HTTPS उसी में SSL/TLS encryption जोड़कर secure communication देता है — इसीलिए login/payment वाली sites HTTPS का उपयोग करती हैं।

Revision Tip: Internet=1969/ARPANET/TCP-IP, WWW=1989/Tim Berners-Lee, Front-End=HTML/CSS/JS, Responsive=Fluid+Media+Query, Static vs Dynamic का फर्क — ये 5 facts इस chapter के आधे MCQs cover कर देते हैं। Internet vs WWW की table ज़रूर याद रखें!

FAQ

अक्सर पूछे जाने वाले प्रश्न

Web Design क्या है?

Web Design वह प्रक्रिया है जिसमें web pages का layout, structure, colors, typography, navigation व complete user experience बनाया जाता है ताकि website देखने व उपयोग में आसान हो। इसकी तीन मूलभूत technologies हैं — HTML, CSS व JavaScript।

Internet और WWW में क्या अंतर है?

Internet एक global network है जो लाखों computers को TCP/IP protocol से जोड़ता है, जबकि WWW (World Wide Web) Internet पर चलने वाली एक service है जहाँ hyperlinks से जुड़े web pages browsers के ज़रिए देखे जाते हैं। Internet = highway, WWW = उस पर चलने वाली गाड़ियाँ। Internet 1969 (ARPANET), WWW 1989 (Tim Berners-Lee)।

Website कितने प्रकार की होती हैं?

मुख्य रूप से दो प्रकार — Static Website (HTML/CSS आधारित, fixed content, बहुत तेज़) और Dynamic Website (server scripting + database आधारित, content DB से आता है, admin panel/search/login संभव)। इनके अलावा Hybrid (SSG/SSR, Headless CMS) approaches भी होती हैं।

Client-Server Model क्या है?

Client-Server Model में user का browser (client) एक request भेजता है और web server उस request को process करके response (HTML, CSS, JS) भेजता है। Browser उन files को render करके final web page दिखाता है। पूरा WWW इसी model पर काम करता है।

Front-End और Back-End में क्या अंतर है?

Front-End वह हिस्सा है जो user देखता व interact करता है — HTML, CSS, JavaScript से बना UI/UX। Back-End server-side भाग है जो business logic, authentication व database operations संभालता है (Node, PHP, Python आदि से) — user इसे सीधे नहीं देखता।

Responsive Web Design क्या है?

Responsive Web Design वह technique है जिसमें website हर device — mobile, tablet, desktop — पर अपने layout को automatically adjust कर लेती है। यह fluid grids, flexible images व media queries पर आधारित है और mobile-first approach से बनाया जाता है।

🎯 Chapter 1 पूरा हुआ! अब आगे बढ़ें

Chapter 2 में Editors की दुनिया — Text Editors, HTML Editors, WYSIWYG editors व coding tools का पूरा परिचय।

Chapter 2 पढ़ें ➜