How Websites Work

An interesting question that we might have considered but not asked out loud is simply “How do websites work?” And fair enough, right? We use these tools every day for ordering food, getting our news, finding a handyman, and more, but what exactly are they? How websites work is actually a pretty straightforward system when you break it down and understand the concepts, so let’s do that. The table of contents below should help you navigate around, as the content we’re going over here can be pretty extensive, even in a simplified guide like this one.

HTML Files - The core of how websites work!

Files & Databases

First of all, all websites are simply a combination of files and databases. When you go to a website, your web browser downloads the files that make up the site and renders them for you to see. Websites with dynamic content (like blog posts) will also have a database.

The Front End

All modern websites use a combination of HTML, CSS, and JavaScript. There are also several different types of files that can run on a web server to connect the database to the rest of the files.

HTML files contain the structure of a web page. They’re used to determine where the content in a site will go in relation to the rest of the page and ultimately will have the actual content of the page in them as well, although this is sometimes added dynamically rather than saved directly in the file.

CSS files determine how the content will look. How big the text is and what colors and fonts, the spacing between elements on a page, and where things are positioned are all determined by CSS.

JavaScript, or JS, is a scripting language that controls the interactive elements of a website. Things like a pop-up opening after you click on something, animations, and anything else that happens as you scroll and interact with a web page, are all controlled by Javascript.

These three types of files are critical to how websites work, and a developer who is proficient in all three is known as a Front-End Developer.

The Back End

Most websites also use a 4th file type, although which one exactly varies from site to site. Our website – and all the ones we develop – use a programming language called PHP, but other sites might use Ruby, Python, C#, or a number of other languages.

The important thing to remember – and what these languages have in common – is that these files are used to link the front-end of a website to the database. They do tasks like searching the database for, updating, and removing information. They can also handle programming like math, data processing, and more.

These languages are more complex than the three that make up the front end of a website, and a developer who is proficient in one of these languages is referred to as a back-end developer. Most back-end developers specialize in or prefer one specific language over another.

Databases

You can think of databases as large, complex spreadsheets. These contain records of information related to a website. Things like the content of a blog post, a list of users and their passwords – maybe products and orders if it’s an online store.

The information in a database can be queried, created, changed, and removed by using a back-end programming language, and then displayed on a website as needed. There are a lot of database types, so we won’t bother listing them, but in most cases, the back-end developer is also responsible for working with them. You might even have a dedicated database manager on larger or more complex sites.

Okay, so that was a lot of information. But in summary: Websites are made up of HTML, CSS, and Javascript files, along with a database that stores content and information.

cPanel - a common website hosting tool

Website Hosting

So, where are all these files and databases stored? That’s where “hosting” comes in.

When you purchase hosting from a company like Dreamhost, what you’re doing is renting server space for your website’s files and database to live. These servers act as an always-on computer with the sole purpose of delivering the files and database content to your site’s viewers.

There are lots of differences between types of website hosting, but we won’t get into all of them here. Maybe we’ll do a more in-depth post on website hosting options soon, but know they are massively important to how websites work!

Registering a domain name

Domain Names

The last part of your website is the domain name. This is what everyone is most familiar with – mythicdesigncompany.com for example! Your domain is effectively the gateway to your website. We talk in more detail about how domains work in another article, but let’s stick to how websites work. Imagine it like this:

Picture a city with millions of buildings. It’s already confusing because of how big it is, but now imagine that none of the streets have names. Instead, every building is just numbered sequentially from 1 to 999,999,999. Now maybe remembering how to get to a few of these might not be too hard. Surely you’d remember what number your house is, and maybe where your office is, but an entire city worth of building is impossible to remember this way.

In the same way, every website has an IP address – a random assortment of numbers unique to it. Without a domain name, you’d have to remember this unique string of numbers for EVERY website you wanted to go to. Banks, restaurants, businesses – even Google!

Your domain name is basically an address – one that’s easier to remember – telling your web browser where to look to actually find your site. Easy, right?

Now you have an understanding of how websites work! A combination of files, databases, servers, and domain names that work together to deliver the beautiful pictures, videos, blog posts, and more that make up your website right into your viewer’s eyes! The best part of all of this, though, is that you don’t really need to remember all this.

At Mythic, we take care of every aspect of your website for you so you can view your website as the tool that it is without having to think about all of the pieces that it’s made of.

Leave the first comment