A Quick Tour Of The Web

Problem Statement

Welcome to the web, the largest canvas in the world. Roughly 40% of the world's population has access to the web. Never before has it been possible to reach so many across such vast distances!

To orient you in these first steps of your study of HTML and web programming we want to give a broad overview of the web and how it works in the broadest terms. While you might have heard "web," and "internet" and "server" in many different contexts and places over the years, it's possible that you've never built a cohesive model in your mind that interlinks these problems together. This lesson hopes to help stitch that all together.

In this lesson we'll go over the essential steps in how the web works.

Objectives

  1. Define "internet"
  2. Define "server" role
  3. Define "client" role
  4. State which role possesses the data that browsers display
  5. State what type of content defines what's seen in browsers

Define "internet"

When people share information, great things can happen. Politics can change. Our place in the universe can change. Disease can be conquered. The ability to share knowledge is power. Since the 80's computers have become our co-thinkers. In the 80's and 90's engineers looked for ways to have computers share information. Technical limits meant networked computers had to be within the same office.

Eventually, improvements allowed small networks to "inter"-"network" their with each other. This discipline was called "internetworking." By the technology and knowledge of "internetworking," these small local networks (or, "local area networks" or LANs) became "internetworked" into "Wide Area Networks" or WANs. The natural next dream was to "internetwork" WANs into some sort of "larger" inter-network, something city-scale, country-scale, or global-scale. Technology for "inter-networking" WANs was difficult and slow to develop, but eventually produced a backbone "internetwork" "The Internetwork" which encompassed all of its constituent WANs and their constituent LANs. Eventually usage coalesced around the work "The Internet."

It was upon this "The Internet" that "The Web" was built.

Note: For many reasons, style guides no longer capitalize "internet" or "web." The global network linking computers globally is "the internet."

Define "server" role

All machines on the internet are computers. For ease of discussion, we're going to discuss them in two "roles:" client and server. Historically a "server" would be a larger, more powerful computer with more memory, bigger hard drives, and more computer chips. But today, "server" roles can be handled quite well by Arduino devices no bigger than a credit card! Nevertheless, in diagrams and on whiteboards they tend to be drawn as large "tower-style" computers.

Regardless of its size, a "server" has the responsibility of arranging the data that is presented to the "client." It's because of this "arranging" being computationally demanding that servers have tended to have extra resources.

Historically, computers were very expensive and well-appointed servers were very, very expensive. As such, when possible, it was more economical for servers to do heavy processing and for the clients to request updates.

Define "client" role

A computer fulfilling a client role has the responsibility of presenting the data that is sent from the server. Historically, these machines could be more lightly equipped (and thus cheaper). You'll generally see them drawn in diagrams or on whiteboards as laptops.

The client displays data that is provided to it by the server. A verb that's commonly used is "render" as in, "The client renders data provided by the server." That is, it only displays the server's data and any change to the data has to be done by the server, caused by a request from the client.

Client / Server Example

Let's take a moment to consider client / server in a common scenario: the supermarket.

If you ask the cashier for the price of a bottle of water, they can look it up for you. But their client computer's "source of truth" on the price lives on the server. The client must request this information by "asking" or "sending a request" to the server.

Similarly, when you buy that bottle of water, the (lightweight) client says "Sold a bottle of water!" to a server. The server, in turn, updates its inventory record to show -1 water bottle.

Now, at the end of the sales day, the management team would like to do some analytics about how profitable they were that day. They could go to each client computer, determine its revenue for the day and which departments contributed to that number, but on a cheap client machine that process would be s..l...o.....w — like trying to play a PS4 game on an iPhone!

However, if each client computer merely logged its actions to the server by sending requests, the management could ask that high-power machine to print out analytics in an economical and efficient fashion. Many businesses still have their IT architecture on this model known as "the client / server" model.

State Which Role Possesses The Data That Browsers Display

The web was developed under a client server model. Home PCs were relatively underpowered (like our checkstands) clients and web content sharing programs were installed on high-power servers. Thus web clients running browser software were created that would send an request for a web page and the server would return the web page.

The specification on how clients and servers interact is called HTTP (HyperText Transfer Protocol). This is why URLs start with http://: you're telling the browser: "Browser, act like a client and use the HTTP standard to talk to flatironschool.com and find a file called index.html." The browser expresses this wish by transmitting a message that looks like:

GET flatironschool.com /index.html

Here it asks flatironschool.com for an HTML file called index. We'll explore this much more in subsequent lessons!

In return, the server returns... HTML that's contained in the index.html file.

State What Type Of Content Defines What's Seen In Browsers

Having been told which file on its hard drive to consult, the web server takes the contents of a file, pushes them across the internet back to the client. The client then receives the raw HTML. It looks something like this:

<!DOCTYPE html>
<html lang="">
<head>
    <title>Home | The Metropolitan Museum of Art</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="title" content="Home" />
        <meta name="keywords" content="Metropolitan Museum, Met, Metropolitan Museum of Art, Met Museum, Metropolitan" />
        <meta name="description" content="The Metropolitan Museum of Art is a...">
        ...

Obviously, this is not what you see when you visit http://www.metmuseum.org. To understand the difference hinges on that special verb render. Your client's browser renders the "raw" HTML and turns it into something humans find nice to read.

And this is the essential overview of how the web works!

Conclusion

In conclusion, we've talked about the history of the word internet and how it interlinks computers fulfilling client and server roles. We've identified that client machines use web browsers to make requests of the server, according to the HTTP standard, and server return HTML data, stored on their hard drives in files back to the requesting client. The client machine, running browser software, then converts that raw HTML data into a rendered format which is what you experience as a web page.

As a summarizing video, we've provided the following video of our dean, Avi Flombaum, giving a short introduction to the web. If you are only interested in building web pages, you can stop at 3:48; if you are studying a web programming technology e.g. Ruby, please watch the entire video.

Resources

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us