At Cantilever, we make websites. Some of our clients are industry veterans who understand the nuance of how a site comes together, but most start with little prior knowledge. We love helping clients develop a full model of what it takes to put together a site, and how their project will actually work when it is complete. Additionally, when we hire non-technical staff, we always take the time to train them on the basics of how sites work, so they have context for the decisions they make in their own roles.
This is a canonical version of the “orientation” we like to give. We are releasing it to the public in the hopes that it is helpful to a broad audience. It is geared towards people who use computers frequently but have never really explored how they work.
Definitions
A website is an internet location where a user can view content and interact with services. Let’s go term-by-term.
A website is…
…an internet location…
The internet is what connects computers together across large distances. If you want to send a message from your computer to another computer in the same room, you could connect them with a cable and send it without any need for the internet.
-min.jpg)
But imagine you and 99 friends wanted to connect each of your computers so you could communicate with anyone in the group. That’s a lot of cables.
Instead, it makes sense to use a specially-configured intermediary computer which the whole group is connected to. Then, if you want to send a message within the group, you send it to the intermediary first, and the intermediary passes it along to the eventual recipient. Each person in the group only needs one cable, and yet all of the computers can communicate.
This kind of intermediary is called a router. A router allows people to create a network by linking their computers together efficiently. Each person’s computer is a client. Within your home or office, you have a router which your computer is connected to, either with a physical cable or wirelessly. Whenever you use the internet, information about your requests first passes through the router on the way to its final destination.
Now imagine that your group finds out about other groups who are doing the same thing. You want to be able to communicate with their computers, too. Connect a cable from your router to their router, and voilá! But if you wanted to connect with 99 more networks, the same problem applies: Too many cables. Instead, you could link your routers with a router, creating a new tier of the network. Imagine extending that structure to be large enough to include every single internet-connected device in the world. That’s the internet.
Most computers on the internet are normal clients — PCs, mobile phones, home assistant devices, etc. But some are specialized computers called servers. These devices are designed to distribute websites to clients who request them. The “internet location” where you visit a particular website is, in fact, the location of the server which sends you that website.
Each computer on the internet has a unique location, called an IP Address. The address is a series of letters and numbers, much like a phone number. If you have the IP Address of a computer you want to communicate with, it’s easy to reach that computer over the internet. But if you don’t have that address, or the address changes frequently, it’s impossible to find the party you want to reach. That’s where domain names come in.
A domain name is a human-readable web address, like “cantilever.co”, which is associated with a specific IP address. The internet has a humongous “phonebook” which associates web addresses with their equivalent server IP addresses. When you access a website by typing in its web address, your computer first uses this phonebook to figure out where that website actually is, then requests the website from it.
Once your computer has made the connection, it can start communicating with the server.
…where a user can view content….
On the internet, a user is a human being visiting and interacting with a website. When a user requests a website, the server which is responsible for that website sends back a bundle of files. Servers don’t speak human, so this bundle of files needs to be processed and formatted in order to resemble something a human can understand. A web browser is a software program like Google Chrome which takes those files and assembles them into something comprehensible to humans.
The “skeleton” of a website is HTML. This is the underlying document which contains the literal words on the page, but also additional instructions for the web browser. Those instructions will include the location of images and video to add to the page, and where those image or video files can be found on the server. They may also include what color a certain section should be, or what to do when the user clicks on a certain part of it.
Often those instructions are complex, and so instead of being included directly in the HTML document, they are separated out into their own files which are requested by the HTML. Files which tell the browser how to make the site look are called CSS. Files which tell the browser how to make the site behave are called Javascript.
Look at the “clap” icon on the side of this article [NB: This article was originally posted on Medium]. The icon design is defined in the HTML. The color, size, and position of the icon are defined by CSS. When you click it (thanks!) and it does the little clappy thing, that’s Javascript.
The website code might also tell your browser to request other kinds of visual resources, like font files, or even to make a request from a totally different server. It might also tell your web browser to keep track of some information about what you do on the website. This information is usually contained in a cookie, a tiny file which your browser manages.
No matter their complexity, websites are almost all collections of HTML, CSS, and Javascript which combine to create the appearance and behavior you expect.
…and interact with services.
The beauty of the internet is that it is not one-way. Not only can you request web pages from a server and view them in your browser, but you can also send information back to that server, enabling rich interactive experiences.
When you click the clap button on this article (yes, please do it again, thanks a lot), the page’s Javascript code sends a message back to the Medium server to communicate what you just did. The server has its own processing code which maintains a running tally of how many claps each article has received. Once it successfully logs the clap in its systems, Medium’s server sends your computer a response to confirm that the clap worked.
Medium’s server response to you clapping for this article
This same model applies to more complex interactions, like adding a comment, or even logging in and publishing a post. Medium generates web pages, but also manages these interactions. The combination of all of this technology could be called a service.
The web page you see in your browser is the proverbial tip of the iceberg. Behind the scenes of every page request is a universe of computer code, crunching numbers and reading data, all culminating in what to you is a seamless interface to access the underlying service. This interface is called a front-end. The behavior of the service, which you don’t see until your computer receives the page, is the back-end.
Services allow users to interact with them, but they often also have secret tools accessible only to administrators of the service. Most sites we build include a Content Management System (CMS), which is a special interface that only we and our clients can see. They allow us to add new content to the system, control access to certain parts of it, or configure its settings. A CMS is a special interface to a system, but it works just like the part of the site a user can see: with HTML, CSS, and Javascript, sent to the user’s browser over the internet.
—
This is, of course, just the start. The web is a fascinating and multivalent thing. Focus on its parts, and it seems logical. Zoom out to the whole, and its chaos is fearsome. At Cantilever, we embrace this complexity and love finding ways to carve out a small part of this global network for our clients.
This article was originally posted by Cantilever on their Medium account.
