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