Learning HTML and CSS

know anything about programming or any other complicated technical computer-y things. You don’t even need

to know much math. This post will show you everything you need to make great games that you can play on

the Web, on desktop computers, or as apps on mobile phones and tablets.

There are lots and lots of ways to make video games. But you don’t need to know all of them—you only need

to know the best way. By “best,” I mean the easiest and most fun way, and that’s the way that you’re going to

learn from this tutorial. It’s also the way that will give your games the widest audience, give you the most solid set

of game-design skills, and give you the best chance of making a bit of money from it too.

To make games, you have to learn a computer-programming language , which you can use to communicate

with the computer to tell it what to do. A computer-programming language can look a lot like English, and such

languages are easy to learn. People might argue with you that technically HTML and CSS are markup languages,

not programming languages, but I’m going to call them all programming languages here and be done with it.

This post is all about making games using a technology suite called HTML5. HTML5 is based on three separate

computer-programming languages that work together:

1.HTML (HyperText Markup Language):A programming language that describes how games and applications are structured. Games and most websites are built using HTML.

2.CSS (Cascading Style Sheets):A programming language that describes how HTML code should be visually presented.

3.JavaScript : A programming language that lets you control how your games behave.

You’re going to learn all three programming languages in this tutorial. In this tutorial you’ll learn about HTML and CSS. They’re

extremely easy to use, and what we cover in this tutorial will be enough to get you started making games.You can also use the skills you learn in this tutorial to use HTML and CSS to start building websites if that is something you’d like to do. To make games, you’ll need to learn JavaScript, and that’s what much of the rest of this tutorial is all about.

These programming languages let you access and control many specialized technologies that are all part of the HTML5 standard. The most important of these for games is canvas . Canvas is a display technology

that’s great for animation and action games. You’ll learn all about how to use canvas to make games

What you need

Surprisingly, video-game design can be a relatively low-tech affair. Here’s the basic equipment you’ll need to make use of this tutorial.

1.A computer

You need a reasonably up-to-date computer, either running Windows or the latest version of Mac OS X, or even Linux. You should have basic computer literacy skills, which includes understanding how to make new files and how to organize them in folders.

2.Programming software

Luckily, this costs nothing and you probably already have all the programming software you need already installed on your computer. Here’s what you’ll need:

■ A text editor : If you’re using Windows, Notepad works well. If you’re using Mac OS X, you may use TextEdit.

■ Safari, Chrome, Firefox, or Opera : These web browsers include some great features for building

and testing HTML5 games. This post will explain how to use them to help you make games. Safari,

Chrome, Firefox, and Opera are available for Windows and Mac. Chrome is available for Linux. If

you’re using a Mac, Safari is already installed on your computer. If you’re using Windows, you can

download Chrome or Safari here: www.google.com/chrome , and www.apple.com/safari/download

This tutorial will describe how to use these software programs and tools to program games—you won’t need anything else.

However, there is some more specialized, but optional, software that you might want to try if you’re doing a lot of programming and want to make things a little easier for yourself.

■ Komodo Edit or j Edit : These are free text editors for Windows, Mac OS X, and Linux. They’re specialized for writing programming code. They number each line of code and highlight important programming words in different colors ( syntax highlighting ). Both these features make writing code easier because you can find and change sections of your code more easily. Once you start to get the hang of programming, and you want to try a slightly more sophisticated text editor than Notepad or TextEdit, Komodo Edit or jEdit is a good next step.

■ Aptana Studio : This is a free IDE (integrated development environment) based on Eclipse, for

Windows and Mac OS X. It includes syntax highlighting and numbered lines of code, and you can

install a plug-in that helps you debug JavaScript.

■ Dreamweaver : This was, for a long time, the most widely used software for building web pages. It’s not free and is perhaps overly complex for the simpler needs of a game designer, but it’s specialized for writing HTML, CSS, and JavaScript code. Dreamweaver is available for Windows and Mac from Adobe: www.adobe.com .

■ If you’re using Mac OS X, you have two further options. Coda is an efficient code editor with a built-in JavaScript debugger and a live preview window of what your game looks like as you’re programming it. Textmate is another excellent OS X-only code editor that also provides a live preview window of your game, as well as integrated JavaScript debugging. Neither Coda nor Textmate is free, but if you do a lot of programming they’re probably worth the cost for the time they’ll save you. Both Coda and Textmate are available through the Mac OS X app store.

HTML5 is a very new and quickly changing technology, and it’s likely that by the time you are reading this there will be many more, and possibly better, tools for creating HTML5 games than those I’ve listed above. Keep a lookout for new software, and try everything! If you already have some experience programming, you probably enjoy just using one of these editors. But if you’re just starting, they’ll only confuse you. Remember, all you’ll ever really need is a simple text editor and a good web browser. Keep it simple and you can’t go wrong.

Learning HTML

There are three related programming languages you need to know to make games: HTML, CSS, and JavaScript. We’ll start with the easiest: HTML.

HTML is a kind of computer-programming language known as a markup language . Markup languages can describe information. This is different from JavaScript, which is a logical programming language. Logical programming languages are used to analyze and make decisions about information. HTML is used for making websites, and it is the foundation for making games. It’s currently in version number 5, which is why it’s known as HTML5.

The main heading

means “Heading 1.” Tags usually come in pairs of an opening tag and a closing tag. The opening tag looks

like this:

The closing tag adds a forward slash, / , to show that the tag is now finished describing the information:

In this example anything that’s between the opening and closing tags will be identified as a heading, like this:

Anything between the opening and closing tags is part of the heading

It’s a really simple system, and you can use it to identify any kind of information in any way you like.

Note: HTML also lets you use stand-alone tags that don’t need to be closed, like this:

This tag stands for “break,” and it creates a line space in the text. It isn’t used to describe

any containing information. If you’ve used earlier versions of HTML, you were probably required to write stand-alone tags with a forward slash at the end of the tag name, to indicate that the tag is self-closing, like this:
You don’t have to do this in HTML5.