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

[emperor 0]

WAP Site Tutorial : How to Make A Wap site?

Before We begin.. Definition from the Web about Wap.

 

Wireless Application Protocol (WAP) is a technical standard for accessing information over a mobile wireless network. A WAP browser is a web browser for mobile devices such as mobile phones that uses the protocol. Before the introduction of WAP, mobile service providers had limited opportunities to offer interactive data services, but needed interactivity to support Internet and Web applications such as:

 

• Email by mobile phone
  
• Tracking of stock-market prices
  
• Sports results
  
• News headlines
  
• Music downloads
  

 

Wap site Tutorial - 1- CREATE A WML FILE

 

 

To create a WML files you can use any html editors (notepad, too) but I suggest Apoo that you can download 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:

<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)

 

Wap site Tutorial - 5- FORMS

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:

<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:

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

 

Wap site Tutorial - 6- A SPLASH SCREEN

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:

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

 

Wap site Tutorial - 7- ADVANCED FEATURE

 

<?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="....">
<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 ""

 

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 '
To display < type <
To disply > type >

 

 

 

 

Note : THIS IS A VERY SMALL AND QUICK GUIDE TO WML, I HAVE LEFT BACK MANY OTHER FUNCTION (AS <ONEVENT>). ANYWAY WITH THIS TUTORIAL YOU CAN EASILY WRITE A SIMPLE BUT FULL FUNCTIONAL WAP SITE WHEN YOU CAN STORE YOUR JAVA GAMES, RINGTONES OR GIVE ADDITIONAL FEATURES TO VISITORS OF YOUR SITE.

[Dragonfly 0]

Very nice tutorial. I haven't thought of attempting to know about xml, but I must face the reality it's all happening all over. I cannot remain muted and take no actions to the changing web languages. In fact, one should know all these.Thanks for sharing it here. It must have taken much time for you to write down one by one detailly. However, its worth you get the credits and also you are being helpful to members.

[ameribass 0]

Thanks a lot for the tutorial. I will be sure to use some of the knowledge that you shared with us in my future webpages.

[Saint_Michael 3]

hey no spamming admin have been notified about it but anyways on the backlash (/0 xhtml uses that too now to make hte coding stricting in a sense, but questions is it for the use of cell phoens to display the info on them?.

[Adamrosso 0]

Great tutorial. This may come in good use in the future. But for now i don't think i will be using xml =(

[ghostrider 0]

Thank you very much for posting this. I'll use it sometime in my website.

[xYcLoNe 0]

nice.. tenx very much...

[masterleous 0]

very nice and cool tutorial for website making. But you can make your website using webpage making softwares like Frontpage, Dreamweaver, Cute HTML and their are plenty of more softwares available softwares on the net for free..............

[master_bacarra 0]

this will be very useful in my upcoming machine problem in one of my major subjects at school. we have to build our very own personal wap site! can't wait. thanks for the tutorial.

[elrohir 0]

very nice and cool tutorial for website making. But you can make your website using webpage making softwares like Frontpage, Dreamweaver, Cute HTML and their are plenty of more softwares available softwares on the net for free..............

This was not XML, which you can do in any old WYSIWYG editor. This was WML. For mobile phones. Am I so far behind the times that dreamweaver has WML support without me knowing it!?! And I seriously doubt that frontpage has WML WYSIWYG editing for wml.

[HotBlade 0]

Great,great and again GREAT tutorial,im an experienced wap site designer and u covered most of the basic stuff there even 2 things i didnt even know about lol...Thanx alot mate

[uiop 0]

Thanks for the intresting tutorial. I'll keep this in mind on my future websites .

[FirefoxRocks 0]

This tutorial is very useful for WAP and XML. I'm trying to learn the building blocks of XML but I'm slowed by other stuff. :PI'll try out your tutorial and the W3C's to learn XML and WAP.Thanks for writing this!

[gcds 0]

thanks i very helpful for starting creating wap sites

[lemonwonder 0]

Very nice tutorial, I formatted a site for wap once, and I now know that i did a few things wrong, o well.... it still worked