SK Telecom Platform NATE
SK TELECOM NATE Browser VER 2.6 This Document is copyrighted by SK Telecom and may not be reproduced without permission SK Building, SeRinDong-99, JoongRoGu, 110-110, Seoul, Korea
SK Telecom Chapter 1 NATE Browser N XHTML 1
SK Telecom Chapter 2 NATE Browser N HTTP Header 1. USER-AGENT AAABCDDEEFFGGHHHIIIJJKKLLMMMMMMMM;NID;Reg_zone;Base id;pilot_pn Type Sample 2
SK Telecom 3
SK Telecom XHTML 1. Structure html <html> elements </html> <html> <body> <p> HTML 4
SK Telecom </p> </body> </html> body <body> </body> title style <html> <body> <p> Body </p> </body> </html> title <head> <title> </title> </head> <html> <head> <title> </title> </head> <body> <p> </p> </body> </html> 2. Text b 5
SK Telecom <b> </b> <html> <head> <title> </title> </head> <body> <div> <b> </b> </div> </body> </html> br 1<br/> 2 <div> <br/> </div> blockquote <blockquote> <blockquote/> <div> <blockquote> </blockquote> </div> span <span> <span/> <div> Span test <span style="color:#ff0000;"> 6
SK Telecom Span test </span> </div> div <div> <div/> <div> Div test <div style="color:#ff0000;"> Div test </div> </div> strong <b> p <p> <p/> <p>. </p> big <big> </big> <div> <big> </big> </div> 3. List dl / dd / dt <dl> <dt> term... </dt> 7
SK Telecom <dd> definition... </dd> </dl> <dl> <dt>des</dt> <dd>data encryption standard</dd> <dt>dhcp</dt> <dd>dynamic host configuration protocol</dd> <dt>dnis</dt> <dd>dialed number identification service</dd> <dt>dns</dt> <dd>domain name system</dd> </dl> ol <ol> <li>first item</li> <li>second item</li>... <li>nth item</li> </ol> <ol> <li>wedge</li> <li>valance</li> <li>camber</li> <li>track bar</li> </ol> ul <ol> <li>first item</li> <li>second item</li>... <li>nth item</li> </ol> <ul> <li>wedge</li> <li>valance</li> <li>camber</li> 8
SK Telecom <li>track bar</li> </ul> 4. Form select / option <select> <option>item 1</option> <option>item 2</option>... <option>item n</option> </select> multiple size selected value <html> <body> <div> <form action=""http://somesite.com/prog"" method=""post""> <p> <select name=""city""> <option value=""1"">1.</option> <option value=""2"">2. </option> <option value=""3"">3. </option> <option value=""4"">4. </option> </select> </p> </form> </div> </body> </html textarea <textarea>content</textarea> cols rows <div> <form action=""http://somesite.com/process"" method=""post""> <p> <textarea cols=""10"" rows=""2""> 9
SK Telecom </textarea> </p> </form> </div> Input <input attribute/> type checked maxlength size type = text checkbox radio password hidden submit reset button value <div> <form action="http://somesite.com/process" method="post"> <p> <input type="text" name="name"/> </p> <p> <input type="radio" name="gender" value="f"/> </p> <p> <input type="radio" name="gender" value="fm"/> </p> <p> <input type="checkbox" name="ct" value="bz"/> </p> <p> <input type="checkbox" name="ct" value="mm"/> </p> <p> <input type="submit" value="send"/> <input type="reset"/> </p> </form> </div> 5. Table th/tr/td <table> <tr> <th>column head</th> <th>column head</th> </tr> <tr> <td>cell</td> <td>cell</td> </tr> 10
SK Telecom <tr> <td>cell</td> <td>cell</td> </tr> </table> align valign colspan rowspan <div> <table title="table 1"> <caption>simple Table</caption> <tr> <th><strong>c1</strong></th> <th><strong>c2</strong></th> <th><strong>c3</strong></th> <th><strong>c4</strong></th> <th><strong>c5</strong></th> </tr> <tr> <td>c11</td> <td>c12</td> <td>c13</td> <td>c14</td> <td>c15</td> </tr> <tr> <td>c21</td> <td>c22</td> <td>c23</td> <td>c24</td> <td>c25</td> </tr> <tr> <td>c31</td> <td>c32</td> <td>c33</td> <td>c34</td> <td>c35</td> </tr> </table> </div> 6. ETC img <img src="image_url" alt="alternative text"/> <img localsrc="icon_name" alt="alternative_text"/> src localsrc alt width height <div> <img src="logo.gif" alt="gif logo"/> <img localsrc="pict:///plant/flower_3" alt="flower"/> 11
SK Telecom </div> base <head> <base attributes/> </head> href <html> <head> <title>the Base Element</title> <base href="http://www.mysystem.com/images/"/> </head> <body> <div> <img src="logo.png" alt="gif logo"/> </div> </body> </html> map/area <map name="basic_home"> <area shape="rect" coords="0, 0, 24, 22" href="idx1.wml " alt="my" /> <area shape="rect" coords="24, 0, 48, 22" href= idx2.wml" alt=" " /> <area shape="rect" coords="48, 0, 72, 22" href="idx3.wml" alt=" " /> </map> <div> <img src="basic_icon.png" usemap="#basic_home" /> </div> hr <hr/> href. 12
SK Telecom CSS Selector CSS Unit 13
SK Telecom CSS Attribute 14
SK Telecom 15
SK Telecom 16
SK Telecom 17
SK Telecom SK Telecom Extension N Pictogram Example Code <img localsrc="pict:///core/button/1" / > 18
SK Telecom pict:///core/button/3_1 Icon 19
SK Telecom 20
Chapter 3 NATE Browser Menu Menu 21
22
23
24
Chapter 4 NATE Browser Wi-Top 25
26
Chapter 5 NATE Browser XHTML Mobile Profile <?xml version="1.0" encoding="ks_c_5601-1987"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/dtd/xhtml-mobile10.dtd"> <html> <body title = "XHTML "> <p> <a href="test.xhtml">xhtml </a><br/> 27
<a accesskey= vnd.up href = "../index.wml" /> </p> </body> </html> <!DOCTYPE html PUBLIC -//WAPFORUM//DTD XHTML Mobile 1.0//EN http://www.wapforum.org/dtd/xhtmlmobile10.dtd > height= 55 Note 28
Sample <table style="border-style:solid"> <tr><td> </td></tr> <tr><td>sk Telecom.</td></tr> </table> <div align= center > <table style="border-style:solid"> <tr><td> </td></tr> <tr><td>sk Telecom.</td></tr> </table> </div> <table style="border-style:solid" width="100%"> <tr><td> </td></tr> <tr><td>sk Telecom.</td></tr> </table> 29
<div align="center"> <table width="95%" style="border-style:solid; border-left-style:none; border-right-style:none"> <tr><td> </td></tr> <tr><td>sk Telecom.</td></tr> </table> </div> Tip <div align="center"> <table width="95%" style="border-style:solid; border-left-style:none; border-right-style:none"> <tr><td><b> </b></td></tr> <tr><td align="right">sk Telecom.</td></tr> </table> </div> <div align="left"> <table width="95%"> <tr><td><img localsrc="pict:///appliance/camera"/>nate!</td></tr> <tr><td><img localsrc="pict:///appliance/pc_3"/>june </td></tr> </table> </div> 30
<table width="95%"> <tr><td> <img localsrc="pict:///appliance/camera"/> <a href="#" style="color:black">nate </a> </td></tr> <tr><td> <img localsrc="pict:///appliance/pc_3"/> <a href="#" style="color:blue">june </a> </td></tr> <tr><td> <img localsrc="pict:///core/info/reserved"/> <a href="#" style="color:red">nate </a> </td></tr> </table> <table width="95%"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> </table> <table width="95%"> <tr><td style="borderstyle:solid;border-topcolor:white;border-left-color:white" align= center >1</td> <td width="20" align= center >2</td> <td style="border-style:solid;bordertop-color:white;border-rightcolor:white" align= center >3</td></tr> <tr><td align= center >4</td> 31
<td width="20" align= center >5</td> <td align= center >6</td></tr> <tr><td style="border-style:solid;border-bottomcolor:white;border-left-color:white" align= center >1</td> <td width="20" align= center >2</td> <td style="border-style:solid;border-bottomcolor:white;border-right-color:white" align= center >3</td></tr> </table> <table width="95%"> <tr> <td style="border-style:solid;border-topcolor:white;border-left-color:white"> <img localsrc= "pict:///body/face/head_7"/> </td> <td><img src="pict:///search/paper_10"/> </td> <td style="border-style:solid;border-topcolor:white;border-right-color:white"> <img localsrc="pict:///core/media/game_07"/> </td> </tr> <tr> <td><img src="pict:///music/quarternote"/> </td> <td><b>nate</b></td> <td><img localsrc="pict:///core/figure/square_5"/> </td> </tr> <tr> <td style="border-style:solid;border-bottomcolor:white;border-left-color:white"> <img localsrc="pict:///core/info/map_3"/> </td> <td><img src="pict:///search/paper_11"/> </td> <td style="border-style:solid;border-bottomcolor:white;border-right-color:white"> <img src="pict:///adult/kiss"/> </td> </tr> </table> 32
<td valign= middle height= 40 > Tip idx1.wml idx2.wml idx3.wml <map name="basic_home"> <area shape="rect" coords="0, 0, 24, 22" href="idx1.wml " alt="my " /> <area shape="rect" coords="24, 0, 48, 22" href="idx2.wml" alt=" " /> <area shape="rect" coords="48, 0, 72, 22" href="idx3.wml" alt=" " /> </map> <div> <img src="icon.png" usemap="#basic_home" /> </div> <head> <style>.smp { background-image: url("nate.png"); background-attachment : fixed} </style> </head> <body class="smp"> </body> 33
<table width="70%"> <tr> <td><a href="#"><img localsrc="pict:///body/face/head_7" alt=" "/></a></td> <td><a href="#"><img src="pict:///search/paper_10" alt=" " /></a></td> <td><a href="#"><img localsrc="pict:///core/media/game_07" alt=" "/></a></td> </tr> </table> <table width="70%"> <tr> <td><a href="#" style="display:-wap-marquee"> [ ] </a> <div> <form action="#"> <p> <input type="text"/> 34
</p> </form> </div> <div> <form action="#"> <p> <input type="text" name= title value= /> </p> </form> </div> <div> <form action="#"> <p> <input maxlength= 6 type="text" name= title value= /> </p> </form> </div> <div> <form action="#"><p> :<br/> <input type="text" value="" maxlength="6"/><br/> :<br/> <textarea name="desc"> </textarea> </p></form> </div> <form action="#"><p> <br/> : <input name="foot" type="checkbox"/><br/> : <input name="basket" type="checkbox"/> </p> </form> <form action="#" method="get"> <div> 35
:<br/> <input type="radio" name="bname" value="1"/> <input type="radio" name="bname" value="2"/> <input type="submit" value=" "/><br/> </div> </form> <div> <select> <option value="1"> </option> <option value="2"></option> <option value="3"> </option> </select> </div> <div> <select multiple= true > <option value="1"> </option> <option value="2"></option> <option value="3"> </option> </select> </div> <head> <title> </title> <link rel="stylesheet" type="text/css" href="http://www.rocode.co.kr/color256.css"/> </head> 36
http://www.rocode.co.kr/color256.css a {text-decoration:none; color:#00008b} do { text-decoration:none; color:#00008b; background:#afeeee;} body { height:100%; background:#afeeee; font-face: ;} hr {color:#6495eb} table {background:#9370db; width:100%} table.01 {background:#87ceeb; width:100%} table.02 {background:#afeeee; width:100%} td {text-align:center; color:#ffffff;} td.left {text-align:left} Tip 37
background-color <table style="background-color:#6fb9ff"> <tr> <td width=52> <a href="index.wml"> <img src="images/logo.png" /> </a> </td> <td> <img src="images/nabanner.png" /> </td> </tr> </table> <img src="imag/s.png" alt=" " /> <td style="background-image: URL(./img/titleback_32C.png); > <p align="center"> <span style="color:white">nate Basic</span> </p> </td> 38
Chapter 6 WML to XHTML Migration Prologue Structure 39
Anchor Input WML <anchor title="get Test"> <go href="login.asp" method="post"> <postfield name="id" value="$(id)" /> <postfield name="pwd" value="$(pwd)" /> <postfield name="save" value="$(save)" /> </go></anchor> XHTML <form action= Login.php method= post > <input type= text name= id > <input type= text name= pwd > <input type= hidden name= save > </form> Marquee WML XHTML <do label="[ ]." > <a href="#" style="display:-wap-marquee"> <go href="#" /> [ ].</a> </do> 40
WMLScript Event WML <card ontimer=" cartoon_2.wml "> <timer value="10"/> </card> XHTML <head> <meta http-equiv="refresh" content="10;url=cartoon_2.wml" /> </head> 41
42 Pictogram Appendix A
43
44
45
46
47
48
49
50
51
52
53
54
55
56
Appendix B Icon Icon URL http://wap.nate.com/ngb/img File Image 57
58
Appendix C Reference 59