About the web- Web Development

About the Web – How does the web work?

In this article, I'll present a simplified version of what happens when you view a web page in a web browser, from a computer or phone.

This part is not essential for writing web code, but it will help you understand what happens in the background, what the mechanisms are.

Clients and servers

Computers connected to the web are called clients and servers. A simplified diagram of how they interact might look like this:

• Clients are typical internet-connected devices used by web users (for example, a computer connected to Wi-Fi or a phone connected to the mobile network) and the web access software available on those devices (usually a web browser like Firefox or Chrome).
• Servers are computers that store web pages, sites, or applications. When a client device wants to access a web page, a copy of the web page is downloaded from the server to the client machine to be displayed in the user's browser.

The other parts of the toolkit

The client and server described above don't tell the whole story. There are many other elements involved, and we'll describe them below.

Let's imagine the web as a road. At one end of the road is a house — the client, and at the other end is a store where you want to buy something — the server.

On the road between client and server there are a whole series of elements:

• Internet connection – allows you to send and receive data on the web. It's basically the road between your house and the store.
• TCP/IP – Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel on the web. These are transport mechanisms, like a bicycle or a car you use to travel from home to the store.
• DNS (Domain Name Servers) – domain name servers are like an address book for websites. When you enter a web address in the browser, it looks up the DNS to find the actual address of the website before it can retrieve the site. The browser needs to find out which server the site is on so it can send HTTP messages to the right place. It's like looking up the exact address of the store.
• HTTP (Hypertext Transfer Protocol) – hypertext transfer protocol is an application protocol that defines a communication language understood by both client and server.
• Component files – a website is made up of several different types of files. These files fall into two main categories:
  • Code files – websites are mainly built with HTML, CSS, and JavaScript, but you'll encounter other technologies a bit later.
  • Assets – this is a collective name for all the other elements that make up a website, such as images, music, video, PDF documents, etc.

What exactly happens?

When you enter a website address in the browser, the following happens:

1. The browser looks for the DNS server and finds the actual address of the server where the website physically exists.
2. The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client. This message, as well as all other data sent between client and server, is transmitted through your internet connection using TCP/IP.
3. If the server approves the client's request, the server sends the client a “200 OK” message, which means “Of course you can view that site! Here it is,” then begins sending the website files to the browser as a series of small chunks called data packets.
4. The browser assembles the small chunks into a complete website and displays them.

DNS explained

Real web addresses are not nice, easy-to-remember text strings that you type into the address bar to find your favorite sites. They are special numbers that look like this: 63.245.215.20.

These are called IP addresses and represent unique locations on the web. However, they're not very easy to remember, right? That's why domain name servers were invented. These are special servers that match a web address you enter in your browser (like “google.com”) with the actual (IP) address of the site.

Websites can be accessed directly through their IP addresses. You can find the IP address of a website by typing its domain name into a tool like IP Checker.

For example, in the terminal we can send a ping to an address and we'll receive the IP address:

  ping traffic-engine.com

The IP address circled in blue is in IPv6 format.

If we convert the IPv6 address (2a00:ece1:0:14::1f2) to IPv4, we get the address: 188.241.222.150.

If we enter this address in the browser, we'll reach the site: traffic-engine.com. If we don't reach this site, then it's possible that the address is a shared one, used by multiple websites.

The home computer connected to the internet also has an IP address generated by the Internet provider. You can see what your IP address is by searching on Google “what is my IP”.

Once we're on a site and navigate through various pages, we're basically making different requests to the server via the HTTP or HTTPS protocol and receiving access to various pages and resources from that site.

Data packets

Earlier we used the term “packets” to describe the format in which data is sent from server to client. What do we mean here? Basically, data is sent over the web as thousands of small fragments, so that many different users can download the same site at the same time. If websites were sent as large chunks, only one user could download the site, and the others would have to wait their turn, which would obviously make the web very inefficient and not very user-friendly.

When we visit a site, if we press F12 the DevTools panel opens, we select "Network" and if we refresh the page, we'll see what resources are downloaded along with the page we accessed. What we'll see are unique requests to resources that we receive along with the requested web page.

How does the Internet work?

The Internet is the backbone of the web, the technical infrastructure that makes the web possible. At its core, the Internet is a large network of computers that communicate with each other.

The history of the Internet is somewhat obscure. It began in the 1960s as a research project funded by the U.S. military, then evolved into a public infrastructure in the 1980s with support from many public universities and private companies.

The various technologies that support the Internet have evolved over time, but the way it works hasn't changed very much.

A simple network

When two computers need to communicate, you have to connect them physically (usually with an Ethernet cable) or wirelessly (for example, with WiFi or Bluetooth systems). All modern computers can support either of these connections.

Such a network is not limited to two computers. You can connect as many computers as you want. But things get complicated quickly. If you try to connect, for example, ten computers, you'll need 45 cables, with nine plugs on each computer!

To solve this problem, each computer in a network is connected to a much smaller, special device called a router. This router has one job — like a signalman in a train station, it ensures that a message sent from a specific computer reaches the correct destination computer. To send a message to computer B, computer A must send the message to the router, which in turn sends the message to computer B and ensures the message is not delivered to computer C.

Once we add a router to the system, our 10-computer network only needs 10 cables, one connector for each computer, and a router with 10 ports.

A network of networks

But what do we do when we need to connect hundreds, thousands, billions of computers? Of course, a single router can't handle that, but if you read carefully, I said that a router is a device like any other, so nothing stops us from connecting two routers together?

By connecting computers to routers, then routers to each other, we can expand the network infinitely.

Such a network comes very close to what we call the Internet, but something is missing. We built this network for our own purposes, but there are many other networks — friends, neighbors, anyone can have their own computer network.

However, it's not possible to set up cables between your house and the rest of the world, so how can we do this?

Well, there are already cables connected to your house, for example, the power cable and telephone line. The telephone infrastructure already connects your house to anyone in the world, so it's the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a modem. This modem transforms the information from our network into information manageable by the telephone infrastructure and vice versa.

So we're connected to the telephone infrastructure. The next step is to send messages from our network to the network we want to reach. For this, we'll connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special routers, which are all linked together and can also access the routers of other ISPs. So the message from our network is transmitted through the ISP network of networks to the destination network. The Internet is made up of all this network infrastructure.

Finding computers

If you want to send a message to a computer, you need to specify which computer you're referring to. Thus, any computer connected to a network has a unique identification address called an “IP address” (where IP stands for Internet Protocol). It's an address made up of a series of four numbers separated by dots, for example: 192.168.2.10.

This works great for computers, but we humans can't memorize such strings of digits that correspond to site addresses.

To make things easier, we can associate an IP address with a name that can be read and remembered by users, called a domain name. For example, google.com is the domain name used, which corresponds to the IP address – 173.194.121.32. So, using a domain name is the easiest way to reach a computer on the Internet.

The Internet and the Web

As you may have noticed, when we browse the web using a web browser, we usually use domain names to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we've seen, the Internet is a technical infrastructure that allows billions of computers to connect together. Among these computers, some (called web servers) can send intelligible messages to web browsers. The Internet is an infrastructure, while the Web is a service built on top of that infrastructure. It's worth mentioning that there are several other services built on top of the Internet infrastructure, such as email and IRC.

Understanding common terms

As in any field, the web has its own specific jargon. There are a few basic terms you need to understand from the beginning. It's easy to confuse these terms sometimes, as they refer to related but different functionalities. In fact, you'll sometimes see these terms used incorrectly, which can be confusing.

• web page – a document that can be displayed in a web browser such as Firefox, Google, etc. These are often simply called “pages.” To access a page, you just need to enter its address in the browser's address bar:


• website – a collection of web pages that are grouped and usually connected together in various ways. Often called a “website” or simply “site.” To access a website, type its domain name into your browser's address bar, and the browser will display the site's main page, sometimes called “home.”


• web server – a web server is a computer that hosts one or more websites on the Internet, along with all the files those sites need to function properly. The web server sends any web page belonging to a hosted site to the user's browser upon request.
  Don't confuse websites and web servers. For example, if you hear someone say, “My website isn't responding,” it actually means the web server isn't responding, and therefore the website isn't available — nor is any other site hosted on that server.


• search engine – a web service that helps you find other web pages, such as Google, Bing, Yahoo, or DuckDuckGo. Search engines are normally accessed through a web browser (for example, you can search in search engines directly from the address bar in Firefox, Chrome, etc.) or through a web page (for example, bing.com or duckduckgo.com). Many beginners confuse search engines and browsers. To be very clear — a browser is a software application that loads and displays web pages, a search engine is a website that helps people find web pages from other websites.