Web TechnologyUnit 18 min read

Web Tech Basics: WWW, Clients/servers, Web 1.0 vs 2.0, Responsive Design

Unit 1 of Web Technology covers the foundational concepts of the World Wide Web, the roles of web clients and servers, the evolution from Web 1.0 to Web 2.0, and how to create responsive web pages using media queries. This note includes definitions, real-world applications, visual comparisons, and exam-focused examples

Padhai · Based on the official syllabus and past papers
Updated 29 Sept 2026

Core Concepts

What is the World Wide Web (WWW)?

The World Wide Web (WWW) is a system of interlinked hypertext documents accessed via the Internet. It was invented by Tim Berners-Lee in 1989 at CERN. The WWW is built on three key technologies:

HTML (HyperText Markup Language) for structuring content.
URL (Uniform Resource Locator) for addressing resources.
HTTP (HyperText Transfer Protocol) for transferring data.

Hierarchy of WWW components and technologies (1989–Present)

Web Clients and Web Servers

Web Clients

Web clients are software applications that request and display web content. Examples:

Browsers: Chrome, Firefox, Safari.
Mobile Apps: Facebook, YouTube.
Specialized Tools: Postman (API testing), cURL (command-line HTTP).

Web Servers

Web servers are software/hardware that store, process, and deliver web content. Examples:

Apache, Nginx (software).
Hosting Providers: Google Cloud, AWS, Nepal’s Nepal Telecom (NTC) Hosting.

classDiagram
  class WebClient {
    +Request Data
    +Render Content
  }
  class WebServer {
    +Host Websites
    +Process Requests
    +Deliver Content
  }
  WebClient --> WebServer : "Sends HTTP Request"
  WebServer --> WebClient : "Returns HTTP Response"

Web 1.0 vs Web 2.0

Evolution of web technologies over time

Comparison Table

Feature	Web 1.0 (Static Web)	Web 2.0 (Dynamic Web)
Content Type	Static (HTML, plain text)	Dynamic (HTML + JavaScript, PHP, databases)
User Interaction	Read-only (one-way communication)	Read-write (user-generated content, social media)
Examples	Early websites (1990s), brochure sites	Facebook, YouTube, blogs, wikis
Technology	Basic HTML, limited CSS	AJAX, JSON, APIs, databases (MySQL, MongoDB)
User Role	Passive consumer	Active participant (contributor, collaborator)
Example in Nepal	Old NTC website (static info)	eSewa (dynamic transactions, user accounts)

How Web 2.0 Works: A Real-World Example

Consider Khalti, Nepal’s popular digital payment platform:

User Interaction: You log in, transfer money, and see real-time updates.
Dynamic Content: The app fetches your transaction history from a database (not pre-written HTML).
APIs: Khalti uses REST APIs to connect with banks (Nabil, Global IME) for secure transactions.
User-Generated Data: Your transaction records are stored and updated in real-time.

sequenceDiagram
    participant User
    participant KhaltiApp
    participant KhaltiServer
    participant BankAPI

    User->>KhaltiApp: "Initiate Payment"
    KhaltiApp->>KhaltiServer: "HTTP POST /pay"
    KhaltiServer->>BankAPI: "API Request: Verify Funds"
    BankAPI-->>KhaltiServer: "Response: Success"
    KhaltiServer-->>KhaltiApp: "Update Transaction"
    KhaltiApp-->>User: "Show Confirmation"

Responsive Web Design with Media Queries

Responsive design ensures web pages adapt to different screen sizes (desktops, tablets, mobiles). This is done using CSS media queries.

Breakpoints for responsive design (Nepal Telecom’s mobile-first approach)

How Media Queries Work

Media queries apply different styles based on:

Screen width (max-width, min-width).
Device orientation (portrait, landscape).
Resolution (dpi).

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Default (Desktop) */
        .search-form {
            width: 500px;
            display: flex;
            flex-wrap: wrap;
        }
        /* Tablet (max-width: 768px) */
        @media (max-width: 768px) {
            .search-form {
                width: 100%;
                flex-direction: column;
            }
        }
        /* Mobile (max-width: 480px) */
        @media (max-width: 480px) {
            .search-form input, .search-form select {
                width: 100%;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <form class="search-form">
        <select>
            <option>Search by Title</option>
            <option>Search by Author</option>
        </select>
        <input type="text" placeholder="Keyword">
        <input type="radio" name="download" value="true"> Downloadable
    </form>
</body>
</html>

In the Real World

eSewa (Nepal)
- Web 2.0: Uses dynamic content (user accounts, transaction history) and APIs to connect with banks.
- Responsive Design: Works on mobile phones (critical for Nepal’s mobile-first users).
Daraz (Nepal’s Amazon)
- Web 2.0: Product listings are dynamically loaded (no static pages).
- Media Queries: The mobile app’s web version adjusts buttons and grids for small screens.
NTC’s Website
- Web 1.0 Legacy: Older static pages (e.g., service info) are rarely updated.
- Web 2.0 Shift: Newer sections (e.g., online bill payment) use dynamic content.
WhatsApp Web
- Responsive Design: Adapts chat layouts for desktop vs. mobile.
- Web 2.0: Real-time messages (dynamic updates via JavaScript).

Problem: Create a PHP script to store book search data from the form above. Solution:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $searchType = $_POST["searchType"];
    $keyword = $_POST["keyword"];
    $download = isset($_POST["download"]) ? "Yes" : "No";

    // Store in a database (simplified example)
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "book_catalog";

    $conn = new mysqli($servername, $username, $password, $dbname);

    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    $sql = "INSERT INTO searches (search_type, keyword, downloadable)
            VALUES ('$searchType', '$keyword', '$download')";

    if ($conn->query($sql) === TRUE) {
        echo "Search data stored successfully!";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
    $conn->close();
}
?>

Real-World Tie-In: This is how Nepal Library Consortium (a hypothetical service) might log user searches to recommend books. The PHP script runs on a web server (e.g., NTC’s hosting) and interacts with a MySQL database.

Exam Tip

Definitions Matter:
- Always define WWW, web client, and web server with examples (e.g., "Chrome is a web client; Apache is a web server").
- For Web 1.0 vs 2.0, use the comparison table and real examples (e.g., "eSewa is Web 2.0 because it allows user transactions").
Media Queries in Exams:
- If asked to "make a page responsive," always show:
  - Default styles (desktop).
  - @media rules for tablet and mobile.
- Use a simple layout (e.g., a form or navbar) to demonstrate.
PHP + HTML Forms:
- Exams often ask for form handling. Structure your answer as:
  1. HTML form (with method="POST").
  2. PHP script to process $_POST data.
  3. Database insertion (even if simplified).
Avoid Common Mistakes:
- ❌ Don’t confuse Web 1.0 (static) with Web 3.0 (AI, blockchain).
- ❌ Don’t forget to validate user input in PHP (e.g., mysqli_real_escape_string).
- ❌ For media queries, test breakpoints (e.g., 768px for tablets, 480px for mobiles).

Based on the TU BSc CSIT syllabus for Web Technology (CSC318), unit 1.

Discussion

Loading…