How the Web Works - A Brief Introduction

What’s a URL? What happens when I visit a webpage? These are some questions you might have when you think about the processes that happen behind-the-scenes of web browsing. As a developer, it is essential to understand these processes. In this article, we’ll answer these questions and explore how the web works.

What you’ll learn about:
  • Request-Response Model
  • Internet Connections
  • TCP/IP – Transmission Control Protocol/Internet Protocol
  • DNS – Domain Name Server
  • HTTP – HyperText Transfer Protocol
  • Component Files

As you read this article, you’ll notice we use some of these terms when explaining each topic, as they relate to each other so much.

Request-Response model

The request-response model involves a client computer (which could be your desktop or mobile phone) requesting data or other services (web applications, sites, or applications), and a server response to that request which delivers the data or services that were requested.

Computers which are connected to the internet are called clients and servers. A simplified diagram of their interactions might look something like this:

request-response

In our case, the client is your computer (specifically, your web browser), which sends the request when you hit enter after typing a URL (Uniform Resource Locator) into the search bar. The server is a computer that stores data or other services. It responds to the request your computer makes by delivering the requested data or resource (or not. In such situations, you might receive HTTP server status errors. e.g. 404 - Not Found).

We can imagine entering the URL https://google.com/maps into the search bar. The client (i.e. your web browser), will send a request through the internet until it reaches the server which contains the requested resources (Google Maps), and thus you find yourself on Google Maps. But what is exactly going on, how does all of this work?

First, the browser goes to the DNS server, looking up the real address of the URL. What we mean by the real address is an IP address such as 142.250.188.14 (which is an IP address belonging to Google. If you type it in the URL bar, you will be redirected to google.com). The IP address is a unique location on the web. Every device connected to the web has an IP address. However, it’s not very nice, nor is it easy to remember. It’s the reason why Domain Name Servers were invented.

A Domain Name Server essentially matches our pretty URL (e.g. google.com), to the IP address (142.250.188.14). They can be thought of as special servers that are kind of like phone books.

Let’s recap:

  1. The URL is entered into the search bar.
  2. A DNS Lookup is performed (by the ISP), matching the URL to the real IP address.
  3. The server responds with the requested resources (component files).

What else is going on?

Internet Connections

In order for the above to actually work, our client needs to be connected to the internet. We connect to the internet with the help of an ISP (Internet Service Provider). An ISP sells internet access, either by a dial-up connection over a phone line, or through a broadband connection such as a cable modem or DSL service.

request-response

The internet is a worldwide computer network that transmits a variety of data and services across connected devices. It works by using packets that follow TCP/IP. We can think of the internet as a big city. The big city has lots of roads, and on these roads, there are lots of shops. You (the client) are able to travel these roads, and stop at different shops, buying and delivering goods. Likewise, we can think of the internet as a big interconnected city, with lots of clients (people), servers (shops), and connections (roads).

TCP/IP

TCP/IP stands for Transmission Control Protocol/Internet Protocol and is a set of communication protocols used to connect network devices on the Internet. TCP/IP also specifies how data is exchanged over the internet by providing communications that identify how it should be broken into packets, and delivered/received at the destination.

DNS – Domain Name Server

As we’ve explained in the request-response model topic, DNS lets users connect to websites using domain names instead of IP addresses. It is essentially the phonebook of the internet. As we access sites with their domain names (e.g. google.com, facebook.com, etc.), our browsers actually reach them through their IP address. Again, DNS was created to make it easier on us humans to interact with resources on the web.

HTTP – HyperText Transfer Protocol

Designed in the 1990s, HyperText Transfer Protocol (HTTP) is an application-layer protocol for transmitting media documents. Requests are initiated by the client (i.e. web browser), and responses are sent via the server. It is not only used to transmit hypertext documents, but also images, videos, or to post content to servers, such as form results from web pages.

Component Files

Component files are the building blocks of a website. The files included contain: HTML, CSS, and JavaScript. There are also assets, which are media files, such as images, PDFs, videos, etc.

Where to go from here

We covered quite a bit of topics in this article, such as the request-response model, internet connections, TCP/IP, DNS, HTTP, and component files. However, these topics are massive, and would require entire courses, and/or books to dive further into them. Check out the resource below if you would like to explore the topics deeper – perhaps you can make a career out of it.

CompTIA Network+ N10-006 Complete Video Course

If you want to explore networking fundamentals, and potentially get certified, this video course is a great way for you to study and learn about these topics. The price tag might be a bit hefty, but it is an investment in your career growth. There’s also a CompTIA Network+ Exam book you can use to go along with the course, or to read as a standalone study guide.

Topics include
  • Fundamental networking concepts, such as protocol reference models, network devices and theory, network topologies, and network services
  • WAN technologies including ISDN, Frame Relay, PPP, MPLS, Metro-Ethernet, and more
  • How to work with different network cables and connectors
  • IPv4 and IPv6 addressing
  • Network security attacks, vulnerabilities, policies, defenses, and counter-measures
  • And more!

Pearson+ Biology 728x90



Full Disclosure: this post contains affiliate links. However, we only recommend books or products (courses) that we have personally read or used. We may receive a (very) small commission if you purchase any of the books or courses from this list (at no additional cost to you).

comments powered by Disqus

Related Posts

Security & Cyber Crime Blogs You Should Be Reading

Digital threats are plenty and cyber attacks are a constant concern. As developers, we should be aware of the threats our software may encounter as we develop applications.

Read more

Learning Programming for Free in 2024: 6 Websites to Check Out

In the modern world, people can switch careers several times during a lifetime. And going for an IT-related profession, for example, becoming a software developer, makes a lot of sense.

Read more

Routing with Angular: A Quick Tutorial

Today, we’ll be looking at the navigation and routing aspects in Angular. This tutorial is a continuation of our previous starter tutorial where we created a simple Angular application, installed Tailwind CSS, and created a navigation bar.

Read more