This series introduces the foundation for web development using basic HTML and CSS markup. It is intended for those who have zero web development experience, though it might be a solid "foundation" refresher for anyone.
HTML & CSS Basics Series →

This post is part two of the Web Development Basics series. Before we jump into coding, we’re going to take a look at a basic overview of how the internet works—if you understand this basic stuff, it’ll make it much easier for you to set up your own site. I’ve kept the explanations here intentionally simple—there are links to more complete technical descriptions for those interested in digging deeper.

The short version:

If you want to actually put your website on the internet for people to see, you’re going to need to purchase two main things:

  1. a domain name, and
  2. a hosting account

Most of the time you can purchase these together from the same provider, some providers even give you your first domain name for free when you sign up for hosting with them. (There are lots of choices out there, and I don’t endorse any particular one. I will say this site is hosted on A Small Orange, and I’ve had good luck with them. The people that made the video below, Bluehost, also offer cheap shared plans and are a popular choice.)

Before we go further, I’ve gotta say, there’s a great video produced by the folks over at Bluehost that explains how all this stuff works pretty well. It’s a good overview of the technology regardless of who your host is. I’ll cover the same stuff in more detail below, but the video could be helpful too:

The longer version:

Every website on the internet has a unique address that users can type in to access it from a browser. You’re probably used to seeing these addresses written like www.google.com or www.turnwall.com. These are called domain names, and you probably already knew that. But have you ever wondered how typing that domain name in your browser bar actually gets you to a website? Basically, this is what happens:

  1. The browser uses your unique domain name (“yourdomain.com”) to search for the associated IP address.
  2. The browser finds the server with that IP address, specifically, your user account on that server.
  3. The browser looks for the “index” file in your public directory.
  4. The browser displays this index file and your homepage!

Okay, this is simplifying the whole thing, true. But this is basically what you need to know. Let’s dig a little deeper…

IP Addresses

Every computer connected to the internet has an IP (or Internet Protocol) address—the address that other computers can read to figure out where to send information and where it’s coming from. To find your own, search Google for “what is my ip“—it’ll return your specific IP address atop the search results, and look something like this: 123.45.67.890. Think of this number like your address at home:

123 Something Street, Apartment 1
Some Town, USA, 12345

Each of the different parts of your address: street, town, city, etc. help the delivery man find your house. An IP address does the same for internet traffic. If you knew the specific IP address of the server you were trying to access, you could get to a website by typing in just the IP address. This is great for computers, but it would be hard for you and I to remember all of the numbers of our favorite websites. This is why we have domain names.

Domain Names and DNS

Domain names are basically easy-to-remember shortcuts to numeric IP addresses.

So when you type in “yourname.com”, your browser really wants to connect to the associated numeric IP address. DNS, the Domain Name System, is what connects the human-preferred domain names with the computer-preferred IP addresses. You can think of DNS as a giant database that just connects domains to addresses all day long. This all happens in milliseconds, but this is how every web page is actually served to you—the end user. (This is really simplifying everything that happens—if you want to know more details, check out this great How Stuff Works article.)

So practically, you need a domain name if you’re going to have a website.

Registering a domain name

You probably want to purchase a domain name from a registrar so that people can type in “yourname.com” instead of a long string of numbers to access your website. First you need to find a unique domain name that isn’t being used by somebody else. (A useful tool to see if your domain name is available is Instant Domain Search.)

After you decide on a name you’ll have to purchase it from a registrar, or look for a hosting provider that can do it for you—many hosts offer this as part of your hosting account package. If you’re new to this, I recommend letting your host take care of it for you so you don’t have to worry about getting it set up right.

(Note that you can always transfer your domain between registrars and hosts in the future, so don’t feel locked in if you just want to go for the easiest solution now.)

So when you type in your domain name, it’s going to point you to the IP address of a server computer somewhere, meaning you’ll need some server space too. And no, you cannot use your own computer for this. (Okay, technically you can, but it’s complicated and generally a bad idea.)

Hosting & Servers

A server is a special type of computer—different from your own in two major ways. First, it’s always powered on. Second, it’s always connected to the internet. Specifically, it’s always connected to the same IP address so that other computers can always find it. (Again, this is a simplification of the process, check out the How Stuff Works article for the nitty gritty.)

When you sign up for shared hosting (you’ll probably want that to get started—it’s the cheapest and easiest to set up), you are paying a hosting company for a certain amount of space on that specific server, and they also set up all the behind-the-scenes stuff that makes that domain find your specific account on the server.

Your specific hosting account

So on a shared hosting account, you and lots of other people are sharing the same server. When the hosting company sets up your account what you’re actually getting when you type in “yourdomain.com” is not just the IP address of the server, it’s a specific folder on that server—we’ll call that your root directory.

In order for people to see your site online, you need to make sure you have all of your website files where they need to be inside of this root directory for your site to work. 99% of the time (I totally made that number up), on a shared hosting account you’re going to want to put your website files in a folder called “public_html”. The browser will automatically be looking in this folder for a file with the name of “index”, specifically in our case, “index.html”.

In the following tutorials, we’ll be using an FTP client to transfer the coded HTML and CSS files we create from our personal computers to our server and hosting account (Cyberduck is a free FTP client). It’s as easy as drag and drop once you have it set up. Don’t worry about all of those specifics right now, I’ll cover uploading your site files for the first time in detail in another post after we’ve written some code to upload.

For now, you should just have an idea of all of those steps, so you understand what we will be doing with all of the code we write so you can turn it into a real, working, Google-able website.

So to recap…

When a visitor types in “yourdomain.com”, this is what happens:

  1. The browser uses your unique domain name (“yourdomain.com”) to search the DNS for the associated IP address
  2. The browser finds the server with that IP address, specifically, your user account on that server
  3. The browser looks for the “index.html” file in your public_html directory.
  4. The browser displays this index file and your homepage!

So really, what you need now is an index file.

Great! We’re going to create one in the next post: part 3 of the series: What exactly is a website? An HTML and CSS overview. Continue on…