Pemrograman Web 1 04

D3 Manajemen Informatika - FT

Unijoyo

1

Pemrograman Web 1

Pertemuan ke-4 (HTML Lanjut)

Oleh: Noor Ifada


Unijoyo

2

Sub Pokok Bahasan:

�Tabel

�Form

�Frame


Unijoyo

3

TABEL

Fungsi:

� Menampilkan informasi secara

terstruktur, ringkas dan mudah dibaca

� Mengatur tampilan homepage agar lebih

menarik


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


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:


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:


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:


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:


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:


Unijoyo

10

Penggabungan baris/kolom:� Menggabungkan bbrp kolom menjadi 1: atribut colspan� Menggabungkan bbrp baris menjadi 1: atribut rowspan

Contoh Tampilan:


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:


Unijoyo

12

Cellpading dan cellspacing:

� atribut cellpading: mengatur spasi antara border dengantulisan

� atribut cellspasing: mengatur spasi antar 2 buah sel

Contoh Tampilan:


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>


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


Unijoyo

15

Textbox

� Tag: <input>


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


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>


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


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"


<tr> <td>Alamat:</td> <td><input type="text" name="alamat"


</table>

<input type="submit" value="Simpan" name="t1">

<input type="reset" value="Reset" name="t2">

</form>

</body>

Tampilan:


Unijoyo

19

Checkbox

Fungsi:

� Untuk memberi beberapa pilihan kepada

user


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:


Unijoyo

21

Radio button

Fungsi:

� Untuk memberi (hanya) satu pilihan

kepada user


Unijoyo

22


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:


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)


Unijoyo

24


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:


Unijoyo

25

Text AreaFungsi:� Sebagai field masukan untuk pengunjung (dapat menerima

lebih dari satu baris teks). Biasa disebut sebagai kotakkomentar

� Tag: <textarea>


Menentukan fitur word wrappingWrap=["off"|"virtual"|"physical"]

Menentukan tinggi kotakkomentar

Columns

Menetukan lebar kotak komentarRows

FungsiAtribut


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>


Unijoyo

27

FRAME

Fungsi:

� Menampilkan beberapa dokumen HTML

secara sekaligus dalam satu jendela

web browser.


Unijoyo

28

� Standar penulisan: <frameset [cols=“%,%” [rows=“%,%”]> . . . </frameset>


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


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:


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:


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:


Unijoyo

32

Latihan dan Tugas?

Documents

Pemrograman Web 1 04