Aplikasi Web Mobile

Aplikasi Web Mobile
Lebar Layar Dinamis 1
HTML
Width Attribut
• Salah satu pembeda dari web desktop dan web
mobile adalah lebar layar yang lebih kecil pada
web mobile.
• Lebar layar harus disesuaikan dengan ukuran
layar.
• Pada setiap tag html untuk melokalisasi area
(table, div, td,tr, dsb) terdapat atribut width yang
digunakan untuk mengatur lebar.
– Contoh <table width=450>
• Gunakan satuan % untuk mengatur lebar
dinamis
– Contoh <table width=90%>
Percobaan 1
• Install Web server di localhost
• Cek apakah web server localhost sudah
aktif dengan memasukan alamat
http://localhost di web browser
• Install opera mobile emulator, download di
http://mardi.staff.unisbank.ac.id
Percobaan 2
Buat file dengan nama tabel1.html di folder
c:\appserv\www\ … yang berisi
<html>
<body>
<table border=1 width=800>
<tr><td width=50>Data 1<td>Data2
</tr>
</table>
</body>
</html>
Percobaan 3
Buat file dengan nama tabel2.html di folder
c:\appserv\www\ … yang berisi
<html>
<body>
<table border=1 width=90%>
<tr><td width=50%>Data 1<td>Data2
</tr>
</table>
</body>
</html>
Penjelasan
• <table></table> digunakan untuk
mendefinisikan suatu tabel (buka dan
tutup)
• <tr></tr> digunakan untuk memulai baris
dalam tabel dan menutup baris
• <td></td> digunakan untuk memulai kolom
dalam suatu baris dan menutupnya
Percobaan 4
Buat file dengan nama tabel3.html di folder
c:\appserv\www\ … yang berisi
<html>
<body>
<table border=1 width=90%>
<tr><td width=25%>1</td><td>Data 1</td>
</tr>
<tr><td width=25%>2</td><td>Data 2</td>
</tr>
</table>
</body>
</html>
Percobaan 5
• Buatlah halaman web berisi 2 tabel, tabel
1 dengan lebar tetap, dan tabel ke 2
dengan lebar dinamis
• Tabel berisi kolom nomor,nama matakuliah
yang pernah anda tempuh dan nilai
(minimal 5 Mata kuliah)
Percobaan 6
• Cari informasi tentang atribut colspan
pada tag <td>.
• Buatlah contoh penggunaannya pada
tabel dinamis
Percobaan 7
• Cari informasi tentang atribut rowspan
pada tag <tr>.
• Buatlah contoh penggunaannya pada
tabel dinamis
Kesimpulan
• Lebar halaman dapat dibuat dinamis
dengan menggunakan ukuran relatif (%),
tidak menggunakan angka fix atau
absolut.
• Tag tabel salah satu tag yang biasa
digunakan untuk me-layout halaman web.
• Tag tabel dapat menggunakan ukuran
relatif