HTML

From GPWiki

Files:GUITutorial_warn.gif The Game Programming Wiki has moved! Files:GUITutorial_warn.gif

The wiki is now hosted by GameDev.NET at wiki.gamedev.net. All gpwiki.org content has been moved to the new server.

However, the GPWiki forums are still active! Come say hello.

Hyper Text Markup Language

Contents

Description

HTML is a language used to design the structure of a webpage. It was developed at CERN in Geneva by Tim Berners-Lee. It is a document written using a number of tags, some fixed and some optional. HTML files are read and displayed by web browsers such as Internet Explorer and Mozilla Firefox.

Tags

Most tags have both an opening and a closing tag.

<tag></tag>

Tags that don't have a closing tag place the backslash before the greater than sign.

<tag/>

Tags can have attributes that give the browser more details about the element. Each tag has its own fixed and optional attributes.

<tag attribute="100"></tag>

Each tag must fit inside another, there is no overlapping of tags allowed. Bad:

<tag1>
  <tag2>
    Hello
  </tag1>
</tag2>

Good:

<tag1>
  <tag2>
    Hello
  </tag2>
</tag1>

Fixed Tags

  • <!DOCTYPE> - Specifies the type and version of html used
  • <html></html> - Contains the html document
    • <head></head> - The header for the document, none of this is displayed in the browser
      • <title></title> - The title that appear at the top of the browser window
    • <body></body> - The part visible in the browser

Other Tags

  • <script language="javascript"></script> - Contains or links to JavaScript code
  • <link/> - Allows for linking of CSS stylesheet
  • <div></div> - Contains a block for content
  • <b></b> - Bold text
  • <i></i> - Italicized text

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    This is <b>my</b> site. <i>I</i> own it.
  </body>
</html>

Javascript and DOM

Javascript can be used to edit the Document Object Model(DOM) where the browser stores all the tags. Javascript can insert, modify and remove elements. This is a vital part of AJAX or game play as the page could not be modified dynamically otherwise.

Links