Your Favorite Games
Incremental Lesson 1 - Building A Display
About this tutorial
In this series of tutorials, we aim to help beginners to javascript to construct a basic incremental game from the ground up using a combination of HTML, CSS, and Javascript.
First things first, what do these three things mean?
HTML - Hypertext Markup Language
This is the
language that you use to put everything onto the screen. It's incredibly
simple to grasp, and uses "tags" to tell the web browser how to display
the information. Tags are denoted by "<" and ">" with the tag
information contained within. We will be providing you with the tags as
you need them, and explaining them so that you fully understand what
each tag does before continuing.
CSS - Cascading Style Sheet
These documents tell the
browser how the HTML should be styled, whether there should be borders,
spacing, etc. Again, it's relatively simple to grasp, and we will be
explaining everything as we go along. CSS uses special identifiers
within HTML so that you can modify either a single HTML element
(something contained within respective tags) or multiple at the same
time.
Javascript
The bulk of the programming of your game
will come here. Javascript tells the browser how to react when the user
clicks on a button or puts their mouse over a link. It's extremely
versatile and can be very simple to start with, but can quickly become
overwhelming if you don't follow a few simple rules.
In your first lesson, we will be taking you through creating a simple webpage and how to link the appropriate files together. Note that we will not be using any Javascript at this point, as we want you to fully understand the basics of creating and styling a simple page.
To get things started, you'll need a simple text editor and a web browser. We suggest using Notepad++ and Firefox, though you can use the simple text editor provided with your Operating System (Windows, OSX, Linux, etc) and whatever browser you like. For the sake of the tutorial, we will assume the former.
Open Notepad++ and create three new files. Save these individually as "Incremental.html", "Incremental.css", and "Incremental.js". These are your basic HTML, CSS, and Javascript files. Go to wherever you have saved these files and create two new folders, "css" and "js". Move the appropriate files into their directories. You'll have to reload the files into Notepad++.
Switch back to your html file (Incremental.html). We'll be using this file to start off with.
Here, you'll be using your first tag: <html>
This tag tells the web browser that the document is a HTML document and
should be treated as such. Follow this on a new line with <head>,
then </head>
on another new line. Notice that we now have two head tags? The "/" at
the start of the second tags tells the browser to stop creating the
element, in this case the "head" element.
The head element contains all the information that must be processed BEFORE the page is output onto the screen. This is where you can set the title of the page (the name that appears in the top bar of the browser), any specific information for the browser, and link any files. We'll do some of that now.
Inbetween the two head tags, enter the text <title>Basic
Incremental Game</title>.
This will display "Basic Incremental Game" in the top bar of the
browser. While we're here, we'll also link in our javascript and css
files to the html file. These tags are a little more complicated.
Enter <link rel="stylesheet" type="text/css" href="css/Incremental.css">
on a new line inside the head tags. Note that this tag has a few extra
options added into it? Tags can contain more than one word to give the
browser more information on how to interact with that particular object.
In this case, we have three more options.
Our file is a CSS document, so we'll tell the browser that it is a "stylesheet". Next, the file is a "text/css" document, so we'll tell it that too. Finally, the location of the file. We can do this by either specifying a URL (eg http://www.google.com) or a location relative to where the file is. In our case, we're using a file that we have created ourselves, so we'll use a relative location. Our css files are contained within the "css" directory, so we'll link to "css/Incremental.css".
Finally, let's link our Javascript file to the document. This is a far
simpler process. Enter the line <script src="js/Incremental.js"></script>
below your link tag inside the head tags. The script tag tells the
browser to either use the code within these two tags or to load the file
linked with the "src" option. Src works the same as the href option, so
you can use a URL or a local file. Use the javascript file we created
earlier.
Save your files and we're ready to test. Open your browser and open your HTML file into it. You'll be presented with a blank page and the text in the top bar "Lesson 1 - Building a Display". Congratulations!
Lets add a little more info to the page, since it is a little bland at the moment. Go back to your text editor and back to your HTML file. We're going to add some "body" to the file, so add two tags with that name, one to open and one to close, with a few empty lines between them. This is where we will add everything we want to display on the screen.
Add in the text "Hello World!" between the two tags, save, and open the file again in your browser. Congratulations! You've created your first web page!
Any plain text within the body tags, whether inside other tags or not, will be printed to the screen. Note, however, that the text needs to be formatted if you want more than just a long line of text. That will come in a future lesson.
Next lesson, we will be adding some more information to our page and begin styling it to display it a little nicer.