PENGENALAN HTML - 2 G. Tabel HTML Setting untk membuat perintah tabel terdiri dari : Row : mementukan banyaknya baris yang dimiliki oleh tabel. Columns : menentukan banyaknya kolom yang dimiliki tabel. Width : menentukan lebar tabel dalam piksel atau persen Height : menentukan tinggi tabel dalam piksel atau persen Border : menentukan apakah tabel memasukkan border atau tidak Cell Padding : menentukan jumlah ruang bebas dalam piksel yang memisahkan teks dari dinding sel Cell Spacing : menentukan jumlah ruang bebas dalam piksel antar sel. 1. Pembuatan Tabel Tag <TABLE> digunakan untuk membuat table dalam dokumen HTML, bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>. Anda bisa menambahkan beberapa cell (kolom) untuk membuat satu baris cell (kolom). 24
Berikutnya kalo anda ingin membuat beberapa baris cell dalam table digunakan tag <TR>. Anda juga bisa memberi caption pada table dengan menambahkan tag berikut di dalam table : 25
2. Pemformatan tabel Untuk memformat perataan text di dalam tabel dapat digunakan attribute Align dan Valign (vertical Alignment) Anda juga bisa menambahkan attribute cellspacing untuk memberi spasi antar sel dan cellpadding untuk spasi dari border ke text dalam cell. Contoh pembuatan tabel adalah dengan perintah sebagai berikut : Mengisi teks pada tabel 26
<html> <head> <title> Tabel </title> </head> <body> <table border="1" cellpadding="0" cellspacing="0 width="100%"> <tr> <td width="33%">satu</td> <td width="33%">dua</td> <td width="34%">tiga</td> </tr> <tr> <td width="33%">empat</td> <td width="33%">lima</td> <td width="34%">enam</td> </tr> </table> </body> </html> Mengisi gambar pada tabel <html> <head> <title> Tabel isi gambar </title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="50%"> <img src=" images/select.gif" width="105" height="105"></td> <td width="50%"> <img src=" images/ masuk.gif" width="103" height="101" border="0"></td> </tr> </table> </body> </html> Meratakan data Data berupa gambar atau teks mempunyai karakter - Rata atas - Rata tengah - Rata bawah 27
<html> <head> <title> Meratakan Tabel </title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="100 height="130"> <tr> <td width="50%" valign="top" height="69">ini teks untuk rata <b>atas</b> saja ya semoga tidak sulit untuk membuatnya, jika sulit tanyakan aja sama saya ya</td> </tr> <tr> <td width="50%" height="60">ini teks untuk rata <b>tengah</b> saja ya semoga tidak sulit untuk membuatnya, jika sulit tanyakan aja sama saya ya</td> </tr> <tr> <td width="50%" height="60" valign="bottom">ini teks untuk rata <b>bawah</b> saja ya semoga tidak sulit untuk membuatnya, jika sulit tanyakan aja sama saya ya</td> </tr> </table> </body> </html> 3. Merge cell dalam Tabel Tag <TD> memiliki atribut colspan untuk merger column dan rowspan untuk merger baris. Contoh: 28
29
30
H. Form Berikut ini beberapa contoh kegunaan Form dalam web: Memperoleh data-data user baik nama, alamat dan data lainnya Untuk mendaftar pada service yang disediakan Memperoleh informasi pembelian secara online Memperoleh feedback dari user mengenai website anda. 1. Form Element Tag <FORM> digunakan untuk membuat form dalam dokumen HTML. 2. HTML Input Element Pada saat membuat form anda bisa meletakkan control-control pada form untuk memperbolehkan inputan dari user. Semua control biasanya di letakkan di antara tag <FORM></FORM> tapi anda juga bisa meletakkan control diluar tag tersebut. Untuk menambahkan control menggunakan tag <input>. Berikut macam-macam komponen input: a). Text Untuk membuat single line text control. Attribute size digunakan untuk menetukan jumlah character yang bisa ditampilkan, sementara maxlength attribute digunakan untuk menentukan maximum character yang bisa di masukkan. 31
b). Button Komponen ini memiliki attribute: <html> <head> <title>button</title> </head> <body> <form name="form1"> Username <input type="text" name="user2" size="10" maxlength="15"> <input type="button" name="3" value="ok" onclick="javascript:window.alert(form1.user2.value)"> </form> </body> </html> c). CheckBox Checkbox memiliki atribut: 32
<html> <head> <title>check box</title> </head> <body> <form action="mera_input-cek.php" method="post" name="form2"> <input name="c1" type="checkbox" value="cek1"> 1<br> <input name="c2" type="checkbox" value="cek2"> 2<br> <input type="submit" name="submit" value="klik Di Sini"> </form> </body> </html> <html> <head> <title>mera_input-cek.php</title> </head> <body> <? echo $c1;?> <br> <? echo $c2;?> </body> </html> d). Radio Setiap radio button control harus memiliki nama yang sama, sehingga user hanya bisa memilih satu option saja. Radio button juga harus secara explisit memberikan nilai ke atribut value. 33
e). Text Area Untuk membuat textarea gunakan tag <TEXTAREA></TEXTAREA> f). ComboBox / List Box (Selection) Tag <SELECT> digunakan untuk membuat component combo box, sementara untuk item dari combo box menggunakan tag <OPTION>. 34
35
3. Creating Form 36
---0o0--- 37