How does the web work?
Tags: webdev, beginners
Published: 2021-06-10 00:47:07

It seems like a silly thing to ask. *How does the web work?*  Ahh...well you put in the name of the website you want and then it loads on your device. Simple! But *how exactly* does putting 'twitter.com' in your search bar give you Twitter? How does googling 'plumbers near me' give you pages of links to plumbers' websites? 

Let's take a look!

#### Internet vs World Wide Web
The first thing we need to figure out is this: what exactly *is* the web? Now, you may use the words "web" and "Internet" interchangeably but they're not quite the same thing. The **Internet** is the physical connection of computers to one another. *(Computer here also refers to phones, tablets, etc.)* This interconnection of computers is called a **network**. So, we can understand the Internet as being the hardware that connects our computers to each other. Different networks around the world are connected through *Internet backbones*, a multitude of fiber-optic cables that allow for fast transmission of data from one computer to another.

The **web** is the software that *runs on* the Internet. It is a bunch of code written by programmers to display the information that is sent through the Internet usually through an app like a browser. 

#### The client-server model
The way that information is sent on the web between computers is through a structure known as the **client-server model**. At its core, it's made up of two parties: the *client* which is the computer asking for the website and the *server* which is the computer that holds the files that make up the website. 

The process goes as follows:

(1) The client (you) wants to go to a certain website. Let's say it's Google. You open up your browser and enter `www.google.com` into the search bar.

`www.google.com` is the URL or address of the document that you wish to see (the Google homepage). 

(2) A request is sent off through the Internet to the Domain Name Server or DNS. The DNS is essentially a phonebook for the web. It contains all the addresses of all websites that are live on the web at any moment. Each URL has a corresponding address made up of a 12 digit long number called an Internet Protocol (IP) address. This indicates where a particular website is located on a network.

The IP address of Google is **172.217.1.174**

(3) The DNS sends 172.217.1.174 back to your browser. This is called a response.

(4) Now that your browser knows the IP address of Google, it then sends off another request to a Google **server**. Think of a server as a computer that is always running. This server holds the files of the website. In this case, it is the files that make up the Google homepage. 

(5) If the server successfully receives the request from your browser, it then sends back the files of the website broken down into tiny little chunks. This is another example of a response.

(6) The browser receives the files and then reads them in order to see how to display everything correctly.

(7) You end up with the Google homepage being displayed.

*(If you already know the IP address of the website you want to visit then you can enter that directly into your browser. Try it yourself! Type `172.217.1.174` into your browser and see if it takes you to the Google homepage!)*

Having successful communication between the client and the server is not a guarantee. Sometimes a request may not successfully be sent such as if you were to accidentally type `www.googgle.com/` instead of `www.google.com`. The same is true of a response. There may issues with a server that prevent the client from receiving the expected response such as if the files are too big.

####Summary

- The Internet is the hardware connecting computers together 
- The web is the software the runs on the Internet
- Information is sent on the web using the client-server model
- This series of requests and responses bring us the millions of websites we browse everyday


**This is part of a series of articles aimed at helping beginners master the fundamentals of web development. Stay tuned for part 2 to learn more about the files that make up your favorite websites.**