Understanding the concepts behind the working of a website
Basic Terminologies 💻
- Concept 1: Domain Name: Think of it as a name to your website. If you want users of Internet to easily locate your website, you need to have a domain name for your website.
2. Concept 2: IP Address: This also represents a unique location on a web. But they are not easy to remember. They are like 63.245.215.20. And that is why Domain Name’s were invented, as they are user friendly. (easy to remember)
3. Concept 3: URL: URL stands for Uniform Resource Locator. It can be informally called web address. Every webpage on the internet has a URL associated with it. URL is the address of each web page.
Website, Domain Name, URL are not the same thing. A domain is the name of a website, a URL is how to find a website and a website is what people see and interact with when they get there.
"aseemjuneja.in"is the domain,"/contact"is the so-called path. Together, they make up the “URL”
4. Concept 4: Domain Name Servers: So, till now we know each website has a Domain Name and each Domain Name is linked to an IP Address. But where are they both mapped? Domain Name Servers are like address book for websites. They contain information of IP Address of each Domain Name. There are many such servers in the internet.
5. Concept 5: Protocols: The protocol is the set of rules or algorithms which define the way how two entities can communicate across the network. Few of such protocols are TCP, IP, UDP, ARP, DHCP, FTP and so on.
- HTTP: Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other. This is like the language you use to order your goods.
- TCP/IP: Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the internet. This is like the transport mechanisms that let you place an order, go to the shop, and buy your goods. In our example, this is like a car or a bike (or however else you might get around).
6. Concept 6: Web Hosting
This is like renting out space to keep content of your website — HTML, CSS Code, Images, Audio Files. Web Host can be called as the company who maintains a web server with your website on, which they provide you access too
7. Concept 7: Web Servers
This is something which holds website. It is actually not something rather a Computer which holds all the files of your particular website. They run 24*7 and respond to browser’s request for a particular web page.
Web host is defined as the company offering web hosting service. They are primarily responsible for hosting the website on a server.
8. Concept 8: Port Number: Port number is just a number assigned to the different services of the machine to interact easily similar to roll number assigned to the class students to make many problem simples. When the server is started it sets up an entry point that can be used to connect with it. This is done by specifying a port number. So for example the server ultimately says: You can connect to me on this address, and I’m waiting for someone to talk to me on this port number.
How does a Website Work?
User to Browser:- Browser मुझे Website खोल कर दो 👐
Browser to DNS:- DNS मुझे IP दो 🙏
Browser at given IP: hello hello आवाज़ आरी ☎️
Browser to Server:- Server भाई Request है Website दो. 🙏
Browser to User: ये ले Paint कर्रा देखले जो मंगरहा था 🖌
Let’s understand deeply the process which goes behind DNS मुझे IP दो 🙏 :
- Browser to OS Cache/Browser Cache/Router Cache/ISP:- DNS Record में देखिओ है IP इसका
- ISP to Resolving Name Server: Record में देख तू और फिर Root Name Server से पूछ.
- Resolving NS to Root Name Server: तू भी देख और फिर Top Level Domain Name Servers (com/edu/me/info) से पूछ
- Root NS to Top Level Domain Name Servers: जनाब, तुम्हे कुछ पता इसका या Authoritative Name Servers (example.com) का पता हो कुछ
- Top Level DS to Authoritative Name Servers: तू आखिरी उम्मीद है
Finally you get the following IP
Now you have IP, the port number to connect with and the protocol for transmission and you need to just set things up. Let’s understand what goes behind hello hello आवाज़ आरी ☎️ So, here browser is trying to set up a connection with the server.
Now using TCP/IP you will set up a communication channel with the given port number. Transferring of data packets from your computer (client) and the server is called the TCP/IP Three way handshake 🤝🏾 The language by which they talk is set by HTTP Protocol( which I have mentioned in Hindi ).
- SYN (Synchronize): (Client to Server: भाई तू बैठा है क्या ? 🤔)A SYN packet sent by the client, requests if its open for new connections)
- ACK (Acknowledge):(Server to Client: हाँ 👍) If open, the server responds with an ACKnowledgment of the SYN packet using a SYN/ACK packet.
- SYN/ACK: (Client to Server: अच्छा रुक मै आता हूँ 🤝🏾)The client retrieves the packet and acknowledges it by sending an ACK packet back to the server. This creates the TCP connection and how the data transmission occurs.
Now lets understand what we mean when we said “Browser to Server:- Server भाई Request है Website दो. 🙏”
The browser bundles up a bunch of information (What’s the exact URL? Which kind of request should be made? Should metadata be attached) and sends that data package to the IP address. But How?
The data is sent via the “HyperText Transfer Protocol” (known as “HTTP”) — most popular protocol for communicating on the web which defines what a request (and response) has to look like, which data may be included (and in which form) and how the request will be submitted.
Remember what we are discussing now is when website uses HTTP Protocol. But most websites nowadays use HTTPS protocol because of the security reasons. HTTPS uses Secure Socket Layer Protocol for a secure connection through public key infrastructure system. This uses concept of public and private keys. So with the request, the website will send its public key stored in SSL Certificate and private key at the server will be able to decrypt the message.
Time to understand “ये ले Paint कर्रा देखले जो मंगरहा था 🖌”. So after the browser sends server the request, servers responds back with a reply which has all the required files requested by browser. Now it’s browser’s job to render the entire page to the user.
The browser displays the HTML content in phases. First, it will render the HTML skeleton. It will convert elements to DOM nodes in a tree called the “DOM tree”. Then the engine will parse the style data, both in external CSS files and in style elements and will then understand how to style each node. Styling information together with visual instructions in the HTML will be used to create another tree: the render tree.
Obvious doubt: “ये DOM Render Tree, ये सब क्या है” घबराइये मट समझते हैं पधिये आगी.
DOM Tree: Document Object Model In simpler words it is just a way to represent your HTML Document. It has its own benefits. So the rendering engine would parse your HTML Document and will create the following tree.
Rendering Tree: Now this tree is of visual elements in the order in which they will be displayed. It is like a visual representation of the document. The purpose of this tree is to enable painting the contents in their correct order. (Combination of DOM Tree (for HTML) + CSSOM Tree (for styles) )
After this is done, the process of giving each node the exact coordinates where it should appear on the screen starts.
And Finally ……
चाचा वेबसाइट आगि Screen पर!! Khatam Tata Bye Bye ✋
Basic Components of Code of Website 🌐
ढांचा :- HTML Code: HTML is a markup language to give just a skeleton to web applications and websites.
खूबसूरती:- CSS Code: CSS is a style sheet language that is used to handle the presentation of the web page containing HTML.
दिमाग :- JavaScript Code: JavaScript is a scripting language to create completely dynamic web applications and websites.