Pertemuan Ke-3 (HTML Lanjut [1]) D3 Manajemen Informatika - Unijoyo 1
Pertemuan Ke-3(HTML Lanjut [1])
D3 Manajemen Informatika - Unijoyo 1
Tabel§ Membuat tabel sederhana§ Menambahkan judul tabel§ Mengatur lebar dan tinggi suatu tabel§ Perataan dalam tabel§ Membuat warna pada tabel§ Penggabungan baris/kolom§ Cellpading dan cellspacingForm§ Textbox§ Submit dan Reset§ Checkbox§ Radio button§ Daftar Drop Down§ Text Area
D3 Manajemen Informatika - Unijoyo 2
Fungsi:�Menampilkan informasi secara terstruktur,
ringkas dan mudah dibaca�Mengatur tampilan homepage agar lebih
menarik
D3 Manajemen Informatika - Unijoyo 3
�Tag yang diperlukan: <table>�Atribut-atribut:
Atribut FungsiBorder Menentukan ukuran border/garis tabelWidth Menentukan lebar tabelHeight Menentukan tinggi tabelBgcolor Menentukan background tabelBackground Menentukan gambar yang digunakan untuk
background tabelColor Untuk mengatur warna suatu sel dalam tabelAlign Mengatur bentuk perataan horisontalValign Mengatur bentuk perataan vertikalRowspan Menggabungkan beberapa barisColspan Menggabungkan beberapa kolomCellspacing dan cellpadding Mengatur spasi antar sel dan spasi dalam sel
D3 Manajemen Informatika - Unijoyo 4
�Tag yang diperlukan:¡ Membuat baris: <tr> (table row)¡ Membuat kolom: <td> (table data)
D3 Manajemen Informatika - Unijoyo 5
Contoh:<table border="1">
<tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr><tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr>
</table>
Tampilan:
� Judul tabel: <caption>� Judul baris/kolom: <th> (table header)
D3 Manajemen Informatika - Unijoyo 6
Contoh:<table border="1">
<caption align="top"> <b> DAFTAR MAHASISWA </b> </caption><tr><th>No</th><th>NPM</th><th>Nama</th></tr><tr><td>1</td><td>06.100.001</td><td>Amin A. Angkasa</td></tr><tr><td>2</td><td>06.100.002</td><td>Beni B. Bernardi</td></tr>
</table>
Tampilan:
Atribut: width dan heightNilai:
¡ ukuran % (max 100%)¡ ukuran pixel
D3 Manajemen Informatika - Unijoyo 7
Contoh:<table border="1" width=“50%”>
<caption align="top"><b> DAFTAR MAHASISWA </b> </caption><tr><th>No</th><th>NPM</th><th>Nama</th></tr><tr><td width=“20”>1.</td><td width=“80” height=“50“>06.100.001</td><td width=“180” height=“50”>Amin A. Angkasa</td></tr><tr><td width=“20”>2.</td><td width=“80” height=“70”>06.100.002</td><td width=“180” height=“70”>Beni B. Bernardi</td></tr>
</table>
Tampilan:
� horisontal: atribut align à utk <caption>, <tr>, <td> dan <th>
� vertikal: atribut valign à utk <tr>, <td> dan <th>
D3 Manajemen Informatika - Unijoyo 8
Contoh:<table border="1" align="center">
<caption align="top"><b> DAFTAR MAHASISWA </b> </caption><tr><th>No</th><th>NPM</th><th>Nama</th></tr><tr><td align="center" width="20">1.</td><td align="center" valign="middle"
width="80" height="50">06.100.001</td><td align="right" valign="top"
width="180" height="50">Amin A. Angkasa</td></tr><tr><td width="20">2.</td><td align="left" valign="top"
width="80" height="70">06.100.002</td><td align="left" valign="bottom"
width="180" height="70">Beni B. Bernardi</td></tr></table>
Tampilan:
� Atribut: bgcolor
D3 Manajemen Informatika - Unijoyo 9
Contoh:<body bgcolor="purple"><font size="3" face="arial" color="yellow">
<table border="2" bgcolor="white" align="center"><caption align="bottom"><b> Tabel Daftar Mahasiswa </b> </caption><tr bgcolor="yellow">
<th>No</th><th>NPM</th><th>Nama</th></tr><tr bgcolor="cyan"><td align="center" width="20">1.</td><td align="left" valign="middle“
width="80" height="40">06.100.001</td><td align="left" valign="middle“
width="180" height="40">Amin A. Angkasa</td></tr><tr><td bgcolor="blue" width="20">2.</td><td bgcolor="red" align="left" valign="middle"
width="80" height="40">06.100.002</td><td bgcolor="green" align="left" valign="middle"
width="180" height="40">Beni B. Bernardi</td></tr></table>
</body>
Tampilan:
�Menggabungkan bbrp kolom menjadi 1: atribut colspan�Menggabungkan bbrp kolom menjadi 1: atribut rowspan
D3 Manajemen Informatika - Unijoyo 10
Contoh Tampilan:
<table border="1" bgcolor="white" align="center"><caption align="top"><b> Tabel Daftar Nilai Mahasiswa </b> </caption><tr bgcolor="gray"><th rowspan="2">No</th><th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th></tr><tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr><tr><td align="center" width="20">1.</td><td align="left" valign="middle" width="80" height="40">06.100.001</td><td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td><td align="center" valign="middle">70</td> <td align="center"valign="middle">80</td>
</tr><tr><td width="20">2.</td><td align="left" valign="middle" width="80" height="40">06.100.002</td><td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td><td align="center" valign="middle">70</td> <td align="center"valign="middle">80</td>
</tr></table>
D3 Manajemen Informatika - Unijoyo 11
Script HTML:
� atribut cellpading: mengatur spasi antara border dengantulisan
� atribut cellspasing: mengatur spasi antar 2 buah sel
D3 Manajemen Informatika - Unijoyo 12
Contoh Tampilan:
<table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12"><caption align="top"><b> Tabel Daftar Nilai Mahasiswa </b> </caption><tr bgcolor="gray"><th rowspan="2">No</th><th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th></tr><tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr><tr><td align="center" width="20">1.</td><td align="left" valign="middle" width="80" height="40">06.100.001</td><td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td><td align="center" valign="middle">70</td> <td align="center"valign="middle">80</td>
</tr><tr><td width="20">2.</td><td align="left" valign="middle" width="80" height="40">06.100.002</td><td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td><td align="center" valign="middle">70</td> <td align="center"valign="middle">80</td>
</tr></table>
D3 Manajemen Informatika - Unijoyo 13
Script HTML:
Fungsi:� Menerima informasi atau meminta umpan balik dari
user dan memproses informasi tersebut di server
Atribut Fungsi
Method Metode pengiriman data ke file tujuan (POST atau GET)
Action Aksi yang akan dilakukan jika user menekan tombol Submit
Name Memerikan nama tiap masukanValue Memberikan nilai suatu masukanType Tipe form yang akan digunakan
D3 Manajemen Informatika - Unijoyo 14
Standar penulisan:<form method=“post/get” action=“. . .”> . . . </form>
Atribut:
�Tag: <input>�Atribut-atribut:
Atribut Fungsi
type=["text"|"password"] Menentukan jenis field masukanText, submit, password
name Menentukan nama untuk field sehingga dapatdirujuk nantinya
value Memberi nilai suatu input
size mengatur lebar field secara horisontal, berapa hurufmaksimal yang dapat ditampilkan
maxlength menentukan jumlah maksimum huruf (karakter)yang dapat dimasukkan
D3 Manajemen Informatika - Unijoyo 15
D3 Manajemen Informatika - Unijoyo 16
Tampilan:
Contoh:<body>
<b>Login: <b> <br><form method="post"><table>
<tr> <td>User:</td> <td><input type="text" name="user" size="20"></td></tr><tr> <td>Password:</td> <td><input type="password" name="password"
size="20"></td></tr></table></form>
</body>
�Tombol Submit: digunakan ketika user mengisiform dan ingin mengirimkan ke server
�Tombol Reset: digunakan ketika user inginmenghapus/mengosongkan semua masukan yangditulis dalam form
D3 Manajemen Informatika - Unijoyo 17
D3 Manajemen Informatika - Unijoyo 18
Contoh:<body>
<b>Data Pengunjung: <b> <br><form method="post" action="data.html"><table>
<tr> <td>Nama:</td> <td><input type="text" name="nama" size="20"></td></tr><tr> <td>Alamat:</td> <td><input type="text" name="alamat" size="20"></td></tr>
</table><input type="submit" value="Simpan" name="t1"><input type="reset" value="Reset" name="t2">
</form></body>
Tampilan:
Fungsi:� Untuk memberi beberapa pilihan kepada user
D3 Manajemen Informatika - Unijoyo 19
Contoh:<form method="post">
Bacaan yang Anda sukai: <br><input type="checkbox" name="bacaan" value="novel"> Novel <br><input type="checkbox" name="bacaan" value="koran"> Koran <br><input type="checkbox" name="bacaan" value="majalah"> Majalah <br><input type="checkbox" name="bacaan" value="tabloid"> Tabloid <br>
</form>
Tampilan:
Fungsi:� Untuk memberi (hanya) satu pilihan kepada user
D3 Manajemen Informatika - Unijoyo 20
Contoh:<form method="post">Apakah Anda setuju dengan kenaikan SPP: <br><input type="radio" name="opsi" value="ya"> Ya <br><input type="radio" name="opsi" value="tidak"> Tidak <br><input type="radio" name="opsi" value="ragu"> Ragu-ragu <br>
</form>
Tampilan:
Fungsi:� Memberikan menu pilihan kepada user (cara kerjanya seperti radio
button yang hanya mengijinkan user untuk memilih 1 pilihan saja)
D3 Manajemen Informatika - Unijoyo 21
Contoh:<form method="post">Jurusan: <br><select name="jurusan">
<option value="TInf"> Teknik Informatika <br><option value="MI"> D3 Manajemen Informatika <br><option value="TI"> Teknik Industri <br>
</select></form>
Tampilan:
Fungsi:� Sebagai field masukan untuk pengunjung (dapat
menerima lebih dari satu baris teks). Biasa disebutsebagai kotak komentar
Atribut Fungsi
Rows Menetukan lebar kotak komentar
Columns Menentukan tinggi kotakkomentar
Wrap=["off"|"virtual"|"physical"] Menentukan fitur word wrapping
D3 Manajemen Informatika - Unijoyo 22
• Tag: <textarea>• Atribut-atribut:
D3 Manajemen Informatika - Unijoyo 23
Tampilan:
Contoh:<html><head><title> Penggunaan Text Area </title></head><body>
<b>Komentar: <b> <br><form method="post"> <textarea rows="10" cols=“40" wrap="physical" name="komentar"></textarea><br>
</html>
�Pemakaian Tabel dalam halaman web dapatmembuat informasi tampil secara terstruktur,ringkas dan mudah dibaca serta membuattampilan web menjadi lebih menarik.
�Form digunakan untuk menerima informasiatau meminta umpan balik dari user danmemproses informasi tersebut di server.
D3 Manajemen Informatika - Unijoyo 24
� Chris Bates [2006]. Web Programming: BuildingInternet Applications, Third Edition, John Wiley& Sons Ltd, England.
� Husni [2007]. Pemrograman Database BerbasisWeb, Graha Ilmu, Yogyakarta.
� Sebesta, R.W. [2002], Programming the WorldWide Web, Addison Wesley.
� Sutarman, S.Kom [2003]. Membangun AplikasiWeb dengan PHP dan MySQL, Graha Ilmu,Yogyakarta.
D3 Manajemen Informatika - Unijoyo 25