How does the Web work?

Photo by NASA on Unsplash

How does the Web work?

Basics of web and what happens when you view a webpage on a laptop or phone

Different terms of the web:

Every concept has its own terms to understand. The following are the parts or must-know terms of the World Wide Web.

  1. Client
  2. Server
  3. IP address
  4. ISP
  5. DNS
  6. Domain Name
  7. TCP/IP
  8. Port Number
  9. Host
  10. HTTP
  11. URL

Client:

Any application, such as firefox that runs on a computer and is connected to internet. For example: your computer connected to your WI-FI, or your phone connected to mobile network. Clients send requests to servers from the application's User Interface.

Server:

A machine that is connected to internet and also has an IP address. A server waits for requests from clients and responds to them. The primary function of a web server is to store, process and deliver web pages to clients. There are many types of servers like web servers, database servers, file servers, application servers etc.

WhatsApp Image 2022-06-25 at 8.11.14 PM.jpeg

IP address:

Internal Protocol Address. A numeric identifier for a device( computer, server, printer, router etc). For example: We all have different house numbers and unique mobile numbers. In the same way every computer, server, printer etc have their own IP address.This helps in identifying and communicating with other computers. IP addresses have four sets of numbers separated by decimal points(e.g: 123.456.78.2). This is called the "logical address". In order to locate a device in the network, the logical IP address is converted to a physical address by the TCP/IP protocol software.The physical address is built into your hardware.

ISP:

Internet Service Provider. ISP is the middle man between the clients and servers. For a normal person ISP is usually a "cable company". When your browser gets a request from you to go to twitter.com, it actually doesn't know where to look for the twitter website. So it's ISP job to do a DNS lookup to ask what IP address the site you are trying to visit is configured to.

For example: When we go to a new place (search for a site) , we often ask the locals(ISP) about the destination and the locals ask the guy(DNS) who knows the destination and we get our destination from the locals who got that info from the guy.

DNS:

Domain Name System. A distributed database which keeps track of the computer's domain names and their corresponding IP address on the internet. In simple words DNS helps us to search twitter.com instead of searching its IP address.

For example: Imagine a substitute teacher(ISP) in class taking attendance, the sub teacher may not know the names or pronunciation of student's names properly, so the sub teacher calls out students(Domain name) by their roll numbers from the register(DNS).

Similarly, the users don't exactly know the IP addresses of all the websites , so they call the websites names and the DNS which stores their IP addresses, The ISP looks into the IP address and finds the website and responds to the client.

Domain Name:

Used to identify one or more IP addresses. Users use the domain name to get to the website on the internet. When you type the domain name in browser, the DNS look it up the corresponding IP address for the website.

TCP/IP:

Transmission Control Protocol / Internet Protocol. The most widely used communications protocol. A "protocol" is simply a standard set of rules for doing something. TCP/IP is used as a standard for transmitting data over networks.

Port number:

A 16-bit integer that identifies a specific port on a server and is always associated with an IP address. It serves as a way to identify a specific process on a server that network requests could be forwarded to.

Host:

A computer connected to a network. It can be client, server or any other type of device. Each host has a unique IP address. For a website like twitter.com, a host could be the web server that serves the pages for the website. Servers and hosts are different. Servers are a type of host - they are a specific machine. On the other hand, a host could refer to an entire organization that provides a hosting service to maintain multiple web servers. You can run server from a host in that sense.

HTTP: Hyper-text Transfer Protocol. The protocol that web browsers and web servers use to communicate with each other over the internet.

URL: Uniform Resource Locators. URLs identify a particular web resource. twitter.com/username. The URL specifies https--> protocol twitter.com--> host name username--> file name

Now we have covered the basic fundamentals of Web. Let's cover the main part of the web i.e how we get the requested website in front of us. The journey from code to webpage.

The Behind The Scenes of a webpage

Step 1: Type the URL of a webpage into the browser

image.png

Step 2: https--> protocol twitter.com--> domain name / ---> resource In the above case the browser is going to display the main page

Step 3: After tapping the enter button, the browser receives a request from us to search and respond about the twitter main page. The browser communicates with ISP to do a DNS lookup of the IP address for the web server hosting twitter. The DNS will first contact root name server, the RNS shows the IP address of twitter. This address is sent back to DNS service.

Step 4: Once the ISP receives the IP address of the destination server, it sends it to the web browser.

https -> protocol 172.20.345.43----> IP address 234--> port number https://172.20.345.43: 234

Step 5: Th browser takes IP address and given port number from URL and opens a TCP socket connection. Now the web browser and web server are finally connected. It's like in the Avatar movie where hero connects his hair tentacles with the flying dragon(i guess its dragon) and the connection is set.

image.png

Step 6: The browser sends an HTTP request to the web server for the main HTML web page of twitter.com

Step 7: The web server receives the request and looks for the requested HTML page. If the page exist, the web server prepares the response and sends it back to browser. IF the server cannot find the requested page, it will send an HTTP 404 error message, which stands for "Page Not Found".

Step 8: The browser takes the HTML page it receives and then parses through it doing a full head to toe scan looking for other assets that are listed, such as images, CSS files, JavaScript files.

Step 9: For each asset listed, the browser repeats the entire process above, making additional HTTP requests to the server for each resource.

Step 10: Once the browser has finished loading all other assets that were listed in the HTML page, the page will finally be loaded in the browser window and the connection will be closed.

image.png

This is the home page twitter. as you can see in the URL twitter.com/home .

Thank you for reading till the end. Appreciate your honest feedback. Here to learn in public and share in public.