Web Foundations, Standards and Architecture

Introduction

The World Wide Web is a distributed information system built on the Internet. It enables users to retrieve documents, execute applications, exchange data, and communicate through standard protocols. Modern web development therefore requires more than knowledge of HTML, CSS, and JavaScript. A developer must understand how names are resolved, how browsers communicate with servers, how requests are processed, how applications are hosted, and how standards support interoperability, accessibility, security, and maintainability.

The Internet is the global network of interconnected networks. It provides the underlying connectivity through technologies such as Internet Protocol (IP), routing, and transport protocols. The Web is one service that operates over the Internet. Other Internet services include email, file transfer, voice communication, and streaming systems. The Web primarily uses HTTP or HTTPS to exchange resources identified by URLs.

Learning Objectives

After completing this chapter, the learner should be able to:

• distinguish the Internet from the World Wide Web;
• explain DNS, URLs, browsers, servers, hosting, HTTP, and HTTPS;
• trace a browser request from URL entry to rendered page;
• compare client–server and multi-tier architectures;
• explain the role of web standards and rendering engines;
• describe cookies, sessions, and the web application lifecycle;
• identify practical, security, performance, accessibility, and governance concerns in web systems.

1. The Internet and the World Wide Web

The Internet is a decentralized communication infrastructure. Devices communicate using agreed protocols rather than relying on one central computer. IP supplies addressing and packet delivery, while transport protocols such as TCP and UDP support different communication requirements. The Domain Name System (DNS), routing systems, and network operators together make global communication possible.

The Web is an application layer system created to link and retrieve hypertext resources. A web resource may be an HTML document, stylesheet, image, video, JSON response, or executable web application. A browser acts as a user agent: it sends requests, receives responses, interprets resources, and presents an interface.

The distinction is important. A website may be reached through the Internet, but the Internet itself is not a website. Similarly, HTTP is a Web protocol, whereas IP is a general Internet protocol.

2. Names, Addresses, and URLs

Computers communicate using numerical IP addresses, while people generally use memorable domain names. DNS translates domain names into records containing network information. A simplified lookup may proceed from a user’s device to a recursive resolver, which obtains information from authoritative DNS servers. Results are cached for a period specified by the record’s time to live (TTL).

A domain name is hierarchical. In www.example.com, com is the top-level domain, example is the registrable domain, and www is a host or subdomain label. DNS may provide several record types, including:

A Uniform Resource Locator (URL) identifies the location and access method of a resource. A generalized URL can contain a scheme, authority, path, query, and fragment:

https://shop.example.com:443/products?id=27#reviews

Here, https is the scheme, shop.example.com is the host, 443 is the port, /products is the path, id=27 is a query parameter, and reviews is a fragment identifier. The fragment is normally processed by the browser and is not sent to the server in the HTTP request.

URL encoding represents characters that have special meanings or cannot safely appear in a URL. For example, a space may be encoded as %20. Developers should use appropriate encoding functions rather than constructing URLs through unsafe string concatenation.

3. Browsers and Rendering

A browser contains several major components:

1. User interface: address bar, tabs, menus, and controls.
2. Browser engine: coordinates navigation, security policies, and rendering.
3. Rendering engine: parses HTML and CSS and produces the visual page.
4. JavaScript engine: executes scripts.
5. Networking layer: performs DNS resolution and HTTP communication.
6. Storage and security subsystems: manage cookies, caches, permissions, and isolation.

When a browser receives HTML, it parses it into a Document Object Model (DOM), a tree-like representation of document elements. CSS is parsed into a structure used to calculate styles. The browser combines document structure and styles to determine layout, a process often called reflow or layout. It then paints pixels and may composite layers using the graphics system.

A simplified sequence is:

Figure: A simplified browser navigation and rendering pipeline.

Rendering is incremental. A browser may display part of a page before all resources arrive. JavaScript can modify the DOM and styles after initial rendering, causing additional layout and paint work. Excessive scripts, large images, render-blocking stylesheets, and repeated layout changes can reduce performance.

4. Servers, Hosting, and Deployment

A server is a computer or software process that provides a service to clients. A web server such as Apache HTTP Server, Nginx, or a platform-integrated server accepts HTTP requests and returns responses. It may serve static files directly or forward dynamic requests to an application runtime.

Hosting is the provision of infrastructure on which an application operates. Common models include:

• Shared hosting: many sites use one managed server; inexpensive but less isolated.
• Virtual private servers: a virtual machine provides greater control and isolation.
• Dedicated servers: one customer controls physical hardware.
• Cloud hosting: compute, storage, networking, and managed services are provisioned through a provider.
• Serverless platforms: developers deploy functions or services while the provider manages much of the infrastructure.

Hosting decisions involve cost, scalability, latency, reliability, operational control, data residency, and security. A production deployment normally also requires domain registration, DNS configuration, TLS certificates, logging, backups, monitoring, access control, and a process for software updates.

A content delivery network (CDN) places cached content at geographically distributed edge locations. This can reduce latency for static content, but caching must be designed carefully so that private or rapidly changing data is not exposed or served incorrectly.

5. HTTP and HTTPS

HTTP is a request–response protocol. A client sends a request containing a method, target, headers, and sometimes a body. The server returns a status code, headers, and an optional body.

Important HTTP methods include:

A method is safe when it is intended not to change server state, and idempotent when repeating it has the same intended effect as performing it once. Idempotency does not mean that every response is identical, nor does it prevent logging or other incidental effects.

Status codes are grouped as follows:

• 2xx: successful processing, such as 200 OK or 201 Created;
• 3xx: redirection, such as 301 Moved Permanently or 304 Not Modified;
• 4xx: client-side request problems, such as 400 Bad Request, 401 Unauthorized, 403 Forbidden, or 404 Not Found;
• 5xx: server-side failure, such as 500 Internal Server Error or 503 Service Unavailable.

HTTPS is HTTP transported through TLS. TLS provides confidentiality against network observation, integrity against unauthorized modification, and authentication of the server through digital certificates. HTTPS does not guarantee that the website is honest or that an application is free from vulnerabilities; it protects the communication channel and supports endpoint authentication.

A typical secure deployment redirects HTTP to HTTPS, uses valid certificates, protects cookies, applies suitable security headers, and avoids mixed content. Certificate validation depends on a chain of trust involving certification authorities and browser trust stores.

6. The Request–Response Process

Consider a user entering https://portal.example.edu/dashboard:

1. The browser parses the URL and checks local caches, service workers, and security policies.
2. DNS resolution obtains an address for the host, unless a usable result is cached.
3. The browser establishes network connectivity. For traditional HTTPS this involves a TCP connection followed by a TLS handshake; HTTP/3 commonly uses QUIC over UDP.
4. The browser sends an HTTP request containing the method, path, headers, and applicable cookies.
5. A load balancer or reverse proxy may terminate TLS, apply routing rules, and forward the request.
6. The application authenticates the request, validates input, applies business rules, and may access a database or another service.
7. The server generates an HTTP response with a status, headers, and body.
8. The browser processes the response, stores permitted cookies, fetches linked resources, executes scripts, and renders the interface.

Latency can arise at each stage. Performance engineering therefore considers DNS, connection establishment, server processing, database queries, response size, resource loading, and client rendering rather than focusing on only one component.

7. Client–Server and Multi-Tier Architectures

In a client–server architecture, the client requests services and the server provides them. The browser is usually the client, while a web server or application server is the server. Responsibilities are divided, but the division is not absolute: browsers perform substantial computation, and servers may serve both static and dynamic content.

A common three-tier architecture separates:

1. Presentation tier: browser interface and user interaction.
2. Application or business tier: authentication, validation, workflows, and business rules.
3. Data tier: databases, file stores, and other persistence systems.

The tiers may be deployed on separate machines or combined physically while remaining logically distinct. Separation improves maintainability and allows independent scaling, but it introduces network calls, operational complexity, and consistency concerns.

A contemporary request may pass through a CDN, web application firewall, load balancer, reverse proxy, web server, application service, cache, database, and external API. Microservices divide capabilities into independently deployable services; this can support team autonomy and selective scaling, but it also creates distributed-systems challenges such as service discovery, observability, partial failure, and data consistency.

Architecture should follow actual requirements rather than fashion. A small application may be better served by a well-structured monolith than by many services.

8. Web Standards and Interoperability

Web standards are documented technical agreements that enable different browsers, devices, servers, and assistive technologies to work together. The World Wide Web Consortium (W3C), WHATWG, IETF, and Ecma International contribute to standards and specifications relevant to the Web.

Important standards areas include:

• HTML for document structure and semantics;
• CSS for presentation and layout;
• ECMAScript for JavaScript language behavior;
• HTTP and URI specifications for communication and identification;
• accessibility guidance such as the Web Content Accessibility Guidelines (WCAG);
• media, graphics, internationalization, and security specifications.

Semantic HTML gives content meaning. A heading should be a heading, navigation should be identified as navigation, and a button should be a button rather than a clickable generic element. Semantics improve accessibility, search interpretation, maintainability, and interaction with assistive technology.

Standards compliance is not merely a browser compatibility exercise. It supports progressive enhancement: a basic, accessible experience is delivered first, while advanced capabilities improve the experience where supported. Developers should test with multiple browsers, screen readers, keyboard navigation, varied screen sizes, slow networks, and different input methods.

9. Cookies, Sessions, and State

HTTP is fundamentally stateless: each request can be processed independently. Applications nevertheless need state for login status, preferences, shopping carts, and security controls. Cookies provide one mechanism. A server sends a Set-Cookie response header, and the browser may return the cookie in later requests matching its scope.

Important cookie attributes include:

• Secure: send only over HTTPS;
• HttpOnly: prevent ordinary JavaScript access;
• SameSite: restrict cross-site sending and help reduce cross-site request forgery;
• Domain and Path: limit where the cookie is sent;
• Max-Age or Expires: control persistence.

A session commonly stores server-side state associated with a random session identifier in a cookie. The identifier must be unpredictable, protected, rotated when privilege changes, and invalidated at logout or expiration. Cookies should not contain unnecessary sensitive information. Consent and disclosure obligations may apply, particularly for non-essential tracking cookies, depending on jurisdiction.

Other state mechanisms include Web Storage, IndexedDB, URL parameters, hidden form fields, and server-side databases. Each has different security, capacity, persistence, and synchronization properties.

10. The Web Application Lifecycle

A web application lifecycle extends from conception to retirement:

1. Analysis: identify users, requirements, constraints, risks, and legal obligations.
2. Design: choose information architecture, interfaces, data structures, security controls, and deployment architecture.
3. Development: implement features using version control, coding standards, and automated tests.
4. Integration and testing: verify functionality, accessibility, compatibility, security, performance, and failure behavior.
5. Deployment: promote a reviewed build through staging into production, preferably with automated pipelines and rollback capability.
6. Operation: monitor availability, errors, latency, resource use, security events, and user experience.
7. Maintenance: fix defects, patch dependencies, update content, and adapt to changing standards.
8. Retirement: archive or migrate data, remove infrastructure, revoke credentials, and communicate service closure.

DevOps practices connect development and operations through automation, shared responsibility, observability, and repeatable delivery. Continuous integration can test every change, while continuous delivery prepares verified releases. Automation does not remove the need for human review, especially for security, privacy, accessibility, and high-impact decisions.

Applied Case: University Course Registration Portal

Background. A university operates a portal through which students search courses, register, and view timetables. The initial system becomes slow during registration week and occasionally shows stale seat availability.

Problem. A single application server performs page generation, authentication, and database operations. Static files are served from the same machine. Hundreds of simultaneous requests overload database connections, while browser caching displays outdated course data.

Analysis. Course searches are read-heavy, whereas registration is transactional and must preserve seat limits. Treating both workloads identically causes unnecessary database load. Caching is suitable for relatively stable course descriptions but dangerous for available-seat counts. The portal also handles personal information and therefore requires strong access control, TLS, audit logging, and careful privacy practices.

Approach. The university places a reverse proxy and CDN before the application. Static assets are versioned and cached. Search results use a short-lived cache with explicit invalidation after course changes. Registration requests use authenticated HTTPS endpoints, server-side validation, database transactions, and a constraint preventing the number of enrolled students from exceeding capacity. Read replicas support searches, while registration writes go to the authoritative database. Monitoring records response time, error rate, database saturation, and failed authorization attempts.

Outcome. Static traffic no longer competes directly with transactional requests. Search performance improves, while registration uses authoritative data and controlled transactions. The design does not eliminate all peak-load risk; capacity testing and a queue or waiting-room mechanism may still be required.

Learning points. Architecture must reflect workload characteristics. Caching requires freshness analysis. Security and privacy must be designed into every tier. A successful response code alone does not prove that the system produced correct business results.

Challenges, Ethics, and Governance

Web systems create responsibilities beyond technical functionality. Developers should minimize collection of personal data, explain its use, enforce retention limits, and protect it throughout its lifecycle. Accessibility is an inclusion and, in many contexts, a legal obligation. Interfaces should not manipulate users through deceptive consent designs or obstruct cancellation.

Security threats include injection, cross-site scripting, broken authentication, insecure direct object references, cross-site request forgery, supply-chain compromise, and misconfigured cloud storage. Defensive practices include parameterized database queries, output encoding, content security policy where appropriate, least privilege, secure dependency management, threat modeling, logging without excessive personal data, and incident-response planning.

AI-generated code can accelerate development but may reproduce insecure patterns, licensing problems, biased assumptions, or incorrect API usage. Developers remain responsible for reviewing, testing, documenting, and securing generated code. Automated tools are aids to professional judgment, not substitutes for it.

Contemporary Developments and Best Practices

Modern Web development increasingly involves HTTP/2 and HTTP/3, edge computing, progressive web applications, component-based interfaces, containerized deployment, infrastructure as code, and observability platforms. These technologies can improve performance and deployment consistency, but each adds dependencies and operational choices.

Recommended foundational practices are:

• use semantic, valid, accessible HTML;
• prefer HTTPS and secure cookie attributes;
• validate input on the server, even when client validation exists;
• separate presentation, business logic, and data concerns;
• apply caching deliberately and document freshness assumptions;
• measure performance using realistic devices and networks;
• use version control, code review, automated testing, and reproducible builds;
• keep dependencies and server software patched;
• minimize personal data and protect secrets outside source code;
• design for failure, monitoring, backup, recovery, and graceful degradation.

Chapter Summary

The Internet provides the global communication infrastructure, while the Web is a service built on it using URLs, HTTP, browsers, servers, and related standards. DNS maps human-readable names to network information. A browser resolves a URL, establishes secure communication when HTTPS is used, sends requests, receives responses, downloads related resources, and renders the result through DOM, styling, layout, and painting processes.

Web hosting ranges from shared servers to cloud and serverless platforms. Client–server and multi-tier architectures divide responsibilities among presentation, application, and data components. HTTP methods, status codes, headers, caching, and TLS are central to correct and secure communication. Cookies and sessions provide state over an otherwise stateless protocol. Standards promote interoperability, semantics, accessibility, and maintainability. Finally, a web application must be managed across analysis, design, development, testing, deployment, operation, maintenance, and retirement, with security, privacy, ethics, and governance included throughout.

Key Terms

Internet: Global network of interconnected networks.

World Wide Web: Hypertext and application system operating primarily over the Internet.

DNS: System that translates domain names into network records.

URL: Structured identifier for locating and accessing a resource.

Browser: User agent that retrieves, executes, and renders Web resources.

Web server: Software or machine that responds to HTTP requests.

Hosting: Provision of infrastructure for operating an application or website.

HTTP: Protocol used for Web request–response communication.

HTTPS: HTTP protected by TLS.

TLS: Protocol providing encrypted and authenticated communication.

Cookie: Browser-managed data sent with matching requests.

Session: State associated with a user or client across requests.

DOM: Structured object representation of an HTML document.

Rendering: Conversion of document, style, and script results into a visual interface.

Client–server architecture: Model in which clients request services from servers.

Multi-tier architecture: Architecture separating presentation, application, and data responsibilities.

CDN: Distributed network that serves cached content near users.

Semantic HTML: HTML whose elements communicate the meaning and structure of content.

Idempotent method: Method intended to have the same effect when repeated.

Progressive enhancement: Designing a functional baseline and adding capabilities where supported.

Review Questions

Short Answer Questions

1. How does the Internet differ from the World Wide Web?
2. What roles do DNS and a URL play in accessing a resource?
3. What is the purpose of TLS in HTTPS?
4. Why is HTTP described as stateless?
5. Name the three logical tiers in a common web architecture.

Long Answer Questions

1. Explain the complete sequence that occurs when a user navigates to an HTTPS URL, from DNS resolution through browser rendering.
2. Compare shared hosting, virtual private servers, cloud hosting, and serverless hosting.
3. Explain how HTTP methods, status codes, headers, and bodies cooperate in request–response processing.
4. Discuss how web standards improve interoperability, accessibility, and maintainability.
5. Explain cookies, sessions, their important security attributes, and alternative mechanisms for storing state.

Analytical / Application Questions

1. A news site is slow because every request dynamically generates identical images and stylesheets. Propose an architecture and caching strategy, identifying risks related to stale or private content.
2. Design a three-tier architecture for an online examination system. Identify responsibilities, data flows, security controls, and likely points of failure.
3. A registration application shows a course as available to two students who submit simultaneously, although only one seat remains. Analyze the architectural cause and propose a server-side solution that preserves data integrity.

Multiple Choice Questions with Answers

Question 1

Which statement most accurately distinguishes the Internet from the World Wide Web?

A. The Internet is a web browser, while the Web is a database.

B. The Internet is the communication infrastructure, while the Web is a service operating over it.

C. The Internet uses URLs, while the Web uses only IP addresses.

D. The Internet and the Web are two names for exactly the same system.

Correct Answer: B. The Internet is the communication infrastructure, while the Web is a service operating over it.

Question 2

What is the primary function of DNS?

A. To encrypt HTTP messages

B. To render HTML documents

C. To translate domain names into network-related records

D. To store browser cookies

Correct Answer: C. To translate domain names into network-related records

Question 3

In the URL https://example.com/items?id=4#top, which part is normally processed by the browser and not sent in the HTTP request?

A. https

B. example.com

C. id=4

D. #top

Correct Answer: D. #top

Question 4

Which HTTP method is normally intended to retrieve a representation without changing server state?

A. GET

B. POST

C. PATCH

D. DELETE

Correct Answer: A. GET

Question 5

What does HTTPS primarily add to HTTP?

A. Guaranteed correct business logic

B. Confidentiality, integrity, and server authentication through TLS

C. Permanent storage of all responses

D. Automatic protection from every application vulnerability

Correct Answer: B. Confidentiality, integrity, and server authentication through TLS

Question 6

Which component represents an HTML document as a structured tree that scripts can manipulate?

A. DNS

B. CDN

C. DOM

D. TLS

Correct Answer: C. DOM

Question 7

Which tier normally contains business rules such as authentication and registration validation?

A. Presentation tier

B. Application tier

C. Data tier only

D. DNS tier

Correct Answer: B. Application tier

Question 8

Which cookie attribute instructs the browser to send the cookie only over HTTPS?

A. Secure

B. Path

C. SameSite

D. Expires

Correct Answer: A. Secure

Question 9

A response with status code 404 generally indicates which condition?

A. The request succeeded and created a resource.

B. The server is temporarily overloaded only.

C. The requested resource could not be found at the target.

D. The connection was encrypted successfully.

Correct Answer: C. The requested resource could not be found at the target.

Question 10

Why should course seat availability in the case study be obtained from authoritative transactional data rather than a long-lived cache?

A. Because cached data can never be compressed

B. Because stale cached data could allow incorrect registration decisions

C. Because databases cannot process read requests

D. Because browsers do not support cached responses

Correct Answer: B. Because stale cached data could allow incorrect registration decisions