menambahkan gambar format gambar yang bisa digunakan … · menambahkan gambar format gambar yang...
TRANSCRIPT
MENAMBAHKAN GAMBARMENAMBAHKAN GAMBARFormat gambar yang bisa digunakan untuk melengkapi Format gambar yang bisa digunakan untuk melengkapi halaman web:halaman web:
Yang umum dipakai adalah GIF, JPEG, dan PNGYang umum dipakai adalah GIF, JPEG, dan PNG
* Menampilkan Gambar* Menampilkan GambarTag HTML yang digunakan untuk menampilkan gambar, Tag HTML yang digunakan untuk menampilkan gambar, yaitu <IMG>. Tag ini mempunyai banyak atribut, tetapi yaitu <IMG>. Tag ini mempunyai banyak atribut, tetapi hanya satu yang harus disertakan, yaitu atribut SRC. hanya satu yang harus disertakan, yaitu atribut SRC. Adapun atribut lainnya bersifat opsional. Bentuk paling Adapun atribut lainnya bersifat opsional. Bentuk paling sederhana dari tag <IMG> adalah seperti berikut:sederhana dari tag <IMG> adalah seperti berikut:
Jenis GambarJenis Gambar EktensiEktensi KeteranganKeteranganGIFGIF .gif.gif Graphics Interchange FormatGraphics Interchange FormatJPEGJPEG .jpg/.jpeg.jpg/.jpeg Joint Photographics Experts GroupJoint Photographics Experts GroupPNGPNG .png.png Portable Network GraphicsPortable Network GraphicsTIFF/TIFTIFF/TIF .tif.tif Tagged Image File FormatTagged Image File Format
<IMG SRC = “nama_gambar”><IMG SRC = “nama_gambar”>
Contoh:Contoh:
<IMG SRC = “jazz.jpg”><IMG SRC = “jazz.jpg”>
Anda juga bisa menuliskan:Anda juga bisa menuliskan:
<IMG SRC = “citra/jazz.jpg”><IMG SRC = “citra/jazz.jpg”>
apabila gambar terdapat pada direktori citra yang terletak di apabila gambar terdapat pada direktori citra yang terletak di bawah direktori tempat berkas HTML berada.bawah direktori tempat berkas HTML berada.Contoh:Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Latar Belakang Gambar</TITLE><TITLE>Latar Belakang Gambar</TITLE></HEAD></HEAD><BODY><BODY>Info JazzInfo Jazz<IMG SRC = "jazz.jpg"><IMG SRC = "jazz.jpg"></BODY></BODY></HTML></HTML>
Contoh berikut memadukan gambar latar belakang dan Contoh berikut memadukan gambar latar belakang dan gambar di latar depan:gambar di latar depan:
<HTML><HTML><HEAD><HEAD><TITLE>Menampilkan Gambar</TITLE><TITLE>Menampilkan Gambar</TITLE></HEAD></HEAD><BODY BACKGROUND = "nada.jpg"><BODY BACKGROUND = "nada.jpg">Info JazzInfo Jazz<IMG SRC = "jazz.jpg"><IMG SRC = "jazz.jpg"></BODY></BODY></HTML></HTML>
Apabila Anda menguji kode di atas dengan browser, akan Apabila Anda menguji kode di atas dengan browser, akan tampak bahwa gambar latar belakang tampak bahwa gambar latar belakang (nada.jpg)(nada.jpg) tertindih oleh gambar tertindih oleh gambar jazz.jpg.jazz.jpg.Untuk mengatasinya, Anda bisa menggunakan berkas Untuk mengatasinya, Anda bisa menggunakan berkas yang bertipe GIF, mengingat format gambar ini yang bertipe GIF, mengingat format gambar ini mendukung transparansi.mendukung transparansi.
* Mengatur Letak Teks terhadap Gambar* Mengatur Letak Teks terhadap GambarTag <IMG> menyediakan atribut bernama ALIGN yang Tag <IMG> menyediakan atribut bernama ALIGN yang berfungsi untuk mengatur penempatan teks terhadap gambar. berfungsi untuk mengatur penempatan teks terhadap gambar. Kemungkinan nilai untuk atribut ini adalah sebagai berikut:Kemungkinan nilai untuk atribut ini adalah sebagai berikut:
Contoh:Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Menampilkan Gambar</TITLE><TITLE>Menampilkan Gambar</TITLE></HEAD></HEAD><BODY BACKGROUND = "nada.jpg"><BODY BACKGROUND = "nada.jpg">Info jazzInfo jazz<IMG SRC = "jazz.gif" ALIGN = "MIDDLE"><IMG SRC = "jazz.gif" ALIGN = "MIDDLE"></BODY></BODY></HTML></HTML>
NilaiNilai KeteranganKeteranganTOPTOP Teks diletakkan di bagian atasTeks diletakkan di bagian atasMIDDLEMIDDLE Teks diletakkan di tengah-tengahTeks diletakkan di tengah-tengahBOTTOMBOTTOM Merupakan nilai Merupakan nilai defaultdefault. Teks diletakkan . Teks diletakkan
pada bagian bawah.pada bagian bawah.
<HTML><HTML><HEAD><HEAD><TITLE>Menampilkan Gambar</TITLE><TITLE>Menampilkan Gambar</TITLE></HEAD></HEAD><BODY BACKGROUND = "nada.jpg"><BODY BACKGROUND = "nada.jpg">Info jazzInfo jazz<IMG SRC = "jazz.gif" ALIGN = "TOP"><IMG SRC = "jazz.gif" ALIGN = "TOP"></BODY></BODY></HTML></HTML><HTML><HTML><HEAD><HEAD><TITLE>Menampilkan Gambar</TITLE><TITLE>Menampilkan Gambar</TITLE></HEAD></HEAD><BODY BACKGROUND = "nada.jpg"><BODY BACKGROUND = "nada.jpg"><IMG SRC = "jazz.gif" ALIGN = "LEFT"><IMG SRC = "jazz.gif" ALIGN = "LEFT"><B>Musik Jazz : </B><P><B>Musik Jazz : </B><P>Musik Jazz banyak disukai olehMusik Jazz banyak disukai olehmereka yang menyukai keindahan danmereka yang menyukai keindahan dankedinamisan bunyi.<BR>kedinamisan bunyi.<BR></BODY></BODY></HTML></HTML>
<HTML><HTML><HEAD><HEAD><TITLE>Menampilkan Gambar</TITLE><TITLE>Menampilkan Gambar</TITLE></HEAD></HEAD><BODY BACKGROUND = "nada.jpg"><BODY BACKGROUND = "nada.jpg"><IMG SRC = "jazz.gif" ALIGN = "RIGHT"><IMG SRC = "jazz.gif" ALIGN = "RIGHT"><B>Musik Jazz : </B><P><B>Musik Jazz : </B><P>Musik Jazz banyak disukai olehMusik Jazz banyak disukai olehmereka yang menyukai keindahan danmereka yang menyukai keindahan dankedinamisan bunyi.<BR>kedinamisan bunyi.<BR></BODY></BODY></HTML></HTML>* Memberi Bingkai Gambar* Memberi Bingkai GambarDengan menggunakan atribut BORDER pada tag <IMG>, Anda Dengan menggunakan atribut BORDER pada tag <IMG>, Anda bisa mengatur agar gambar ditampilkan dengan diberi bingkai. bisa mengatur agar gambar ditampilkan dengan diberi bingkai. Caranya dengan memberikan bilangan pada atribut border. Nilai Caranya dengan memberikan bilangan pada atribut border. Nilai pada atribut tersebut menyatakan ketebalan bingkai dalam pada atribut tersebut menyatakan ketebalan bingkai dalam satuan piksel. Contoh:satuan piksel. Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Menampilkan Gambar</TITLE><TITLE>Menampilkan Gambar</TITLE></HEAD></HEAD><BODY BACKGROUND = "nada.jpg"><BODY BACKGROUND = "nada.jpg"><IMG SRC = "jazz.gif" ALIGN = "RIGHT"<IMG SRC = "jazz.gif" ALIGN = "RIGHT" BORDER = "1">BORDER = "1"><B>Musik Jazz : </B><P><B>Musik Jazz : </B><P>Musik Jazz banyak disukai olehMusik Jazz banyak disukai olehmereka yang menyukai keindahan danmereka yang menyukai keindahan dankedinamisan bunyi.<BR>kedinamisan bunyi.<BR></BODY></BODY></HTML></HTML>
* Mengatur Ukuran Gambar* Mengatur Ukuran GambarBila gambar memiliki ukuran besar dan bermaksud mengubah Bila gambar memiliki ukuran besar dan bermaksud mengubah gambar saat ditampilkan, Anda bisa mengaturnya dengan gambar saat ditampilkan, Anda bisa mengaturnya dengan atribut pada tag <IMG> yaitu HEIGHT dan WIDTH.atribut pada tag <IMG> yaitu HEIGHT dan WIDTH.
- HEIGHT untuk mengatur tinggi gambar- HEIGHT untuk mengatur tinggi gambar- WIDTH untuk mengatur lebar gambar- WIDTH untuk mengatur lebar gambar
Gambar diskala dengan nilai pada kedua atribut tersebut Gambar diskala dengan nilai pada kedua atribut tersebut berupa nilai dengan satuan piksel. Contoh:berupa nilai dengan satuan piksel. Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Ukuran Gambar</TITLE><TITLE>Ukuran Gambar</TITLE></HEAD></HEAD></BODY></BODY><IMG SRC = "jazz.jpg"><IMG SRC = "jazz.jpg"><BR><BR><IMG SRC = "jazz.jpg" <IMG SRC = "jazz.jpg" HEIGHT = "150" WIDTH = "200">HEIGHT = "150" WIDTH = "200"><BR><BR><IMG SRC = "jazz.jpg" <IMG SRC = "jazz.jpg" HEIGHT = "50" WIDTH = "50">HEIGHT = "50" WIDTH = "50"></BODY></BODY></HTML></HTML>
MENGGUNAKAN TABELMENGGUNAKAN TABELTabel biasa digunakan dalam halaman web untuk Tabel biasa digunakan dalam halaman web untuk memperindah tampilan atau untuk mengatur agar memperindah tampilan atau untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak informasi dapat disajikan dengan tampilan yang enak dibaca.dibaca.Tag-tag yang berkaitan dengan pembuatan tabel Tag-tag yang berkaitan dengan pembuatan tabel adalah:adalah:
TagTag KeteranganKeterangan<TABLE>...</TABLE><TABLE>...</TABLE> Mengawali dan mengakhiri sebuah tabelMengawali dan mengakhiri sebuah tabel<CAPTION>...</CAPTION><CAPTION>...</CAPTION> Menentukan judul pada tabelMenentukan judul pada tabel<TR>...</TR><TR>...</TR> Membuat sebuah baris dalam tabelMembuat sebuah baris dalam tabel<TH>...</TH><TH>...</TH> Membuat judul kolomMembuat judul kolom<TD>...</TD><TD>...</TD> Membuat sebuah sel dataMembuat sebuah sel data
<HTML><HTML><HEAD><HEAD><TITLE>Tabel Sederhana</TABEL><TITLE>Tabel Sederhana</TABEL></HEAD></HEAD><BODY><BODY><TABLE><TABLE><CAPTION>Album Bob James</CAPTION><CAPTION>Album Bob James</CAPTION><TR><TH>Nama Album</TH><TH>Tahun Rilis</TH></TR><TR><TH>Nama Album</TH><TH>Tahun Rilis</TH></TR><TR><TD>Obsession</TD><TD>1986</TD></TR><TR><TD>Obsession</TD><TD>1986</TD></TR><TR><TD>Ivory Coast</TD><TD>1988</TD></TR><TR><TD>Ivory Coast</TD><TD>1988</TD></TR><TR><TD>Grand Piano Canyon</TD><TD>1990</TD></TR><TR><TD>Grand Piano Canyon</TD><TD>1990</TD></TR><TR><TD>Dancing on The Water</TD><TR><TD>Dancing on The Water</TD> <TD>2001</TD></TR><TD>2001</TD></TR><TR><TD>Morning, Noon, & Night</TD><TR><TD>Morning, Noon, & Night</TD> <TD>2001</TD></TR><TD>2001</TD></TR></TABLE></TABLE></BODY></BODY></HTML></HTML>
* Memberi Garis pada Tabel* Memberi Garis pada TabelTabel dapat dilengkapi dengan garis untuk kolom maupun Tabel dapat dilengkapi dengan garis untuk kolom maupun baris. Anda bisa menggunakan atribut BORDER pada tag baris. Anda bisa menggunakan atribut BORDER pada tag TABLE, dengan bentuk sebagai berikut:TABLE, dengan bentuk sebagai berikut:
<TABLE BORDER = “bilangan”><TABLE BORDER = “bilangan”>
Kalau BORDER tidak disertakan dalam tag <TABLE>, nilai Kalau BORDER tidak disertakan dalam tag <TABLE>, nilai untuk BORDER dianggap sama dengan nol, sehingga garis untuk BORDER dianggap sama dengan nol, sehingga garis tidak ditampilkan.tidak ditampilkan.
<TABLE><TABLE>
identik denganidentik dengan
<TABLE BORDER = “0”><TABLE BORDER = “0”>
Contoh:Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Tabel Sederhana</TABEL><TITLE>Tabel Sederhana</TABEL></HEAD></HEAD><BODY><BODY><TABLE BORDER = “1”><TABLE BORDER = “1”><CAPTION>Album Bob James</CAPTION><CAPTION>Album Bob James</CAPTION><TR><TH>Nama Album</TH><TH>Tahun Rilis</TH></TR><TR><TH>Nama Album</TH><TH>Tahun Rilis</TH></TR><TR><TD>Obsession</TD><TD>1986</TD></TR><TR><TD>Obsession</TD><TD>1986</TD></TR><TR><TD>Ivory Coast</TD><TD>1988</TD></TR><TR><TD>Ivory Coast</TD><TD>1988</TD></TR><TR><TD>Grand Piano Canyon</TD><TD>1990</TD></TR><TR><TD>Grand Piano Canyon</TD><TD>1990</TD></TR><TR><TD>Dancing on The Water</TD><TR><TD>Dancing on The Water</TD> <TD>2001</TD></TR><TD>2001</TD></TR><TR><TD>Morning, Noon, & Night</TD><TR><TD>Morning, Noon, & Night</TD> <TD>2001</TD></TR><TD>2001</TD></TR></TABLE></TABLE></BODY></BODY></HTML></HTML>
* Menentukan Warna Latar Belakang Tabel* Menentukan Warna Latar Belakang TabelUntuk menambahkan warna latar belakang tabel, Anda bisa Untuk menambahkan warna latar belakang tabel, Anda bisa menggunakan atribut BGCOLOR pada tag <TABLE>. menggunakan atribut BGCOLOR pada tag <TABLE>.
<HTML><HTML><HEAD><HEAD><TITLE>Tabel Sederhana</TABEL><TITLE>Tabel Sederhana</TABEL></HEAD></HEAD><BODY><BODY><TABLE BGCOLOR = “silver” BORDER = “1”><TABLE BGCOLOR = “silver” BORDER = “1”><CAPTION>Album Bob James</CAPTION><CAPTION>Album Bob James</CAPTION><TR><TH>Nama Album</TH><TH>Tahun Rilis</TH></TR><TR><TH>Nama Album</TH><TH>Tahun Rilis</TH></TR><TR><TD>Obsession</TD><TD>1986</TD></TR><TR><TD>Obsession</TD><TD>1986</TD></TR><TR><TD>Ivory Coast</TD><TD>1988</TD></TR><TR><TD>Ivory Coast</TD><TD>1988</TD></TR><TR><TD>Grand Piano Canyon</TD><TD>1990</TD></TR><TR><TD>Grand Piano Canyon</TD><TD>1990</TD></TR><TR><TD>Dancing on The Water</TD><TR><TD>Dancing on The Water</TD> <TD>2001</TD></TR><TD>2001</TD></TR><TR><TD>Morning, Noon, & Night</TD><TR><TD>Morning, Noon, & Night</TD> <TD>2001</TD></TR><TD>2001</TD></TR></TABLE></TABLE></BODY></BODY></HTML></HTML>
<HTML><HTML><HEAD><HEAD><TITLE>Penggunaan Warna</TITLE><TITLE>Penggunaan Warna</TITLE></HEAD></HEAD><BODY><BODY><TABLE BORDER = "1" BGCOLOR = "green"><TABLE BORDER = "1" BGCOLOR = "green"><TR><TD>ABC</TD><TD>DEF</TD></TR><TR><TD>ABC</TD><TD>DEF</TD></TR><TR><TR><TD BGCOLOR = "pink">GHI</TD><TD BGCOLOR = "pink">GHI</TD><TD><FONT COLOR = "white">JKL</FONT></TD><TD><FONT COLOR = "white">JKL</FONT></TD></TR></TR></TABLE></TABLE></BODY></BODY></HTML></HTML>
* Menggabungkan Sel* Menggabungkan SelHTML juga memungkinkan pembuatan tabel dengan sejumlah HTML juga memungkinkan pembuatan tabel dengan sejumlah baris sel digabungkan.baris sel digabungkan.Untuk menggabungkan beberapa baris sel, bisa digunakan Untuk menggabungkan beberapa baris sel, bisa digunakan atribut ROWSPAN pada tag <TD>, contoh:atribut ROWSPAN pada tag <TD>, contoh:<HTML><HTML><HEAD><HEAD><TITLE>Penggunaan ROWSPAN</TITLE><TITLE>Penggunaan ROWSPAN</TITLE></HEAD></HEAD><BODY><BODY><TABLE BORDER = "1"><TABLE BORDER = "1"><CAPTION>Musisi dan Album</CAPTION><CAPTION>Musisi dan Album</CAPTION><TR><TR><TD ROWSPAN = "3">Bob James</TD><TD ROWSPAN = "3">Bob James</TD><TD>Obsession (1986)</TD><TD>Obsession (1986)</TD></TR></TR><TR><TD>Ivory Coast (1988)</TD></TR><TR><TD>Ivory Coast (1988)</TD></TR><TR><TD>Grand Piano Canyon (1990)</TD></TR><TR><TD>Grand Piano Canyon (1990)</TD></TR><TR><TR><TD ROWSPAN = "4">Earl Klugh</TD><TD ROWSPAN = "4">Earl Klugh</TD><TD>Solo Guitar (1989)</TD><TD>Solo Guitar (1989)</TD></TR></TR>
<TR><TD>Whisper and Promises (1989)</TD></TR><TR><TD>Whisper and Promises (1989)</TD></TR><TR><TD>Move (1993)</TD></TR><TR><TD>Move (1993)</TD></TR><TR><TD>Peculiar Situation (1999)</TD></TR><TR><TD>Peculiar Situation (1999)</TD></TR></TABLE></TABLE></BODY></BODY></HTML></HTML>Untuk menggabungkan beberapa sel dalam satu baris, bisa Untuk menggabungkan beberapa sel dalam satu baris, bisa digunakan atribut COLSPAN pada tag <TH> atau <TD>. digunakan atribut COLSPAN pada tag <TH> atau <TD>. Contoh:Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Penggunaan COLSPAN</TITLE><TITLE>Penggunaan COLSPAN</TITLE></HEAD></HEAD><BODY><BODY><TABLE BORDER = "1"><TABLE BORDER = "1"><CAPTION>Musisi dan Album</CAPTION><CAPTION>Musisi dan Album</CAPTION><TR><TR><TH COLSPAN = "2">Bob James</TH><TH COLSPAN = "2">Bob James</TH></TR></TR>
<TR><TD>Obsession</TD><TD>1986</TD></TR><TR><TD>Obsession</TD><TD>1986</TD></TR><TR><TD>Ivory Coast</TD><TD>1988</TD></TR><TR><TD>Ivory Coast</TD><TD>1988</TD></TR><TR><TD>Grand Piano Canyon</TD><TD>1990</TD></TR><TR><TD>Grand Piano Canyon</TD><TD>1990</TD></TR><TR><TR><TH COLSPAN = "2">Earl Klugh</TH><TH COLSPAN = "2">Earl Klugh</TH></TR></TR><TR><TD>Solo Guitar</TD><TD>1989</TD></TR><TR><TD>Solo Guitar</TD><TD>1989</TD></TR><TR><TD>Whisper and Promises</TD><TD>1989</TD></TR><TR><TD>Whisper and Promises</TD><TD>1989</TD></TR><TR><TD>Move</TD><TD>1993</TD></TR><TR><TD>Move</TD><TD>1993</TD></TR><TR><TD>Peculiar Situation</TD><TD>1999</TD></TR><TR><TD>Peculiar Situation</TD><TD>1999</TD></TR></TABLE></TABLE></BODY></BODY></HTML></HTML>Kode berikut menunjukkan contoh yang menggabungkan Kode berikut menunjukkan contoh yang menggabungkan ROWSPAN dan COLSPANROWSPAN dan COLSPAN
<HTML><HTML><HEAD><HEAD><TITLE>Penggunaan COLSPAN dab ROWSPAN</TITLE><TITLE>Penggunaan COLSPAN dab ROWSPAN</TITLE></HEAD></HEAD><BODY><BODY>
<TABLE BORDER = "1"><TABLE BORDER = "1"><CAPTION>Daftar Wiraniaga</CAPTION><CAPTION>Daftar Wiraniaga</CAPTION><TR><TR><TH COLSPAN = "2" ROWSPAN = "2">WIRANIAGA</TH><TH COLSPAN = "2" ROWSPAN = "2">WIRANIAGA</TH><TH COLSPAN = "3">KOTA</TH><TH COLSPAN = "3">KOTA</TH></TR></TR><TR><TH>Semarang</TH><TR><TH>Semarang</TH><TH>Kudus</TH><TH>Solo</TH><TR><TH>Kudus</TH><TH>Solo</TH><TR><TR><TR><TH ROWSPAN = "2">Jenis Kelamin</TH><TH ROWSPAN = "2">Jenis Kelamin</TH><TH>Pria</TH><TH>Pria</TH><TD>30</TD><TD>20</TD><TD>30</TD><TD>30</TD><TD>20</TD><TD>30</TD></TR></TR><TR><TR><TH>Wanita</TH><TH>Wanita</TH><TD>20</TD><TD>8</TD><TD>18</TD><TD>20</TD><TD>8</TD><TD>18</TD></TR></TR></TABLE></TABLE></BODY></BODY></HTML></HTML>
* Mengatur Peletakan Tabel dalam Halaman* Mengatur Peletakan Tabel dalam HalamanAtribut ALIGN pada tag <TR>, <TH>, dan <TD> dapat Atribut ALIGN pada tag <TR>, <TH>, dan <TD> dapat digunakan untuk mengatur peletakan teks dalam keadaan rata digunakan untuk mengatur peletakan teks dalam keadaan rata kiri, rata kanan, atau rata tengah. Nilai untuk ALIGN adalah kiri, rata kanan, atau rata tengah. Nilai untuk ALIGN adalah sebagai berikut:sebagai berikut:
<HTML><HTML><HEAD><HEAD><TITLE>Penggunaan ALIGN</TITLE><TITLE>Penggunaan ALIGN</TITLE></HEAD></HEAD><BODY><BODY><TABLE BORDER = "1"><TABLE BORDER = "1"><CAPTION>Daftar Wiraniaga</CAPTION> <CAPTION>Daftar Wiraniaga</CAPTION>
ALIGN dan NilainyaALIGN dan Nilainya KeteranganKeteranganALIGN = “LEFT”ALIGN = “LEFT” Teks diatur rata kiriTeks diatur rata kiriALIGN = “CENTER”ALIGN = “CENTER” Teks ditengahkanTeks ditengahkanALIGN = “RIGHT”ALIGN = “RIGHT” Teks diatur rata kananTeks diatur rata kanan
<TR><TR><TH COLSPAN = "2" ROWSPAN = "2">WIRANIAGA</TH><TH COLSPAN = "2" ROWSPAN = "2">WIRANIAGA</TH><TH COLSPAN = "3">KOTA</TH><TH COLSPAN = "3">KOTA</TH></TR></TR><TR><TH>Semarang</TH><TR><TH>Semarang</TH><TH>Kudus</TH><TH>Solo</TH><TR><TH>Kudus</TH><TH>Solo</TH><TR><TR><TR><TH ROWSPAN = "2">Jenis Kelamin</TH><TH ROWSPAN = "2">Jenis Kelamin</TH><TH>Pria</TH><TH>Pria</TH><TD ALIGN = "RIGHT">30</TD><TD ALIGN = "RIGHT">30</TD><TD ALIGN = "RIGHT">20</TD><TD ALIGN = "RIGHT">20</TD><TD ALIGN = "RIGHT">30</TD><TD ALIGN = "RIGHT">30</TD></TR></TR><TR><TR><TH>Wanita</TH><TH>Wanita</TH><TD ALIGN = "RIGHT">20</TD><TD ALIGN = "RIGHT">20</TD><TD ALIGN = "RIGHT">8</TD><TD ALIGN = "RIGHT">8</TD><TD ALIGN = "RIGHT">18</TD><TD ALIGN = "RIGHT">18</TD></TR></TR></TABLE></TABLE></BODY></BODY></HTML></HTML>
* Mengatur Lebar Tabel* Mengatur Lebar TabelAtribut WIDTH pada tag <TABLE> dapat digunakan untuk Atribut WIDTH pada tag <TABLE> dapat digunakan untuk mengatur lebar tabel tanpa tergantung oleh ukuran jendela mengatur lebar tabel tanpa tergantung oleh ukuran jendela browser. Contoh:browser. Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Penggunaan WIDTH</TITLE><TITLE>Penggunaan WIDTH</TITLE></HEAD></HEAD><BODY><BODY><TABLE BORDER = "1"><TABLE BORDER = "1"><CAPTION>Tanpa WIDTH</CAPTION><CAPTION>Tanpa WIDTH</CAPTION><TR><TD>ABC</TD><TD>DEF</TD></TR><TR><TD>ABC</TD><TD>DEF</TD></TR><TR><TD>GHI</TD><TD>JKL</TD></TR><TR><TD>GHI</TD><TD>JKL</TD></TR></TABLE></TABLE><BR><BR><TABLE BORDER = "1" WIDTH = "200"><TABLE BORDER = "1" WIDTH = "200"><CAPTION>Dengan WIDTH</CAPTION><CAPTION>Dengan WIDTH</CAPTION><TR><TD>ABC</TD><TD>DEF</TD></TR><TR><TD>ABC</TD><TD>DEF</TD></TR><TR><TD>GHI</TD><TD>JKL</TD></TR><TR><TD>GHI</TD><TD>JKL</TD></TR></TABLE></TABLE></BODY></BODY></HTML></HTML>
Contoh berikut menunjukkan penggunaan lebar dalam satuan Contoh berikut menunjukkan penggunaan lebar dalam satuan persen.persen.
<HTML><HTML><HEAD><HEAD><TITLE>Penggunaan WIDTH dengan %</TITLE><TITLE>Penggunaan WIDTH dengan %</TITLE></HEAD></HEAD><BODY><BODY><TABLE BORDER = "1" WIDTH = "75%"><TABLE BORDER = "1" WIDTH = "75%"><CAPTION>Dengan WIDTH</CAPTION><CAPTION>Dengan WIDTH</CAPTION><TR><TD>ABC</TD><TD>DEF</TD></TR><TR><TD>ABC</TD><TD>DEF</TD></TR><TR><TD>GHI</TD><TD>JKL</TD></TR><TR><TD>GHI</TD><TD>JKL</TD></TR></TABLE></TABLE></BODY></BODY></HTML></HTML>WIDTH juga dapat digunakan pada sel tertentu, dengan cara WIDTH juga dapat digunakan pada sel tertentu, dengan cara menyebutkan pada tag <TD> atau <TH>, contoh:menyebutkan pada tag <TD> atau <TH>, contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Penggunaan WIDTH pada Tag TD</TITLE><TITLE>Penggunaan WIDTH pada Tag TD</TITLE></HEAD></HEAD><BODY><BODY><TABLE BORDER = "1"><TABLE BORDER = "1"><TR><TD WIDTH = "200">ABC</TD><TD>DEF</TD></TR><TR><TD WIDTH = "200">ABC</TD><TD>DEF</TD></TR><TR><TD>GHI</TD><TD>JKL</TD></TR><TR><TD>GHI</TD><TD>JKL</TD></TR></TABLE></TABLE></BODY></BODY></HTML></HTML>
Seperti halnya pada tag <TABLE>, nilai <WIDTH> pada tag <TD> Seperti halnya pada tag <TABLE>, nilai <WIDTH> pada tag <TD> juga bisa berupa %. Contoh:juga bisa berupa %. Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Penggunaan WIDTH pada Tag TD</TITLE><TITLE>Penggunaan WIDTH pada Tag TD</TITLE></HEAD></HEAD><BODY><BODY><TABLE BORDER = "1" WIDTH = "75%"><TABLE BORDER = "1" WIDTH = "75%"><TR><TD WIDTH = "30%">ABC</TD><TD>DEF</TD></TR><TR><TD WIDTH = "30%">ABC</TD><TD>DEF</TD></TR><TR><TD>GHI</TD><TD>JKL</TD></TR><TR><TD>GHI</TD><TD>JKL</TD></TR></TABLE></TABLE></BODY></BODY></HTML></HTML>
MEMBUAT LINKMEMBUAT LINKUmumnya halaman web mempunyai Umumnya halaman web mempunyai linklink atau atau hyperlinkhyperlink (penghubung) ke halaman-halaman web yang lain. Untuk (penghubung) ke halaman-halaman web yang lain. Untuk membuat link ke halaman lain bisa digunakan pasangan tag membuat link ke halaman lain bisa digunakan pasangan tag <A>...</A> atau yang biasa disebut <A>...</A> atau yang biasa disebut tag jangkartag jangkar atau atau anchor anchor tag. tag. Bentuk paling sederhana penggunaan tag jangkar adalah Bentuk paling sederhana penggunaan tag jangkar adalah sebagai berikut:sebagai berikut:<A HREF = “URL”>Label</A><A HREF = “URL”>Label</A>Dalam hal ini, URL (Dalam hal ini, URL (Uniform Resource LocatorUniform Resource Locator) dapat berupa ) dapat berupa alamat suatu dokumen web, berkas grafik, ataupun alamat suatu dokumen web, berkas grafik, ataupun menyatakan suatu protokol lain (misalnya FTP). Contoh menyatakan suatu protokol lain (misalnya FTP). Contoh sederhana berupa nama berkas HTML. Contoh:sederhana berupa nama berkas HTML. Contoh:
halx.htmlhalx.html
<HTML><HTML><HEAD><HEAD><TITLE>Halaman X</TITLE><TITLE>Halaman X</TITLE></HEAD></HEAD><BODY><BODY><H1>Halaman X</H2><H1>Halaman X</H2></BODY></BODY></HTML></HTML>
haly.htmlhaly.html
<HTML><HTML><HEAD><HEAD><TITLE>Halaman Y</TITLE><TITLE>Halaman Y</TITLE></HEAD></HEAD><BODY><BODY><H1>Halaman Y</H2><H1>Halaman Y</H2></BODY></BODY></HTML></HTML>Halutama.htmlHalutama.html
<HTML><HTML><HEAD><HEAD><TITLE>Halaman Utama</TITLE><TITLE>Halaman Utama</TITLE></HEAD></HEAD><BODY><BODY><H1>Halaman Utama</H1><H1>Halaman Utama</H1>Silakan klik pada link-link berikut:<BR>Silakan klik pada link-link berikut:<BR><A HREF = "halx.htm">Halaman X</A><BR><A HREF = "halx.htm">Halaman X</A><BR><A HREF = "haly.htm">Halaman Y</A><BR><A HREF = "haly.htm">Halaman Y</A><BR></BODY></BODY></HTML></HTML>
* Link ke Situs Web Lain* Link ke Situs Web LainHyperlink seringkali ditujukan ke situs web lain yang berada di Hyperlink seringkali ditujukan ke situs web lain yang berada di sebarang web server. Contoh:sebarang web server. Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Link ke Beberapa Web</TITLE><TITLE>Link ke Beberapa Web</TITLE></HEAD></HEAD><BODY><BODY><CENTER><CENTER><H1>Situs Link</H1><H1>Situs Link</H1><BR><BR><A HREF = "http://uqifumi.wordpress.com"><A HREF = "http://uqifumi.wordpress.com"> Blog Uqifumi</A><BR>Blog Uqifumi</A><BR><A HREF = "http://informatika.uin-malang.ac.id"><A HREF = "http://informatika.uin-malang.ac.id"> Website TI UIN Maliki Malang</A><BR>Website TI UIN Maliki Malang</A><BR><A HREF = "http://saintek.uin-malang.ac.id"><A HREF = "http://saintek.uin-malang.ac.id"> Website Fak. Saintek UIN Maliki Malang</A><BR>Website Fak. Saintek UIN Maliki Malang</A><BR><A HREF = "http://www.uin-malang.ac.id"><A HREF = "http://www.uin-malang.ac.id"> Website UIN Maliki Malang</A><BR>Website UIN Maliki Malang</A><BR></CENTER></CENTER></BODY></BODY></HTML></HTML>
* Link dengan Gambar* Link dengan GambarSebuah gambar bisa dijadikan sebagai link ke halaman lain. Sebuah gambar bisa dijadikan sebagai link ke halaman lain. Caranya adalah dengan menyebutkan tag <IMG> di antara Caranya adalah dengan menyebutkan tag <IMG> di antara pasangan tag <A> dan </A>. Contoh:pasangan tag <A> dan </A>. Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Link dengan Gambar</TITLE><TITLE>Link dengan Gambar</TITLE></HEAD></HEAD><BODY><BODY>Klik Klik <A HREF = "pingu.jpg"><A HREF = "pingu.jpg"><IMG SRC = "pingukecil.jpg"></A><IMG SRC = "pingukecil.jpg"></A><BR>untuk melihat citra yang lebih besar<BR>untuk melihat citra yang lebih besar</BODY></BODY></HTML></HTML>
* Membuka Jendela Baru* Membuka Jendela BaruKadangkala dikehendaki agar kalau suatu link diklik maka Kadangkala dikehendaki agar kalau suatu link diklik maka jendela baru akan ditampilkan untuk menampung halaman jendela baru akan ditampilkan untuk menampung halaman yang di-link. Hal ini bisa dikerjakan dengan menambahkan yang di-link. Hal ini bisa dikerjakan dengan menambahkan kode:kode:
TARGET = “_blank”TARGET = “_blank”
pada tag <A>. Contoh:pada tag <A>. Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Menu Utama</TITLE><TITLE>Menu Utama</TITLE></HEAD></HEAD><BODY><BODY><H1>Menu Utama</H1><H1>Menu Utama</H1>Silakan klik pada link-link berikut:<BR>Silakan klik pada link-link berikut:<BR><A HREF = "halx.htm" TARGET = "_blank"><A HREF = "halx.htm" TARGET = "_blank"> Halaman X</A><BR>Halaman X</A><BR><A HREF = "haly.htm" TARGET = "_blank"><A HREF = "haly.htm" TARGET = "_blank"> Halaman Y</A><BR>Halaman Y</A><BR></BODY></BODY></HTML></HTML>
MENGGUNAKAN FORMULIRMENGGUNAKAN FORMULIR
* Dasar Penggunaan Formulir* Dasar Penggunaan FormulirFormulir dibentuk dengan menggunakan pasangan tag <FORM> Formulir dibentuk dengan menggunakan pasangan tag <FORM> dan </FORM>. Dua atribut yang umum digunakan pada tag dan </FORM>. Dua atribut yang umum digunakan pada tag <FORM> berupa ACTION dan METHOD<FORM> berupa ACTION dan METHOD
● ACTION menentukan URL yang akan dijalankan dan menerima ACTION menentukan URL yang akan dijalankan dan menerima semua masukan pada formulir. Jika ACTION tidak disebutkan, semua masukan pada formulir. Jika ACTION tidak disebutkan, informasi akan dikirim ke URL yang sama dengan halaman informasi akan dikirim ke URL yang sama dengan halaman web itu sendiri.web itu sendiri.
● METHOD digunakan untuk menentukan bagaimana informasi METHOD digunakan untuk menentukan bagaimana informasi dikirim ke URL yang disebutkan dalam ACTION. Nilai yang dikirim ke URL yang disebutkan dalam ACTION. Nilai yang umum untuk atribut ini berupa GET dan POST. POST membuat umum untuk atribut ini berupa GET dan POST. POST membuat informasi dikirim secara terpisah dengan URL, sedangkan GET informasi dikirim secara terpisah dengan URL, sedangkan GET akan membuat informasi dikirim menjadi satu dengan URL.akan membuat informasi dikirim menjadi satu dengan URL.
● Penggalan kode berikut menunjukkan contoh penggunaan Penggalan kode berikut menunjukkan contoh penggunaan pasangan tag <FORM> dan </FORM>pasangan tag <FORM> dan </FORM>
<FORM ACTION = “info.htm” METHOD = “POST”><FORM ACTION = “info.htm” METHOD = “POST”>……</FORM></FORM>
* Memasukkan Data dengan INPUT* Memasukkan Data dengan INPUT
Tag <INPUT> digunakan untuk melakukan pemasukan data. Tag <INPUT> digunakan untuk melakukan pemasukan data. Letaknya berada dalam pasangan tag <FORM> dan </FORM>. Letaknya berada dalam pasangan tag <FORM> dan </FORM>. Ada bermacam-macam tipe pemasukan data, antara lain Ada bermacam-macam tipe pemasukan data, antara lain berupa kotak teks, kotak password, tombol radio, kotak cek, berupa kotak teks, kotak password, tombol radio, kotak cek, serta tombol SUBMIT dan RESET.serta tombol SUBMIT dan RESET.
Tag <INPUT> memiliki sejumlah atribut.Tag <INPUT> memiliki sejumlah atribut.
AtributAtribut KeteranganKeteranganNAMENAME Menentukan nama data. Atribut ini diperlukan oleh Menentukan nama data. Atribut ini diperlukan oleh
semua jenis masukan, kecuali SUBMIT dan RESETsemua jenis masukan, kecuali SUBMIT dan RESETSIZESIZE Menentukan ukuran kotak masukan yang tampil untuk Menentukan ukuran kotak masukan yang tampil untuk
teks dan passwordteks dan passwordMAXLENGTHMAXLENGTH Menentukan jumlah karakter yang dapat dimasukkan Menentukan jumlah karakter yang dapat dimasukkan
dalam kotak password dan kotak teksdalam kotak password dan kotak teksVALUEVALUE Menentukan nilai awal untuk kotak masukanMenentukan nilai awal untuk kotak masukanCHECKEDCHECKED Mengatur agar kotak cek dalam keadaan terpilih pada Mengatur agar kotak cek dalam keadaan terpilih pada
keadaan awalkeadaan awalTYPETYPE Menentukan tipe kotak masukanMenentukan tipe kotak masukan
* Tipe Text* Tipe TextSalah satu tipe pemasukan data yang umum digunakan yaitu Salah satu tipe pemasukan data yang umum digunakan yaitu tipe TEXT, yang digunakan untuk memasukkan teks; misalnya tipe TEXT, yang digunakan untuk memasukkan teks; misalnya alamat seseorang. Contoh:alamat seseorang. Contoh:
<INPUT TYPE = “TEXT” NAME = “alamat”<INPUT TYPE = “TEXT” NAME = “alamat” SIZE = “35” MAXLENGTH = “35”>SIZE = “35” MAXLENGTH = “35”>Pada contoh di atas, field teks yang dibentuk diberi nama Pada contoh di atas, field teks yang dibentuk diberi nama alamat, dengan panjang tampilan sebanyak 35 karakter dan alamat, dengan panjang tampilan sebanyak 35 karakter dan jumlah maksimal yang dapat diisi oleh pemakai sebesar 35 jumlah maksimal yang dapat diisi oleh pemakai sebesar 35 buah. Nilai yang ditampilkan pada field teks berupa string buah. Nilai yang ditampilkan pada field teks berupa string kosong.kosong.Dengan menggunakan atribut VALUE pada tag <INPUT>, field Dengan menggunakan atribut VALUE pada tag <INPUT>, field teks dapat diberi nilai bawaan. Contoh:teks dapat diberi nilai bawaan. Contoh:
<INPUT TYPE = “TEXT” NAME = “alamat”<INPUT TYPE = “TEXT” NAME = “alamat” SIZE = “35” MAXLENGTH = “35”SIZE = “35” MAXLENGTH = “35” VALUE = “Isi dengan alamat Anda”>VALUE = “Isi dengan alamat Anda”>Nilai bawaan untuk field teks tersebut (jika VALUE tidak Nilai bawaan untuk field teks tersebut (jika VALUE tidak disebutkan) berupa string kosong.disebutkan) berupa string kosong.
* Tombol Submit dan Reset* Tombol Submit dan ResetTombol SUBMIT pada tag <INPUT> akan membentuk tombol Tombol SUBMIT pada tag <INPUT> akan membentuk tombol Submit, yaitu tombol yang menyebabkan URL yang disebutkan Submit, yaitu tombol yang menyebabkan URL yang disebutkan pada ACTION pada tag <FORM>akan dimuat atau dijalankan. pada ACTION pada tag <FORM>akan dimuat atau dijalankan. Contoh:Contoh:
<INPUT TYPE = “SUBMIT”><INPUT TYPE = “SUBMIT”>
Dalam hal ini tombol akan ditampilkan dengan tulisan “Submit Dalam hal ini tombol akan ditampilkan dengan tulisan “Submit Query”. Jika tulisan seperti ini tidak dikehendaki, Anda perlu Query”. Jika tulisan seperti ini tidak dikehendaki, Anda perlu menyebutkan pada atribut VALUE. Contoh:menyebutkan pada atribut VALUE. Contoh:
<INPUT TYPE = “SUBMIT” VALUE = “Kirim”><INPUT TYPE = “SUBMIT” VALUE = “Kirim”>
Pada contoh ini, tombol akan dilengkapi dengan tulisan Kirim.Pada contoh ini, tombol akan dilengkapi dengan tulisan Kirim.
Adapun tombol Reset berfungsi untuk mengosongkan atau Adapun tombol Reset berfungsi untuk mengosongkan atau mengembalikan nilai field teks ke nilai bawaan.mengembalikan nilai field teks ke nilai bawaan.
Contoh:Contoh:
entritek.htmlentritek.html<HTML><HTML><HEAD><HEAD><TITLE>Contoh Penggunaan Formulir</TITLE><TITLE>Contoh Penggunaan Formulir</TITLE></HEAD></HEAD><BODY><BODY><FORM ACTION = "info.htm" METHOD = "POST"><FORM ACTION = "info.htm" METHOD = "POST"> Nama :Nama : <INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20"<INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20" MAXLENGTH = "20">MAXLENGTH = "20"> <BR><BR> E-mail :E-mail : <INPUT TYPE = "TEXT" NAME = "email" SIZE = "35"<INPUT TYPE = "TEXT" NAME = "email" SIZE = "35" MAXLENGTH = "35">MAXLENGTH = "35"> <BR><BR> <INPUT TYPE = "SUBMIT" VALUE = "Kirim"><INPUT TYPE = "SUBMIT" VALUE = "Kirim"> <INPUT TYPE = "RESET" VALUE = "Kosongkan"><INPUT TYPE = "RESET" VALUE = "Kosongkan"></FORM></FORM></BODY></BODY></HTML></HTML>Klik tombol “Kosongkan”. Apa yang terjadi? Apabila Anda klik Klik tombol “Kosongkan”. Apa yang terjadi? Apabila Anda klik tombol “Kirim”, maka akan terjadi error, karena kita belum tombol “Kirim”, maka akan terjadi error, karena kita belum menuliskan kode menuliskan kode info.htmlinfo.html..
Sekarang kita ketikkankode untuk info.html seperti berikut:Sekarang kita ketikkankode untuk info.html seperti berikut:
info.htmlinfo.html<HTML><HTML><HEAD><HEAD><TITLE></TITLE><TITLE></TITLE></HEAD></HEAD><BODY><BODY>InfoInfo</BODY></BODY></HTML></HTML>
Tak ada yang spesial pada kode di atas, kecuali untuk Tak ada yang spesial pada kode di atas, kecuali untuk menunjukkan bahwa jika tombol “Submit” diklik maka berkas menunjukkan bahwa jika tombol “Submit” diklik maka berkas HTML yang disebutkan dalam atribut ACTION pada tag <FORM> HTML yang disebutkan dalam atribut ACTION pada tag <FORM> akan dimuat. Di depan, dengan PHP dan JSP kita akan akan dimuat. Di depan, dengan PHP dan JSP kita akan mengetahui bagaimana menangkap nilai-nilai yang dimasukkan mengetahui bagaimana menangkap nilai-nilai yang dimasukkan pada kedua field teks di di atas.pada kedua field teks di di atas.
* Perbedaaan GET dan POST* Perbedaaan GET dan POSTSupaya lebih jelas, perbedaan ini akan diperlihatkan dalam Supaya lebih jelas, perbedaan ini akan diperlihatkan dalam bentuk contoh. Pada contoh entritek.html, ketika Anda mengklik bentuk contoh. Pada contoh entritek.html, ketika Anda mengklik tombol “Kirim”, berkas info.html dimuat. Tampak bahwa tombol “Kirim”, berkas info.html dimuat. Tampak bahwa informasi yang dikirimkan dari entritek.htm tidak tertampil pada informasi yang dikirimkan dari entritek.htm tidak tertampil pada URL.URL.
Sekarang marilah kita ganti POST dalam kode entritek.html Sekarang marilah kita ganti POST dalam kode entritek.html dengan GET:dengan GET:
<HTML><HTML><HEAD><HEAD><TITLE>Contoh Penggunaan Formulir</TITLE><TITLE>Contoh Penggunaan Formulir</TITLE></HEAD></HEAD><BODY><BODY><FORM ACTION = "info.html" METHOD = "GET"><FORM ACTION = "info.html" METHOD = "GET"> Nama :Nama : <INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20"<INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20" MAXLENGTH = "20">MAXLENGTH = "20"> <BR><BR> E-mail :E-mail : <INPUT TYPE = "TEXT" NAME = "email" SIZE = "35"<INPUT TYPE = "TEXT" NAME = "email" SIZE = "35" MAXLENGTH = "35">MAXLENGTH = "35">
<BR><BR> <INPUT TYPE = "SUBMIT" VALUE = "Kirim"><INPUT TYPE = "SUBMIT" VALUE = "Kirim"> <INPUT TYPE = "RESET" VALUE = "Kosongkan"><INPUT TYPE = "RESET" VALUE = "Kosongkan"></FORM></FORM></BODY></BODY></HTML></HTML>
Perhatikan bahwa nama field teks dan nilainya diikutkan pada Perhatikan bahwa nama field teks dan nilainya diikutkan pada URL. Gunakan POST untuk penggunaan yang melibatkan data URL. Gunakan POST untuk penggunaan yang melibatkan data password. Mengapa?password. Mengapa?
* Tipe Password* Tipe PasswordTipe PASSWORD yang disebutkan pada atribut TYPE pada tag Tipe PASSWORD yang disebutkan pada atribut TYPE pada tag <INPUT> akan membuat setiap karakter yang diketikkan oleh <INPUT> akan membuat setiap karakter yang diketikkan oleh pemakai pada field ini disembunyikan (misalnya diganti dengan pemakai pada field ini disembunyikan (misalnya diganti dengan tanda * untuk setiap karakter yang diketikkan pemakai). tanda * untuk setiap karakter yang diketikkan pemakai). Contoh:Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Contoh Penggunaan Formulir</TITLE><TITLE>Contoh Penggunaan Formulir</TITLE></HEAD></HEAD><BODY><BODY><FORM><FORM> Nama pemakai :Nama pemakai : <INPUT TYPE = "TEXT" NAME = "pemakai" <INPUT TYPE = "TEXT" NAME = "pemakai" SIZE = "8" MAXLENGTH = "8">SIZE = "8" MAXLENGTH = "8"> <BR><BR> Password :Password : <INPUT TYPE = "PASSWORD" NAME = "password" <INPUT TYPE = "PASSWORD" NAME = "password" SIZE = "8" MAXLENGTH = "8">SIZE = "8" MAXLENGTH = "8"> <BR><BR> <INPUT TYPE = "SUBMIT" VALUE = "Kirim"><INPUT TYPE = "SUBMIT" VALUE = "Kirim"> <INPUT TYPE = "RESET" VALUE = "Kosongkan"><INPUT TYPE = "RESET" VALUE = "Kosongkan"></FORM></FORM></BODY></BODY></HTML></HTML>Pada kode di atas, field untuk memasukkan password (TYPE = Pada kode di atas, field untuk memasukkan password (TYPE = “PASSWORD”) diatur dengan panjang tampilan sebanyak 8 “PASSWORD”) diatur dengan panjang tampilan sebanyak 8 karakter dan dengan jumlah karakter yang bisa dimasukkan 8 karakter dan dengan jumlah karakter yang bisa dimasukkan 8 karakter.karakter.
* Tipe CHECKBOX* Tipe CHECKBOXTipe CHECKBOX berguna untuk membuat kotak cek. Kotak cek Tipe CHECKBOX berguna untuk membuat kotak cek. Kotak cek adalah suatu bentuk masukan yang memungkinkan pemakai adalah suatu bentuk masukan yang memungkinkan pemakai mencentang atau tidak mencentang pada kotak tersebut mencentang atau tidak mencentang pada kotak tersebut dengan cara klik mouse pada saat penunjuk mouse menunjuk dengan cara klik mouse pada saat penunjuk mouse menunjuk kotak cek.kotak cek.Kotak cek paling tidak melibatkan atribut NAME. Adapun atribut Kotak cek paling tidak melibatkan atribut NAME. Adapun atribut CHECKED bersifat opsional, yang digunakan untuk memberi CHECKED bersifat opsional, yang digunakan untuk memberi nilai awal berupa tanda centang.nilai awal berupa tanda centang.Contoh:Contoh:<HTML><HTML><HEAD><HEAD><TITLE>Contoh Penggunaan Formulir</TITLE><TITLE>Contoh Penggunaan Formulir</TITLE></HEAD></HEAD><BODY><BODY><FORM><FORM> Bahasa yang Anda sukai:<BR>Bahasa yang Anda sukai:<BR> <INPUT TYPE = "CHECKBOX" <INPUT TYPE = "CHECKBOX" NAME = "inggris" CHECKED>Inggris<BR>NAME = "inggris" CHECKED>Inggris<BR> <INPUT TYPE = "CHECKBOX" <INPUT TYPE = "CHECKBOX" NAME = "jerman">Jerman<BR>NAME = "jerman">Jerman<BR> <INPUT TYPE = "CHECKBOX" <INPUT TYPE = "CHECKBOX" NAME = "jepang">Jepang<BR>NAME = "jepang">Jepang<BR>
<INPUT TYPE = "CHECKBOX" <INPUT TYPE = "CHECKBOX" NAME = "mandarin">Mandarin<BR>NAME = "mandarin">Mandarin<BR> <BR><BR></FORM></FORM></BODY></BODY></HTML></HTML>* Tombol Radio* Tombol RadioTombol radio digunakan dalam bentuk 2 tombol atau lebih yang Tombol radio digunakan dalam bentuk 2 tombol atau lebih yang memungkinkan pemakai hanya memilih satu dari sekian tombol memungkinkan pemakai hanya memilih satu dari sekian tombol yang disajikan. Tombol radio diimplementasikan dengan yang disajikan. Tombol radio diimplementasikan dengan menggunakan tag <INPUT> dengan atribut TYPE diberi nilai menggunakan tag <INPUT> dengan atribut TYPE diberi nilai “RADIO”. Untuk membentuk sekelompok radio yang “RADIO”. Untuk membentuk sekelompok radio yang menyatakan sebuah pilihan, atribut NAME perlu diisi dengan menyatakan sebuah pilihan, atribut NAME perlu diisi dengan nama yang sama.nama yang sama.Salah satu tombol radio bisa dilengkapi dengan atribut Salah satu tombol radio bisa dilengkapi dengan atribut CHECKED, yang menyatakan bahwa tombol itulah yang menjadi CHECKED, yang menyatakan bahwa tombol itulah yang menjadi nilai bawaan.nilai bawaan.Atribut VALUE untuk menentukan nilai terhadap nama data Atribut VALUE untuk menentukan nilai terhadap nama data sekiranya tombol bersangkutan diklik.sekiranya tombol bersangkutan diklik.Contoh:Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Contoh Penggunaan Formulir</TITLE><TITLE>Contoh Penggunaan Formulir</TITLE></HEAD></HEAD><BODY><BODY><FORM><FORM> Jenis Kelamin:<BR>Jenis Kelamin:<BR> <INPUT TYPE = "RADIO" <INPUT TYPE = "RADIO" NAME = "sex" CHECKED>Pria<BR>NAME = "sex" CHECKED>Pria<BR> <INPUT TYPE = "RADIO" <INPUT TYPE = "RADIO" NAME = "sex">Wanita<BR>NAME = "sex">Wanita<BR> <BR><BR> <HR><HR> Hari Latihan :<BR>Hari Latihan :<BR> <INPUT TYPE = "RADIO" <INPUT TYPE = "RADIO" NAME = "hari" VALUE "1">Senin<BR>NAME = "hari" VALUE "1">Senin<BR> <INPUT TYPE = "RADIO" <INPUT TYPE = "RADIO" NAME = "hari" VALUE "2">Selasa<BR>NAME = "hari" VALUE "2">Selasa<BR> <INPUT TYPE = "RADIO" <INPUT TYPE = "RADIO" NAME = "hari" VALUE "3">Rabu<BR>NAME = "hari" VALUE "3">Rabu<BR> <INPUT TYPE = "RADIO" <INPUT TYPE = "RADIO" NAME = "hari" VALUE "4">Kamis<BR>NAME = "hari" VALUE "4">Kamis<BR> <INPUT TYPE = "RADIO" <INPUT TYPE = "RADIO" NAME = "hari" VALUE "5">Jumat<BR>NAME = "hari" VALUE "5">Jumat<BR> <BR><BR></FORM></FORM></BODY></BODY></HTML></HTML>
* Masukan dengan TEXTAREA* Masukan dengan TEXTAREAPasangan tag <TEXTAREA> dan </TEXTAREA> berguna untuk Pasangan tag <TEXTAREA> dan </TEXTAREA> berguna untuk membentuk suatu masukan yang panjang yang bisa mencakup membentuk suatu masukan yang panjang yang bisa mencakup banyak baris. Atribut-atribut yang digunakan pada tag banyak baris. Atribut-atribut yang digunakan pada tag <TEXTAREA> adalah sebagai berikut:<TEXTAREA> adalah sebagai berikut:
Contoh:Contoh:
AtributAtribut KeteranganKeteranganNAMENAME Menentukan nama untuk textareaMenentukan nama untuk textareaROWSROWS Menentukan jumlah baris yang tampil pada Menentukan jumlah baris yang tampil pada
layarlayarCOLSCOLS Menentukan jumlah kolom yang tampil di Menentukan jumlah kolom yang tampil di
layarlayar
<HTML><HTML><HEAD><HEAD><TITLE>Contoh Penggunaan Formulir</TITLE><TITLE>Contoh Penggunaan Formulir</TITLE></HEAD></HEAD><BODY><BODY><FORM><FORM> Komentar Anda:<BR>Komentar Anda:<BR> <TEXTAREA NAME = "komentar" <TEXTAREA NAME = "komentar" ROWS = "5" COLS = "40"ROWS = "5" COLS = "40" </TEXTAREA></TEXTAREA> <BR><BR></FORM></FORM></BODY></BODY></HTML></HTML>* Pemilihan dengan SELECT* Pemilihan dengan SELECTDengan menggunakan tag <SELECT> dan </SELECT>, Anda Dengan menggunakan tag <SELECT> dan </SELECT>, Anda bisa membentuk kotak kombo (bisa membentuk kotak kombo (drop-downdrop-down) atau daftar pilihan, ) atau daftar pilihan, tergantung dari pengaturan tag <SELECT>. Contoh:tergantung dari pengaturan tag <SELECT>. Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Contoh SELECT - Model Drop Down</TITLE><TITLE>Contoh SELECT - Model Drop Down</TITLE></HEAD></HEAD><BODY><BODY><FORM><FORM> Buah yang paling Anda sukai:<BR>Buah yang paling Anda sukai:<BR> <SELECT NAME = "buah"><SELECT NAME = "buah"> <OPTION VALUE = "Jeruk">Jeruk<OPTION VALUE = "Jeruk">Jeruk <OPTION VALUE = "Apel">Apel<OPTION VALUE = "Apel">Apel <OPTION VALUE = "Manggis">Manggis<OPTION VALUE = "Manggis">Manggis <OPTION VALUE = "Melon">Melon<OPTION VALUE = "Melon">Melon <OPTION VALUE = "Lain" SELECTED>Yang Lain<OPTION VALUE = "Lain" SELECTED>Yang Lain </SELECT></SELECT> <BR><BR></FORM></FORM></BODY></BODY></HTML></HTML>
Pada kode di atas, digunakan untuk membentuk kotak kombo Pada kode di atas, digunakan untuk membentuk kotak kombo dengan 5 pilihan. Masing-masing pilihan ditentukan melalui tag dengan 5 pilihan. Masing-masing pilihan ditentukan melalui tag <OPTION>. Nilai pada VALUE menyatakan nilai-nilai pada <OPTION>. Nilai pada VALUE menyatakan nilai-nilai pada pilihan. Atribut SELECTED pada tag <OPTION>menyatakan nilai pilihan. Atribut SELECTED pada tag <OPTION>menyatakan nilai bawaan.bawaan.
Dengan menambahkan atribut SIZE dengan bentukDengan menambahkan atribut SIZE dengan bentuk
SIZE = “angka”SIZE = “angka”
Dengan nilai pada “angka” lebih dari satu, bisa diatur agar Dengan nilai pada “angka” lebih dari satu, bisa diatur agar tampilan SELECT berupa daftar pilihan (bukan kotak kombo). tampilan SELECT berupa daftar pilihan (bukan kotak kombo). Contoh:Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Contoh SELECT - Model Drop Down</TITLE><TITLE>Contoh SELECT - Model Drop Down</TITLE></HEAD></HEAD><BODY><BODY><FORM><FORM> Buah yang paling Anda sukai:<BR>Buah yang paling Anda sukai:<BR> <SELECT NAME = "buah" SIZE = "3"><SELECT NAME = "buah" SIZE = "3"> <OPTION VALUE = "Jeruk">Jeruk<OPTION VALUE = "Jeruk">Jeruk <OPTION VALUE = "Apel">Apel<OPTION VALUE = "Apel">Apel <OPTION VALUE = "Manggis">Manggis<OPTION VALUE = "Manggis">Manggis <OPTION VALUE = "Melon">Melon<OPTION VALUE = "Melon">Melon <OPTION VALUE = "Lain" SELECTED>Yang Lain<OPTION VALUE = "Lain" SELECTED>Yang Lain </SELECT></SELECT> <BR><BR></FORM></FORM></BODY></BODY></HTML></HTML>
* Lebih Lanjut Tentang Tombol (Button)* Lebih Lanjut Tentang Tombol (Button)Anda telah mengenal dua buah tombol, yaitu Submit dan Reset. Anda telah mengenal dua buah tombol, yaitu Submit dan Reset. Dengan menggunakan tag <INPUT> Anda juga dapat membuat Dengan menggunakan tag <INPUT> Anda juga dapat membuat tombol sendiri dengan fungsi yang berbeda dengan kedua tombol sendiri dengan fungsi yang berbeda dengan kedua tombol yang telah dibahas.tombol yang telah dibahas.Untuk membuat tombol, berikan nilai “BUTTON” pada atribut Untuk membuat tombol, berikan nilai “BUTTON” pada atribut TYPE. Contoh:TYPE. Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Contoh BUTTON</TITLE><TITLE>Contoh BUTTON</TITLE></HEAD></HEAD><BODY><BODY><FORM><FORM> Cobalah untuk mengklik tombol berikut<BR>Cobalah untuk mengklik tombol berikut<BR> <INPUT TYPE = "BUTTON" VALUE = "Ke Sebelumnya"<INPUT TYPE = "BUTTON" VALUE = "Ke Sebelumnya" ONCLICK = "self.history.back();" >ONCLICK = "self.history.back();" > <BR><BR></FORM></FORM></BODY></BODY></HTML></HTML>
kode di atas digunakan untuk mendefinisikan tombol dengan kode di atas digunakan untuk mendefinisikan tombol dengan judul “Ke Sebelumnya”. ONCLICK digunakan untuk menangani judul “Ke Sebelumnya”. ONCLICK digunakan untuk menangani kejadian sekiranya tombol diklik. Dalam hal ini, kode kejadian sekiranya tombol diklik. Dalam hal ini, kode “self.history.back();”“self.history.back();” dimaksudkan agar halaman dimaksudkan agar halaman sebelumnya ditampilkan.sebelumnya ditampilkan.
* Mengatur Tampilan Pemasukan Data* Mengatur Tampilan Pemasukan DataSeringkali tabel dilibatkan dalam formulir dengan tujuan untuk Seringkali tabel dilibatkan dalam formulir dengan tujuan untuk membentuk deretan pemasukan data yang tertata rapi. Contoh:membentuk deretan pemasukan data yang tertata rapi. Contoh:
<HTML><HTML><HEAD><HEAD><TITLE>Tabel dan Formulir</TITLE><TITLE>Tabel dan Formulir</TITLE></HEAD></HEAD><BODY><BODY><FORM><FORM> <CENTER><CENTER> <TABLE BORDER = "1"><TABLE BORDER = "1"> <TR><TR> <TD>Nama:</TD><TD>Nama:</TD> <TD><INPUT TYPE = "TEXT" MAXLENGTH = "25"</TD><TD><INPUT TYPE = "TEXT" MAXLENGTH = "25"</TD> </TR></TR> <TR><TR> <TD>Usia (tahun):</TD><TD>Usia (tahun):</TD> <TD><TD> <INPUT TYPE = "RADIO" <INPUT TYPE = "RADIO" NAME = "usia" NAME = "usia" VALUE = "A">Kurang dari 20<BR>VALUE = "A">Kurang dari 20<BR> <INPUT TYPE = "RADIO" <INPUT TYPE = "RADIO" NAME = "usia" NAME = "usia" VALUE = "B">Antara 20 s/d 40<BR>VALUE = "B">Antara 20 s/d 40<BR> <INPUT TYPE = "RADIO" <INPUT TYPE = "RADIO" NAME = "usia" NAME = "usia" VALUE = "C">Lebih dari 40<BR>VALUE = "C">Lebih dari 40<BR> <TR><TR> </TABLE></TABLE> </CENTER></CENTER></FORM></FORM></BODY></BODY></HTML></HTML>