We visit websites all the time. We navigate through them. We click buttons and things happen. But, how does a website work behind the scenes? Much of it is implementation details only programmers or people who have some experience in programming understand.
But for those who do not understand it, let’s try to tackle it.
Let’s start with the internet
The Internet can be thought of as a network of computers. That means that the internet is nothing but a bunch of computers connected together so that they can talk to each other and pass information back and forth between each other.
But there’s also a special type of computer called a ‘Server’
Servers are more or less very much like normal computers. They also have processors, memory, and are run with the help of operating system software. But, where they differ is that they’re used to store and share web content. The server thus is a place where the contents of a website live.
Every website that you visit is living in a server. Or, the files of the website could have been split or stored in multiple servers. The important point here is the files of the website need to be stored somewhere and the location where they are stored is a server.
But how does your browser (Chrome, Firefox, Safari, etc) find a website? How does it find the server?
IP Address
To understand that, we first need to understand something called an IP address.
IP address (Internet protocol address) is like the home address that you have. Each server has a unique IP address that is numeric in nature.
For eg. 123.132.211.11
Looks like a phone number with 4 dots, doesn’t it? Wouldn’t it be hard if we were to access a website like that? How many of these could you even remember?
That’s where something called DNS comes in as a savior.
DNS
Humans aren’t good at remembering long numbers. That’s why we type domain names such as “techsathi.com” in our address bar. But how does that work?
Domain Name System (DNS) is like a phone book where all the domain names are mapped with their respective IP addresses. It’s like how back in the old days of phonebooks, even if you forgot the phone number, you could just look up in the phonebook. Of course, two names in a phonebook might collide occasionally but our domain names do not. They’re designed like that.
To sum that up
- When you type a website domain address like ‘techsathi.com’ in your web browser (Chrome, Firefox, Safari, etc), the browser reaches out to a Domain Name System (DNS).
- DNS looks up the IP address associated with the domain and tells the browser what it is.
- The browser then reaches out to that IP address and asks the server for website files.
- The server then responds with some website files.
- There are some instructions in those files and the browser builds the website that you see.
All of this happens very very quickly. Before you could blink your eyes mostly if you have a decent internet speed.
But what are those website files that the server sends to the browser?
1. HTML
HTML is a short form of Hypertext Markup Language.
Hypertext in HTML means that you can jump from one HTML page to another through the help of links.
For eg, If you click this link displayed in green here then it’ll take you to another HTML page associated with that link.
Markup Language means that you add meaning to web content such as text by marking it up with instructions known as tags.
For eg, <strong> Make me bold </strong> would result to Make me bold.
HTML is like a skeleton of the website like human skeleton.
2. CSS
CSS (Cascading style sheet) deals with the appearance of the website. All the pretty colors on the website, how the website layout is positioned etc all is due to CSS.
CSS is like flesh and skin of the website like human flesh and skin.
3. Javascript (JS)
Javascript adds interactivity and behavior to the website. All the animation, dialog boxes popping up when you click a button etc you see on a website happens usually due to Javascript.
4. Media
The website often incorporates media files such as audio, video, photos, etc. Hence, these files are also sent along with HTML, CSS, and JS so that your web browser properly builds the website for you.
And,
that sums up our article. If you have any comments and queries do mention them down in this comment section below. Also, do let us know if you’d like to see more articles like this one, or do let us know what type of article you would like to have covered by Tech Sathi.
