A single electronic document written in HTML, accessible through a web browser using a unique URL. Can contain text, graphics, hyperlinks, and interactive scripts.
A cohesive collection of interlinked webpages hosted under a single domain name (e.g. adwitiyaacademyoflearning.com) sharing common navigation and branding.
An interactive software application accessed via browser that performs complex business logic, CRUD database operations, and user state management (e.g., Gmail, Flipkart).
| Layer | Technology | Analogy | Responsibility in Browser |
|---|---|---|---|
| Structure | HTML5 (Hypertext Markup Language) | Human Skeleton | Defines document hierarchy, headers, paragraphs, tables, forms, and semantic elements. |
| Presentation | CSS3 (Cascading Style Sheets) | Skin & Clothes | Controls colors, fonts, margins, grid/flexbox layouts, responsiveness, and animations. |
| Behavior | JavaScript (ECMAScript) | Muscles & Nervous System | Handles DOM manipulation, button click events, asynchronous API data fetching (AJAX/Fetch), and form validation. |
| Parameter | Static Webpage | Dynamic Webpage |
|---|---|---|
| File Content | Fixed pre-written HTML, CSS, images stored on server | Generated on-the-fly during runtime |
| Server Role | Simple file server (returns stored files directly) | Executes backend scripts (Node.js, Python, PHP) & queries database |
| Database Needed? | No database required | Yes (MySQL, PostgreSQL, MongoDB, SQLite) |
| User Customization | Identical content shown to every visitor | Personalized per user (e.g., cart, profile, feed) |
| Speed & Hosting | Ultra-fast, low cost, easy CDN caching | Requires server compute power, memory, and database caching |
| Examples | Documentation page, portfolio, brochure site | E-commerce store, social network, banking portal |
Tier 1 (Presentation): Web Browser (Client) • Tier 2 (Web Server): Nginx/Apache (Static assets & SSL termination) • Tier 3 (Application Server): Node.js/Tomcat (Business logic & API) • Tier 4 (Data Tier): MySQL/PostgreSQL (Persistent storage). Memorize this 4-tier flow!