HTML Cheat Sheet



Welcome to learning the basics to building a website. There are no prerequisites! You'll just need a computer, a text editor (like Notepad on Windows, Text Edit on Mac) and a browser like Chrome or Internet Explorer.

First let's start off with an overview, a bigger picture of what we want to do and what we hope to achieve.

You're currently looking at a website, a website is a combination of a bunch of technologies, the main three being:

These three come together to create what you are currently seeing!

Getting Started

HTML is like our scaffolding. It consists of tags which specify properties, tags are wraped in arrow brackets. Let's articulate with an example


<b>Some bold text</b>


Some bold text

You can see the b tag above. It opens with angle brackets, and closes with angle brackets and a slash. The b stands for bold.


<i>Some italic text</i>


Some italic text

So this example uses the i tag which is for italics.

There's a multitude of different HTML tags for varying uses. We will only cover a handful of basic ones in this tutorial.

Structuring Your HTML

Lets open up a text editor, such as notepad, notepad++, textwrangler or textedit.

Every HTML file starts off in more or less the same way:



The HTML tag specifies that everything in between is HTML, then we have two subsections

So with your text editor opened infront of you, write up (or copy paste) this


        <b>Hello in bold text!</b>

Now save your file, you'll need to save it as something .html, .html is the file extension which tells your browser that it is HTML (obviously!).

You should be able to double click your file now and open it in a browser, you should see this text! If you're having issues, download this file: page1.html, and open it up.

If that's all working you're ready to progress to the next section!