Web: Out of the Public view

Millions of People around the world daily surf the Web for various purposes, and hence it brings us to the question "How well do we understand the Web". Of course, people would think surfing the web is pretty simple just type in a website URL and there you have it. But do you actually know how things actually work behind the scenes to show you the desired content? To understand this let's first try to understand what actually happens when you surf the Internet.

Web Communication Model

The web simply works on a Client-Server Model where the person's browser requesting a website acts as the client while the device on which the website is stored and running is known as the server. Normally, a user would type a website URL in the browser and expect the website to show up by making a request to the desired server, but is the website URL the real address of the server? The answer is No. The server is indeed just a device running the website, and the only way of connecting with it wirelessly is by knowing its IP address.

An IP address is a unique notation for every device in the world, a traditional IPv4 address looks something like this Normally we wouldn't want to remember the IP address for every website server in the world. Therefore, we typically only remember the domain name of the website we want to visit like Google.

Between this Client-Server model, there is something called a DNS Server, where DNS stands for Domain Name System. A DNS Server is basically a book having all the domain names mapped to their respective IP addresses. So when a browser makes a request for a particular website using its URL, the DNS Server translates the URL to its corresponding IP address and forwards the request to that server, and fetches the website.

You can try this by opening the command line on Windows or a terminal on Linux, use the ping command and the name of a website as follows. The ping command will resolve the domain name to an IP address which is the server or group of servers on which the website is running. You can also try and paste this IP address on the broswer search bar to verify as this search would would give back the requested website.

Web Protocols

Web protocols are basically the communication standard of the Internet, these protocols define how the transfer of data takes place between the Client and Server. The 3 most important web protocols are TCP/IP HTTP and FTP, lets get a grasp of what these are:

  • TCP/IP: It is a transport layer protocol that helps to connect two devices over a network for the transfer of data between them. It basically provides the service for the Client-Server Model to exchange data.

  • HTTP: This is an application layer protocol that utilizes the TCP/IP protocol to exchange data on the Web like HTML documents, it works on the request-response model and is the basis of how everything is transferred on the Web. Every time a request or response has to be made it is done in the form of HTTP requests or HTTP responses.

  • FTP: Just like HTTP, FTP is an Application Layer protocol that runs on top of TCP/IP protocol. This protocol is responsible for sharing files on the Internet from one remote device to another.

HTTP Request and Response

HTTP messages are divided into two parts which are the HTTP Headers and the HTTP Body which is optional.

HTTP Request Format

The first line in the HTTP request header is always the request line which comprises of three things, first is the HTTP method, the second is the path or URL of the requested resource and the third is the HTTP version.
The rest of the header fields are name-value pairs which give information about the client, here are some of the most commonly used request headers:

  • User-Agent
  • Accept-Charset
  • Accept-Encoding
  • Accept-Language
  • Cookies

HTTP Response Format

The first line in the HTTP response header is always the request line which comprises of three things, the first is the HTTP version, the second is the HTPP status code and the third is the HTTP Status Code text.
The rest of the header fields are name-value pairs which give information about the server, here are some of the most commonly used request headers:

  • Server
  • Content-Type
  • Content-Length
  • Connection
  • Location

The body of an HTTP response may contain the requested resource like an html document.
You can read more about HTTP Methods here: HTTP Methods

HTTP Status Codes

In the previous section, we discussed the request line of the HTTP response header fields contains Status Code. You might've already come across HTTP Status Codes when you request for a page that does not exist on the server, the browser throws a 404 error and says Page Not Found this may be caused by mistyping a URL. Status Codes like 404 helps the client browser to determine if the request made was successfully completed or not. If not it helps to understand what went wrong with the request.

The above image describes how you can understand different classes of Status codes sent by the server. To read about all the Status Codes: HTTP Status Codes

What are Websites made up of?

Okay so now we know how a client browser and a remote server communicate with each other using the request-response cycle, now let's talk about the stuff that makes up a website attractive and functional. Basically, a website is rendered using the 3 basic languages which are HTML, CSS, and Javascript.

  • HTML: HTML is the language of the web, it is just a markup language that defines the structure of the webpage. It also contains links to additional resources that have to be rendered on the website like images and hyperlinks.

  • CSS: CSS is responsible for making the website visually appealing, it basically provides styling to the webpages to change the color or positioning of content.

  • Javascript: Javascript is extremely useful for the web as it helps to make the website more functional and responsive to user feedback. It basically adds logic to a website so that it can function accordingly.

When the browser requests for a website or a webpage from the server, the server in response sends back an HTML document. This HTML document contains links to all additional resources like images and CSS stylesheets and JS scripts. The browser then parses through this HTML document and requests for all these additional resources. The browser then downloads all this and starts building the DOM tree using the HTML markup, it then adds the stylesheets and renders the website.

Summing up, I hope you have a better idea of how everything works behind the scenes to serve everything you request on the Web.