Design & Pemrograman Web

Penanganan Table, Form, dan Frame

Table
Memperindah tampilan atau mengatur agar teks dapat

disajikan dengan tampilan yang enak dibaca Tag-tag yang terkait dengan pembuatan table :
Tag <TABLE></TABLE> <CAPTION></CAPTION> <TR></TR> <TH></TH> <TD></TD> Keterangan Mengawali dan mengakhiri sebuah table Menentukan judul pada table Membuat sebuah baris dalam table Membuat judul kolom Membuat sebuah sel data

Contoh ..

Hasil :

Memberi Garis pada Tabel

Bentuk : <TABLE BORDER = bilangan> Kalau BORDER tidak disertakan dalam tag

<TABLE>, nilai untuk BORDER dianggap sama dengan nol, dengan akibat garis tidak ditampilkan. Dengan kata lain : <TABLE> identik dengan <TABLE BORDER = 0>

Contoh ..

Hasil :

Meletakkan Judul di Bawah Tabel

Untuk menampilkan judul di bawah table, digunakan atribut ALIGN =

BOTTOM pada tag <CAPTION>

Hasil :

Menentukan Warna Latar Belakang Table

Untuk menambahkan warna latar belakang table, digunakan atribut

BGCOLOR pada tag <TABLE>.

Contoh lain ..
Contoh berikut menunjukkan pewarnaan table melalui BGCOLOR pada

<TABLE> dan <TD>

Menggabungkan Sel
Untuk menggabungkan beberapa baris sel, digunakan atribut

ROWSPAN pada tag <TD>

Contoh lain ..
Untuk menggabungkan beberapa sel dalam satu baris, digunakan

atribut COLSPAN pada tag <TH> atau <TD>

Contoh menggabungkan ROWSPAN dan COLSPAN :

HASIL..

Mengatur Peletakkan Teks

Atribut ALIGN pada <TR>, <TH>, dan <TD>
ALIGN dan Nilainya ALIGN = LEFT ALIGN = CENTER ALIGN = RIGHT Keterangan Teks diatur rata kiri Teks ditengahkan Teks diatur rata kanan

CONTOH : <TD ALIGN=RIGHT>KANAN</TD> <TD ALIGN=CENTER>TENGAH</TD> <TD ALIGN=LEFT>KIRI</TD>

Mengatur Tinggi Sel

Untuk mengatur tinggi table, digunakan atribut HEIGHT pada tag

<TABLE>

Contoh lain ..
Contoh berikut menunjukkan pengaturan tinggi pada sel tertentu saja.

Caranya adalah dengan menggunakan atribut HEIGHT pada tag <TR>

Pengaturan Teks pada Posisi Vertikal

Di dalam sebuah sel, teks dapat diatur menurut posisi vertical

apakah akan diletkkan di atas, di tengah, atau di bawah. Hal ini bisa dilakukan dengan menggunakan atribut VALIGN pada tag seperti <TH>, <TR>, atau <TD>. Nilai untuk atribut VALIGN
Nilai VALIGN TOP MIDDLE BOTTOM Keterangan Teks diletakkan di bagian atas pada sel Teks diletakkan di bagian tengah pada sel Teks diletakkan di bagian bawah pada sel

Contoh ..

Mengatur Lebar Tabel dan Sel

Atribut WIDTH pada tag <TABLE> dapat digunakan untuk mengatur

lebar table tanpa tergantung oleh ukuran jendela browser

Contoh penggunaan lebar dalam satuan persen ..

Contoh lain ..
WIDTH juga dapat digunakan pada sel tertentu, dengan cara

menyebutkannya pada tag <TD> atau <TH>

Contoh lain ..
Nilai WIDTH pada tag <TD> juga bisa berupa %

Mengatur Jarak dalam Tabel

Pada tag <TABLE> terdapat dua buah atribut lagi yang

dapat digunakan untuk mengatur jarak teks terhadap tepi kiri (yaitu CELLPADDING) dan untuk mengatur jarak bagian sel terhadap tepi dalam bingkai table (yaitu CELLSPACING)

PENGGUNAAN FORM

Dasar Penggunaan Form

Form dibentuk dengan menggunakan pasangan tag <FORM>

dan </FORM>. Dua atribut yang umum digunakan pada tag <FORM> berupa ACTION dan METHOD. ACTION menentukan URL yang akan dijalankan dan menerima semua masukan pada formulir. Jika ACTION tidak disebutkan, informasi akan dikirimkan ke URL yang sama dengan halaman web itu sendiri. METHOD digunakan untuk menentukan bagaimana informasi dikirim ke URL yang disebutkan dalam ACTION. Nilai yang umum untuk atribut ini berupa GET dan POST. POST membuat informasi dikirimkan secara terpisah dengan URL, sedangkan GET akan membuat informasi dikirim menjadi satu dengan URL. Contoh penggunaan pasangan tag <FORM> dan </FORM> : <FORM ACTION = info.htm METHOD = POST> ... </FORM>

Memasukkan Data dengan INPUT

Tag <INPUT> digunakan untuk melakukan pemasukan data dan

letaknya berada dalam pasangan tag <FORM> dan </FORM>. Ada bermacam-macam tipe pemasukan data, antara lain berupa kotak teks, kotak password, tombol radio, kotak cek, serta tombol SUBMIT dan RESET. Atribut pada tag INPUT
Atribut NAME SIZE MAXLENGTH VALUE CHECKED TYPE Keterangan Menentukan nama data. Atribut ini diperlukan oleh semua jenis masukan, kecuali SUBMIT dan RESET Menentukan ukuran kotak masukan yang tertampil untuk teks dan password Menentukan jumlah karakter yang dapat dimasukkan dalam kotak password dan kotak teks Menentukan nilai awal untuk kotak masukan Mengatur agar kotak cek dalam keadaan terpilih pada keadaan awal Menentukan tipe kotak masukan

Tipe TEXT
Tipe TEXT bermanfaat untuk memasukkan data

seperti nama orang atau alamat seseorang. Contoh pemakaian : <INPUT TYPE = TEXT NAME = nama_pegawai SIZE = 20 MAXLENGTH = 20> Dengan menggunakan atribut VALUE pada tag <INPUT>, field teks dapat diberi nilai bawaan. Contoh : <INPUT TYPE = TEXT NAME = nama_pegawai SIZE = 20 MAXLENGTH = 20 VALUE = Isi dengan nama Anda>

Tombol SUBMIT dan RESET

Tipe SUBMIT pada tag <INPUT> akan membentuk

tombol Submit, yaitu tombol yang menyebabkan URL yang disebutkan pada ACTION pada tag <FORM> akan dimuat. Contoh penulisan kode dengan tombol Submit yang paling sederhana : <INPUT TYPE = SUBMIT> Jika tulisan pada tombol tidak berisi Submit, perlu disebutkan pada atribut VALUE. Contoh : <INPUT TYPE = SUBMIT VALUE = Kirim> Tombol Reset berfungsi untuk mengosongkan atau mengembalikan nilai field teks ke nilai bawaan.

Contoh penggunaan formulir yang melibatkan field teks, tombol Submit, dan tombol Reset

Buat File info.htm :

Perbedaan GET dan POST

Tipe PASSWORD
Tipe PASSWORD yang disebutkan pada atribut TYPE pada tag

<INPUT> akan membuat setiap karakter yang diketikkan oleh pemakai pada field ini disembunyikan (misalnya dengan diganti tanda * untuk setiap karakter yang diketikkan pemakai)

Tipe CHECKBOX
Tipe CHECKBOX berguna untuk membuat kotak cek. Kotak cek adalah

suatu bentuk masukan yang memungkinkan pemakai mencentang atau tidak mencentang kotak tersebut dengan mengklik mouse pada saat penunjuk mouse menunjuk kotak cek. Kotak cek paling tidak melibatkan atribut NAME. Adapun atribut CHECKED bersifat opsional, yang digunakan untuk memberi nilai awal berupa tanda centang

Tombol Radio
Tombol radio digunakan dalam bentuk 2 tombol atau

lebih yang memungkinkan pemakai hanya memilih satu dari sekian tombol. Tombol radio diimplementasikan dengan menggunakan tag <INPUT> dengan atribut TYPE diberi nilai RADIO. Untuk membentuk sekelompok radio yang menyatakan sebuah pilihan, atribut NAME perlu diisi dengan nama yang sama. Atribut VALUE untuk menentukan nilai terhadap nama data sekiranya tombol tersebut diklik

Contoh ..

Dasar Penggunaan Frame

Frame memungkinkan satu halaman Web atau lebih

ditampilkan pada sebuah jendela browser. Untuk mempraktikan frame, buatlah terlebih dulu dua buah berkas HTML bernama framekir.htm dan framekan.htm. File framekir.htm :

Lanjt ..
File framekan.htm :

Lanjt ..
Halaman yang berbasis frame dibentuk dengan

menggunakan pasangan <FRAMESET> dan </FRAMESET>, atribut COLS digunakan untuk menentukan lebar masing-masing frame.

Mengantisipasi Tidak Adanya Dukungan Frame

Ada kemungkinan bahwa Web browser yang

digunakan pemakai tidak mendukung fitur frame. Untuk mengatur agar ada pemberitahuan bahwa halaman Web hanya bisa dilihat dengan browser yang mendukung frame digunakan pasangan tag <NOFRAMES> dan </NOFRAMES>

Contoh ..

Menggunakan BORDER
Atribut BORDER pada tag <FRAMESET> berguna

untuk mengatur ketebalan garis pemisah antarframe

Menghilangkan SCROLLING

Frame dan Link

Untuk mempraktekkan penggabungan pemakaian

frame yang melibatkan link ke frame yang lain, buatlah tiga buah file HTML berikut : File burung.htm :

Lanjt ..
File ayam.htm :

Lanjt ..
File daftar.htm :

Lanjt ..
Pada file daftar.htm, atribut TARGET digunakan untuk

menentukan frame yang akan ditempati oleh halaman Web yang dipanggil. Kode yang digunakan untuk menggabungkan ketiga file di atas adalah seperti berikut :

Frame Horizontal
HTML juga memungkinkan pembuatan frame horizontal.

Caranya dengan mengubah atribut COLS pada <FRAMESET> menjadi ROWS (lihat contoh sebelumnya)

Penggunaan NORESIZE
Atribut NORESIZE pada tag <FRAME> digunakan

agar frame tidak bisa diubah ketika ditampilkan pada browser

Gabungan Frame Horizontal dan Vertikal

Lanjt ..
File judul.htm :