The Web: How Does It Work?

Web Traffic

Most of us use it nearly everyday, and for some generations, it has been around as long as they can remember. The World Wide Web–a modern marvel. It’s a seemingly infinite source of information, home to so many of the digital services used and loved by millions. And yet, unless you have looked into it for yourself, you probably don’t know how you go from opening up Google Chrome, to typing in a search phrase or URL, to having a result rendered right before your eyes.

I want to begin by clarifying some terminology that many people use improperly without knowing it. Despite being used interchangeably all the time, the Web and the Internet are not the same thing–at least not in a physical sense. This is a matter of language that sounds silly, I realize, but let me explain.

Internet versus Web

The Internet, which traces its roots back to the ARPANET network established in 1969, is the global collective of all interconnected computer networks that use the Internet protocol suite. The Internet is often thought of as a network of networks, and encompasses all high-tier networks managed by Internet service providers (ISP), routers, switches, and servers–everything. Think of the Internet as an autonomous system of connected infrastructure that allows information to flow back and forth between its participants.

The Web, or World Wide Web, is a system of accessing documents and web resources. These resources are identified by uniform resource locators (URL) and made available through Hypertext Transfer Protocol (HTTP) communication. You, with the help of a Web browser, use a web address which is processed into one or more HTTP requests. These requests are then transported via the various layers of communication protocols to send or retrieve data from a Web server existing somewhere on the Internet.  The Web server then issues one or more HTTP responses, which are transported back to your Web browser and rendered into useful content. Think of the Web as this system of pushing and fetching information between your Web browser and a Web server.

While you can see that the Internet and the Web are not the same, they are obviously deeply related. Imagine the Internet as a giant spider web of interconnected systems, and the Web as a layer on top of it. The Internet has no opinion as to the content, as it provides the means to connect one system to the global network of systems. The Web is concerned only with exchanging resources between Web browsers and dedicated Web servers. The Web uses the underlying Internet to move things back and forth. Here’s a visual explanation of what I’m explaining in action.

How The Web Works

Breaking It Down

When we’re browsing a page or using a web application, the underlying infrastructure that moves information makes little difference to us, and even makes little difference to web developers in most cases. We’re more concerned with the structure, design, and functionality of the content we view. So lets break down those parts of Web content, and how developers like myself use them to create online experiences.

HTML

Hypertext Markup Language, or HTML, is the core of every web page and provides the structure, logical containers for content, as well as common elements such as links, paragraphs, images, tables, buttons, etc. Whether this code is output dynamically, or appears as a single file (e.g. page.html), HTML is always there when you’re viewing a page. The code essentially declares what you are going to see on the page, and appears in a series of tags which describe the element type, its attributes, and its contents, all in one shot (such as the “My Blog” heading in the example below). It’s also worth noting that tags are used to link other resources like style sheets, scripts, images, etc. that need to be used by or within the page. Here’s a snippet of code for a basic page:

<!DOCTYPE html>
<html>
  <head>
    <title>Bryce St. Pierre</title>
  </head>
  <body>
    <h1>My Blog</h1>
    <p>Welcome to my blog!</p>
  </body>
</html>

CSS

Cascading Style Sheets, or CSS, is what specifies the style of HTML elements, affecting attributes such as size, color, position, animation, and more. The code is quite intuitive to read and write, as it consists of declaring what element(s) you are affecting, and supplying key-value pairs of attributes to alter the element’s appearance. This could be thought of as providing style rules that affect how content looks in a browser. Here’s a snippet of code for styling a main heading:

h1 {
  color: blue;
  font-size: 20px;
  font-family: Times New Roman;
}

JavaScript

JavaScript, often abbreviated as JS, is a programming language used to manipulate HTML elements and create dynamic functionality within a web page. The code itself can be written in custom script files that are linked to the HTML document, but there is also a vast ecosystem of libraries available to developers to implement common features. To contrast with the parts of a web page we have already discussed, if HTML provides the structure of a page and CSS provides the styling for a page, then JavaScript provides the behavior for a page. Here’s a snippet of code implementing a function that triggers a popup box displaying a message:

function showMessage () {
  var message = 'Hello world!';
  alert(message);
}

HTTP

Hypertext Transfer Protocol, or HTTP, is the application layer protocol for retrieving resources used on the web. Communication protocols for the Internet can get quite technical, so allow me to summarize briefly. Think of an HTTP request as a message with a standard format. It mainly contains a web address for the Web server, the path to a resource, and a method token (i.e. GET for retrieving, POST for sending). After receiving this request, the Web server responds with a HTTP response, which is also a message with a standard format. It will always contain a status code corresponding to the success of the request, and if successful, it will contain the resource requested with the type of data specified. This cycle of HTTP requests/responses tends to happen implicitly when loading elements on a page, but it can also be used explicitly by the developer to load data dynamically after the page has loaded.

Server-side Programming

Server-side programming, or scripting, involves writing code to accomplish tasks when users make HTTP requests to the Web server. This can include anything from generating HTML content, to interacting with a database, to creating APIs to retrieve data and files, to processing user input through submitted forms. There are no shortage of languages and frameworks available to various Web servers for server-side development including PHP, Node.js, Python, ASP.NET, and more. With a full programming language at the fingertips of developers, there is essentially no limit to what can be done through server-side scripting. This portion of web development is commonly referred to as the “back-end,” so think of it as where the business logic and intelligence is housed.

Resources

Whether you believe it or not, there are great resources out there that have helped hundreds of people with no technical background become developers. If you would like to explore this more for yourself, or just learn more about web development in general, here are some useful links:

And if you have enjoyed this post, feel free to share it or subscribe to my blog below.

Share: