Last Updated:

How do i create WAP site?

WML - it's that simple!

In this article, I would like to share my experience in creating wap-pages and in general wap-site.

In order for the site to be viewed in a mobile browser, the *.html format is not always suitable, because a very small part of mobile phones displays it. But still, knowledge of the HTML language will be enough for you. The format supported by mobile browsers is *.wml. I have tried it and I can say that it is even lighter than html itself. Maybe it's because no scripts and accessibility features are supported here.

I will try to explain everything to you on a simple example of creating a wap-page in *.wml format. So, let's get started:

First, I must say that the standard Internet Explorer browser wml format does not support and cannot display a wap-page, so in order to work with such pages, I recommend purchasing, for example, the Opera browser. Here you can preview the page. You also need a text html-editor of pages - it is text, because it will not be possible to create a page on a visual editor. I myself use Microsoft Office FrontPage to create wap-pages. Here you can write with code, and the visual rector try (in the case of writing the initial code manually, the visual editor will do). You can find the program right for you.

Unlike computers, mobile phones do not accept all font encodings, so these page elements are strictly limited. It is necessary in each page in order for everything to be displayed correctly, the source code should start with:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd">

Encoding from this site is used by almost 90% of Russian-language wap-sites, so there is nothing to worry about. I do not consider it necessary to explain the meaning of all this, because a person who knows html will understand everything, and not a very well-knowing person does not need it.

As in html, the main code of the page is indicated by the tag and , and here we denote the main code of the page and . <html></html><wml></wml>

<wml> </wml>

Of course, the opening and closing of this tag, respectively, should be at the beginning and at the end of the page code (at the beginning, that is, after the codes for encodings).

In the head tag, which is also present here, we write:

<head><meta http-equiv="Cache-Control" content="no-cache" forua="true"/></head>

Something like the body tag in *.wml is the card tag. It is in this tag that the content of the page is written. So, here's what the code for the card looks like:

<card id="index" title="First wap page">
</card>

Here, in the "id" field, the name of the page is written, and in the "index" its title is written. Between the first and second line of code above, of course, the code for the content of the page is written.

So, let's try to write something, and then put another link and a picture.
Write:

<p align="center">

This is for all the content to be centered, there is no other way, because this is not how it will be displayed on the screen of mobile phones. Then, at the end, close the "" tag.p

In order to write a simple text, just write it on a separate line and put "" at the end. And this tag does not begin anywhere, it just talks about the end of the line and is written in all the lines in the display. For example, let's write:

<br/>WAP-page<br/>

Writing this, we get a dot with the words "Wap-page" in the middle.
Now let's put a link, the simplest link. This can be done by code:

<a href="http://wap.site.ru/index.wml">home </a><br/>

I think everything is clear here. Note that this line also puts the tag "<br/>, because it is put in every line, just not a line of code, but a line of the page itself.

I think the text and links have been dealt with, now I will talk about the pictures. You can put a picture with the following code:

<img src="logohallo.gif" alt="wap.site.com"/><br/>

Here, too, everything is probably clear. You can put a picture, for this you will write a link to your picture instead of "". Note that the tag is required.
All that's left to learn is a tag that outputs the content through a line. As in html here it is the "p" tag. That is, to select the text through the line, you must enter its code between:logohallo.gif<alt>

<p>...</p>

So, so I showed you the codes for inserting the test, pictures and links. Don't be surprised, but that's all you'll need to build an entire wap site. Mobile browsers do not support scripts, tables, or anything like that.

But we still need to see what comes out of all this, from what we've been doing right now, so here's the code that we've got:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card id="index" title="First wap page">
<p-align="center">
WAP page<br/>
<a href="http://wap.site.ru/index.wml">Main</a><br/>
<img src="logohallo.gif" alt="wap.site.ru"/><br/>
</p>
</card>
</wml>

If you choose to view the page in a browser, you won't make out any of the words. All Russian letters will be in the form of question marks. Therefore, the work does not end here, the most important part remains - the translation of the code into the wml format. To do this, there are programs that translate this code, namely its Russian letters into the desired format. They are very few and hard to find, so especially for you, I have placed one of the simplest such "translators" and you can download it here. Unzip both files to the same folder and run the application. Here a window with two fields will open for you. In the first one, we enter our code and immediately in the adjacent field a new version of the same code appears, the one that we need. So, it turns out:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card id="index" title="Первая wap-страница">
<p-align="center">
WAP-страница<br/>
<a href="http://wap.site.ru/index.wml">Р"Р"авРРая </a><br/>
<img src="logohallo.gif" alt="wap.site.ru"/><br/>
</p>
</card>
</wml>