How To Make A Very Simple Wap Site - A quick tutorial about WML language

QUOTE

WAP is an open international standard for applications that use wireless communication. Its principal application is to enable access to the Internet from a mobile phone or PDA .A WAP browser provides all of the basic services of a computer based web browser but simplified to operate within the restrictions of a mobile phone. WAP is now the protocol used for the majority of the world's mobile internet sites, known as WAP sites

To create a WML files you can use any html editors (notepad, too) but I suggest Apoo that you can download http://wap.commandus.com/ .
The first thing to do when you create a WML file is to declare the specification of the wml code.

CODE

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

Now we can start writing the code that will be placed between the tags <WML> and </WML>
The text will be placed between the tags <CARD> and </CARD>
In a single WML page could be more than CARD. Each card has the attribute "ID" that is the name of it.

The difference between WML and HTML here is very little. Simply at the end of each tag must be placed a slash (/).
For example <p align="left"/> or <br/>
You can place the tag <br/> at the beginning of the line, too
About bold, italic and underlined text the WML is equal to HTML: <b> </b> the first, <i> </i> the second and <u> </u> the third.
With tags <small></small> and <big> </big> you can decrease or increase the size of the text.

Also here the differences are small.
The tag is always <table> </table> but not exist the tag <tbody>
The attributes of <table> are "title" (the title of the table), "align" (C=center, L=left and R=right) and "columns"(the number of the columns, not supported by all mobiles)
This is an example

CODE

<table align="C" title="label" columns="3">
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>

WML files support only one kind of images: .wbmp. On the web you can find many free software that convert images in this format.
Placing an image is very similar to HTML, this is an example:

CODE

<img alt="talt text" src="http://www.asite.com/logo.wbmp" align="middle" height="100" width="100"/>

You can see that the principal difference is that you must place a slash (/) at the end of the tag <img>.
Attributes of align are middle,top and bottom.
There're also special images that require a different tag: for example emoticons and icons.
To load an emoticon (or a icon) you can use "localsrc" instead of "src". Obviusly each emoticon has a name that you can see here. DEVO METTERE IMMAGINE
This is an example:

CODE

<img alt=":)" localsrc="smileyface" />

Here you can find the complete list LIST

An external link is similar to HTML. The tag is <a href=""> </a>
An attribute of <a> is "title", too. By declaring it, you will obtain a better result in some mobile.

This is for a normal link, but if you want a link controlled by mobile keys (for example when you choose "menu" in a mobile), you need another tags.

link is a link made with <a href>, NEXT is made with next tags.
The first is <do> </do>. This tag has two important attribute: "title" and "type". The first is the title that will appear on the mobile (for example "NEXT").
About the second we suggest to write "accept", this mean the pressure of the key.
Then there is the tag <go/> that will be placed between <do> and </do>. It has the attributes "href" and "method". The first is equal to the "href" of <a>. "Method" is equal to the "method" of forms, now we can leave it empty.
This is an example where there is a link that link to another CARD in the same file:

QUOTE

<CARD>
<do type="accept" title="next">
<go href="#CARD2"/>
</do>
<p>
push the key to go to the next view
</p>
</CARD>
<CARD id="CARD2">
<p>
next view.
</p>
</CARD>

You can see that if you would make a link to another CARD you must place a # before the ID of the CARD.

You can replace the tag <go/> with <prev/>, so by pushing the key you will go to the previous view.

Another way to surf the site is using the numeric keybord.
For this exist the attribute "accesskey", it is an attribute of <a> and it can has any value between 0 and 9 (the keys of the mobile)

The code needed to place a text field is similar to HTML, in fact the tag is <input/>.

A particular attribute of <input/> in WML is "emptyok". If it has value equal to "false" the visitor must fill this field.

Another is "format", if you set it "X" all text will be written in capitol letters. If you want that the visitor write only a limited number of chars (all capitol letters) you can set "format" as place the maximum numer of chars before "X" ("10X", "3X", etc..). By replacing "X" with "x" you will obtain the same result with not capitol letters.
An example:

QUOTE

<input name="city" maxlength="2" emptyok="false" format="10X" value="CA" />

Another attribute is "type". If you set this to "password", you'll obtain a password field.

Another element of forms is the multiple choice. It's made with the tags <select> and <option>. The most inportant attribute of select is "multiple", by setting it to "true" you will obtain a radio button (multiple selection allowed), if "false" a check box(multiple selection not allowed).
An example:

QUOTE

<select multiple="true" name="color">
<option value="1">red</option>
<option value="2">yellow</option>
<option value="3">blue</option>
</select>

With the function <timer> you can create a splash screen. This tag has the attribute "value", this value is the number of seconds*10 (for example, for 5 seconds you must write 50).
Then you must declare the attribute "ontimer", this is an attribute of <CARD> and it explain what must be view in the splash screen.
An example:

QUOTE

<CARD ontimer="welcome.wml">
<timer value="50"/>
<p>this is the homepage</p>
</CARD>

QUOTE

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="test" ordered="false">
<do type="ACCEPT">
<go method="post" href="http://www.testw.com/cgi">
<postfield name="name" value="$name"/>
<postfield name="surname" value="$surname"/>
</go>
</do>
<do type="options" label="Clear">
<refresh>
<setvar name="name" value=""/>
<setvar name="surname" value=""/>
</refresh>
</do>
<p> Your name: <input title="name" name="name"/>
Your surname: <input title="surname" name="surname"/>
</p>
</card>
</wml>

This code collect many new function of WML
We will start with the attribute "ordered" of <CARD>, if setted to "true" all action will be performed in order as we have typed them. If set to "false" action will follow a hierarchical order.

Then we added the attribute "method" to <go> choosing "post". This mean that informations placed in <postfield value=$xxxx> will be sent to the HTTP server "http://www.testw.com/cgi". These info will be typed by the visitor in the two text fields.

Then we have the tag <do>, its work is to clear the two text fields.

APPENDIX - CHARS

To display & type &
To display $ type $
To display "" type ""
To display ' type &apos
To display < type <
To disply > type >

Comment/Reply (w/o sign-up)

Comment/Reply (w/o sign-up)

Comment/Reply (w/o sign-up)

Comment/Reply (w/o sign-up)

Comment/Reply (w/o sign-up)

Comment/Reply (w/o sign-up)

Comment/Reply (w/o sign-up)

Comment/Reply (w/o sign-up)

Comment/Reply (w/o sign-up)

Comment/Reply (w/o sign-up)