Mobile Internet: WML/WAP Tutorial

advertisement
Mobile Internet: WML/WAP Tutorial
Part 1 - Introduction
Introduction
WML (Wireless Markup Language) is the new web language for making sites on mobile phones.
Over the past few months new WAP (Wireless Applications Protocol) phones have become
extremely popular and many large websites have created special 'mobile' versions of their site.
Many people predict that, over the next few years, WAP sites will become even morepopular
and e-commerce over mobile phones will be widely available.
Why Should I Use WML?
Although you might not have any plans immediately for creating a WAP version of your site, it
is always a good idea to get involved in new technology. All you need to do is make a small site
(even one page) which tells people a bit about your website. In the future you can develop the
site further with things like e-mail and information for people to get directly off their phones.
The main sites which will benefit from WAP are ones providing a service like e-mail, live sports
scores or a calendar service etc. but there are many other uses. For example, a site giving
music reviews could put their reviews on a WAP site. People could then read the reviews on
their mobile phone while browsing through the CDs in a shop.
I Don't Have A WAP Phone!
To create a WAP site you don't need a WAP enabled phone. You can get a WAP simulator for a
PC. This is a piece of software which will give you a WAP phone on your desktop. You can then
type in the URLs of WAP sites and can view them on your PC. You can get a very good free WAP
simulator from YourWAP

Part 2 - Beginning A WAP Site
Introduction
After reading the introduction you should understand about WAP sites, WML and what you can
do with them so I will go straight into how to create a site. Note that you should really either
have a WAP phone or a WAP simulator so that you can view your site and a knowledge of HTML
is useful.
Finding A WML Host
Unfortunately WML cannot be run on all web hosts. For WML content to be run, a web host
must make some changes to the configuration of their web server. If your host cannot do this
for you, you can try WAPHosts.net. They can provide you with a server which will support WML.
Declaring A WML Document
When you are creating a WML document all you need is notepad or another text editor, just
like for HTML. The first thing you should enter is:
<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml"><wml>
this tells the phone that it is interpreting a WML document and which WML standards it is
using.
Cards
Instead of having pages, WAP sites have cards. These are what is displayed on the screen at
one time, just like a page. More than one card can be inserted in each WML document. To
declare a card, insert the following:
<card id="index" title="My WAP Site" newcontext="true">
This will make a card with the ID index (used for linking) and will display the text:
My WAP Site
at the top of the screen.
Closing Tags
Unlike with HTML, it is extremely important to close WML tags. If you do not, a page will
certainly not work. You must close both the <card> and <wml> tags:
</card>
</wml>
Part 3 - Adding Text
Introduction
In the last part I showed you how to create the basic file which will contain
your WAP site. In this part I am going to show you how to insert text and how
to format it.
The <p> Tag
Just like in HTML the <p> tag is used to show where a paragraph begins and
ends. Unlike HTML, though, all text on a WML page must be inside these tags.
You are not allowed to nest these tags either. One important thing to
remember about WML is that, unlike HTML where a page will still display even
if there is bad code, a WAP phone will just reject a page if there is and code it
doesn't understand.
As with HTML you use the tags as follows:
<p>
information
</p>
Aligning Text
Aligning text in WML is nearly exactly the same as in HTML, except you can't
use the center tag. All aligning must be done using the following <p> tags:
Center:
<p align="center">
Right:
<p align="right">
The <br/> Tag
In WML (as mentioned earlier) all tags must be closed. This causes problems
when using old HTML tags (like <Br>) which have no closing tag. To get around
this, some tags have had a / put on the end e.g.
<Br />
This, like in HTML will make a line break.
Text
In WML there is actually no font tag (as you can only display text in the phone's
default font in black). To show text all you need to do is put it in between the
<p> and </p> tags. Here is an example of a full WML document:
<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML
1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<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 />
It is amazing!
</p>
</card>
</wml>
Part 4 - Hyperlinks & Images
Introduction
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">
information
</card>
would be added below the first card but before the </wml> tag.
Linking
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="http://gowansnet.waphosts.net/">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>
Images
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 Teraflops.com 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"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<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" />
</p>
<p>
Here are some links:<br/>
<a href="#about">About Me</a><br/>
<a href="http://gowansnet.waphosts.net/">Gowansnet</a>
</p>
</card>
<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>
<p align="center">
<a href="#index">Back</a>
</p>
</card>
</wml>
Download