DEV Community

Mohammed Taukir Sheikh
Mohammed Taukir Sheikh

Posted on

How web works

The web—short for the World Wide Web—is a system of interconnected documents and resources, linked by hyperlinks and accessed via the internet. Understanding how the web works involves several key components and processes. Here's a simplified breakdown:

1. Key Components of the Web

  • Internet: The global network of computers that connects devices worldwide.
  • Web Browsers: Software like Chrome, Firefox, or Safari that users use to access web content.
  • Web Servers: Computers that store and serve web pages (e.g., websites).
  • Web Pages: Documents written in HTML (HyperText Markup Language), often enhanced with CSS and JavaScript.
  • URLs (Uniform Resource Locators): Addresses used to identify resources on the web (e.g., https://www.example.com).
  • HTTP/HTTPS: Protocols used to transfer data between browsers and servers.

2. How It Works: Step-by-Step

Let’s say you type https://www.google.com into your browser:

Step 1: Enter URL

You type a web address (URL) into your browser.

Step 2: DNS Lookup

The browser needs to find the server's IP address (like 142.250.180.78) from the domain name (www.google.com).

  • It queries a DNS (Domain Name System) server, which acts like a phonebook for the internet.
  • DNS returns the corresponding IP address.

Step 3: HTTP/HTTPS Request

Your browser sends an HTTP (HyperText Transfer Protocol) or HTTPS (secure version) request to the server at that IP address.

Example request:

GET / HTTP/1.1
Host: www.google.com
Enter fullscreen mode Exit fullscreen mode

Step 4: Server Processes Request

The web server receives the request, processes it (e.g., retrieves the requested web page), and sends back a response.

Step 5: Server Sends Response

The server sends back an HTTP response, which includes:

  • Status code (e.g., 200 OK means success)
  • The web page content (HTML, CSS, JavaScript, images, etc.)

Step 6: Browser Renders the Page

Your browser receives the HTML, CSS, and JavaScript and renders it into a visual webpage.

  • It reads the HTML to build the structure.
  • Applies CSS for styling.
  • Executes JavaScript for interactivity.

Step 7: Page Loads and Becomes Interactive

You now see the webpage and can interact with it (click links, submit forms, etc.).

3. Additional Concepts

  • Hyperlinks: Clicking a link triggers the same process for a new page.
  • Client-Server Model: Your browser (client) requests data; the server responds.
  • Caching: Browsers and servers often store copies of pages to load them faster next time.
  • Security (HTTPS): Uses encryption (via SSL/TLS) to protect data in transit.

4. Example Diagram (Simplified) 

You → Browser → DNS → Server → HTTP Response → Browser Renders → Web Page
       ↑           ↑         ↑
     URL        Finds IP   Sends Data
Enter fullscreen mode Exit fullscreen mode

Summary

The web works through a client-server model using HTTP(S) over the internet, where:

  1. You request a webpage via a URL.
  2. DNS finds the server's IP address.
  3. Your browser asks the server for the page.
  4. The server sends back the content.
  5. Your browser displays it.

It’s a powerful, decentralized system that allows billions of people to share and access information globally.

Top comments (0)