How the Web Works

Photo by Pixabay on Pexels

The Web is not the Internet

Most people have gotten accustomed to using the terms “internet” and “web” interchangeably. Although the net and web are married to each other, they are fundamentally different. In simple terms, the internet is the connection between countless, separate servers, computers, and devices, as I explain in detail here. While the World Wide Web or Web is just a common digital space for information exchange, facilitated by global computer networks or the Internet, you connect to the Internet to access the web. The Web is the medium where we edit, discover, and share information — through links — according to a standard language: HTML. Now we understand that the internet connects participants while the web connects information.

History of the Web

Before the web or internet existed, there were computers but they were big and lonely and could not really talk to one another. In order to connect disparate global machines, you would need a network of networks, this need led to the rise of the internet.

On October 29, 1969, Leonard Kleinrock and a team at UCLA needed a way to share documents through the internet so; they decided to send the word “LOGIN” to a different model of a computer at Standford. They sent the “L” and it arrived, they sent the “O,” and it arrived and then the system crashed but still the first message sent over the internet was a big deal and it was literally “LO.”

Two decades later, CERN was working on a variety of projects with different people and technologies, the way information was organized on the internet was illogical, and based on hierarchies. It was lame and Tim Berners-Lee was not happy with it.

In March of 1989, Tim Berners-Lee wrote a powerful paper simply titled “Information Management: A Proposal”. He argued that notes with links like references between them are far more useful than a fixed hierarchical system. Instead of trees, Berners-Lee was proposing a web. Webbed systems that connect documents in non-linear ways already existed, they were called hypertext but Tim Berners-Lee officiated the marriage of hypertext webs and the internet to produce a web that was worldwide.

The first website was info.cern.ch. Today it provides a simulator that allows us to view the web as it appeared as a baby.

How the Web Works

When talking about how the web works, we have to mention HTTP. The HTTP protocol is the most used internet protocol in the world and it stands for Hypertext Transfer Protocol. This is a protocol and a standardized set of rules for how a form of communication should work.

HTTP is a set of conventions that dictate how a client like a web browser on your MAC or PC talks to a web server and it is a protocol in the sense that it’s not a programming language per se, more like a set of predetermined talking points or greetings. HTTPS is HTTP with encryption, which stands for Hypertext Transfer Protocol Secure, so the messages exchanged between the client and the server are encrypted.

HTTP is an application layer protocol that allows web-based applications to communicate and exchange data. You can think of HTTP as the messenger of the web, it is a TCP/IP based protocol and is used to deliver contents like images, videos, audios, documents, etc.

Documents are transferred on the web via HTTP and are identified by URLs — Uniform Resource Locators.

Request-Response Cycle

A request-response cycle refers to the complete flow of information from when you send a request by say, making a google search until when you receive a response in the form of your search results. The process consists of two basic actors; the client and the server. While you might consider yourself the client, and you aren’t completely wrong, to the web your web browser application is the true client. It makes the request and the server, in this case, one of Google’s servers, literally serves by responding to this request and giving you the information you requested.

HTML

The HTML file that stands for Hypertext Markup Language is responsible for the structure and content of your website. So if a website were a house, then the HTML would be the builders who come in to build the walls, demarcate the kitchen, toilet, basically establish the structure of your house. When we write HTML code, we also build up the structure of our website. We could use HTML to add an image or button or text box, whatever it is that you need in your website.

CSS

The second type of file is the CSS file, which stands for Cascading Style Sheets. These files are responsible for the presentation of the content. They are for styling and for laying out the elements on your website. If you were building a house, then these would be the painters and decorators. They add stylistic flourishes to your place and generally making it look the way you want it to. This is what CSS code does as well. When you incorporate CSS, it allows you to specify how you want your website to look. Say, for instance, we create a button using HTML, but it looks boring and we want to make it red. CSS allows us to specify the colour, grading, and other visual elements of that button. As well, we can specify fonts, font styles, and so on.

JavaScript

The final component is the JavaScript file and this is the code that allows your website to actually do things or have behavior, it allows interactive effects, DOM manipulation, and much more. As you were building your house, you would have an electrician come in to connect the wires so that the lightbulbs actually switch on. A plumber to do the plumbing so that you can open the bathroom tap. JavaScript does exactly these, it allows your website to function and be interactive. Take, for example, that red button we added earlier on with HTML and CSS code only when we have the JavaScript code it can actually do something interesting like send off an email.

Going back to the Google website as an example, once we receive these files from the Google server, our browser loads up the HTML files, we’ll get to see the structure of the website. Namely, an image that has their logo, two buttons, and a text box where we can enter our search.

Now when we receive the CSS files, these will modify the appearance of all of the components. We don’t have any more images, but they now look the way that google wanted them to.

Finally, when we incorporate the JavaScript files then our website actually starts having some functionality and is able to do things rather than just display images and text.

In a nutshell, we need three files which are HTML, CSS, and JavaScript to create web pages and use HTTP, TCP/IP protocols to send information.