Your Favorite Games
Incremental Lesson 1 - Building A Display
About this tutorial
Lesson 1 - Building A Display.zip
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.
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.
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:
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
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
This will display "Basic Incremental Game" in the top bar of the
files to the html file. These tags are a little more complicated.
<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.
- rel: Describes the relationship between the two files.
- type: Denotes what type of file the linked document is.
- href: Tells the browser where to find the file.
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".
simpler process. Enter the line
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
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.