Tag <TABLE>
Tag ini berfungsi untuk mendefiniskan sebuah tabel,
tag <TR> untuk mendefiniskan baris,
tag <TH> judul tiap kolom atau baris,
dan tag <TD> untuk mengisi teks di tiap kolom
tag <TR> untuk mendefiniskan baris,
tag <TH> judul tiap kolom atau baris,
dan tag <TD> untuk mengisi teks di tiap kolom
Jadi, tiap tag mempunyai fungsi untuk membentuk table.
Contoh, penggunaan table
<HTML>
<HEAD>
<TITLE> Ini Contoh Penggunaan Tabel </TITLE>
<BODY>
<TABLE BORDER>
<TR>
<TH> Kolom 1</TH>
<TH> Kolom 2</TH>
<TH> Kolom 3</TH>
</TR>
<TR>
<TD> Baris 1 Kolom 1</TD>
<TD> Baris 1 Kolom 2</TD>
<TD> Baris 1 Kolom 3</TD>
</TR>
<TR>
<TD> Baris 2 Kolom 1</TD>
<TD> Baris 2 Kolom 2</TD>
<TD> Baris 2 Kolom 3</TD>
</TR>
</TABLE>
</BODY>
</HEAD>
</HTML>
Jika contoh diatas dijalankan, hasilnya akan seperti ini:
Kolom 1
|
Kolom 2
|
Kolom 3
|
Baris 1 Kolom 1
|
Baris 1 Kolom 2
|
Baris 1 Kolom 3
|
Baris 2 Kolom 1
|
Baris 2 Kolom 1
|
Baris 2 Kolom 1
|
Tag <Table> juga mempunyai atribut mengatur warna, posisi dan latar belakang. Berikut keterangan atribut yang dimaksud
Atribut
|
Keterangan
|
ALIGN
|
Posisi horizontal tabel
|
BACKGROUND
|
Menentukan gambar latar belakang
|
BGCOLOR
|
Menetukan warna latar belakang
|
BORDER
|
Menetukan tabel bingkai tabel
|
BORDERCOLOR
|
Menetukan warna bingkai tabel
|
BORDERLIGHTCOLOR
|
Menentukan warna depan bingkai tabel
|
BORDERCOLORDARK
|
Menetukan warna “bayangan” bingkai tabel.
|
CELLSPACING
|
Menentukan jarak spasi antar Cell
|
CELLPADING
|
Menetukan jarak isi cell dengan bingkai
|
HEIGHT
|
Menentukan tinggi tabel
|
WIDTH
|
Menentukan tinggi tabel
|
VALIGN
|
Menentukan lebar tabel
|
Tag <TD> juga memiliki atribut-atribut hampir sama, yakni diantaranya adalah sebagai berikut:
Atribut
|
Keterangan
|
ALIGN
|
Posisi horizontal tabel
|
BACKGROUND
|
Menentukan gambar latar belakang
|
BGCOLOR
|
Menetukan warna latar belakang
|
BORDER
|
Menetukan tabel bingkai tabel
|
BORDERCOLOR
|
Menetukan warna bingkai tabel
|
BORDERLIGHTCOLOR
|
Menentukan warna depan bingkai tabel
|
BORDERCOLORDARK
|
Menetukan warna “bayangan” bingkai tabel.
|
COLSPAN
|
Menentukan jarak spasi antar Cell
|
HEIGHT
|
Menetukan jarak isi cell dengan bingkai
|
NOWRAP
|
Menentukan teks tetap dalam satu baris
|
ROWSPAN
|
Menentukan jumlah baris yang digabung
|
VALIGN
|
Menentukan posisi vertikal teks
|
Untuk memahami penggunaan atribut-atribut perhatikan contoh berikut ini:
<HTML>
<HEAD>
<TITLE> Ini Contoh Penggunaan Tabel Alignments</TITLE>
<BODY>
<TABLE BORDER=2 ALIGN=Right>
<TR>
<TH> </TH>
<TH> **********</TH>
<TH> **********</TH>
<TH> **********</TH>
</TR>
<TR>
<TR ALIGN=Right>
<TH> Baris 1</TH>
<TD BGCOLOR=#F7EFDE>XX<BR>XX</TD>
<TD BGCOLOR=#F7EFDE ALIGN=Center>X</TD>
<TD BGCOLOR=#F7EFDE>XXX</TD>
</TR>
<TR VALIGN=Baseline>
<TD> ALIGN=Left>Baris 2</TD>
<TD> XXX<BR>XXX</TD>
<TD> XXX</TD>
<TD>XXX<BR>XXXXX<BR>XXX</TD>
</TR>
<TR VALIGN=Left>
<TD> Baris 3</TD>
<TD> VALIGN=BOTTOM>XXXXX</TD>
<TD> VALIGN=TOP>XXX<BR>XXXXX </TD>
<TD> VALIGN=MIDDLE>XXXXX </TD>
</TR>
</TABLE>
</BODY>
</HEAD>
</HTML>
Jika contoh diatas dijalankan, hasilnya akan seperti ini :
**********
|
**********
|
**********
| |
Baris 1
|
XX
XX
|
X
|
XXX
|
Baris 2
|
XXX
XXX
|
XXX
|
XXX
XXXXX
XXX
|
Baris 3
|
XXXX
|
XXX
XXXXX
|
XXXXX
|
Menggunakan Form
Form adalah sebuah daftar isian. Form ini digunakan untuk mengisi informasi dari user untuk diolah.
Nantinya, form ini akan diolah menggunakan script java atau vbscript bila halaman web menggunakan aspx.
Nantinya, form ini akan diolah menggunakan script java atau vbscript bila halaman web menggunakan aspx.
Untukmembentuk sebuah form maka diperlukan tag-tag sebagai berikut:
- Tag <FORM>
- Tag <TEXTAREA>
- Tag <SELECT>
- Tag <INPUT>
Mari kita jelaskan maksud dan fungsi masing-masing tag diatas
Tag <FORM>
Digunakan untuk mendefinisikan sebuah form. Tag <FORM> didukung oleh 2 properti, properti METHOD dan ACTION.
Fungsi METHOD digunakan untuk menetukan jenis pengolahan data di form
Fungsi ACTION digunakan untuk menetukan URL atau direktori dari file yang digunakan untuk mengolah data teresebut.
Tag <TEXTAREA>
Tag ini digunakan untuk membuat kotak teks multi baris. Tag ini mempunyai proprerti sebagai berikut :
Atribut
|
Fungsi
|
NAME
|
Mendefiniskan nama objek textarea
|
ROWS
|
Menentukan jumlah baris
|
COLS
|
Menentukan lebar
|
Tag <SELECT> atau Daftar Pilihan
Tag ini digunakan untuk membuat daftar pilihan, tag ini dilengkapi atribut sebagai berikut :
Atribut
|
Fungsi
|
NAME
|
Mendefiniskan nama objek pilihan
|
SIZE
|
Menentukan berapa pilihan yang akan ditampilkan, jika diset = 1, pilihan akan ditampilkan sebagai menu drop-down. Jika diset = 2, pilihan akan ditampilkan
|
MULTIPLE
|
Memilih daftar pilih lebih dari 1
|
Tag <INPUT>
Tag <INPUT> digunakan untuk meminta informasi dari user, tag ini dilengkapi atribut sebagai berikut :
Atribut
|
Fungsi
|
NAME
|
Mendefiniskan nama objekinput
|
SIZE
|
Menentukan panjang kotak teks
|
MAXLENGTH
|
Jumlah maksimal karakter yang bisa diinputkan
|
VALUE
|
Menentukan teks yang tertulis
|
CHECKED
|
Digunakan untuk check box atau radio
|
TYPE
|
Menentukan tipe input
|
Menggunakan FRAME
Frame digunakan untuk membagi halaman web menjadi beberapa bagian, tag <FRAMESET> mempunyai atribut-atribut sebagai berikut :
Atribut
|
Fungsi
|
ROWS
|
Membuat frame secara mendatar
|
COLS
|
Membuat frame secara vertikal
|
BORDERCOLOR
|
Menentukan warna bingkai frame
|
Menggunakan SCRIPT
Script adalah bagian tidak terpisahkan dari HTML, tanpa script HTML pun tetap bisa berjalan tapi terasa hambar,
maka ditaruhlah script agar kinerja web semakin oke.
maka ditaruhlah script agar kinerja web semakin oke.
Dewasa ini script yang dikenal adalah VbScript dan JavaScript. Berikut Contoh Script :
<SCRIPT LANGUAGE=NamaScript [RUNAT=Server]>
<!----------------Tulis Script disini --------------------- >
</SCRIPT>
Oke, sudah lengkap tutorial dasar-dasar HTML ini saya susun,
apabila masih banyak kekurangan dari segi penyajian,
penampilan dan juga penyampaian saya mohon maaf sebesar-besarnya.
apabila masih banyak kekurangan dari segi penyajian,
penampilan dan juga penyampaian saya mohon maaf sebesar-besarnya.
Demikian ulasan ini saya sampaikan, penulis berharap, semoga tutorial ini bisa memberikan manfaat bagi yang membacanya.
Atas perhatiannya, terucap salam terima kasih.
