This is a primer for folks with no background in Computer Science. It’s meant to provide a brief understanding on what web pages are, how they are created, and how they appear to a user (you!) on the screen. This gives just enough information as to how the web works – so if you prefer something more technical, this may not be the right article for you.
I’ve decided to write this post in a question-and-answer (Q&A) style as I find it to be most helpful in digesting large chunks of concepts. I will start with what I think are the most common questions people have, and slowly funnel downwards into more in-depth ones.
So, let’s grab a cup of coffee and begin.
What are web pages?
Web pages are pretty much what you see on your computer or mobile screens when you are connected to the Internet. The best example I would give is this very post you are seeing. It is an online document that is presented on the web, hence the term “web page”.
You can access web pages via web browsers such as Chrome, Safari, Firefox, or even Internet Explorer.
What is the difference between a web page and a website?
There really isn’t any. A website is simply a collection or compilation of several web pages.
I do a lot of searches on Google. Is the Google Search page (google.com) a web page?
Yes and no. It’s actually a website, since google.com is basically a search engine that lists a massive collection of web pages. It helps you find other web pages through its search engine capabilities.
How do web pages even appear on my screen?
I like to associate this concept with real estate.
Think of a house on a plot of land. A website is that house. Its webpages are its rooms. The land that the house is sitting on is a part of the large Internet real estate. In order to occupy that land, the house will need to have a legal address. In this case, the website has an address called the “IP address”. It exists as a series of numbers (17.276.90.158) but is translated into a proper text address, a “URL” (or Uniform Resource Locator), for us humans to understand.
The URL is what you type into your browser (i.e. the top of your webpage has the URL in the address bar: geekcatty.com/thepostyouarereading/). It is also called a domain. When you hear someone say they have a purchased a domain for their website, it means they have purchased a “housing address” for their website.
Websites appear on your screen when you access their URL/domain/”house address”.
Now let’s get back to a point I mentioned earlier – the plot of land the house is sitting on. So far you’ve got the house (website), the rooms (webpages), the address (the domain), but what about the land itself?
Well, for websites, the land is actually the “server space”. Many “server spaces” exist in the Internet real estate world, but you can’t simply occupy them. You need to go through a “hosting company” (a.k.a. an Internet real estate agent/ realtor) that will sell you that piece of server space legally.
A remote computer called a “server” generates the server space. Think of it as a governing authority that controls and creates plots of land for houses to sit on.
In summary, how websites appear to you on your screen is pretty simple if you think of it this way. You key in the address you want to visit (URL/domain) on your GPS, which then takes you to the plot of land (server space) where the house (website) is sitting on. You go into the house and explore its rooms (webpages).
Does my computer do any of the work in displaying web pages?
Yes it does. Your computer is part of a client-server relationship. Your computer (the client) is actually working alongside the server (i.e. the remote computer I mentioned above). While the server generates the server space and web pages, it does not have direct access to control what you see on your computer.
That’s where your computer comes into play. The server actually sends files over to your computer, so that your computer can display the files on your screen.
What creates those images and texts I see on a web page?
If you’re talking about what puts those images and texts into a web page – it’s something called HTML (Hypertext Markup Language). It’s a language the browser understands – so if someone wants to design a web page in a certain way, say they want to embed a picture of kittens in mittens, they will learn and use HTML to give the browser a set of clear instructions on how to embed that picture.
The browser will then take those instructions and display the picture on the web page accordingly. HTML is not a programming language per se, but it’s a “language” used to communicate with the browser.
What about the colours and sizes of everything on the page?
If you’re talking about the design or layout of the page, there’s another simple “language” the browser understands – it’s called CSS (Cascading Style Sheets). This one pertains to purely the style of the web page (colours, sizes, fonts, width and height of the kittens in mittens picture).
What about those ecommerce sites (like Amazon) where I can purchase stuff on and pay for them? Are they built with HTML and CSS?
Partially. A large ecommerce website like Amazon would take a lot more than just HTML and CSS. The purchase and payment actions on the website can’t be created using HTML and CSS. We have to use more complex programming languages to help a user perform those actions.
HTML and CSS serve “static” websites well. They are simple “languages” the browser understands – like pure instructions to tell the browser to display certain things and nothing else. There are no complex actions involved in static pages. No clickable buttons to calculate your purchases, no option to checkout your purchases, nada.
The only exception I can think of is – HTML allows a user to click on an embedded link. Like this string of text that links to somewhere else.
A site like Amazon would be called a “dynamic” website, instead of a “static” one.
Now that you have a basic understanding of how servers work, you could: