How the Web Works: A Guide to Web Development
Understanding the fundamentals will prove to be invaluable for a web developer in the long run
Motivation
As of July 2017, there were 4.57 billion active internet users worldwide. The Internet's convenient usage has already become deeply internalized as part of natural human behavior.
If you aspire to become proficient in full-stack web development, however, the importance of transcending user-level interaction with the Web cannot be overstated. Just like how an auto mechanic must know more than merely the ways of driving a car — you, the developer, must look past the screen and truly understand the inner workings of the Web itself.
While there are already lots of valuable (and free) resources to learn about specific web technologies, this article does not strive to be a tutorial of any sorts. Rather, my intent is to help you establish fundamental knowledge of the Web without diving into the nitty-gritty.
The Internet vs. The World Wide Web (WWW)
First off, some terminology.
Is there a difference between the Internet and the Web? Yes.
Since most people nowadays access information on the Internet over the web browser exclusively, these terms have commonly — but erroneously — become synonymous.
The Internet refers to the wide network of computer networks through which digital information can be exchanged over different protocols. The Internet is the most popular computer network in the world, but there are definitely other computer networks that exist.
The World Wide Web (WWW), or, the Web for short, is a way to access information via the internet. The Web is just a prominent example of an Internet application. Other examples of internet applications include email, online interactive gaming, chat apps. and BitTorrent.
Origins of the Web
The Web we know today was first conceptualized by Sir Tim Berners-Lee when he was working at CERN in 1989. He sought to improve how scientists shared information at CERN by laying out his vision in a document named Information Management: A Proposal. The document described concepts such as HTML, URI, and HTTP — all of which are technologies that remain extremely relevant in today’s Web infrastructure. By the end of 1990, Tim Berners-Lee had spun up the world’s first Web server.
Major Components of the Web
Let us look into the major components consisting the modern Web’s infrastructure.
1. HTML — The Skeleton of a Webpage
HTML, or HyperText Markup Language in full, is a standard markup language for creating web pages. Contrary to common belief, HTML is not a programming language as it is incapable of performing logical operations. HTML is static, and is used specifically for defining the structure of a webpage. HTML uses tags to describe to the browser how data should be displayed. A full list of HTML tags can be found here.
Below is a short example of an HTML file:
As you might have observed, tags come mostly in pairs. The pair of tags tell the browser how the content enclosed in between them should be rendered. For quick reference, <h1>, <h2>, <h3> tags are just header tags with different default font sizes. <p> is a paragraph tag. The above code renders to the view below:
HTML defines the structure of a webpage.
2. CSS — Giving Webpages Some Style
Cascading Style Sheets (CSS) is the language used to style HTML documents. As we saw in the view above, the styling is lacking in every sense. By embedding additional CSS, we can make stylistic changes to the webpage.
Of course, much much more can be done with HTML and CSS. This is just an example showcasing their purpose.
Virtually anything you see on any website is structured using HTML and styled using CSS.
3. JavaScript —Giving Webpages Dynamic Behavior
More likely than not, you’ve probably heard of the term JavaScript before.
With HTML and CSS alone, a webpage is completely static without any functional capabilities because HTML and CSS are exclusively responsible for the look. Unfortunately, this gets boring really quickly for the user since they are unable to interact with the webpage at all.
By embedding JavaScript in our HTML code, however, our webpage begins to have dynamic and interactive capabilities.
Now, when you click on the button in our example webpage, we start seeing some action!
4. HTTP/HTTPS — How Computers Talk to Each Other
Hypertext Transfer Protocol (HTTP) is an application-layer protocol computers use to transmit data (such as an HTML file).
Think of HTTP as an agreed-upon procedure by which computers exchange information. HTTP follows the client/server model where the client initiates requests for the server to perform certain actions.
HTTP requests are preceded with a verb that informs the server which type of action to take. Below are few of the most common types of HTTP verbs:
- GET (tells server that client wants to retrieve resources)
- POST (tells server that client wants to create new resources)
- PUT (tells server that client wants to update preexisting resources)
- DELETE (tells server that client wants to delete resources)
Upon receiving a request from the client, the server performs certain operations and responds with a status code to the client.
To see HTTP in action, head over to weather.com (or any website, really) and right click anywhere on the page. Then, click on inspect element, navigate over to the network tab, and reload the page. You should suddenly see a list of network requests. Here, each row is a distinct HTTP request made by your browser.
HTTP(S) is the agreed-upon protocol that your browser uses to communicate with the server
Additionally, before we move on, HTTPS is just HTTP Secure. HTTP transmits unencrypted data — meaning that a malicious middleman who captures any transmitted data would be able to view the data in its raw form. HTTPS encrypts data using Transport Layer Security (TLS) and ensures that transmitted data is only viewable (at least legible) by the intended recipient. You can read more about HTTPS here.
5. DNS — The Phonebook of the Internet
Now that we know what HTTP and HTTPS are all about, a question naturally arises. How do computers know where each other are?
Remember, the Web works over the Internet, which is an incredibly massive network of interconnected computer nodes. When you visited weather.com earlier, how exactly did your browser know where the weather.com server existed on the Internet?
This is where the Domain Name System (DNS) comes in.
DNS’s essential function is to translate human-readable domain names (such as weather.com) into IP addresses, which are unique identifiers assigned to every single device connected to the Internet. Think of a device’s IP address as their SSN on the Internet. Your phone, your laptop, your iPad, your Roku — they all have their own IP addresses when connected to the Internet.
Here’s what your browser does behind the scenes when you request to visit weather.com:
- Check if the IP address of weather.com already exists in cache. If yes, great! Go ahead and move on to step 3). Otherwise, move to step 2).
- Query the DNS server (server dedicated specifically to resolve domain names into IP Addresses) for the IP address of weather.com.
- Proceed to make HTTP/HTTPS requests to the server identified by the given IP address. Also, cache the IP address to avoid having to repeatedly query the DNS server when visiting weather.com in the future.
Similar to how a phone book enables you to look up people’s contacts by their name, the DNS lets you find the server’s IP address.
Putting Things Together
The World Wide Web (WWW) is an Internet application where information can be shared over network protocols. It was first conceived by Sir Tim Berners-Lee back in 1989 as a solution to solve data sharing challenges at CERN.
When you visit a website on the Web, your browser is actually requesting assets (such as HTML, CSS, JavaScript code, images, etc.) from a Web server on the Internet. HTML defines the structure of the webpage, CSS styles the layout, and JavaScript enables dynamic behavior.
Your computer is able to locate the server on the Internet because of DNS, which is a system that resolves human-readable domain names (such as weather.com) into IP addresses. IP addresses are unique identifiers assigned to devices connected to the Internet.
The browser communicates with the Web server using HTTP (or HTTPS, which is the encrypted extension of HTTP), and uses verbs to convey to the server the type of request it is making. The server then responds with a status code after carrying out the operations requested by the client.
Just the Beginning of Your Journey
Hopefully, this article helped you pave a good big-picture understanding of the Web. If you’re interested in learning more Web-related technologies (I hope you are), please follow me as I’ll be publishing more articles!
