bigbadbrain logo
bbb Home
  Lesson 1 - Create Home Page

SUMMARY

In this lesson we will begin creating a simple home page for our game. You will learn how to create basic web pages using HTML.

The page will provide a brief description of the game. In later lessons we will add a button to open the game window.

DISCUSSION

HTML stands for HyperText Markup Language.  It is the fundamental language for creating web pages.  HTML consists of "tags". These tags tell the browser what to display.  For example, an <img> tag is used to display an image on the page.  There are approximately 100 different tags. In this tutorial you will learn the minimal number of tags needed to create the game.

Most tags come in pairs, meaning that there is an opening and a closing part of the tag.  Some tags do not have a closing part. 

Refer to the example below.  This example contains the basic code needed for a simple web page.  When you click the load button, the page generated by the code is displayed.   To create your first web page with this code, open Notepad, copy the code into Notepad, and then save the Notepad document with an .htm or .html extension.  Then open the page in a web browser.  Giving the file a name with the .htm or .html extension, will indicate that the page is a web page.   

All web pages should have <html>, <head>, and <body> tags.  Referring to the example, the opening <html> tag is on line 1. The closing </html> tag is on line 9.  Closing tags are just like the opening tags except that they have a slash /.  Everything on a web page should between the opening <html> tag and the closing </html> tag as shown in the example.   

Nested within the <html> tag are the <head> and <body> tags.  In the example, the opening <head> tag is on line 2 and the closing </head> tag is on line 4.  <head> tags are used to enclose information that normally does not appear on the page.  We will discuss <head> tags later as needed.  In the example below, the <title> tag is nested in the <head> tag on line 3.  The <title> tag contains the text that is displayed on the window title bar.

The opening <body> tag is on line 5 and the closing </body> tag is on line 8.  All content that is displayed on a web page goes between the opening and closing body tags.  In this example, lines 6 and 7 contain the content that is displayed  on the web page. 

The following figure shows how the <head> and <body> tags are nested in the <html> tag and the <title> tag is nested in the <head> tag.

Nesting of tags

As discussed, there are many HTML tags.  Two of these are illustrated in the example.  On line 6 the <br> tag forces a line break so that the word "goes" appears on the next line when the page is displayed.  Notice that the <br> tag does NOT come in a pair; there is NOT a closing </br> tag.  On line 7 the italic tag <i> is used to make the word "here" italicized. Notice that this tag has a closing tag.  Any text placed between the <i> and </i> tags is italicized.

EXAMPLE - Simple Web Page

 Font Size: 10pt 12pt   View Large Version
 Ctrl-C to Copy
1
2
3
4
5
6
7
8
9

GAME DEVELOPMENT

Using Notepad, create your home page for your game. 
  • Add an appropriate title to the page.
  • Add a description of your game to the main body of the page. 
  • Test your page in a browser.
©dfx interactive, inc. Contact us at bigbadbrain@bigbadbrain.com