You probably spend a large chunk of your time on the internet. Because really: Who doesn’t? The internet is an incredible tool. It seems almost magical—having access to art, images, music, conversations, and more, all with a few clicks. But how does the technology that gets the job done actually work? What happens between the moment you type rookiemag.com into your browser and when you see the page load before your eyes?
Let us introduce you to the characters that will be involved in this process…
You: A marvelous human, ready to browse the interwebs.
Computer: A multipurpose machine that lets you connect to the internet, among other things.
Browser: The program that you use to view webpages. It might be called Safari, Chrome, Internet Explorer, Opera, Firefox, or one of many other names.
Router: You probably get internet access from a company like AT&T or Comcast. That’s your ISP (internet service provider). The router is the box that your ISP gives you to connect to their network, so that you and everyone else in your house can get internet access. Network is a word that you might hear a lot in relationship to the internet. A network, by definition, is a system of lots of connections and interconnections, and in the case of the internet, refers to computers being connected in order to talk to each other. But instead of imagining every computer being directly connected to every other computer, imagine it as a system of roads that information can take to get from one computer to another. The information is represented as electricity, and the roads will most commonly take the form of wires.
Your router might contain something called a modem, or you might have a modem as a separate device. The modem will convert the 0s and 1s (this is how computers understand messages—it’s called the binary number system) from your computer to electrical signals for the wire connecting to your internet provider and vice versa.
Server: A special kind of computer that’s only used for sharing files with others. All of the content you see on Rookie, including all the images and text, is stored on a server so it can be easily shared with anyone who visits the site.
Now that you’ve met everyone, let’s talk about what happens when you try to go to http://rookiemag.com.
Step One: Typing the URL into the Browser
You open up your computer’s (or phone’s) browser and type in rookiemag.com into the address bar. Rookiemag.com is the URL (uniform resource locator) that tells your browser what website you’d like to view.
Step Two: Finding the Server’s Address (DNS Lookup)
To call a friend, you need their phone number. But you don’t need to memorize it—you can use their name to look up their number in your contact list. Similarly, in order to view a website, your computer needs to know the IP (internet protocol) address of the website’s server. And just like a phone number takes the form (NNN)-NNN-NNNN, an IP address will take the form NNN.NNN.NNN.NNN. If you’ve seen IP addresses with fewer digits, it’s because it is typical to drop leading 0s. Just like the first three digits of a phone number are the area code, telling you where that phone number is from, the first few numbers of an IP address tell you the geographic region or company associated with the IP address, getting more specific as the numbers go to the right.
Your computer can use the URL you’ve entered to look up the associated server’s IP address in a process called DNS (domain name system) lookup, just like you’d use a name to search for a phone number in your contact list. You might be wondering about the differences among the different URL endings, like .org, .com, and .net. Because there are so many URLs and IP addresses to search, DNS lookup uses those endings as its first round of elimination in its search. In our example, DNS lookup starts looking for the IP address for rookiemag.com in a directory of all .com IP addresses. Eventually, the lookup for rookiemag.com will return the IP address of Rookie’s server. If you’re curious to learn more about DNS lookup, here’s a great resource on it, in cartoon form.
Step Three: Establishing a TCP Connection
Now that your computer knows Rookie’s server’s IP address, your computer can request a TCP (transmission control protocol) connection with Rookie’s server. Requesting a TCP connection is like asking for permission to talk. Computers are polite, so if they are following the correct protocols of the internet, they always ask for permission before sending a message. You might wonder, Isn’t asking for permission itself a conversation? Yes, but it’s still polite to ask for permission to talk before starting a longer conversation.
Let’s consider the opposite of asking for permission to talk—street harassment/catcalling. People on the street who yell at strangers never check if it’s OK to talk and will continue yelling even when it’s clear that the person being yelled at is not interested in a conversation.
Computers are respectful and follow protocol-based communication. So, a computer starts a conversation with another computer by sending a message that’s the equivalent of, “Is now a good time to talk?” The other computer will respond with a message that’s the equivalent of “Sure!”, if it’s available for communication. And the first computer replies with a message that means, “Cool, just wanted to check first.” If the first computer never gets a reply back saying it is OK to talk, it won’t continue to send messages.
Step Four: Preparing Messages
Now that there’s a connection from your computer to Rookie’s server, the two computers can talk to each other. Servers use a way of talking called HTTP (hypertext transfer protocol). Just like you’d start a letter to Beyoncé with “Dear Beyoncé,” HTTP requires that computers start messages with a greeting called a header. There are a few different kinds of headers, which your computer knows to use based on what you’ve asked your computer to do. When you type in Rookie’s URL and hit enter, the message your computer sends through the network connection to Rookie’s server uses a header specifically for requesting information, called a GET header. If you’re posting a comment, the message your computer sends a message to to Rookie’s server with a POST header, which is specifically for sending information to a server.
Step Five: Journey of the Messages
And now, your computer’s message must go on a journey to get to Rookie’s router! In our example, we’re sending a message from your computer to Rookie’s server. Just like traveling on a plane, sometimes that message can be transferred fairly directly, or sometimes there are stops (like layovers) along the way. These “stops” can just be standard network points that are part of the path, or interruptions that can be caused by a number of different things. For example, a message might have to pause or re-route when a network is congested, just like cars might have to in a traffic jam. For the appropriate message to go from your computer to Rookie’s router, we wrap the message in a TCP (remember TCP from Step Three?) packet. The TCP packet acts like the envelope of a letter, with information on where the message is going, as well as who sent it. The packet is essentially just a unit of information that is readable by the server.
Step Six: Response From the Server
Once your message arrives at Rookie’s server, Rookie will respond (how kind!). So long as the message was written with an HTTP header, Rookie’s server will know the proper automatic response. It’s sort of like how you know to say, “Who’s there?” when someone says, “Knock knock.” The standard response is a 200 OK message, which is basically a status message from the server, saying whether or not the request went through. With a 200 OK message, we’re good to go ahead and render the webpage. You might have come across a 404 Document Not Found page before. A 404 response means that the website you asked for doesn’t exist on the server. These are just a couple out of many different standard responses a website may give.
Step Seven: Rendering the Webpage
The rest of the information in the message contains the website data. The text, images, and formatting information is all part of the website data, and this is written in the programming languages HTML and CSS. HTML and CSS act like LEGO instructions, which tell how all of the information for the website should fit together. For example, the text <title>Rookie</title> tells the browser to put “Rookie” in the title area of the browser. Once the web browser has fully loaded all of the content for rookiemag.com, you can happily browse through the beautiful writing and artwork on the site!
Knowing what goes on behind the scenes might actually make the internet feel even more magical, considering how quickly all of these steps seem to take place on your screen. Often, learning about a technology will transfer the feeling of magic from, Wow, how does that technology work? to Wow, how does the science behind that technology work? If you’re curious, keep learning and asking those questions! ♦