Website DIY Part 1: Elements of a Website

We all use websites everyday… Google, Facebook, LinkedIn, just to name a few.

Have you ever stopped to wonder…

  • What is a website?
  • How do websites work?
  • Why do you need internet to access web pages?

Or, perhaps you are a more do-it-yourself type of person and you are wondering…

  • What are all the elements I need in order to put a website together?
  • Why do I need to purchase all this random stuff (domain name and web server) to put one together? What am I buying?

Or, maybe you recently subscribed to a paid website service like Squarespace or Wix and you are wondering…

  • What service did buy? Was it worth it?
  • Can I do this for cheaper?

In any of these cases, you have come to the right place! This blog post series is supposed to guide you through all the information and data you need to build your own website.


In the first article of this series, you should be able to:

  • Identify the primary elements that make up a website.
  • Define the elements that you will need to get started on building your own website.

In the twenty-first century, most of us have come across a website at some point in our lifetimes. We know it as as place where we can access information that other people have put on the world wide web. On more complex websites, we can browse through content, make purchases, and even interact with other people, just to name a few things!

my_first_website-01.png

But what’s going on under the hood? What allows anyone in the world to access information that you have put up on your website? What’s happening when you type in a url into your web browser?

In order to answer these questions, we have to understand the functionality that the internet provides. For the purposes of this particular blogpost, we have to understand the distinction between the internet and the world wide web. The internet, put simply, is an infrastructure (a network made of physical elements) that allows any computers connected to it, to send information to each other.

the_internet-01

Each computer connected to the internet has an IP address which essentially serves as the ID number of the computer. The architectural design of the internet is super intriguing, and you can learn more about it [here… insert future link to internet article]. For the purposes of this blog post, we will just treat the internet as a magical piece of technology that allows computers connected to it to pass information to each other. How does the world wide web fit into the picture of the internet then?

While the internet is an infrastructure (network of physical and software components), the web is a service that is built on top of the internet. The elements of the web that you need to know about (for the purpose of this article) are: the clients, the servers, and the domain name service. We will introduce these components with respect to an example!

the_web-01.png

Let’s suppose you are on your personal computer, which is connected to the internet, and you access a website like Facebook. In this case, your personal computer is the client. The client can be any personal computer connected to the internet. Facebook is a company, and it has many computers that hold all the content used to create Facebook. In the case of Facebook, it’s computers hold the code that defines the website that appears when you go to the website, along with all the personal content that people upload to the website when they use it (profile pictures, personal information, posts, etc.) These computers–the ones that hold the website’s code and content– are called servers.

client_server-01.png

To simplify our example, let’s just say there’s a single computer that Facebook is using to hold the web design code and the content. The code, written by Facebook that is hosted on the server computer, includes the html, javascript, css files and the content includes images PDFs, and videos. Another article is forthcoming about how to write this type of code.

When you are clicking through different things on Facebook, you (the client) are sending requests to the server. The server has code loaded onto it that defines how to respond to your request, i.e figure out what information to send back when you make a certain request. For instance, it knows when you click on someone’s profile picture, it leads you to a new web page where their profile picture is magnified. For a retail store, when you click a button that says ‘make purchase’, you are sending a request to the server computer which will collect your payment, put in a notification to the company to place your order, and ultimately lead you to a page that says ‘purchase completed!’.

But, wait a minute! Perhaps you are left wondering how the internet knew which computer to access when you typed in the domain name: ‘www.facebook.com‘. You didn’t type in the IP address of the computer you wanted to access! This is exactly where the domain name service (DNS) plays a role. The DNS is part of the web, and it essentially serves as a huge address book that maps domain names to the server IP addresses.

dns-01

This means that when you type a domain name like ‘facebook.com‘, the web-browser will access the DNS to identify what computer the website is being hosted on. Then, information between the client and server computers can be passed since both computers exist on the internet!

In summary, a website involves the following elements:

  • A domain address that specifies the name of the website people will type to access your data.
  • A bunch of code that defines how your website looks and functions (html, css, javascript) and the associated content (photos, videos, user data, etc.).
  • A server computer where the code and content is hosted.

The next article will tell you the steps you need to take to put all of these elements together to build your own website!

References:

[1] https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web

[2] PDF Icon https://www.flaticon.com/free-icon/pdf_136522

%d bloggers like this: