What exactly is a website? An HTML and CSS overview

If you’re just getting into the world of web design and/or devel­opment, there are a few funda­mental concepts that you’ll really need to under­stand before you even move into writing your first line of code. Some of these concepts may seem incredibly basic to some users, or pretty confusing to others. If some of this seems overly-simplified, it might just be because it’s really that simple. Don’t fret, anyone can really learn this stuff with some practice.

This post will explain the following:

• What exactly is a website made of?
• What’s the difference between HTML and CSS?
• What are the parts that a basic HTML file needs?
• Some intro­ductory HTML and CSS terminology

Disclaimer: I’m not saying that these rules apply to all websites every­where. There are obvi­ously varying levels of complexity and excep­tions that are beyond the scope of these lessons. What I am saying is that these elements are the building blocks of basic websites, and you could create your own website with nothing but these elements. As such, I think this is a good place to start.

Files. In folders. On a computer.

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 some­where. Let me reiterate—a website is nothing more than a bunch of files that are in folders on a computer some­where. 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 class, 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 exten­sions. A word document might have a “.doc” extension, while an excel spread­sheet might have a “.xls” extension. For those designers out there, a Photoshop file might have a “.psd” extension and an Illus­trator file might have a “.ai” extension.

What do you know about exten­sions already? Well you might realize that you can’t actually open a “.doc” file in a program other than Microsoft Word (or other compatible text editors). 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, in this case “.html”.

There are obvi­ously some other qual­i­fiers as well. The computer that these files lives on is usually called a server, because it’s always hooked up to the internet and meets some other require­ments so that it can consis­tently serve files to your website visitors. These other require­ments are beyond the scope of this article—you don’t need to know them yet. What you do need to know is that a website is files, in a folder on your computer, and those files have exten­sions of “.html” and “.css”. Next.

Why HTML and CSS? What’s the difference?

Glad you asked. HTML and CSS are two different types of markup (code), which have their own unique syntax (the arrangement in which code is written). There’s an important distinction between the two. You can think of the HTML as the structure for the page, while the CSS gives the HTML it’s styling.

HTML = structure
CSS = style

(By the way, HTML stands for HyperText Markup Language and CSS stands for Cascading Style Sheets, if you were wondering.)

For a very basic example, you can imagine the HTML providing:

1. all of the text on the page (actual char­acters, punc­tu­ation, line breaks, etc.)
2. the hier­archy of this text (headings, sub-headings, para­graphs, links, etc.)
3. the relative placement of this text on the page from top to bottom, left to right (as written first to last in your code)

Perhaps the only thing the CSS would do to this HTML file then would be to dictate the color of the text, the size of the text, the color of the back­ground on the page and perhaps add a box around some of the text for good measure. (Of course, HTML and CSS can do much more than this. But let’s not get ahead of ourselves.)

For an amazing example of the concept of sepa­rating content from style with HTML and CSS, take a look at the site CSS Zen Garden. Really, do that now. The link will open in a new tab or window and I’ll take a coffee break.

Okay, we’re back?

Back in the day, this site was pretty inspiring—it was one of the first online examples of just how powerful this rela­tionship between HTML and CSS actually is. As you browse through the alternate designs for the site, bear in mind that every single design uses exactly the same HTML! The only thing that changes from design to design is the CSS file. This is a great example of what can be accom­plished using just CSS to change the look of a web page.

The skeleton of an HTML file

Let’s begin this foray into the coding world by taking a look at a basic HTML file. If nothing else, your file, in it’s simplest form, will look some­thing like this:

<html>
<head></head>
<body></body>
</html>

There are three tag types in this code example: “html”, “body”, and “head”. To make it work, you don’t even need the “head” part of it, but we’re going to use it in all of our files, so let’s just leave it alone for now.

What this code is saying is that this is an HTML page and within that page there are 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 instruc­tions for your browser. Here’s that code again with some content, and some simple instruc­tions, as an example:

<html>
  <head>
    <title>This is my web page's title (I'd appear at the top of your browser)</title>
  </head>
  <body>
    <h1>Hello World, this is a header 1 element</h1>
    <p>This is content you would actually see in the browser window. Specifically, this is a paragraph.</p>
  </body>
</html>

If you were to copy and paste this code into a file in any simple text editor or code editor (Dreamweaver, Coda, TextEdit, Notepad), save that file as some­thing like “my_test.html”, and then open that HTML file in your browser, it should look some­thing like the screenshot below (click to enlarge):

If you don’t believe me, then click this link for the demo page (will open in a new window). That’s nothing but the exact code you see above. Still don’t believe me? View the source of the page. You can do this is any browser—if you’re using FireFox try pressing “cmd(apple)+U” or Chrome: opt+cmd+U, or go to “View→Developer→View Source”.

You’ll notice a few things about the screenshot and the demo page. First, the title of the page: at the top of your browser window or in your tab, it’ll say “This is my web page’s title (I’d appear at the top of your browser)”. Look for that corre­sponding text in the code example above. Note that this code appears 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 “Hello World, this is a header 1 element” is bold and a larger size than the para­graph 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 (para­graph) tag because it’s hier­ar­chi­cally more important. This happens auto­mat­i­cally in the HTML without need for CSS because it’s still part of structure.

Remember this: you can apply CSS styles to the headers to make them different colors or sizes—even make them smaller than the para­graphs if you wish. But according to the HTML, they are still hier­ar­chi­cally more important than your para­graphs. This is very important to remember when consid­ering the acces­si­bility of your web page, and becomes increas­ingly more important as we begin to design for devices of all screen sizes.

Okay, back to the topic at hand. Guess what—you’ve just made your first web page! If you wanted to, you could upload this to your very own server and make it your own single-page website. But we’re going to take it a little further than that.

Recap

We just covered:

• the conceptual difference between HTML and CSS files
• the basic structure of HTML files (with two main tag sections: HEAD and BODY, contained within HTML)
• some basic HTML elements (H1 and P)
• How to view the source code of any web page.

Did you miss anything? Go back and re-read it. The next lesson will cover the details of basic HTML syntax and how to link two web pages together, and you’ll need this stuff as a base before you get there…