How the Web Works: A Simple Guide for Everyone

how the web works step by step diagram

Are you familiar with how to use a web browser (e.g., Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari, etc.) to open a webpage or URL? The web is made up of interconnected computers and servers, which allows fast access to and sharing of information (using web browsers). Understanding how the web works can help you manage, create, and troubleshoot problems related to your website(s).

Simply stated, the web is a global computer network of computers and web servers, used to share and exchange information.


Step 1: Browsers (Access Devices)

Your web browser (Chrome, Firefox, Safari, etc.) will act as the means by which you connect to a particular website on the web. Your browser will decode the page's code (HTML, XML, CSS and JavaScript) into a format you can read.

By using your web browser, you will:

  1. Request data from web servers to download web pages.
  2. Look at the layout, colours, images, and other visual elements of web pages.
  3. Use cookies and cached data when browsing the internet more quickly.


Step 2: Web Servers (Where Web Pages Are Stored)

Web servers are powerful computers that contain the entire contents of your website and respond to requests for data sent to the web server from your browser. All web pages exist on physical or networked web servers.

The Process:

  • You enter a web page address into a web browser.
  • The web browser makes an online request to the web server.
  • The web server receives the request and returns the web page.


Step 3: The Communication Protocol (HTTP/HTTPS)

Hypertext Transfer Protocol (HTTP) is a standardized protocol used for communication between web servers/customers. 

  • HTTP: General (non-secure) communication
  • HTTPS: Encrypted communication (secured)

When you see a little lock icon in your browser's URL bar, it indicates that the web site uses HTTPS, meaning that your data will be protected.


Step 4: The Internet's Phonebook (Domain Name System)

The Domain Name System (DNS) is responsible for taking a web site (for example, www.sitename.com) and translating it into an IP address (number that computers recognize). 

If there were no DNS, you would always have to enter complicated numbers (rather than easy-to-remember web addresses) in order to access the web page.


Step 5: How A Web Page Loads

  • You can type a URL address directly into your web browser or click on a hyperlink.
  • Your web browser finds the IP address for the web server by looking it up in the DNS.
  • Your web browser sends a request (using HTTP) to the web server for the web page.
  • The web server responds to your request by sending you the files that comprise the web page (HTML, CSS, JavaScript, and media).
  • Your web browser renders the appropriate images and text so you can view the web page.


Step 6: Frontend vs Backend

  • The Frontend consists of everything displayed on a webpage (text, images, buttons) that is visible to the end-user.
  • The Backend is comprised of a server, a database, and an app that make a webpage work. 

Example of a Frontend Backend Interaction: 

When you log into your Gmail: 

The Frontend displays the Inbox view. Simultaneously, the Backend interacts with the server to verify your username and password, locates your emails (from a database) and serves them to your browser.


Step 7: Databases (How we keep the info)

  • Most web pages use databases to store data such as profile information, posts, messages, etc. 
  • When a user requests data from a database (on the server), the request is carried through and fulfilled by the database. 
  • Some databases commonly used in web application development: MySQL, Mongo DB and PostgreSQL.


Step 8: Internet Security: Security is important for use of the web safely:

  • Data sent over HTTPS is encrypted.
  • Firewalls, along with the proper configuration of servers, are used to protect against attacks on websites.
  • User accounts are protected by passwords and two-factor authentication.


Closing:

The entire web can seem overwhelming, but it’s an easy-to-understand chain that is as follows: 

Browser -> DNS -> Server -> Browser 


I’ve been involved in technology for a long time, and understanding how things worked this way gave me an entirely different perspective. 

If you are learning web development or want the confidence to use the internet – your first step is to learn this flow.


If you want to explore this in more detail, check out our step-by-step guide: How the Internet Works: A Simple Step-by-Step Guide for Beginners

Comments

Post a Comment

Popular posts from this blog

How Computers Work : A Step-by-Step Guide for Beginners

Image
You can’t escape computers these days. They are found everywhere from the phones we carry around with us to the laptops sitting on our desks. However, have you ever thought about how these devices actually work? This guide will take you through a thorough step-by-step analysis of what computers really do in the easiest way possible so that anyone who is just starting out can grasp the concepts. A Computer Defined At its most basic level, a computer is an electronic device designed to process input and generate output. Processing consists of receiving input, performing some computation on it (e.g., arithmetic), and finally presenting the user with some valuable output. There are numerous varieties: Desktops : Traditional computers that are typically used for work and gaming Laptops : Portables designed for day-to-day activities Servers : Very powerful machines designed to manage websites or large databases Smartphones and tablets : Pocket-sized computers The Fundamental Components of a ...
Read more

What Is DNS and How Does It Work? A Simple Guide for Beginners

Image
Are you aware that when you enter a web address (such as google.com) and there is no way to know how your web browser is going to locate that website on your computer? This is where DNS comes into play.  DNS is short for Domain Name System, which is essentially a giant phone directory for the internet. Using DNS, your computer can very quickly locate a website without having to memorize an extremely long series of numbers to connect to it. What is DNS? The Domain Name System (DNS) serves as a platform for transforming website domain names into their respective IP (Internet Protocol) addresses. In the case of computers, the IP address is utilized to communicate with other computers via an overall network. Instead, humans can use the much more manageable and manageable website addresses like google.com to communicate with each other.  DNS translates these human-readable website addresses into numerical IP addresses to enable your browser to connect to the site you wish to visit....
Read more