Visiting a website is as natural as walking out the door and heading over to the park. You type in a URL or search a few keywords on Google, and within half a second you’re bombarded by images, text, and interactive content. It’s so natural that we don’t always stop to think about the complex mechanisms that allow us to access Google, Facebook, Netflix or Pinterest.
WHAT IS A WEBSITE?
A website is a collection of code files. One file determines the page’s layout; another file decides what happens when a user clicks a button or uses the search bar. HTML, CSS, and JavaScript code are combined to make the website work as intended. Combined with these ‘.html’ and ‘.js’ files are images and other multimedia. In essence, each website is its own mini-program.
The code is stored on the website’s server. A server is a computer, much like the one you use at home, just more efficient and specialized. Thousands of servers are kept in data centres, and often, companies making a website rent out a particular server (or even share one!) and access it remotely.
Website servers don’t need to be user-friendly. They’re not made to run complicated, visual programs like Skype or Photoshop. Instead the server’s only job is to listen and respond to client requests.
When you visit a website, you make a request to access the server’s code, and the files are sent sent over the network. Your browser is the program that actually runs the code, which is why a website might look slightly different if you’re using Chrome vs Firefox, Edge vs Safari. Attached to every server response is a status code that indicates whether or not the client’s request was successful. You might be familiar with a couple of them:
- 200 — Ok
- 404 — Not Found
- 408 — Request Timeout
- 500 — Internal Server Error
And let’s not forget the all-important:
- 418 — I’m a Teapot
Want to see requests and responses in action? Let’s use your browser’s Inspector feature!
- Open up your browser and navigate to www.kidscodecs.com
- With Chrome, right-click anywhere on the webpage and select ‘Inspect’. With Firefox, hit ‘Ctrl+Shift+I’ if you’re using Windows and ‘Cmd+Shift+I’ if you’re using a Max. Your Inspector might appear in the right-hand side or at the bottom of the page.
- Click on the ‘Network’ tab in the top bar of the Inspector.
- Refresh your webpage, and watch as the responses flow in!
As you can see, your browser makes a separate request for each file. If you refresh again, you might see some of the status codes change from 200 (Ok) to 304 (Not Modified). This means that instead of being sent over the network, these files are being retrieved from your browser’s cache!
MEET & GREET
When you meet someone for the first time, you might open with “Hi, I’m Olivia. It’s nice to meet you.” The other person responds with their name, and then you shake hands, or you wave and grin at each other, or perhaps you go for a hug. The exact words and gestures vary from person to person, but the overall process stays the same:
- Start with a greeting
- State your name
- The other person returns a greeting
- The other person states their name
- End with a bonding gesture
- You are now friends!
What we have here is a simple protocol for introducing yourself. A protocol is a series of well-defined steps that two computers (or people) follow in order to perform an action, like connecting to a website or downloading a music file.
You might find it weird if you say “Hi, my name is Josh” and the person responds with “I like cornflakes”. Or worse, what if the other person doesn’t respond at all and simply stares at you? What do you say next?
Sticking to a protocol ensures that communication goes as planned. Just as we have different social protocols — introducing yourself at a party versus ordering food at a restaurant — there are different network protocols. The most famous is the HyperText Transfer Protocol, or HTTP, which we use to access content over the web.
HTTPS is a variation of HTTP that involves encryption to make it more secure. You may also have heard of FTP (File Transfer Protocol), TCP (Transmission Control Protocol) or UDP (User Datagram Protocol). The first part of a URL shows you which protocol is being used.
CONCLUSION
On the surface, browsing the web may seem sleek and simple, but dip below the waters and you’ll see a world teeming with complexity and mystery! Networking is an increasingly important concept in today’s world of smartphones and social media. Websites, severs, and network protocols are only a small piece of the puzzle. There’s so much more out there to discover!
Learn More
How to Inspect Web Page Elements
https://www.lifewire.com/get-inspect-element-tool-for-browser-756549
What is a Server?
https://www.lifewire.com/servers-in-computer-networking-817380
https://whatis.techtarget.com/definition/server
HTTP Responses and Requests
https://wiki.kidzsearch.com/wiki/Hypertext_Transfer_Protocol
Browser caches
https://askleo.com/whats_a_browser_cache_how_do_i_clear_it_and_why_would_i_want_to/
