Creating an entry point for your app (index.html)

This section describes how to create and entry point file for your "Hello World" HTML5 app.

The entry point for your app must be called index.html because this file is the starting point for the project and the app screen on the device. . Also, make sure that you always include the file webworks.js in your index.html file. This should be the first script tag in the head of your page, and we'll include this shortly.

To create an index file for your "Hello World" app:

In the HelloWorld directory, create a file called index.html using your preferred editor.

Copy and paste the following code into your index.html file.

<!DOCTYPE html>  
<html> 
<head>     
    <title>HelloWorld</title>     
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=800, height=480, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>
			.emboss { 
				font-size:4em; font-weight:bold; display:block; font-family: arial, sans-serif; 
				color: #888888; 
				text-shadow: 0 1px 1px #CCCCCC;
			}
			body, html {
				height: 100%;
				background: -moz-linear-gradient(top,  #2a2a2a,  #0a0a0a);
				background: -webkit-gradient(linear, 50% top, 70% bottom, from(#444), to(#0a0a0a));
			}			
		</style>
</head>   
<body>     
    <a id="text" style="position:absolute;top:200px;left:200px" class="emboss">Hello World</a>
    <script src="local:///chrome/webworks.js" type="text/javascript"></script>
</body> 
</html>

Save the file as index.html to the same location as the config.xml file you created earlier.
Now, let's take an in-depth look at the code we just added.

<!DOCTYPE html>

We start the file by declaring the HTML5 document type, which must be the very first thing in your HTML file. It's an instruction to your web browser to tell it what version of HTML the page is written in.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Specifies the character encoding for the document as well as the content of the meta information.

<meta name="viewport" content="width=800, height=480, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

The viewport meta tag provides more precise control over zooming capabilities. To prevent a user from changing the zoom level, we set the user-scalable property to no. To set the width of the page to the default screen width of the device, we set the value to device-width .

<style>

This section contains the information to specify the style used for the "Hello World" app, such as background color and font.

<a id="text" style="position:absolute;top:200px;left:200px" class="emboss">Hello QNX!</a>

In this area, we display the words "Hello World".

<script src="local:///chromium/webworks.js" type="text/javascript"></script>

You must include this script tag in all of your app web pages that use a feature provided by the BlackBerry WebWorks framework (for example, blackberry.identity). Furthermore, when you package your app, the packaging process will automatically bundle the latest webworks.js file as chromium/webworks.js.

Before we go any further, let's test our "Hello World" code and view the app in a browser. Make sure that you're using a browser that’s HTML5 compliant, such as the Chromium browser.

With the configuration and index files saved, you can now build and package your app. However, let's quickly test our basic "Hello Wolrd" app in the Ripple emulator.