The HTML Body

Table 3.2 shows the BODY tag attributes.

Everything that displays in your HTML page happens inside the <BODY></BODY> tags. When I say “everything” I mean anything that is visible to the user. That includes images, text, tables, links, background colors, text colors, link colors, forms, and buttons.

The majority of what we will be using in our games deal with table layouts, forms, images, and some text formatting. There will not be that much text formatting because the majority of our games will be images and forms, but you might want to create a help section for your game that looks professional, so take a look at the available text formatting tags.

Table 3.2. BODY Tag Attributes
Attribute Values Description
Bgcolor #RRGGBB Sets the color to the specified HEX value.
Text #RRGGBB Sets the text to the specified color.
Link #RRGGBB Sets the link to the specified color.
Vlink #RRGGBB Sets the visited states of links to the specified color.
Alink #RRGGBB Sets the color of the link when a user is clicking on it.
Background URL to image Sets the background of the document to a specified image.
Topmargin # of pixels Sets the value of the top margin of the document in Internet Explorer.
Leftmargin # of pixels Sets the value of the left margin of the document in Internet Explorer.
Marginheight # of pixels Sets the value of the top margin of the document in Netscape.
Marginwidth # of pixels Sets the value of the left margin of the document in Netscape.
* A complete list of tags is included in Appendix A.

Most of the time you will just want to make the text stand out a little more, maybe for a header or something. For instance, you might want to label an input field or just make paragraphs to give instructions. So, we will be using the <H3></H3>, <B></B>, <P></P>, and <BR> tags the majority of the time. Take a look at an example of an HTML document with these elements in it. 

<HTML>
<HEAD>
    <TITLE>Code Example></TITLE>
</HEAD>
<BODY BGCOLOR=“#ffffff”>
    <H3>Welcome!</H3>
    <p><b>Instructions</b><br>
To master the art of PHP game programming you need to be fluent in HTML. Otherwise no
one will be able to see your game.</p>
</BODY>
</HTML>

Table 3.3. Text Formatting Tags
Tag Description
<pre></pre> Creates a preformatted text block.
<h1></h1> Creates the largest headline that HTML provides. There are six heading sizes available: <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>. <h6></h6> creates the smallest heading size.
<b></b> Bolds text.
<i></i> Italicizes text.
<u></u> Underlines text.
<tt></tt> Creates Teletype or typewriter-style text.
<strong></strong> Bolds text.
<p></p> Creates a paragraph.
<br> Inserts a line break.
<blockquote></blockquote> Indents text from both sides.
<dl></dl> Creates a definition list.
<dt></dt> Creates a definition term.
<dd></dd> Creates a definition.
<ol></ol> Creates a numbered list.
<ul></ul> Creates a bulleted list.
<li></li> Precedes each list item and adds a number or a bullet depending on the type of list.
<div></div> This is used to format large blocks of HTML. It is usually used in conjunction with a style sheet.
* A complete list of tags is included in Appendix A.

Take a look at the code. Notice that the whole document lives between the <HTML></HTML> tags. As we move down to our next line we start the head of the document by placing the beginning <HEAD> tag. Since our title goes in the head of the document we place our <TITLE></TITLE> tag, with our title, and close out our </HEAD> tag.

Are you noticing a pattern yet? Let me reiterate: everything is always going in between tags.

Next, you start the <BODY> of the document. Notice the attribute BGCOLOR=“#ffffff”.All this does is set the background color of the document to white. For the rest of the attributes associated with the <BODY></BODY> tag refer to Table 3.2. Next you will use one of the head-ing tags. I usually use <H3></H3> for a heading tag because it does not seem too large or too small. Again, the text that I want displayed goes in between the opening and closing tags. Now you will start a new paragraph. Bold the first word, return to the next line, and insert the text.

NOTE

A <BR> tag in HTML is exactly the same thing as putting in a or in C/C++.

Take a look at the results, which should look similar to Figure 3.2.

Figure 3.2. The results from the example HTML code.


See, how easy was that?! Okay, now that you can dominate any text that might come your way let’s add some graphics to it and make it look pretty.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset