What exactly is a website? An HTML overview

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 →

Files. In folders. On a computer.

If you’re just getting into the world of web development, there are a few fundamental concepts that you’ll really need to understand before you even move into writing your first line of code. Some of these concepts may seem incredibly basic. Why? It might just be because they’re really that simple.

Let’s start here. I’m going to say it first—a website is nothing more than a bunch of files that are in folders on a computer somewhere. Let me reiterate—a website is nothing more than a bunch of files that are in folders on a computer somewhere. Really, it is that simple.

What is unique about these files is the type of content that they contain. This content is code, but you can just think about it as simple text that has some fancy meanings.

For the purposes of this tutorial series, we’re going to be dealing primarily with two types of files: HTML and CSS.

These files are simply a bunch of text saved in a file with a fancy extension. You’re used to seeing file extensions. A word document might have a “.doc” extension, while an excel spreadsheet might have a “.xls” extension. For those designers out there, a Photoshop file might have a “.psd” extension and an Illustrator file might have a “.ai” extension.

What do you know about extensions already? Well you might realize that you can’t actually open a “.doc” file in a program other than a word processor, like Microsoft Word. That’s because the program has been made to only open certain types of files. The same is true for HTML and CSS files. Your browser (FireFox, Chrome, Safari, Internet Explorer, etc.) is the program that is meant to open these types of files. So for a file to open correctly on a browser, it needs to have a special extension. To start with, this will be .html

Writing your first code: the skeleton of an HTML file

We’re almost ready to begin. Before we write our code, we need to create a place for it to “live”. So…

Step 1

Make a folder on your computer (your desktop is fine for now) called “website”. This is where we will save all files related to the site.

Step 2

Open your code editor* and create a new file called “index.html”, making sure to save this file in the “website” folder we just created.

*(If you need more info about code editors and other software you’ll need to follow along with these tutorial series, go back and read the first post: Web Development Basics: Series Introduction.)

Step 3

Starting with a completely blank file, type, or copy and paste the following code into the index.html file you created.

<!DOCTYPE html>

<html>

 <head>
 </head>

 <body>
 </body>

<html>

There are three HTML elements in this code example: “html”, “head”, and “body”. Each of these elements is created by an opening tag and a closing tag (explained below), and these three elements are the foundation for every single page on the internet.

This basic structure defines an HTML page with two sections: the “head” and the “body”. The only thing that you and I will see in our browser window is the “body” section. This is where all of our visual content goes. The “head” section, conversely, is not displayed in the browser window. For now, you can think of this section as containing instructions for your browser.

Step 4

Let’s add some more code to explore this concept and learn more basic elements—the additions are highlighted below:

<!DOCTYPE html>
<html>
 <head>
  <title>This is my page title.</title>
 </head>
 <body>
  <h1>This is a heading 1 element</h1>
  <p>Hello world, this is a simple paragraph.</p> 
 </body> 
<html>

We added a page title, “This is my page title.” This text appears at the top of your browser window or in your browser tab (see screenshot below). Note that this text is written within the HEAD section in a TITLE tag and therefore does not appear in the main browser window.

You’ll also notice that the first line “This is a heading 1 element” is bold and a larger size than the paragraph below it. This changed simply because you put this text between the “h1” tags. The h1 (header 1) tag will appear more prominent than the p (paragraph) tag because it’s hierarchically more important (we’ll learn more about hierarchy in a later tutorial).

Step 5

After you add all of this code and your index.html file looks exactly like the above code snippet, save your file and then open it in your browser (drag the file to a new browser tab or click to open with your browser of choice). There you go—your first coded web page. It works!

Well, hopefully it works. If not, then go back and carefully examine the code written above to make sure your looks exactly the same. In Chrome, it should look just like this screenshot:

You can also see that file by clicking this link for the demo page (it will open in a new tab).

That demo page is the exact code you saved in your own index.html file. To prove it, go ahead and view the source of the page, you can do this is any browser. With that demo page or your own index file open in a tab, try one of these:

If you’re using Chrome, press: opt+cmd+U, or select View→Developer→View Source in Chrome’s menu.
In FireFox, try pressing cmd+U.

Let’s learn why this stuff works…

Understanding HTML Syntax

The basic element

Let’s examine the line of code you wrote for the h1 element so we can start using the same terminology:

This element is comprised of three basic parts, the opening tag, the content, and the closing tag. Anything between angle brackets < > is a tag, and that means that it’s code for the browser to interpret. Note that the closing tag is differentiated from the opening tag with a forward slash: </ >. Anything that falls between the entire opening tag and the entire closing tag is simply content that you will see displayed in the browser window. How this looks depends on what the opening tag is, and if is has any special attributes (explained below).

Attributes

Just like a person may have physical attributes (height, weight, hair color, eye color), HTML elements can have attributes that describe something about them.

In this example, a is the element whose attribute is href=”http://www.google.com”. All attributes are what we call a name-value pair.

In this case, the name of the attribute is href, while the value is http://www.google.com.

There’s a really long list of HTML attributes here, if you’re interested in learning all of of them. But that list probably isn’t worth memorizing. You’re quickly going to recognize which attributes you’ll use frequently, plus text editors like Sublime and Dreamweaver will give you the attributes as you type.

Putting it all together

You just learned the basic structure of every HTML page, as well as what we call the stuff that makes up that structure. Moving forward, I’ll be referencing some the terminology learned here, so take a second to review the syntax. Also, every subsequent tutorial builds off of the code for the last, so make sure you know where you put that folder called “website”, and make sure it has that “index.html” file inside of it.

Guess what?

You’ve just made your first web page! Congratulations! Yes, it’s that simple. If you wanted to, you could upload this to your very own server and make it your own single-page website for the world to see.

We’re going to take it a little further than that and make the page look a little nicer. Ready? Keep reading the next tutorial in the series: HTML + CSS: how they work together.