HTML-Galway-1

Summary
How to build an HTML game in 5 lines. Ninjas learn to build their first text-based adventure game using HTML. The game consists of a series of web pages where each page is one step/room in the story. 1hr 15mins.

Week1
We ignored body tags and such. We can deal with doing things correctly after learning how to do.

So.


 * index.html

My name is Techbot

becomes

My name is Techbot

becomes

You are standing in front of a castle surrounded by a shark filled moat. You can enter the castle or jump in the moat.

Enter or  Jump 

you are in the castle 
 * room1.html

You are dead
 * room2.html

This took roughly an hour and fifteen minutes per class, taking into account:


 * Windows OS not showing extensions by default.


 * Some issues with editing html files on a MacOS with the default editor.


 * Standard typos


 * Giving the kids from 10-20 minutes (up to 6 months)to expand on the idea.



Week2
Embedding inline css to centre both the text and image and create a border

Step 1
we create a "container" to house our elements. At present the container has no attributes so when you refresh in the browser you see no changes. Our cotainer is called a division and looks like this some code

You are standing in front of a castle surrounded by a shark filled moat. You can enter the castle or jump in the moat.

Enter or  Jump 

Step 2
we give our div a width, and a border.



You are standing in front of a castle surrounded by a shark filled moat. You can enter the castle or jump in the moat.

Enter or  Jump 

Step 3
Finally we add a margin, we can use four numbers 1 for top, 1 for bottom, 1 for left and 1 for right. Or we can use two numbers: 1 for top and bottom, and 1 for left and right.

We can also replace the number with auto, which has the effect of centering the div



You are standing in front of a castle surrounded by a shark filled moat. You can enter the castle or jump in the moat.

Enter</a> or  Jump </a>

How to build a HTML game in 5 lines- From Galway Dojo #1,1. Credit: Techbot How to build a HTML game in 5 lines Part II - From Galway Dojo #1,2. Credit: Techbot How to build a HTML game in 5 lines Part III - From Galway Dojo #1,3. Credit: Techbot