How the Internet works (for noobs)

Disclaimer

This article a work in progress, and might have some factual inaccuracies or miss some events. I will be updating it and making more corrections over time. If you find any, please write me an email at aman@hey.com

How did we get here?

The internet uses so many technologies. HTML, CSS, Javascript, PHP, Ruby on Rails, and NodeJS. What does it all mean?

Internet has been a story decades in the making. It might feel like it is needlessly complex. However, each stack, just like a Jenga tower, was added slowly over the years.

Instead of trying to straight learn “React” or something else modern, it is a good idea to know how we got there in the first place.

We will slowly start in these essays from the humble beginnings of HTML and eventually add more and more complexity as we face problems. Just like people back then did.

Internet was vastly simple. We just had a few HTML files and you would be live. These days you need to learn about caching, edge, and what not. There are reasons people came up with those solutions.

Early beginnings of the internet

Let us imagine you are a scrawny computer student in the 1960s. You do a bit of LSD and try to find yourself, but what you also do is, use computers.

Now back then, computers did not look like how they look today. They were huge, and expensive to build. Most of the time they were used for maths, which you could also call computation.

A lot of times, computers were used for tasks that require processing large amount of data and “simulating” an environment. An example could be predicting the weather. To predict the weather you would need to take into account various terrains, wind speeds, pressure, moisture, data from satellites and run it through a weather prediction model.

Doing it manually would be too slow. Before you are done with your calculation, it is already another week, and guess what, the weather is different now.

The creation of ARPAnet

Computers were also sparse and specialised. A computer built to do one kind of calculation (weather) could not do another kind (nasa mission simulations). They also required special environment.

That is how ARPAnet was born. What if we could share these computers. We can send data over the wire (a literal wire) and I can be in say University of Stanford and use a computer at University of Utah.

ARPA stood for Advanced Research Project Agency and net stood for network. It was a network of computers.

Over next decade and two, people spun up more and more networks. There were something called BITnet (Because it’s time network) that allowed file transfer and writing emails. NSFnet (National Science Foundation Network) which would help connect researchers.

Eventually it became a problem. Everyone had their own “net” and they could not interact with each other. To connect all these networks, a protocol (which is a fancy way of saying set of rules) was born. The rule set was called TCP/IP. And this new network of network was called the Internet.

Enter Web

People were finding various uses of this network. One particular use case was found my this madlad called Tim Berners Lee at CERN. He was browsing a document and realised, wait, most computers are fancy document readers. What if we could connect all these documents.

He thought to himself, what if, instead of linking pages of a single document, we could link pages from any document in the entire world? What if we could create a web of documents! He called it the world wide web. Or in short, WWW .

I do not know what he was smoking. But it worked out well for him. This “protocol”, which is a fancy way of saying “rules”, was named “Hypertext Transfer Protocol”. What it meant was, there would be these files that would be .html so something like aman.html or you.html or whatever-the-heck.html and they would follow a certain style.

Those files, could link to each other. Even if the files were on a different computer. Through the internet!.

To read these files, he created something called a “browser”. Seems familiar? He called the browser “World Wide Web”. But then he was like, “Ugh, I do not want people to confuse my browser with my idea, so he renamed the browser to Nexus.”

HTML: The heart of the web

Let us talk a bit about HTML. What is it?

How Sir Tim Berners Lee defined it, it would define a page. And you do not have to go back in time to know how it was. The base structure still exists. All websites are HTML documents at their heart.

If I have a website that has a home page, an about page and a contact page, a simple HTML based website would look something like this:

So if I had aman.com (which I do not unfortunately), my homepage content would be inside index.html file. However, if someone wanted to go to about page, I would create another file. That would be about.html and so on.

What would an HTML file look like? Let us see how an index.html file might look like:

 <!-- index.html -->
<html>

	<head>
		<title>
			Hi I am the title of the document. 
			I often should inside your chrome tab
		</title>
	</head>
	
	<body>
		<h1>Hi I am the page heading</h1>
		<a href="/about.html">About page link</a>
	</body>
	
</html>

HTML is a way to organise documents. There are things called tags. Each tag would tell the browser certain things.

For instance, let us start with the title tag.

<title> Page title </title>

It would tell the browser what the title of the page was. It would look something like this:

Similarly, the body tag tells the browser what should be on the page.

<body>
  Everything here will be on the page
</body>

There were more tags that you could put inside the body tag. For instance an <h1> tag would make the text bigger, because h1 means Heading 1. Similarly a <p> tag would tell the browser this tag is a paragraph.

CSS: Styling your documents

But back then websites looked like this:

See how they’re ugly? People wanted to make it fun. Color the headings, the paragraph should have their favorite font and so on.

Now you could do it within HTML, something like this:

<h1 color="blue">Hey, this text is blue</h1>

But it was hard to apply universal styles. What if you wanted all your text to be Comic Sans! Or what if you wanted all your pages to be have a pink background?

Hence, CSS was born.

Here is how that looked like in action. You would create a new file called style.css. This file would contain all the styles for your page. Let us say you wanted all the fonts on your website to be Comic Sans, you would do this: \

body {
	font-family: 'Comic Sans';
}

This tells Mr. Browser, that anything inside the body should be ‘Comic Sans’. But Mr. Browser does not know your style.css file exists unless you “link” it.

Inside the <head> tag, where you added the title, you could also add another tag called <link>. Link told browser what other files were linked to our index.html file.

That is how that looked like:

		<head>
			<link type="stylesheet" href="./style.css" />
		</head>

The link tag, tells the browser, “hey, this file has a stylesheet. I have painstakingly made this page beautiful. These are all the things this page needs to have. Font size, colors, whatever. Please use this stylesheet.”

And the browser would gladly comply. Hence, what was before this:

Could now look like this:

Not bad right? Now CSS has multiple internal revolutions. When mobiles became popular, CSS had something called “media queries” which is a fancy way of saying we could now apply some styles on mobile, while some styles on desktop.

Ever see how how a website has a full menu on desktop and it turns into a hamburger on mobile? That is media query at play.

Enter JS: Adding logic

The year was 1995, and Nexus was not the only browser in town. In fact, it was not that popular at all. The market was dominated by Internet Explorer and Netscape Navigator.

A quick look at their logos. You might not know Netscape, but you definitely know Internet Explorer.

As all businesses do, Netscape wanted an “edge” over it’s competition. They would add features to HTML that weren’t standard all the time.

One of those was this thing called Javascript.

Now, why do we need Javascript? To do logic stuff. Turns out, HTML is good for structuring the page. It tells Mr. Browser, “Hey this is the title of the page, this is the content, and here are some links to other pages.”

CSS, is good at telling how the page should look. It adds, “mr browser, please make all text Comic Sans, the heading 30px and paragraph 12px. Also make the background pink”

But what if you want to do something like, “Mr. browser, if I click this button, turn the background into neon.” Interactive stuff like that, which basically followed the structure of “If this happens, then this happens” was not possible via HTML or CSS.

Hence Netscape Navigator commissioned this dude called Brandon Eich to make a programming language called Javascript.

A programming language that could “run” in the browser. Till date, it remains the only programming language that the browser understands.

Javascript in Action

You would start by creating a Javascript file first. Just like we had a index.html, a style.css, now we have a script.js file. You can call it anything, but it is a standard to call your JS file script.js.

After you create your file, you need to tell Mr. Browser where it is located. A browser only reads your index.html file and if you link something to it, it knows about it.

Just like we told it where our CSS is location via the <link> tag, we can tell where our Javascript file is located with the <script> tag.

That would look something like this:

<body>
	<h1> a page title </h1>
	<p> A paragraph can be here </p>
	<script src="/script.js" ></script>
</body>

You might notice how the <script> tag is at the end of the file, while the <link> tag was at the top of the file. This was because we wanted the styles to load with the document, but our script can wait. We load the contents of the file first and only then add a script to it.

How a Javascript file looks like and how it works is beyond the scope of this article since it is kind of a long topic.

What you should know is, it helped add fancy logical stuff in your HTML.

Server side languages and Databases

HTML, CSS and Javascript were all good. But how would you create something like a social media or a blog?

People did create blogs and they looked like this:

But it was cumbersome to create so many HTML files. What if there was an elegant way to just write text and automate generating HTML files?

One of the first languages to do this were Perl and then PHP.

Fun fact, PHP was initially called PHP Tools which meant “Personal Home Page tools”. These were both languages that would help you do this:

1. Based on what the user has requested (by entering in the URL bar or clicking a link)
2. Go to the database and get the relevant data
3. Create an HTML file, on demand, and send that html to you

This opened doors for dynamic websites. Here are some of the technologies that were used around that time:

1. HTML/CSS and Javascript for front end
2. PHP, Perl for server side language
3. MySQL for database

A database would be a glorified excel file that server could talk to when it was generating you a custom HTML.

And this is how the websites in early 2000s came to be.

To be continued

A lot more happened after that. Folks came up with server side languages and built frameworks over those languages. One of the popular frameworks was Ruby on Rails.

Eventually Javascript became more mainstream with NodeJS. I will be updating it right here. Why not wait until I have the whole article?

Well, earlier this week I made a bet with a friend if I did not publish an article on my blog, I would make a TikTok dancing in public.

Now you know how this came to be.