How the Web Works: A Guide to Web Development
By: Thomas Wang
Tags: Internet, Full Stack Developer, Computer Science, Programming, Web Development

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:

Nothing too exciting… yet

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.

Some basic CSS to modify the layout, font color, and background color

Still quite ugly… but at least not by 2000s standards!

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.

Try guessing what this code does!

Now, when you click on the button in our example webpage, we start seeing some action!

With some simple JavaScript, we can add dynamic behavior to the webpage

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.

The client initiates through requests. Source: MDN

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.

Ever seen something like this? 404 is a “not found” status code sent by the server to indicate that the requested resource could not be found

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

Each row on the right is an HTTP(S) request made to retrieve some type of resource (could be HTML, CSS, vendor code, weather data, an image, etc.)

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.

When the DNS Server fails to resolve a domain name

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!