Create your first mobile web page

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Created: tasala (10 Nov 2009)
Last edited: hamishwillee (30 Jul 2012)

You can learn the main phases of mobile web page creation by following this example, which shows how to create and deploy a very simple static mobile web page. Before starting, make sure your development environment complies with the requirements listed in the section Before you start (mobile web page development). Here you will learn how to create a mobile page without any specific tools, like an IDE.

In this example you will create a new mobile web page, HelloMobileWeb. It can be viewed properly in all Nokia devices that have high-end browser support. The result page can also be viewed quickly with a normal desktop browser.


Creating HelloMobileWeb

This example application generates a very basic view with some text and a simple form with text input, switch-toggler, and a button. When the button is clicked and toggle is enabled, the text of the input field is shown under the form as a new paragraph. The example uses the Nokia Mobile Web Templates for High-End Devices to create some formatted styles and components.

The example screenshot is in a 240 x 320 resolution display, but the application scales for different display sizes and orientations as well.

HelloMob 1.jpg

Creating a main HTML file

Create a new file named index.html. This is the mandatory file of any mobile web page, but this example also uses other files to create dynamic and styled content (see below). The name of the HTML file can be anything, for example index.html. Copy and paste the following code to the index.html file and save it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Define the title of the page -->
<title>Hello Mobile Web!</title>
<!-- Define the page content type -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Introduce the JavaScript-file the page uses (optional) -->
<script language="javascript" type="text/javascript" src="basic.js"></script>
<!-- Introduce the JavaScript- and CSS files the Nokia templates use -->
<script language="javascript" type="text/javascript" src="resources/scripts/templates.js"></script>
<link type="text/css" rel="stylesheet" href="resources/styles/reset.css">
<link type="text/css" rel="stylesheet" href="resources/styles/baseStyles.css">
<body onload="init()">
<div id="wrap">
<div id="content">
<!-- Define a heading-text for the page -->
<h1>Hello Mobile Web!</h1>
<!-- Create a simple form, which uses JavaScript to handle inputted text -->
<form action="#" onsubmit="send(this.textinput1.value); return false">
<!-- Create HTML label -->
<label>Enter your name:</label>
<!-- Create the form input field -->
<input name="textinput1" type=text value=""/>
<!-- Create a toggle component using Nokia templates -->
<ul class="toggle">
<label>Enable button?</label>
<input id="toggler1" type="checkbox" name="preference" />
<!-- Define the form button -->
<button id="submit" class="button-submit" value="submit" disabled="disabled">
<span>Say Hello!</span>
<!-- Define a paragraph for result text -->
<p id="result"></p>

Creating a simple JavaScript™ file to add basic functionality

Create a new file named basic.js to the same folder as index.html, which will hold some JavaScript™ functionality for the mobile web page. This is not a mandatory file for a web page, but this example has a few lines of functionality for the page. Copy and paste the following code to the basic.js file and save it.

* Initialize the JavaScript components on the web page.
function init()
// Create a new toggle-component and define a callback method for clicking the switch
var myToggle = new ToggleSwitch(['toggler1'], function(state) {
// Enable form submit when toggled "ON"
var element = document.getElementById('submit');
element.setAttribute('disabled', 'disabled');
* Method to handle input data. Parameter data is appended as new paragraph
* below the form.
* @param {Object} data The inputted text.
function send(data)
// Create a new paragraph for result
var theNewParagraph = document.createElement('p');
// Create text node for result
var theText1 = document.createTextNode('Hello ' + data + '!');
// Append the result text for result paragraph
// Show the result paragraph on the page

Using Cascading Style Sheet (CSS) files to control style and layout

You can create a new file named basic.css, for example, which holds any style and layout control for your HTML elements. The file should be introduced in the index.html file inside the <head>-element, as described below. However, in this example you will use Cascading Style Sheet (CSS) definitions from the Nokia Mobile Web Templates for High-End Devices. Below is the declaration of two CSS files from the templates. See Before you start (mobile web page development) to find out where your can download the templates. After downloading, simply copy the resources folder to the same folder containing the above-mentioned files you have created.

<link type="text/css" rel="stylesheet" href="resources/styles/reset.css">
<link type="text/css" rel="stylesheet" href="resources/styles/baseStyles.css">

Testing the mobile page

Now you have created a simple static web page. You can view it using a PC or mobile web browser or an SDK emulator.

Running the mobile page on a PC or mobile browser

To test the mobile web page in a PC browser, simply open the index.html. You can also deploy (or, in this case, copy) index.html, basic.js, and the resources folder to a web server, where the page can be accessed using a PC or mobile browser. Here are free web hosting tips to deploy your web page for device testing.

To run a mobile page locally on your device without using a web server, you need to transfer index.html, basic.js, and the resources folder to your mobile device’s c/Data/Others/ folder and open index.html from there. Nokia PC Suite can be used to transfer the files.

Running the mobile page on an SDK emulator

To test the mobile page on an SDK emulator, you need to copy index.html, basic.js, and the resources folder to your SDK directory, for example to C:\S60\devices\S60_5th_Edition_SDK_v1.0\epoc32\winscw\c\Data\Others\. After this, you can open your SDK and use its web browser to open the page. Input the following URL to the browser: file://c/Data/Others/index.html.

This page was last modified on 30 July 2012, at 10:54.
145 page views in the last 30 days.