What is a website?

A Network of Computers

You've probably heard that the internet is a "network of computers". All this really means is that it is made up of a bunch of computers that can all talk to each other and share information back and forth. This includes desktop computers, laptops, smartphones, tablets, even smart appliances and lightbulbs. As long as they are connected to the internet, any of them is capable of talking to any other.

While all these computer types are important to know about, let's focus on a very special type of computer that isn't only connected to the internet; it's a key part of how the internet works. This type of computer is called a server.

A server is much like any other computer. It has a processor and a hard drive and an operating system. It's the job it does that makes it special: It stores and shares web content, especially the files that make up websites.

You can think of a server as a house for web content.

Every public website needs to live on a server somewhere so that the files it's made of can be shared with all the other computers on the internet whenever a user wants to see the site.

Finding Websites

IP Addresses

There are countless servers on the internet, so when your browser (the program used to access websites) wants to find a particular website, it needs to figure out which particular server houses the website it wants to display. We said earlier that servers are like houses for web content, and just like real houses, they each have a unique address called an IP Address, which stands for Internet Protocol Address. (In truth every computer connected to the internet has an IP address of its own, but we'll keep our focus on servers for now.)

IP addresses are numerical identifiers for computers on the internet.

DNS and Domain Names

Unfortunately, IP Addresses are long strings of numbers and dots (for instance 123.456.78.89), which aren't that easy for us humans to remember. Imagine if you had to remember an address like that for every website you ever wanted to visit! Lucky for us, there is a system called DNS (Domain Name System) whose job it is to make things easier.

Let's return to our metaphor of the server as a house. I may not remember the address of a place I want to go, but if I remember the name of the place I can turn to a directory like Google Maps or an old-school phone-book to lookup the actual street number. DNS is like that phone-book. All I have to remember is the site's domain name.

Domain names are simple, easy to remember names for websites.

Even if you didn't know what they are called you're probably very familiar with domain names. They're things like "wikipedia.org" or "google.com"&mdash.

Putting it All Together

Every time you enter a domain name into the address bar of your browser it works like this:

1. The browser reaches out to the DNS service and asks for the IP address associated with the domain name you entered.
2. DNS looks up the correct IP address and tells the browser.
3. The browser then reaches out to the server at the IP address it was given and asks for the website files.
4. The server sends the website files to the browser.
5. The browser looks at the instructions in those files and builds the website for you to see.

All of this happens in a fraction of a second every time you visit a website!

How Pages are Built

As we've mentioned already, websites are made of files and browsers build websites from those files. Let's take a closer look at what that means.

You probably know that websites are written in code languages. And documents filled with various types of code are the most common types files that make websites. You can think of these files as blueprints that tell the browser how to build each site. In this metaphor, think if the browser as a hard-hat wearing builder who reads the blueprints and follows the instructions given.

Think of code files as blueprints that tell the browser how to build the site.

Every time a webpage loads, the browser must read the instructions again and re-build the whole page.

Code Languages and File Types

There are several kinds of code languages and file types that are most commonly used to create websites. Let's take a look at the most important ones.

HTML

HTML stands for HyperText Markup Language. "HyperText" means you can use links to get from one page to another. "Markup Language" means that you add meaning to text or other content by "marking it up", much like a teacher adding red comments and marks to an essay he is grading.

HTML's job is to structure and identify content of a web page.

Basically, it is where you decide what goes on the page and what role you want the parts to play. The code indicates things like "this is a paragraph" or "this is the most important heading" or "this is a button". All of this is explored in more depth in the Introduction to HTML chapter of this book.

CSS

CSS stands for Cascading Style Sheets, which simply means it is a document that provides information about appearance.

CSS's job is to set the visual style and appearance of a webpage.

It allows you to set things like colors, fonts, spacing, and layout for the content provided in the HTML. The code says things like "make the paragraphs all blue" or "add this much space below a certain heading" or "put the sidebar to the left of the main content". This topic is explained further in the Introduction to CSS chapter of this book.

Media Files

Websites also commonly employ media like images, video, or audio. Typically, each piece of media would be its own file, and a number of common file formats are used for websites. For instance, images can be provided in jpg, png, gif, or svg formats.

Certain HTML code indicates which media file to use and where to include it in a page. For an example, see the chapter on Images in HTML

Programming Languages

If HTML shows what is on a webpage, and CSS indicates what it looks like, then programming languages exist to determine what it does. HTML is able to provide simple links and a few other very basic types of interactivity, but to make a webpage do anything highly interactive, things like checkouts, commenting, or social media posting, you need one of these programming languages.

Programming languages create advanced interactivity and behavior.

There are many programming languages, and each has its strengths and weaknesses, but the most common on the web today is javascript. At their most basic, all programming languages are written using a series of "if/then" statements. For instance, "if the user clicks a certain button, then make make a popup dialog appear".

This book focusses on HTML and CSS only, but it is important to have a basic knowledge of programming languages and their role in creating interaction on the web.

Practice Exercise