Mugdha
In this article, I have covered:
-->How the web works
-->What happens when we type a URL in the browser's address bar and see the page load?
Parts of the web:
-->Client: An application like Chrome or Firefox that is connected to the internet and runs on a computer is called a client. This translates user interactions into requests to the web server or another computer. You can think of your entire machine or device as the client in the client-server model. Every client can be identified by the other computers with the help of an IP address. Each client has a unique IP address.
-->Server: A machine that has an IP address and is also connected to the internet is called the server. This machine waits for requests from the clients and responds to them. Unlike a client machine (that also has an IP address), there is a special server software installed and running on the server machine which helps the server understand how to respond to incoming requests from the client. The main function of this web server is to deliver web pages to clients, store them, and process them. Web servers, Database servers, and file server applications are different types of servers. Here, we are talking about web servers.
-->Internet Protocol Address: The Internet Protocol address(IP address) is an identifier for a device on a TCP/IP network. It is numerical. On the internet, every computer has an IP address and the purpose of this address is to identify other computers and communicate with them. Four sets of numbers separated by decimal points form an IP address. This is also called logical address. For locating a device on a network, TCP/IP protocol software connects this logical address to a physical address. This physical address is built into your hardware and is called a MAC address.
-->DNS: DNS stands for Domain Name System. It is a distributed database that keeps track of a computer's IP address and its corresponding domain names on the internet.
--> Domain Name: The purpose of a domain name is to identify one or more IP addresses. You type the domain name www.google.com to get to a website on the internet. When you type this domain name in the browser, the DNS looks up the IP address for that particular website.
-->TCP/IP: TCP/IP stands for Transmission Control Protocol/Internet Protocol. This is the most widely used communication protocol(set of rules for doing something). TCP/IP is used as a standard for transmitting data over the network.
--> Port Number: A 16-bit integer the purpose of which is to identify a specific port on a server and that which is always associated with an IP address is called Port Number. It can identify a specific process on a server to which network requests can be forwarded
-->Host: A client, server, or any other type of device, a computer connected to a network is called a host. Every host has its own IP address and that is unique. For example, the website www.google.com could have its host as the web server that serves the pages for the website. Servers can be thought of to be as a specific machine, they are a type of host. A host could also be an entire organization providing hosting service to maintain multiple web servers. This implies that a server can be run from a host
-->HTTP: HTTP stands for Hyper Text Transfer Protocol. Web servers and web browsers use this protocol to communicate with each other over the internet.
-->URL: URL stands for Uniform Resource Locator. The purpose of URLs is to identify a particular resource on the web. For example, https://linkedin.com/name. This URL specifies the protocol (HTTPS) and the hostname that is "linkedin.com" and the file name (anybody's profile page). Somebody viewing this web page can obtain this web resource which can be identified by the specified URL via HTTP from a network host whose domain name is linkedin.com.
How does the transition from just a typed URL in the browser's address bar to an actual visible web page happen?
--> Suppose you type a URL in your browser's address bar.
-->The browser takes care of a process called parsing and parses the information in the URL.
--> This includes all components of the URL, the protocol(HTTPS) and the domain name (linkedin.com), and the resource "/". Just in case there isn't anything after the ".com" to indicate a specific resource, the browser will know to retrieve just the main page.
--> A communication between the browser and your Internet Service Provider takes place to do a DNS lookup of the IP address for the web server that hosts linkedin.com. This DNS service will initially contact the Root Name Server which looks at https://www.linkedin.com and sends the IP address of a name server for the ".com" top-level domain as a reply. The address is sent back to the DNS server. The DNS server again contacts the ".com" name server and asks it for the address of https://www.linkedin.com.
--> Now, when the internet service provider receives the IP address of the destination server it is sent to your web browser.
https://abc.ef.ghi.jk.lmn
here HTTPS is the protocol, abc.ef.ghi.jk is the IP address that is numerical, and lmn is the port number that is also numerical in nature.
--> Browser then takes the IP address, and a given port number from the Uniform Resource Locator and opens a TCP socket connection. Now your web browser and web server are finally connected.
--> The browser sends an HTTP request to the web server to obtain the main HTML page of www.linkedin.com.
--> After receiving the request from the browser, the web server looks for that HTML page. If it finds the page, the server prepares the response and sends it back to the browser. If not found, the server sends an HTTP 404 error message that says "Page not found".
--> When the browser receives the HTML page, it parses that page and does a full scan looking for the assets listed, like images, CSS files, JavaScript files, etc.
--> For every asset listed, the browser repeatedly makes additional HTTP requests to the server asking for each resource.
--> On finishing loading all the assets listed in the HTML page, the page finally gets loaded in the browser window and the connection is closed.
--> Now the browser has the resources that form the website (that is, HTML, CSS, JavaScript images, etc), it has to go through several steps to present the webpage in the form of a human-readable webpage. The browser has a rendering engine that displays this content. It receives the content of these resources in small chunks. An HTML parsing algorithm tells the browser how to parse the resources.
--> After parsing it generates a tree structure of the DOM(Document Object Model) elements. The Document Object Model is a convention for how to represent objects located in an HTML document. These objects also called "nodes" belonging to every document can be manipulated with the help of scripting languages like JavaScript.
--> After the DOM tree is built, the stylesheets get passed to understand how to style each node. With this information, the browser traverses down DOM nodes and calculates CSS style, position, and coordinates for every node.
--> Once all this is done, the final result in the form of a website/webpage is displayed on your browser screen.
Featured Image Credits: TechPrevue.com
I am a Computer Science Engineer who likes to write and discuss topics related to Computer Science, Technology, Art, and Science. This is a blog related to Computer Science and other general topics. If you are somebody who likes to read things related to Technology and Computer Science, you might want to have a look at my blog.