While HMTL is not a main focus of this course, you shoud be able to understand the HTML we will be using to provide Phaser a platform to show our game.

For these exercises, create a file such as exercises.html in your brackets project. You should work through the exercises in that file and then use the “Live Preview” button to see the effects of your work.

0 - Create a blank HTML file

<html>
</html>

1 - Add a <head> </head> section to your document. In this section you can define “meta data” for your page which tells the browser to do certain things. For instance - set the title in the browser tab/window or load other files required to render this page. Note. Nothing in the head section will be shown on the page!

2 - In the head section, add some <title> </title> tags and set the title “Tjejer Kodar Exercises”. Refresh the page in Chrome and you should see the title on the tab in Chrome.

3 - Add a <body> </body> section to your document. This section contains all of the content that should be shown on the page.

4 - Place some text (“Hello World”) in the body section of your page. Refresh the page in Chrome and the text should be present.

5 - Add some <h1> </h1> tags to the body section of your page and set the main header (title) for your document. Refresh the page in Chrome to see the text.

6 - Add some more example text to the page. Your document should now look something like the following;

<html>
<head>
	<title>Tjejer Kodar Exercises</title>
</head>
<body>
	<h1>My Page Title</h1>

	Hello there, my name is John.

	Here is some more text.
</body>
</html>

7 - Notice in the above example that all of the text after the page header is all rendered on one line. There are no blank lines like you placed in the document.

8 - In order to fix this, you need to wrap each paragraph in your document in <p> </p> tags. Try this now and refresh the page to see the sentences on separate lines.

9 - You can also make that is <b>bold</b>, <i>italic</i> or <u>underlined</u>. We’re going to use the old fashioned tags to do this. Experiment now by making some text bold or italic in your document.

10 - You can place images in your page using the <img> tag. Images are slightly different to the tags we have used so far. As images are a “one off” thing and don’t need to wrap around a block of text - you only need one tag in your document, but not - and the tag should end with />. This tags also needs to know which image to show, and some tags can take parameters within the tag itself. A full image tag looks like this;

<img src="http://www.johnwordsworth.com/images/jw-portfolio.jpg" />

Notice that the ‘src’ parameter for the tag tells us which image to link to. Try this out for yourself now.

11 - The image above isn’t much fun - why not head over to the internet and find another image? When you have found an image that you like, download that image and place it in the project folder next to the page itself.

12 - As the image you want to load is now a part of your own project, the src option for the image tag can be much simpler. As the file is located right next to the HTML file, you can just use the file name as a ‘relative path’ (relative to where the HTML file is). Try adding the image you have downloaded to your page now.

<img src="my-image.jpg" />

13 - Lastly, we might want to add links to our page so that we can link to our online portfolio or our LinkedIn page. Links in HTML are called “anchors” so they use the <a> </a> tags. Links also require a parameter like images (where the user should end up if they click on the link) and the text between the tags will be the text the user is able to click on to follow the link.

Try adding a link to google to your page now.

<a href="http://www.google.com">Some Text</a>

14 - If you have a personal website, a Twitter feed or a LinkedIn profile - why not link to that from the link above?

15 - There is one last tag we need for our game project and that is the <div> </div> tag. The div tag marks a ‘division’ or ‘section’ in the page and can be used to separate a large document into separate parts. However, the div tag is also used a lot of the time when combined with CSS to describe which parts of a document should look a certain way.

When we create our game canvas with Phaser we need to tell it where to place the game. We will use a div tag with an “id” parameter to mark the place on the page that we want the game to appear.

<div id="gameContainer"></div>

The id=”gameContainer” parameter allows us to give certain parts of our document a name so that we can refer to it later. We’ll tell phaser to use this id to find the area of the page where the game should render.

Fin

That’s all of the HTML we will need to know for this course. We’re not going to spend much time editing HTML as nearly all of our game will be written in JavaScript - but it’s good to know the basics incase something goes wrong or you want to make the final page look nicer with the game inside.