pertemuan ke-4 (peggunaan xhtml) · xhtml mobile profile adalah subset xhtml tujuan xhtml mp adalah...
Post on 20-Mar-2019
220 Views
Preview:
TRANSCRIPT
Pertemuan Ke-4(Peggunaan XHTML)
D3 Manajemen Informatika - Unijoyo 1
� XHTML – Mobile Profile� Perbedaan antara HTML dan XHTML� Kesalahan Pada XHTML
D3 Manajemen Informatika - Unijoyo 2
�XHTML MP (eXtensible HyperText MarkupLanguag Mobile Profile) adalah bahasamarkup yang didefinisikan dalam WAP 2.0.
�WAP 2.0 adalah spesifikasi layananbergerak terbaru yang dikeluarkan olehWAP Forum (sekarang Open MobileAlliance [OMA]).
�Spesifikasi WAP CSS (WAP Cascading StyleSheet or WCSS) juga didefinsikan dalamWAP 2.0. WAP CSS adalah pasangan XHTMLMP dan keduanya digunakan bersama.Dengan WAP CSS, secara mudah Andadapat mengubah dan memformattampilan halaman XHTML MP.
� XHTML Mobile Profile adalah subset XHTML� Tujuan XHTML MP adalah menggabungkan
teknologi untuk mobile Internet browsing danWWW.¡ Sebelumnya, menggunakan WML/WMLScript
untuk membuat WAP site, sedangkan untuk website menggunakan HTML / XHTML dan CSS
� XHTML MP tidak mendukung decks and cards (<deck> dan<card>)
� XHTML MP tidak mendukung timers (<timer> dan eventontimer)
� XHTML MP tidak mendukung events (onenterbackward,onenterforward, ontimer, onpick)
� XHTML MP tidak mendukung variables¡ Alternatif, semua diproses di sisi server
� XHTML MP tidak mendukung client-side scripting¡ Alternatif, sedang dikembangkan ECMAScript Mobile
Profile� XHTML MP tidak mendukung programmable
softkeys (<do>)¡ Alternatif: menggunakan atribut accesskey pada elemen
<a>, <input>� XHTML MP tidak mendukung elemen <u>
¡ Alternatif:h1 {text-decoration: underline}
� XHTML MP tidak mendukung atribut formpada field input¡ Alternatif:
input {wap-input-format: "5N"
}� XHTML MP tidak mendukung posting data
dengan anchor links
�WML
• XHTML-MP
� Tag harus ditutup secara benar� Tags dan attributes harus lowercase�Nilai attribute harus ditutup dengan “ atau ‘� Tidak ada minimalisasi atribut¡ Contoh : checked=“checked”,
selected=“selected”
� Tag harus disarangkan dengan benar¡ <p><i>test</i></p>
� Ada 3 tipe MIME yang dapat digunakan untukdokumen XHTML MP¡ application/vnd.wap.xhtml+xml¡ application/xhtml+xml¡ text/html
� Ekstensi file:¡ .xhtml, .html, .htm
�Didefinisikan dengan <meta> dalam<head></head>
� <meta name="author" content=“anton"/>�Untuk cache-control:¡ <meta http-equiv="Cache-Control" content="no-
cache"/>¡ <meta http-equiv="Cache-Control" content="max-
age=300"/>
<meta http-equiv="refresh" content="15;URL=helloWorldEg1.xhtml"/>
� <b>Bold</b><br/>� <i>Italic</i><br/>� <b><i>Bold italic</i></b><br/>� <small>Small</small><br/>� <big>Big</big><br/>� <em>Emphasis</em><br/>� <strong>Strong</strong>
� <form method="get | post"action=“URL">...</form>
�Untuk mengirim data ke server, gunakan:¡ <input type="submit“ value=“kirim”/>
�Untuk mereset value field form:¡ <input type=“reset“ value=“default”/>
� <input type="text" name="myTextField"maxlength="16" value="Jack"/>
� <input type="password"name="name_for_this_element"/>
� <input type="hidden" name="temp_id"value="123456"/>
� Checkbox:<input type="checkbox" name=“tutorial"value="1"/><input type="checkbox" name=“tutorial"value=“2"/><input type="checkbox" name=“tutorial"value=“3" checked="checked"/>
� Radio Button:<input type="radio" name=“tutorial" value="1"/><input type="radio" name=“tutorial" value="2"/><input type="radio" name=“tutorial" value="3“checked=“checked”/>
�Style sheets memungkinkan isi suatuhalaman dipisahkan dari presentasinya¡ Isi yang sama dapat dilayout untuk platform
yang beda dengan mengubah cssnya
�Style sheets juga memberikanpengontrolan lebih terhadap bagaimanaaplikasi mobile tertampil¡ Setiap aspek tampilan halaman WAP: posisi,
font, warna, atribut teks, border, margin, danalignment
¡ semua dapat didefinisikan dalam suatu stylesheet.
� Style sheet eksternal<head><title>External Style Sheet</title><link href="stylesheet.css" rel="stylesheet" type="text/css" /><link href="stylesheet.css" rel="stylesheet" type="text/css" /></head>
� Elemen Style pada head dokumen<head><title>Internal Style Sheet</title><style type=”text/css”> <style type=”text/css”>
h1 {color: red} h1 {color: red}</style> </style></head>
� Inline style<p style="color:red" style="color:red">red</p>
� Dalam HTML, tag seperti misal: <p>, <li>, <br>,<hr> tidak harus ditutup, sebaliknya pada XHTMLtag tersebut harus ditutup dengan sehinggapenulisannya menjadi <p> ... </p>, <li> ... </li>
� Pada XHTML, untuk membuat format tulisantidak lagi menggunakan tag <b> untuk bold, <i>untuk italic, <u> untuk underline atau , <font>untuk format tulisan, namun dituliskan <strong>... </strong> untuk bold, <em> ... </em> untukitalic, <span style="text-decoration: underline;">... </span> untuk underline.
D3 Manajemen Informatika - Unijoyo 27
� Tag pada XHTML seluruhnya ditulis dalam hurufkecil, tag yang mengandung nilai harus dtuliskandengan tanda kutip, contoh <imgsrc="gambarsaru.jpg" />bukannya ditulis <IMG SRC=gambarsaru.jpg>
� Pada XHTML, tag yang mengandung nilai yangsama dengan tag yang digunkan harus dituliskan,contoh <option ... selected="selected"> ....</option> bukan ditulis <option ... selected> ....</option>
D3 Manajemen Informatika - Unijoyo 28
1. Tidak menutup kode XHTML yang berdirisendiri.
2. Menuliskan HTML Special Character secaralangsung
3. Tidak menuliskan alternative text padatag img
S1 Teknik Informatika - Unijoyo 29
� Berbeda dengan tag seperti (contoh) <p> dan<div> yang selalu ditutup masing-masingdengan </p> dan </div>. Kode XHTML yangberdiri sendiri biasanya tidak berpengaruhbanyak pada tampilan apabila tidak ditutup,seperti img, input, hr dan br, namunseharusnya ditulis <img ... />, <input ... />,<hr />, <br />.
S1 Teknik Informatika - Unijoyo 30
� Biasanya terjadi pada URL atau LINK, danumum terjadi pada penulisan karakter “&”.Contohnya, jika Anda menuliskan URL
� http://something.to/give/?&action=forgetseharusnya & pada URL tersebut dituliskansebagai & sehingga URL akan menjadi:http://something.to/give/?&action=forget
S1 Teknik Informatika - Unijoyo 31
� Tag <img ... /> tetap akan memunculkangambar meski tanpa tag, tapi hal inidianggap juga sebagai kesalahan karenaapabila gambar yang dimaksud tidak muncul,maka pengunjung website akan bingungdibuatnya. Apalagi kalao satu halaman penuhgambar. Jadi berikan alternatif berupa textdengan menambahkan atribut alt="" pada tagimg seperti contoh; <imgsrc="./gambarku/gambarsaru.jpg"alt="Gambar paling lucu tur saru" />
S1 Teknik Informatika - Unijoyo 32
top related