pertemuan ke-3 (html lanjut [1]) · tabel § membuat tabel sederhana § menambahkan judul tabel §...

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


Fungsi:�Menampilkan informasi secara terstruktur,

ringkas dan mudah dibaca�Mengatur tampilan homepage agar lebih

menarik


�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


�Tag yang diperlukan:¡ Membuat baris: <tr> (table row)¡ Membuat kolom: <td> (table data)


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)


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


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>


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


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


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>


Script HTML:

� atribut cellpading: mengatur spasi antara border dengantulisan

� atribut cellspasing: mengatur spasi antar 2 buah sel


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>


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


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



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



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


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


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)


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


• Tag: <textarea>• Atribut-atribut:


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.


� 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.


pertemuan ke-3 (html lanjut [1]) · tabel § membuat tabel sederhana § menambahkan judul tabel §...

Documents