Web Tech Fundamentals: HTML5, Architecture & Tier Models

TAKEAWAYS:

• Understand the client-server model and how web applications communicate using HTTP/HTTPS.
• Learn the 3-tier and n-tier architecture and their advantages/disadvantages, with real-world comparisons.
• Master HTML5 basics, including new form elements, semantic tags, and document structure.
• Explore web server functions, including request handling, session management, and common applications.
• Apply HTML5 to create structured web pages with headers, layouts, and forms.
• Recognize pitfalls of 3-tier vs. n-tier architectures in scalability, security, and maintenance.

1. Introduction to Web Technology

Web technology refers to the systems, protocols, and languages used to design, develop, and deliver web applications. It includes:

• Client-side technologies (HTML, CSS, JavaScript).
• Server-side technologies (PHP, Node.js, Python).
• Network protocols (HTTP/HTTPS, TCP/IP).
• Architectural models (client-server, multi-tier).

How the Web Works: Client-Server Model

The web follows a client-server architecture, where:

• Client: The user’s device (browser, app) sends requests (e.g., clicking a link).
• Server: A remote computer (e.g., Google’s server) processes the request and sends back a response (e.g., a webpage).

sequenceDiagram
    participant Client as User's Browser
    participant Server as Web Server
    Client->>Server: HTTP Request (GET /home)
    Server-->>Client: HTTP Response (HTML page)
    Note over Client,Server: Data flows via HTTP/HTTPS

Real-world example:

• When you open eSewa to pay a bill, your browser (client) sends a request to eSewa’s server, which processes your payment details and returns a confirmation page.

2. Web Server: Functions and Responsibilities

A web server is software/hardware that:

1. Handles HTTP requests (GET, POST, PUT, DELETE).
2. Serves static content (HTML, CSS, images).
3. Processes dynamic content (via server-side scripts like PHP).
4. Manages sessions (e.g., keeping you logged into Daraz).
5. Supports security (HTTPS, SSL/TLS).

How a Web Server Processes an HTTP Request

1. Client sends a request (e.g., GET /products).
2. Server checks for static content (if found, sends it).
3. If dynamic, the server runs a script (e.g., PHP) to fetch data from a database.
4. Generates a response (HTML, JSON) and sends it back.

flowchart TD
    A["Client Request"] --> B{"Static Content?"}
    B -->|"Yes"| C["Send HTML/CSS"]
    B -->|"No"| D["Run Server-Side Script"]
    D --> E["Fetch Data from DB"]
    E --> F["Generate Response"]
    F --> G["Send to Client"]

Real-world example:

• Ncell’s website uses a web server to:
  • Serve static pages (pricing, login forms).
  • Process dynamic requests (e.g., checking balance via API).
  • Maintain your session (so you stay logged in).

3. Tier Technology in Web Applications

Web applications are built using multi-tier architectures to separate concerns (presentation, logic, data).

Comparison: 3-Tier vs. N-Tier Architecture

Pitfalls of 3-Tier:

• Tight coupling: Changing one tier may break others.
• Poor scalability: Hard to add new features without rewriting.
• Security risks: Business logic and data access are not isolated.

Advantages of N-Tier:

• Modularity: Each tier can be updated independently.
• Reusability: Business logic can be reused in mobile apps.
• Security: Dedicated tiers for authentication (e.g., OAuth in Pathao).

Real-world example:

• Khalti’s payment system uses an n-tier architecture:
  • Presentation Tier: Mobile/web app UI.
  • Business Tier: Payment processing logic.
  • Data Tier: Customer and transaction databases.
  • Security Tier: Encryption and fraud detection.

4. HTML5: The Backbone of Web Pages

HTML5 is the latest standard for structuring web content. Key features:

• Semantic tags (<header>, <footer>, <article>).
• New form elements (<input type="email">, <input type="date">).
• Multimedia support (<audio>, <video>).
• Offline capabilities (LocalStorage, WebSQL).

New Form Elements in HTML5

Worked Example: Creating a User Registration Form

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="dob">Date of Birth:</label>
  <input type="date" id="dob" name="dob">

  <input type="submit" value="Register">
</form>

Real-world tie-in:

• NEPSE’s investor registration form uses HTML5 validation to ensure correct email formats and dates before submission.

5. Creating a Basic Web Page Structure

A well-structured HTML5 page includes:

1. Document structure (<!DOCTYPE html>, <html>, <head>, <body>).
2. Header with logo/search bar (<header>, <img>, <form>).
3. Two-column layout (using <div> and CSS).

Example: Simple Web Page with Logo and Search Bar

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <style>
    .header { display: flex; align-items: center; }
    .logo { width: 50px; }
    .search { flex-grow: 1; }
  </style>
</head>
<body>
  <header class="header">
    <img src="logo.png" alt="Logo" class="logo">
    <form class="search">
      <input type="text" placeholder="Search...">
      <button type="submit">Go</button>
    </form>
  </header>

  <div style="display: flex;">
    <div style="width: 25%; background: #f0f0f0;">
      <!-- Sidebar content -->
    </div>
    <div style="width: 75%;">
      <!-- Main content -->
    </div>
  </div>
</body>
</html>

Real-world example:

• Daraz’s homepage uses a similar structure:
  • Header: Logo + search bar + cart icon.
  • Two-column layout: Left sidebar (categories) + right main content (products).

6. How Web Servers Handle HTTP Requests

When you visit a website, this happens:

1. DNS lookup: Converts daraz.com to an IP (e.g., 123.45.67.89).
2. TCP connection: Establishes a secure channel (HTTPS).
3. HTTP request: Browser sends GET /products HTTP/1.1.
4. Server processing:
   • Checks if the file exists (e.g., products.html).
   • If dynamic, runs a script (e.g., PHP) to fetch data from a database.
5. HTTP response: Server sends back the webpage (e.g., 200 OK status).

sequenceDiagram
    participant Browser as User's Browser
    participant DNS as DNS Server
    participant Server as Web Server
    participant DB as Database
    Browser->>DNS: Request IP for daraz.com
    DNS-->>Browser: Returns 123.45.67.89
    Browser->>Server: GET /products HTTP/1.1
    Server->>DB: Query (if dynamic)
    DB-->>Server: Data
    Server-->>Browser: HTTP/1.1 200 OK
    Note over Server,DB: Dynamic processing
    Note over Browser,Server: Static file response (if applicable)

Real-world example:

• NTC’s website handles requests like this:
  • You type ntc.gov.np → DNS resolves to NTC’s server IP.
  • Server checks if you’re logged in (session management).
  • If you request bill-payment, it fetches your account data from the database and renders the payment form.

7. Session Management in Web Servers

A session keeps users logged in and tracks their activity. Methods:

1. Cookies: Small data stored on the client (e.g., session_id=abc123).
2. Server-side sessions: Data stored on the server (e.g., PHP’s session_start()).
3. Tokens (JWT): Secure, stateless authentication (used in APIs).

Example: How eSewa Maintains Your Session

1. You log in → eSewa’s server creates a session ID and stores it in a cookie.
2. On subsequent pages, the browser sends the cookie.
3. Server checks the session ID to verify your login.

stateDiagram-v2
    [*] --> UserLogsIn
    UserLogsIn --> ServerCreatesSession: Sets cookie (session_id)
    ServerCreatesSession --> [*]
    [*] --> UserNavigatesPage
    UserNavigatesPage --> BrowserSendsCookie: Includes session_id
    BrowserSendsCookie --> ServerValidatesSession: Checks session ID
    ServerValidatesSession --> [*]

8. Common Applications of Web Servers

Real-world example:

• Pathao’s driver app uses a web server to:
  • Authenticate drivers via OAuth.
  • Process ride requests (real-time updates via WebSockets).
  • Store trip history in a database.

In the Real World

1. eSewa’s Payment System

   • Uses n-tier architecture:
     • Presentation Tier: Mobile/web UI.
     • Business Tier: Payment processing logic (e.g., deducting from your bank).
     • Data Tier: Transaction database.
     • Security Tier: Encryption (PCI-DSS compliant).
   • HTML5: Form validation ensures correct phone numbers and amounts before submission.

2. Daraz’s Order Queue

   • Web server manages thousands of concurrent requests during sales (e.g., "Daraz Great Republic Day Sale").
   • Session management: Keeps your cart active even if you close the browser (via cookies).
   • HTTP/2: Faster loading of product pages (multiplexing requests).

3. Ncell’s Charging Station

   • 3-tier architecture:
     • Client: Mobile app (requests balance check).
     • Server: Processes the request (e.g., GET /balance?phone=98XXXXXXXX).
     • Database: Stores user balances and transaction history.
   • Pitfall: If Ncell used a 3-tier model, scaling during peak hours (e.g., New Year) would be difficult. Instead, they use load balancers (n-tier advantage).

Exam Tip

1. For architecture questions:

   • Always compare 3-tier vs. n-tier in a table (as above).
   • Mention scalability, security, and maintainability as key points.
   • Example answer for "Critically analyze the pitfall of 3-tier vs. n-tier":

     "The 3-tier model suffers from tight coupling, making it difficult to scale or update individual components. For example, modifying the business logic layer may require changes in the data layer, increasing development time. In contrast, n-tier architectures like those used by Khalti allow independent scaling of the security tier (e.g., adding two-factor authentication) without affecting the presentation layer."

2. For HTML5 questions:

   • List semantic tags (<header>, <nav>, <article>) and new form elements (<input type="date">).
   • Provide a short code snippet (like the registration form above).
   • Example answer for "What are new form elements in HTML5?":

     "HTML5 introduced <input type="email"> for email validation, <input type="date"> for date pickers, and <datalist> for autocomplete. For example, NEPSE’s investor form uses <input type="email"> to ensure users enter valid email addresses before submission."

3. For web server questions:

   • Explain HTTP request/response cycle with a sequence diagram.
   • Mention session management (cookies, tokens) with a real example (e.g., Daraz cart).
   • Example answer for "How does a web server process HTTP requests?":

     "A web server like Ncell’s follows these steps: 1) Receives a request (e.g., GET /balance), 2) Checks for static content (e.g., balance.html), 3) If dynamic, runs a script (e.g., PHP) to fetch data from the database, 4) Generates an HTTP response (e.g., 200 OK with JSON data), and 5) Sends it back to the client. Session cookies ensure the user remains authenticated across requests."

4. For practical questions (e.g., "Create a web page with..."):

   • Use semantic HTML5 (not tables for layout).
   • Include a header with logo/search bar (as in the Daraz example).
   • Use CSS for layout (e.g., display: flex for two columns).
   • Example structure:

     <!DOCTYPE html>
     <html>
     <head><title>My Page</title></head>
     <body>
       <header>
         <img src="logo.png" alt="Logo">
         <form><input type="text" placeholder="Search..."></form>
       </header>
       <div style="display: flex;">
         <aside style="width: 25%;">Sidebar</aside>
         <main style="width: 75%;">Content</main>
       </div>
     </body>
     </html>