Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter

Advanced HTML
Frames & Tables
Rounded Table Corners
Flash 5
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics


Related Links
WAP Wikipedia
HTML Tutorial
Teraflops WBMP Converter
More Mobile Internet: WML/WAP Sites

Sitemap | Contact | Link To Us | Advertise
Report A Problem

Mobile Internet: WML/WAP Tutorial
Part 4 - Hyperlinks & Images


In part 3 I showed you how to create a basic WAP site with one page and some text. This week I will show you how you can make this better by adding extra parts, linking to them (and other sites) and how to add images to your site.

More Cards

As I explained in the second part of this tutorial, WAP sites have cards instead of pages. They are really the same as pages except they can all be written in one file. To add another card, all you need to do is put in another <card> tag with a different ID to the others. For example:

<card title="About Me" id="about">

would be added below the first card but before the </wml> tag.


There are three ways to link to another WAP site, file or card. Just like in HTML these can either be the full path to a file or a relative link.

To link to a WAP site you use the following:

<a href="">Gowansnet</a>

in your text. To link to another file on your site you would use:

<a href="links.wml">My Links</a>

and to link to another card in the same page you use:

<a href="#about">About Me</a>


Unfortunately, because WAP phones only have monochrome screens, images do not work very well on WML pages. They also use their own image format: WBMP. When you are creating an image to use on your site you will need to make it small (mobile phone screens are about 100x50 pixels).

The easiest way to get an image into the WBMP format is to create it as a GIF or JPG (it can be in color if you want) and then visit to convert it into a monochrome (black and white) WBMP image which you can then include on your site.

Images in WML are inserted using the <img> tag, just like in HTML:

<img src="logo.wbmp" alt="Logo" />

Again, you can see that a / has been added at the end as the <img> tag has no closing tag. It is very important that you also include the alt text as it will be displayed while the image is being downloaded.

Example Site

Below is the sample WML code for a small WAP site. It has two cards, an image, and a link to an external site:

<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "">
<card id="index" title="My WAP Site" newcontext="true">
<p align="center">
Welcome to my new WAP site. You can view this on your mobile phone anywhere in the world!<br/>
<img src="logo.wbmp" alt="Logo" />
Here are some links:<br/>
<a href="#about">About Me</a><br/>
<a href="">Gowansnet</a>
<card id="about" title="About Me">
<p>Here is some information about me. You can't write too much in here, though as there is not much space<br/>
You can scroll down the screen, of course.
<p align="center">
<a href="#index">Back</a>

What Next[?/title]

If you would like to learn more about WML and the WAP standards you can visit Of course, you can always wait as, in the future, we will be doing an advanced WML tutorial to explain things like sending data from the phone, tables, automatic redirects and starting phone calls.

© 1999 - 2019