pemrograman web 1 04
TRANSCRIPT
D3 Manajemen Informatika - FT
Unijoyo
1
Pemrograman Web 1
Pertemuan ke-4 (HTML Lanjut)
Oleh: Noor Ifada
D3 Manajemen Informatika - FT
Unijoyo
2
Sub Pokok Bahasan:
�Tabel
�Form
�Frame
D3 Manajemen Informatika - FT
Unijoyo
3
TABEL
Fungsi:
� Menampilkan informasi secara
terstruktur, ringkas dan mudah dibaca
� Mengatur tampilan homepage agar lebih
menarik
D3 Manajemen Informatika - FT
Unijoyo
4
� Tag yang diperlukan: <table>
� Atribut-atribut:
Mengatur spasi antar sel dan spasi dalam selCellspacing dan cellpadding
Menggabungkan beberapa kolomColspan
Menggabungkan beberapa barisRowspan
Mengatur bentuk perataan vertikalValign
Mengatur bentuk perataan horisontalAlign
Untuk mengatur warna suatu sel dalam tabelColor
Menentukan gambar yang digunakan untukbackground tabel
Background
Menentukan background tabelBgcolor
Menentukan tinggi tabelHeight
Menentukan lebar tabelWidth
Menentukan ukuran border/garis tabelBorder
FungsiAtribut
D3 Manajemen Informatika - FT
Unijoyo
5
Membuat tabel sederhana:
� 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:
D3 Manajemen Informatika - FT
Unijoyo
6
Menambahkan judul tabel:� 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:
D3 Manajemen Informatika - FT
Unijoyo
7
Mengatur lebar dan tinggi suatutabel:Atribut: weight dan height
Nilai:
� 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:
D3 Manajemen Informatika - FT
Unijoyo
8
Perataan dalam tabel:
� 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:
D3 Manajemen Informatika - FT
Unijoyo
9
Membuat warna pada tabel:� 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:
D3 Manajemen Informatika - FT
Unijoyo
10
Penggabungan baris/kolom:� Menggabungkan bbrp kolom menjadi 1: atribut colspan� Menggabungkan bbrp baris menjadi 1: atribut rowspan
Contoh Tampilan:
D3 Manajemen Informatika - FT
Unijoyo
11
<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:
D3 Manajemen Informatika - FT
Unijoyo
12
Cellpading dan cellspacing:
� atribut cellpading: mengatur spasi antara border dengantulisan
� atribut cellspasing: mengatur spasi antar 2 buah sel
Contoh Tampilan:
D3 Manajemen Informatika - FT
Unijoyo
13
Script HTML:
<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 - FT
Unijoyo
14
FORMFungsi:
� Menerima informasi atau meminta umpan balik dariuser dan memproses informasi tersebut di server
Standar penulisan:
<form method=“post/get” action=“. . .”> . . . </form>
Atribut:
Tipe form yang akan digunakanType
Memberikan nilai suatu masukanValue
Memerikan nama tiap masukanName
Aksi yang akan dilakukan jika user menekan tombol
Submit
Action
Metode pengiriman data ke file tujuan (POST atau GET)Method
FungsiAtribut
D3 Manajemen Informatika - FT
Unijoyo
15
Textbox
� Tag: <input>
� Atribut-atribut:
mengatur lebar field secara horisontal, berapa hurufmaksimal yang dapat ditampilkan
size
menentukan jumlah maksimum huruf (karakter) yang dapat dimasukkan
maxlength
Memberi nilai suatu inputvalue
Menentukan nama untuk field sehingga dapatdirujuk nantinya
name
Menentukan jenis field masukan
Text, submit, password
type=["text"|"password"]
FungsiAtribut
D3 Manajemen Informatika - FT
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>
D3 Manajemen Informatika - FT
Unijoyo
17
Submit dan Reset
� Tombol Submit: digunakan ketika user
mengisi form dan ingin mengirimkan ke
server
� Tombol Reset: digunakan ketika user
ingin menghapus/mengosongkan semua
masukan yang ditulis dalam form
D3 Manajemen Informatika - FT
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:
D3 Manajemen Informatika - FT
Unijoyo
19
Checkbox
Fungsi:
� Untuk memberi beberapa pilihan kepada
user
D3 Manajemen Informatika - FT
Unijoyo
20
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:
D3 Manajemen Informatika - FT
Unijoyo
21
Radio button
Fungsi:
� Untuk memberi (hanya) satu pilihan
kepada user
D3 Manajemen Informatika - FT
Unijoyo
22
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:
D3 Manajemen Informatika - FT
Unijoyo
23
Daftar Drop Down
Fungsi:
� Memberikan menu pilihan kepada user
(cara kerjanya seperti radio button yang
hanya mengijinkan user untuk memilih 1
pilihan saja)
D3 Manajemen Informatika - FT
Unijoyo
24
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>
</form>
Tampilan:
D3 Manajemen Informatika - FT
Unijoyo
25
Text AreaFungsi:� Sebagai field masukan untuk pengunjung (dapat menerima
lebih dari satu baris teks). Biasa disebut sebagai kotakkomentar
� Tag: <textarea>
� Atribut-atribut:
Menentukan fitur word wrappingWrap=["off"|"virtual"|"physical"]
Menentukan tinggi kotakkomentar
Columns
Menetukan lebar kotak komentarRows
FungsiAtribut
D3 Manajemen Informatika - FT
Unijoyo
26
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>
D3 Manajemen Informatika - FT
Unijoyo
27
FRAME
Fungsi:
� Menampilkan beberapa dokumen HTML
secara sekaligus dalam satu jendela
web browser.
D3 Manajemen Informatika - FT
Unijoyo
28
� Standar penulisan: <frameset [cols=“%,%” [rows=“%,%”]> . . . </frameset>
� Atribut-atribut:
Memberi nama untuk framename
Menentukan fitur scrollingscrolling=["yes"|"no"]
Membuat frame tidak dapat diubah
ukurannya
noresize
Menentukan batas antara frameframeborder=["0"|"1“]
Memasukkan dokumen HTML ke dalam
frame
frame src
Membuat frame horisontal dengan tinggi
baris tertentu
frameset rows
Membuat frame vertikal dengan lebar kolom
tertentu
frameset cols
FungsiAtribut
D3 Manajemen Informatika - FT
Unijoyo
29
Frame Vertikal
Contoh:<html>
<head>
<title>
Membuat Frame Vertikal
</title>
</head>
<frameset cols="25%,*">
<frame name="kiri"
src="kiri.html" scrolling="no">
<frame name="kanan“
src="kanan.html">
</frameset>
</html>
Tampilan:
D3 Manajemen Informatika - FT
Unijoyo
30
Frame Horisontal
Contoh:<html>
<head>
<title>
Membuat Frame Horisontal </title>
</head>
<frameset rows="40%,*">
<frame name="atas" src="atas.html“
scrolling="no">
<frame name="bawah“
src="bawah.html">
</frameset>
</html>
Tampilan:
D3 Manajemen Informatika - FT
Unijoyo
31
Gabungan Frame Vertikal-Horisontal
Contoh:<html>
<head>
<title>
Membuat Frame Vertikal-Horisontal </title>
</head>
<frameset rows="20%,*">
<frame name="atas" src="atas.html“
scrolling="no">
<frameset cols="40%,*">
<frame name="kiri"
src="kiri.html">
<frame name="kanan"
src="kanan.html">
</frameset>
</frameset>
</html>
Tampilan:
D3 Manajemen Informatika - FT
Unijoyo
32
Latihan dan Tugas?