HTML Cheat Sheet

Introduction

Overview

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

HTML

<b>Some bold text</b>

RESULT

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.

HTML

<i>Some italic text</i>

RESULT

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:

HTML

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

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

HTML

 <html>
    <head></head>
    <body>
        <b>Hello in bold text!</b>
    </body>
</html>

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!