Wednesday, February 12, 2014

BAB IX Form

Mulailah dengan membuka Notepad, kemudian tulis baris-baris di bawah ini:
<HTML>
<HEAD>
<TITLE>Membuat form html</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Simpan dengan nama form1.htm di folder khusus untuk itu. Buka browser anda (Netscape atau Internet Explorer), dan buka file form1.htm tadi. Biarkan Notepad tetap terbuka sehingga apa yang anda tuliskan di situ bisa langsung anda lihat hasilnya di browser. Klik tombol Reload atau Refresh sesudah anda menyimpan perubahan yang anda lakukan di Notepad.
Tuliskan form anda.
<HTML>
<HEAD>
<TITLE>Membuat form html</TITLE>
</HEAD>
<BODY>
<FORM>
</FORM>
</BODY>
</HTML>
Selanjutnya browser harus mempunyai cara untuk mengirim data yang didapat kepada kita. Ada dua hal yang dapat anda lakukan: 1) anda dapat mengirim data tersebut ke suatu program/script untuk diproses, atau 2) anda dapat meminta browser untuk mengirim data tersebut melalui email kepada anda. Cara pertama memerlukan pemahaman tentang pemrograman web yang lebih lanjut. Cara kedua, biasa disebut mailto form, memerlukan beberapa hal untuk ditambahkan dalam tag <FORM>.
<HTML>
<HEAD>
<TITLE>Membuat form html</TITLE>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx" ENCTYPE="application/x-www-form-urlencoded">
</FORM>
</BODY>
</HTML>
Baris ini sangat penting. Satu-satunya hal yang harus anda lakukan adalah menuliskan alamat email anda sesudah mailto: Selebihnya harus anda tuliskan persis seperti di atas. Tulisan FORM, METHOD, POST & ACTION tidak harus ditulis dalam huruf besar, tetapi harus ada spasi di antara setiap atribut tadi... di antara  FORM & METHOD, di antara POST & ACTION, dan antara .xxx" & ENCTYPE.
Sayangnya, data yang akan anda terima masih dalam format komputer seperti ini...
NAMAFORM=Daftar+Anggota&NAMA=Bram+D.+Wardhana&ALAMAT=Jl.+Bali+No.+13
&KOTA=Semarang&Propinsi=Jawa+Tengah
TEXT
Untuk memudahkan, mulai sekarang saya hanya akan menuliskan apa yang ada di antara tag <FORM>. Saya tidak akan menuliskan tag head, body, title dan form itu sendiri. Sudah jelas bahwa anda harus tetap menuliskannya di dalam dokumen anda.
Bentuk masukan (TYPE of <INPUT>) yang paling umum digunakan dalam form html adalah TEXT.
 <INPUT TYPE=TEXT>
Top of Form
Bottom of Form
Setiap masukan memerlukan nama (NAME).
 <INPUT TYPE=TEXT NAME="ALAMAT">
Top of Form
Bottom of Form
Kalau anda mengetikkan alamat anda (misalkan Jl. Bali No. 13), alamat tersebut akan menjadi nilai bagi input dan dipasangkan dengan ALAMAT sehingga hasil akhirnya setelah dijalankan pada Mailto Formatter adalah ALAMAT=Jl. Bali No. 13.
Jika mau, anda bisa langsung menuliskan NILAI (VALUE) yang anda inginkan.
<INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31">
Top of Form
Bottom of Form
Maka ALAMAT secara otomatis akan langsung diberi nilai Jl. Lombok No. 31, kecuali anda mengubahnya.
Catatan - Pastikan pemakaian tanda petik seperti yang saya tuliskan di atas.
Kita dapat juga menentukan panjang kotak masukan.
<INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31" SIZE=10>
Top of Form
Bottom of Form
<INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31" SIZE=20>
Top of Form
Bottom of Form
<INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31" SIZE=30>
Top of Form
Bottom of Form
Seperti yang dapat anda lihat, nilai defaultnya adalah 20. Barangkali anda sudah tahu bahwa nilai default adalah nilai yang dipakai browser jika anda tidak menentukan lain.
Kita lanjutkan, dan sekarang coba anda hapus VALUE="Jl. Lombok No. 31".
<INPUT TYPE=TEXT NAME="ALAMAT" SIZE=30>
Top of Form
Bottom of Form
Jika kita inginkan, kita dapat menentukan berapa banyak karakter yang bisa diketikkan. Teruskan dan cobalah mengetikkan lebih dari 10 karakter!
<INPUT TYPE=TEXT NAME="ALAMAT" SIZE=30 MAXLENGTH=10>
Top of Form
Bottom of Form
Saya pikir pembatasan ini akan bisa bermanfaat. Tetapi, kecuali anda pikir seseorang akan menuliskan seluruh isi bab ini ke dalamnya, saya tidak akan terlalu menguatirkan hal ini.
Sangat mirip dengan TYPE=TEXT adalah TYPE=PASSWORD. Persis malah, kecuali bahwa yang ditampilkan adalah *** dan bukan apa yang diketikkan. Browser akan mengirim data sebenarnya kepada anda, hanya data ini tidak akan tampil di layar.
<INPUT TYPE=PASSWORD>
Top of Form
Bottom of Form
Ingat bahwa setiap <INPUT> harus memiliki NAME.
<INPUT TYPE=PASSWORD NAME="KATA SANDI">
Top of Form
Bottom of Form
Atribut SIZE, VALUE, dan MAXLENGTH juga dapat digunakan di sini. Anda tentu masih ingat bahwa <TAG> memberi perintah kepada browser untuk melakukan sesuatu, sedangkan ATTRIBUTE dituliskan di dalam <TAG> dan menentukan caranya.
RADIO BUTTONS DAN CHECK BOXES
Selanjutnya adalah Radio Buttons dan Check Boxes. Radio Buttons memungkinkan kita memilih satu dari beberapa pilihan. Check Boxes memungkinkan kita memilih satu atau lebih atau semua pilihan.
Pertama-tama kita lihat Radio Buttons.
<INPUT TYPE=RADIO NAME="TEMAN BAIK">
Tambahkan 2 lagi.
<INPUT TYPE=RADIO NAME="TEMAN BAIK">
<INPUT TYPE=RADIO NAME="TEMAN BAIK">
<INPUT TYPE=RADIO NAME="TEMAN BAIK">
Hmmm... saya pikir kita perlu memberi baris baru untuk mereka masing-masing.
<INPUT TYPE=RADIO NAME="TEMAN BAIK"><BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK"><BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK"><P>


Perhatikan bahwa setiap masukan menggunakan nama yang sama. Alasannya akan segera tampak berikut ini. 
Setiap Radio Buttons harus diberi VALUE.
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Ed"><BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Rick"><BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Tom"><P>


Sekarang beri nama masing-masing.
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Ed"> Edi Hasibuan<BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Rick"> Ricky Martanto<BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Tom"> Tomi Sudarto<P>
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Anda dapat gunakan tag html yang lain di sini.
Pada prinsipnya Radio Buttons anda sudah selesai. Anda dapat memperjelas pilihan ini dengan menambahkan suatu kalimat di atasnya dan, jika anda mau, memilih satu di antaranya sebagai default (optional).
Siapakah TEMAN BAIK anda?<BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Ed" CHECKED> Edi Hasibuan<BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Rick"> Ricky Martanto<BR>
<INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Tom"> Tomi Sudarto<P>
Siapakah TEMAN BAIK anda?
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Kita tentu saja hanya dapat memilih satu di antaranya. Pilihan ini akan menghasilkan pasangan nama/nilai seperti TEMAN BAIK=Ed (atau siapa pun yang dipilih).
Untuk membuat Check Boxes kita lakukan hal yang sama dengan tadi. Mulailah dengan ini...
<INPUT TYPE=CHECKBOX NAME="Ed">
Tambahkan 3 lagi, tapi kali ini beri masing-masing NAME yang berbeda. (Gunakan juga baris baru untuk setiap pilihan.)
<INPUT TYPE=CHECKBOX NAME="Ed"><BR>
<INPUT TYPE=CHECKBOX NAME="Rick"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom"><BR>
<INPUT TYPE=CHECKBOX NAME="BM"><P>



Setiap Check Box kita beri VALUE yang sama.
<INPUT TYPE=CHECKBOX NAME="Ed" VALUE="YA"><BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA"><BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"><P>




Catatan - Untuk Check Boxes NAME yang dipakai harus berbeda, tetapi VALUE nya tetap. Sedangkan untuk Radio Buttons VALUE berbeda tetapi NAME nya tetap.
OK, masing-masing kita beri label/nama.
<INPUT TYPE=CHECKBOX NAME="Ed" VALUE="YA"> Edi Hasibuan<BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"> Ricky Martanto<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA"> Tomi Sudarto<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"> Baramuli<P>
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Baramuli
Dan terakhir, anda mungkin ingin menambahkan sesuatu di atasnya serta memilih beberapa di antaranya sebagai default. Kalau anda mau, tentu saja.
Siapakah di antara mereka yang merupakan sahabat anda?<BR>
<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YA" CHECKED> Edi Hasibuan<BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"> Ricky Martanto<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA" CHECKED> Tomi Sudarto<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"> Baramuli<P>
Siapakah di antara mereka yang merupakan sahabat anda?
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Baramuli
Kita dapat memilih 1, 2, tidak ada atau semuanya. Pilihan tersebut akan kita dapatkan dalam bentuk pasangan nama/nilai....
Ed=YA
Tom=YA
(atau apapun yang dipilih... jika tidak ada yang yang dipilih, browser tidak akan memberi apapun) 
Anda mungkin bertanya-tanya....Bagaimana jika saya ingin mengajukan 3 pertanyaan berbeda untuk kelompok yang sama?? Bagaimana saya bisa melakukannya?
Siapakah di antara mereka yang merupakan sahabat anda?
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Baramuli
Siapakah di antara mereka yang akan anda pinjami uang?
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Baramuli
Siapakah yang anda ijinkan berkencan dengan adik anda?
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Baramuli

Ingat! Dalam sebuah form html tidak boleh ada NAME yang sama. Jadi, kita harus menggunakan nama yang berbeda untuk setiap pertanyaan. Yang saya maksud dengan tidak boleh, bukan berarti komputer anda bisa rusak.... paling-paling hal ini akan membingungkan browser, atau program parser (Mailto Formatter adalah program parser), atau cgi script yang memprosesnya. Paling tidak ini akan membingungkan anda dalam mengartikan data dari form tersebut.
Berikut ini adalah perintah html untuk 3 pertanyaan tadi. Tag untuk membuat <TABLE> ditampilkan dalam warna hijau. Ini hanya untuk memudahkan anda, warna tersebut tidak ada pengaruhnya terhadap jalannya form.
<CENTER>
<TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>
<TD WIDTH=199>
Siapakah di antara mereka yang merupakan sahabat anda?<BR>
<INPUT TYPE=CHECKBOX NAME="Teman?..Ed" VALUE="YA"> Edi Hasibuan<BR>
<INPUT TYPE=CHECKBOX NAME="Teman?..Rick" VALUE="YA"> Ricky Martanto<BR>
<INPUT TYPE=CHECKBOX NAME="Teman?..Tom" VALUE="YA"> Tomi Sudarto<BR>
<INPUT TYPE=CHECKBOX NAME="Teman?..BM" VALUE="YA"> Baramuli<P>
</TD>
<TD WIDTH=200>
Siapakah di antara mereka yang akan anda pinjami uang?<BR>
<INPUT TYPE=CHECKBOX NAME="Utang?...Ed" VALUE="YA"> Edi Hasibuan<BR>
<INPUT TYPE=CHECKBOX NAME="Utang?...Rick" VALUE="YA"> Ricky Martanto<BR>
<INPUT TYPE=CHECKBOX NAME="Utang?...Tom" VALUE="YA"> Tomi Sudarto<BR>
<INPUT TYPE=CHECKBOX NAME="Utang?...BM" VALUE="YA"> Baramuli<P>
</TD>
<TD WIDTH=199>
Siapakah yang anda ijinkan berkencan dengan adik anda?<BR>
<INPUT TYPE=CHECKBOX NAME="Kencan?...Ed" VALUE="YA"> Edi Hasibuan<BR>
<INPUT TYPE=CHECKBOX NAME="Kencan?...Rick" VALUE="YA"> Ricky Martanto<BR>
<INPUT TYPE=CHECKBOX NAME="Kencan?...Tom" VALUE="YA"> Tomi Sudarto<BR>
<INPUT TYPE=CHECKBOX NAME="Kencan?...BM" VALUE="YA"> Baramuli<P>
</TD>
</TR></TABLE>
</CENTER>
Misalkan anda memilih seperti berikut....
Siapakah di antara mereka yang merupakan sahabat anda?
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Baramuli
Siapakah di antara mereka yang akan anda pinjami uang?
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Baramuli
Siapakah yang anda ijinkan kencan dengan adik anda?
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Baramuli
...maka anda akan mendapatkan hasil pasangan nama/nilai berikut.
Teman?..Ed=YES
Teman?..Rick=YES
Teman?..Tom=YES
Utang?...Tom=YES
Utang?...BM=YES
Kencan?...Ed=YES
Kencan?...Tom=YES
Kencan?...BM=YES
PULL DOWN LIST DAN SCROLLING LIST
Bentuk masukan selanjutnya adalah Pull Down List. Untuk masukan jenis ini anda gunakan <SELECT> sebagai pengganti <INPUT> dan anda harus tambahkan tag penutup. Mari kita coba.
<SELECT>
</SELECT>
Top of Form
Bottom of Form
Jangan lupa beri nama.
<SELECT NAME="TEMAN BAIK">
</SELECT>
Top of Form
Bottom of Form
Kemudian tambahkan beberapa option.
 <SELECT NAME="TEMAN BAIK">
<OPTION>Edi
<OPTION>Ricky
<OPTION>Tomi
<OPTION>Reza
</SELECT>
Top of Form
Bottom of Form
Dan setiap <OPTION> kita beri VALUE.
 <SELECT NAME="TEMAN BAIK">
<OPTION VALUE="Edi">Edi
<OPTION VALUE="Ricky">Ricky
<OPTION VALUE="Tomi">Tomi
<OPTION VALUE="Reza">Reza
</SELECT>
Top of Form
Bottom of Form
Defaultnya adalah pilihan pertama dalam daftar.
Kita dapat mengubah default ini sehingga tidak harus yang tercantum paling atas dalam daftar.
<SELECT NAME="TEMAN BAIK">
<OPTION VALUE="Edi">Edi
<OPTION VALUE="Ricky">Ricky
<OPTION VALUE="Tomi" SELECTED>Tomi
<OPTION VALUE="Reza">Reza
</SELECT>
Top of Form
Bottom of Form
Scrolling List dibuat dengan cara yang persis sama dengan Pull Down List . Pertama-tama kita tambahkan dulu beberapa nama.
<SELECT NAME="TEMAN BAIK">
<OPTION VALUE="Edi">Edi
<OPTION VALUE="Ricky">Ricky
<OPTION VALUE="Tomi">Tomi
<OPTION VALUE="Reza">Reza
<OPTION VALUE="Arie">Arie
<OPTION VALUE="Putri">Putri
<OPTION VALUE="Maria">Maria
</SELECT>
Top of Form
Bottom of Form
Satu-satunya hal yang harus kita lakukan untuk mengubahnya menjadi Scrolling List adalah menambahkan atribut SIZE pada tag <SELECT>.
<SELECT NAME="TEMAN BAIK" SIZE=4>
<OPTION VALUE="Edi">Edi
<OPTION VALUE="Ricky">Ricky
<OPTION VALUE="Tomi">Tomi
<OPTION VALUE="Reza">Reza
<OPTION VALUE="Arie">Arie
<OPTION VALUE="Putri">Putri
<OPTION VALUE="Maria">Maria
</SELECT>
Top of Form
Bottom of Form
Atribut SIZE menunjukkan berapa banyak pilihan yang ingin anda tampilkan. Gampang, kan?
Sekali lagi, defaultnya adalah pilihan pertama pada <OPTION>, dan seperti tadi kita dapat mengubahnya dengan memilih yang lain.
<SELECT NAME="TEMAN BAIK" SIZE=4>
<OPTION VALUE="Edi">Edi
<OPTION VALUE="Ricky">Ricky
<OPTION VALUE="Tomi" SELECTED>Tomi
<OPTION VALUE="Reza">Reza
<OPTION VALUE="Arie">Arie
<OPTION VALUE="Putri">Putri
<OPTION VALUE="Maria">Maria
</SELECT>
Top of Form
Bottom of Form

TEXTAREA
Bentuk masukan lain yang sangat berguna adalah <TEXTAREA>.
 <TEXTAREA NAME="KOMENTAR">
</TEXTAREA>
Top of Form
Bottom of Form
Anda menentukan besarnya kotak masukan dengan cara....
 <TEXTAREA NAME="KOMENTAR" ROWS=6 COLS=50>
</TEXTAREA>
Top of Form
Bottom of Form
ROWS adalah tingginya, COLS adalah lebarnya.
Satu atribut yang cukup membantu dalam <TEXTAREA> adalah WRAP. Mungkin ada browser yang tidak mengenal perintah ini, tapi jika demikian, perintah ini akan diabaikan.
Cobalah menuliskan kalimat yang cukup panjang di dalam kotak masukan....
<TEXTAREA NAME="KOMENTAR" ROWS=3 COLS=30 WRAP=VIRTUAL>
</TEXTAREA>
Top of Form
Bottom of Form
WRAP=VIRTUAL berarti kalimat yang lebih panjang dari lebar kotak masukan akan diteruskan ke baris di bawahnya, tetapi yang disimpan oleh browser tetap satu kalimat panjang yang tidak terputus. 
Lakukan hal yang sama dengan ini....
<TEXTAREA NAME="KOMENTAR" ROWS=3 COLS=30 WRAP=PHYSICAL>
</TEXTAREA>
Top of Form
Bottom of Form
WRAP=PHYSICAL artinya kalimat panjang akan ditampilkan lebih dari satu baris, dan akan disimpan dalam bentuk itu juga.
Sekarang anda coba yang ini untuk melihat bedanya....
<TEXTAREA NAME="KOMENTAR" ROWS=3 COLS=30 WRAP=OFF>
</TEXTAREA>
Top of Form
Bottom of Form
Ini adalah defaultnya.
WRAP=OFF artinya kalimat panjang tidak akan ditampilkan berganti baris, tetapi akan disimpan dalam bentuk persis seperti yang anda ketikkan. (Cobalah dengan mengetikkan ENTER.)
HIDDEN INPUT
Bentuk lain dari masukan adalah HIDDEN input.
<INPUT TYPE=HIDDEN NAME="RAHASIA" VALUE="Form 1">
HIDDEN input adalah pasangan nama/nilai yang dikirimkan kepada anda tetapi tidak akan pernah ditampilkan di halaman web. Hidden input inilah yang diperlukan oleh Mailto Formatter. Dengan cara ini Mailto Formatter mengenali form html yang akan diprosesnya.
Misalkan anda melakukan jajak pendapat melalui internet. Anda sudah merancang form html yang indah dan efektif untuk mendapatkan masukan tentang topik yang anda tanyakan. Masalahnya adalah, anda ingin menempatkan form tersebut di beberapa web site untuk menjaring sebanyak mungkin masukan. Anda perlu cara untuk mengetahui web site mana yang memberikan kontribusi terbanyak. Apa yang akan anda lakukan?
Anda bisa menambahkan HIDDEN input ke dalam form anda seperti ini....
<INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 1"> ... untuk web site pertama
<INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 2"> ... untuk web site kedua
<INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 3"> ... untuk web site ketiga
Dan seterusnya dan selanjutnya....
Sebetulnya, anda bisa gunakan pasangan nama/nilai apapun dalam hidden input ini (bahkan dalam setiap jenis input). Saya menggunakan "JAJAKPENDAPAT" untuk memperjelas. Kalau anda pikir terlalu panjang, bisa anda gunakan "JP". Contoh berikut ini tetap merupakan HIDDEN input yang sah....
<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ... Anda akan dapatkan E=Mc^2
HIDDEN input juga sangat berguna dan banyak dipakai untuk pemrograman/cgi script.
Bentuk terakhir dari input adalah tombol SUBMIT dan RESET.
Kedua perintah ini sangat sederhana....
 <INPUT TYPE=SUBMIT>
Top of Form
Bottom of Form
SUBMIT, tentu saja, dipakai untuk mengirim data yang anda masukkan ke dalam form....
...dan RESET, menghapus seluruh isi form.
 <INPUT TYPE=RESET>
Top of Form
Bottom of Form
Kita dapat mengubah tulisan pada tombol tersebut dengan mudah.
<INPUT TYPE=SUBMIT VALUE="Kirim data ini!"><BR>
<INPUT TYPE=RESET VALUE="Hapus isi form!"><P>
Top of Form
Bila perlu, tombol SUBMIT bisa anda beri nama/NAME. Anda akan memerlukannya jika, dengan alasan apapun, ada lebih dari satu tombol SUBMIT.
Bottom of Form



BAB VIII Frame

Dengan menggunakan frame, kita bisa menampilkan beberapa halaman HTML sekaligus dalam sebuah jendela browser. Apa artinya? Artinya dengan membuka sebuah halaman HTML saja (yang mengandung frame), browser akan menampilkan beberapa halaman sekaligus yang masing-masing termuat dalam sebuah frame. Apa gunanya? Disamping untuk mempercantik tampilan, fungsi utama frame adalah untuk memudahkan navigasi atau penelusuran isi website. Kok, bisa? Daripada membahas panjang lebar, lebih baik kita langsung saja belajar membuat frame. Perhatikan contoh layout halaman ber-frame berikut ini:
frame I berisi file judul.htm
frame II berisi file menu.htm
frame III berisi file isi.htm
Anggaplah gambar di atas adalah tampilan dari sebuah halaman HTML yang terdiri dari tiga frame. Halaman yang ber-frame ini kita namakan gabung.htm. File gabung.htm ini menampilkan tiga halaman HTML sekaligus yaitu file judul.htm, menu.htm dan isi.htm. Jadi untuk membuat tampilan seperti di atas kita harus membuat empat buah file HTML, 3 file berfungsi sebagai halaman yang ditampilkan sedang satu file berfungsi sebagai halaman yang menampilkan. Halaman inilah yang merupakan halaman utama atau halaman yang mengandung frame.
Untuk membuat halaman utama atau halaman yang ber-frame, kita hanya membutuhkan dua buah tag yaitu <FRAMESET> untuk mengatur pembuatan frame, dan <FRAME> untuk menentukan file target bagi setiap frame. Baiklah kita mulai membuat file gabung.htm ini: 
<HTML>
<HEAD>
<TITLE>Halaman utama</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Di atas anda bisa melihat bahwa empat tag yang pertama hanyalah tag pembukaan HTML yang sudah biasa. Sedangkan tag untuk membuat frame adalah tag <FRAMESET> dengan tag penutupnya. Perhatikanlah bahwa halaman yang berframe tidak membutuhkan tag BODY karena yang menjadi isi dari halaman utama ini adalah isi dari halaman-halaman lain yang menjadi target dari setiap frame.  
Perhatikan kembali layout halaman berframe yang digambarkan di atas tadi. Halaman tersebut terdiri dari atas dua baris dimana baris pertama (atas) lebih kecil (anggaplah 20%) daripada baris kedua (80%). Dan baris kedua terbagi atas dua kolom dimana kolom pertama (kiri) lebih kecil (anggaplah 30%) daripada kolom kedua (70%). Bagaimana cara mengaturnya?
Pertama, kita membagi halaman menjadi dua baris, baris pertama tingginya 20% dan baris kedua tingginya 80%. Agar lebih bersih dan jelas, tag <HTML>, <HEAD> dan <TITLE> tidak dicantumkan lagi. Ingat, anda harus tetap menuliskannya di dokumen anda.  
<FRAMESET ROWS="20%,80%">
</FRAMESET>
Atribut ROWS dalam tag FRAMESET di atas memerintahkan browser untuk membagi halaman menjadi dua baris, baris pertama tingginya 20% dan baris kedua tingginya 80%. Sekarang kita akan mengisi baris pertama dengan frame kosong terlebih dahulu menggunakan tag <FRAME>.
<FRAMESET ROWS="20%,80%">
<FRAME>
</FRAMESET>
Sekarang kita akan mengisi baris kedua. Sebelumnya kita harus membagi baris kedua ini dalam dua kolom. Untuk itu, kita harus menambahkan lagi sepasang tag <FRAMESET> yang di dalamnya disisipkan atribut pembagi kolom yaitu COLS. 
<FRAMESET ROWS="20%,80%">
<FRAME>
<FRAMESET COLS="30%,70%">
</FRAMESET>
</FRAMESET>
Setelah terbagi dalam dua kolom kita harus mengisi setiap kolom tersebut dengan frame. Jadinya seperti ini:
<FRAMESET ROWS="20%,80%">
<FRAME>
<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
Kini selesailah sudah pembuatan file gabung.htm yang merupakan halaman web yang terdiri dari tiga buah frame. Tugas kita tinggal mengisi frame-frame yang masih kosong itu dengan file-file yang akan kita tampilkan di dalamnya. Untuk mendefinisikan nama file target pada setiap frame, kita tinggal menambahkan atribut SRC dalam setiap tag <FRAME>. Contoh:
<FRAMESET ROWS="20%,80%">
<FRAME SRC="judul.htm">
<FRAMESET COLS="30%,70%">
<FRAME SRC="menu.htm">
<FRAME SRC="isi.htm">
</FRAMESET>
</FRAMESET>
Tentu saja sebelumnya anda harus sudah membuat ketiga file tersebut dan menempatkan keempat file ini dalam folder yang sama. Bila foldernya tidak sama, gunakanlah cara penulisan alamat file seperti cara penulisan alamat file untuk link (lihat kembali pelajaran tentang link yang lalu). 
Misalnya kita mempunyai file judul.htm, file menu.htm dan file isi.htm. Maka bila anda membuka file gabung.htm, akan tampaklah sebuah halaman web yang terdiri dari tiga frame.
Seperti halnya dalam penentuan ukuran tabel, selain menggunakan satuan persen, kita juga bisa menggunakan satuan pixel. Misalnya atribut COLS="200,400" memerintahkan browser untuk membagi halaman menjadi dua kolom dimana kolom pertama lebarnya 200 pixel sedang kolom kedua lebarnya 400 pixel. Bahkan anda pun dapat membagi frame seperti ini COLS="200,*". Apa artinya? Artinya anda membagi halaman menjadi dua kolom dimana kolom pertama lebarnya 200 pixel sedang kolom kedua lebarnya adalah sisa dari ukuran layar monitor. Hal ini berguna karena setting layar monitor yang dipakai oleh user bisa berbeda-beda; pada umumnya adalah (lebar x tinggi dalam satuan pixel) 640x480, 800x600 atau 1024x768. 
Atribut lainnya yang bisa disisipkan dalam tag <FRAMESET> antara lain: BORDER untuk mengatur ukuran border yang memisahkan antara dua frame dan BORDERCOLOR untuk menentukan warna border. Contoh:
<FRAMESET ROWS="20%,80%" BORDERCOLOR="#FF1493">
<FRAME SRC="judul.htm">
<FRAMESET COLS="30%,70%"  BORDER="10">
<FRAME SRC="menu.htm">
<FRAME SRC="isi.htm">
</FRAMESET>
</FRAMESET>
Bila dilihat dalam browser, ukuran BORDER="2" adalah default sedang ukuran BORDER="0" berarti frame tanpa border. 
Sedangkan untuk tag <FRAME> biasanya dilengkapi dengan atribut-atribut berikut:
  1. BORDERCOLOR, fungsinya sama dengan BORDERCOLOR pada tag FRAMESET. Dalam hal ini, warna yang didefinisikan oleh tag yang lebih dalam menang atas warna yang didefinisikan oleh tag yang luar. 
  2. MARGINHEIGHT untuk menentukan jarak antara batas atas atau batas bawah frame dengan isi frame. 
  3. MARGINWIDTH untuk menentukan jarak antara batas kiri atau batas kanan frame dengan isi frame.
  4. NORESIZE, dengan adanya atribut ini maka border dari frame yang bersangkutan tidak bisa digeser. Dengan kata lain, ukuran frame tersebut tidak bisa diubah (diperkecil atau diperbesar).
  5. SCROLLING, mengatur fasilitas scroll (penggulung layar) dari frame.  Nilainya bisa YES, NO atau AUTO. Nilai YES berarti penggulung selalu ada, NO berarti penggulung selalu tidak ada, sedang AUTO berarti penggulung ada bila diperlukan (isi frame melebihi ukuran layar) dan tidak ada bila tidak diperlukan (isi frame dimuat oleh layar). Nilai AUTO merupakan nilai default. Artinya, bila atribut SCROLLING tidak dituliskan, maka penggulung layar otomatis akan muncul bila diperlukan.
  6. NAME, untuk memberi nama terhadap frame yang bersangkutan. Kegunaannya akan dijelaskan kemudian.
Berikut sekelumit contoh penggunaan atribut-atribut di atas:
<FRAMESET ROWS="20%,80%" BORDERCOLOR="#FF1493">
<FRAME SRC="judul.htm" NORESIZE>
<FRAMESET COLS="30%,70%"  BORDER="10">
<FRAME SRC="menu.htm" BORDERCOLOR="#9C661F">
<FRAME SRC="isi.htm"SCROLLING="YES">
</FRAMESET>
</FRAMESET>
Adapun atribut NAME diperlukan dalam kaitannya dengan fungsi navigasi dari halaman ber-frame. Misalnya kita ingin mengatur agar suatu link bila di-klik akan memunculkan halaman targetnya dalam frame tertentu. Maka terlebih dahulu kita harus memberi nama terhadap frame tersebut. Contoh:
<FRAMESET ROWS="20%,80%" BORDERCOLOR="#FF1493">
<FRAME SRC="judul.htm" NORESIZE>
<FRAMESET COLS="30%,70%"  BORDER="10">
<FRAME SRC="menu.htm" BORDERCOLOR="#9C661F">
<FRAME SRC="isi.htm"SCROLLING="YES" NAME="utama">
</FRAMESET>
</FRAMESET>
Dalam contoh di atas, frame ketiga (frame pada kolom kedua dari baris kedua halaman) kita berinama "utama". Dengan adanya nama tersebut, kita bisa mengatur agar link yang terdapat pada halaman di frame lainnya bila di-klik akan memunculkan halaman targetnya pada frame "utama" tersebut. Bingung? Misalnya, pada halaman menu.htm terdapat link dengan kode HTML seperti berikut:
<A HREF="bab2.htm">BAB II</A>
Bila kata BAB II di-klik maka akan membuka file bab2.htm. Tapi halaman bab2.htm tersebut akan mengisi seluruh jendela browser. Artinya halaman yang berframe akan hilang. Agar file bab2.htm itu muncul pada frame "utama" saja, kita harus memberi atribut TARGET seperti ini:
<A HREF="bab2.htm" TARGET="utama">BAB II</A>
Masih ingat, kan tentang atribut TARGET pada pelajaran tentang LINK? Seandainya semua link yang terdapat dalam file menu.htm akan kita arahkan pada frame "utama" maka kita bisa menyisipkan tag <BASE TARGET="utama"> diantara tag <HEAD> dan </HEAD>. Dengan demikian, kita tidak perlu lagi menuliskan dalam setiap link atribut TARGET tersebut satu-persatu.  Karena dengan adanya tag BASE TARGET itu, secara otomatis, semua link yang ada dalam halaman tersebut akan diarahkan ke frame yang dicantumkan dalam BASET TARGET. Kecuali link yang mempunyai TARGET tersendiri. 
Berikut beberapa cara pengarahan link dengan atribut TARGET:
  • _blank : halaman yang dipanggil akan muncul pada jendela baru (ini sudah kita pelajari)
  • _top : halaman yang dipanggil akan mengisi penuh jendela yang sama, meskipun tadinya ada frame.
  • _self : halaman yang dipanggil akan mengisi tempat yang sama, bila link tersebut dalam sebuah frame maka halaman yang dipanggil akan mengisi frame tersebut.
  • _parent : halaman yang dipanggil akan akan mengisi FRAMESET, satu tingkat lebih tinggi dari FRAME tempat link yang bersangkutan.


BAB VII Tabel

Setiap tabel minimal tersusun dari tiga tag dasar yaitu tag <TABLE> yang menandai sebuah tabel, tag <TR> yang membentuk baris dan tag <TD> yang membentuk kolom. Masing-masing tag tersebut harus memiliki tag penutup. 
<TABLE>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE>
Susunan tag-tag di atas memerintahkan kepada browser untuk menampilkan sebuah tabel yang terdiri dari satu baris dan satu kolom yang diisi dengan tulisan: kolom 1 dari baris 1
kolom 1 dari baris 1
Mana tabelnya? Sesungguhnya, tabelnya ada, hanya saja tanpa bingkai (border). Ternyata, secara default, tabel menggunakan nilai border = 0 (nol) alias tanpa bingkai. Jadinya yang tampak hanya tulisan semata. Untuk membuat bingkai dari tabel tersebut, kita harus menyertakan atribut BORDER.  
<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE>
Sehingga tabelnya tampak sebagai berikut:
kolom 1 dari baris 1
Silakan coba sendiri mengganti ukuran bingkai menjadi 2, 3 dan seterusnya lalu bandingkan hasilnya. Sekarang mari kita membagi tabel sebaris tersebut menjadi dua kolom. Artinya kita menambah sepasang tag TD lagi.
<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
</TABLE>
Beginilah hasilnya dalam browser:
kolom 1 dari baris 1
kolom 2 dari baris 1
Nah, bila anda ingin menambah sekian baris ke bawah, cukup menyalin ulang dari tag <TR> sampai </TR>. Sorot (blok) dari tag <TR> hingga </TR> lalu Copy (Ctrl+C). Tempatkan kursor di bawah tag </TR> lalu Paste (Ctrl+V). Sekian baris yang ingin anda buat, sekian kali pula anda harus menyalinnya (melakukan perintah Paste). Setelah itu tinggal meng-edit tulisan sesuai keinginan anda. Begini contohnya: 
<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Tampilannya dalam browser menjadi:
kolom 1 dari baris 1
kolom 2 dari baris 1
kolom 1 dari baris 2
kolom 2 dari baris 2
Setelah atribut BORDER, atribut selanjutnya yang perlu kita ketahui adalah atribut CELLSPACING yang mengatur jarak antar sel dan CELLPADDING yang mengatur jarak antara sel dan tulisan di dalamnya. Misalnya:
<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Dengan penambahan atribut CELLSPACING=10 dalam tag TABLE berarti akan dihasilkan sebuah tabel dengan jarak antar sel adalah 10 pixel. Beginilah tampilannya dalam browser:
kolom 1 dari baris 1
kolom 2 dari baris 1
kolom 1 dari baris 2
kolom 2 dari baris 2
Sekarang mari kita coba bandingkan bila atribut CELLSPACING tersebut diganti dengan CELLPADDING.
<TABLE BORDER=1 CELLPADDING=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Beginilah hasilnya dalam browser:
kolom 1 dari baris 1
kolom 2 dari baris 1
kolom 1 dari baris 2
kolom 2 dari baris 2
Sedangkan kalau kedua tag tersebut dipakai bersama-sama seperti ini:
<TABLE BORDER=1 CELLSPACING=10 CELLPADDING=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Akan menghasilkan tabel seperti ini:
kolom 1 dari baris 1
kolom 2 dari baris 1
kolom 1 dari baris 2
kolom 2 dari baris 2
Ternyata mudah, kan membuat tabel? Bila kita lihat tabel-tabel pada contoh di atas, tampak bahwa secara default, lebar kolom dan tinggi baris mengikuti lebar dan tinggi tulisan di dalamnya. Kita bisa mengatur sendiri lebar dan tinggi tabel, kolom dan barisnya dengan menggunakan atribut WIDTH (lebar) dan HEIGHT (tinggi). Misalnya:
<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Bagaimana jadinya tabel dengan lebar 100% ?
kolom 1 dari baris 1
kolom 2 dari baris 1
kolom 1 dari baris 2
kolom 2 dari baris 2
Kesimpulannya, lebar tabel 100% artinya tabel tersebut akan melebar hingga memenuhi lebar tampilan halaman. Bila lebar setiap kolom tidak ditentukan, maka lebar 100% itu akan terbagi sejumlah kolomnya. Seperti dalam contoh di atas, karena terdiri dari dua kolom maka lebar masing-masing kolom adalah 50%. Nah, bagaimana bila kita ingin membagi lebar kolom tidak sama? Ya, caranya sama saja, yaitu dengan memasukkan atribut WIDTH dalam tag kolom. 
<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD WIDTH=25%>kolom 1 dari baris 1</TD>
<TD WIDTH=75%>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD WIDTH=25%>kolom 1 dari baris 2</TD>
<TD WIDTH=75%>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Bagaimana jadinya?
kolom 1 dari baris 1
kolom 2 dari baris 1
kolom 1 dari baris 2
kolom 2 dari baris 2
Bagaimana halnya dengan atribut HEIGHT (tinggi)? Atribut ini juga bisa disisipkan dalam tag TABLE dan tag TR (baris). Selain menggunakan persen untuk menentukan ukuran tabel, kita bisa pula menggunakan satuan pixel. Bila angka sesudah WIDTH dan HEIGHT tidak menggunakan persen (%), berarti satuannya adalah pixel. Contoh:
<TABLE BORDER=7>
<TR HEIGHT=40>
<TD WIDTH=150>kolom 1 dari baris 1</TD>
<TD WIDTH=250>kolom 2 dari baris 1</TD>
</TR>
<TR HEIGHT=80>
<TD WIDTH=150>kolom 1 dari baris 2</TD>
<TD WIDTH=250>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Ukuran border tabel kita ubah menjadi 7. Tinggi baris pertama adalah 40 pixel sedang baris kedua 80 pixel. Adapun lebar kolom pertama adalah 150 pixel sedang kolom kedua 250 pixel. Perhatikanlah bagaimana atribut-atribut di atas, menghasilkan tampilan tabel dalam browser menjadi: 
kolom 1 dari baris 1
kolom 2 dari baris 1
kolom 1 dari baris 2
kolom 2 dari baris 2
Sekarang kita akan berbicara lagi masalah perataan (alignment) tulisan. Lihat contoh tabel di atas! Tampak bahwa secara default, tabel menempatkan tulisan rata kiri (secara horisontal) dan di tengah (secara vertikal). Namun demikian, kita bisa mengatur sendiri perataan ini dengan menggunakan atribut ALIGN untuk perataan horisontal dan VALIGN untuk perataan vertikal. Perhatikan penggunaannya:
<TABLE BORDER=7>
<TR HEIGHT=40>
<TD WIDTH=150 ALIGN=left VALIGN=top>kiri atas</TD>
<TD WIDTH=250 ALIGN=right VALIGN=middle>kanan tengah</TD>
</TR>
<TR HEIGHT=80>
<TD WIDTH=150 ALIGN=right VALIGN=bottom>kanan bawah</TD>
<TD WIDTH=250 ALIGN=center VALIGN=middle>tengah tengah</TD>
</TR>
</TABLE>
Beginilah hasilnya bila ditampilkan dalam browser: 
kiri atas
kanan tengah
kanan bawah
tengah tengah


BAB VI Image

Untuk menyisipkan gambar ke dalam sebuah halaman HTML, mula-mula kita harus menyediakan terlebih dahulu file gambar yang dibutuhkan. File gambar ini biasanya berekstensi GIF, JPG atau BMP. Bila file gambar itu telah tersedia, dan kita mengetahui nama dan letak (lokasi) file gambar itu, barulah kita bisa menyisipkannya ke dalam halaman web kita dengan menggunakan tag <IMG SRC="file_gambar">.  
Misalnya, kita mempunyai sebuah halaman web seperti ini:
Sisipkanlah gambar di bawah ini:
Mudah, bukan?
Kita ingin menyisipkan sebuah gambar yang file gambarnya bernama email.gif diantara kedua kalimat di atas. Bukalah source kode halaman HTML tersebut sehingga tampak seperti ini:
<P>Sisipkanlah gambar di bawah ini:
<P>Mudah, bukan?
Sisipkan satu tag paragraf lagi diantara kedua paragraf di atas, kemudian tuliskan tag penyisip gambar <IMG SRC="file_gambar"> sehingga menjadi seperti ini:
<P>Sisipkanlah gambar di bawah ini:
<P><IMG SRC="email.gif">
<P>Mudah, bukan?
Simpan (Save) source code tersebut kemudian buka dengan browser maka tampaklah seperti ini:
Sisipkanlah gambar di bawah ini:

Mudah, bukan?
Untuk contoh di atas, file email.gif dan file halaman yang disisipi gambar itu harus terletak dalam folder yang sama. Bila terletak dalam folder lain, maka harus dituliskan lokasinya. Misalnya:
<IMG SRC="images/email.gif"> bila file gambar itu terletak dalam folder bernama images, dimana folder images itu letaknya di bawah (di dalam) folder yang ditempati oleh halaman HTML yang disisipi gambar. 
<IMG SRC="../email.gif"> bila file gambar itu terletak satu tingkat di atas (di luar) folder yang ditempati oleh halaman HTML yang disisipi gambar. 
ATRIBUT-ATRIBUT GAMBAR
Setelah kita mengetahui cara menyisipkan gambar, sekarang kita akan mempelajari atribut apa saja yang bisa disertakan dalam tag <IMG SRC> untuk menghasilkan sejumlah efek tertentu. Atribut pertama yang bisa kita tambahkan ke dalam tag gambar adalah BORDER. Sesuai dengan namanya, atribut ini digunakan untuk memberi efek bingkai pada gambar. Bukalah file HTML di atas tadi. Kemudian sisipkanlah atribut border dalam tag gambar sehingga menjadi:
<P>Sisipkanlah gambar di bawah ini:
<P><IMG SRC="email.gif" BORDER="3">
<P>Mudah, bukan?
Anda boleh mengganti angka 3 dengan angka yang lebih kecil atau lebih besar untuk menghasilkan ukuran border yang lebih kecil atau lebih besar pula. Save lalu tampilkan dalam browser, maka hasilnya seperti ini:
Sisipkanlah gambar di bawah ini:

Mudah, bukan?
Atribut selanjutnya yang bisa anda sisipkan adalah atribut ALT. Dengan atribut ini kita bisa menyiapkan teks pengganti gambar bila suatu waktu gambar - karena satu dan lain hal - tidak bisa ditampilkan. Misalnya user menggunakan browser versi lama (yang belum bisa menampilkan gambar) atau browser yang dimatikan fungsi penampil gambarnya (untuk mempercepat proses loading). Dengan adanya atribut ALT ini, tampilan gambar dapat digantikan dengan teks yang kita masukkan di dalamnya. Contoh:
<P>Sisipkanlah gambar di bawah ini:
<P><IMG SRC="email.gif" ALT="tombol email">
<P>Mudah, bukan?
Bila suatu ketika, gambar tidak bisa ditampilkan maka akan tampak seperti ini:
Sisipkanlah gambar di bawah ini:
tombol email
Mudah, bukan?
Atribut image berikutnya yang akan kita pelajari adalah atribut ukuran gambar yaitu WIDTH (lebar) dan HEIGHT (tinggi). Tanpa menggunakan atribut ini, browser akan menampilkan gambar sesuai dengan ukuran asli dari file gambar yang bersangkutan. Kita bisa mengatur ukuran tampilan gambar dalam browser lebih kecil ataupun lebih besar dari ukuran aslinya dengan menggunakan atribut WIDTH dan HEIGHT tersebut.  
Kita masih mengambil contoh gambar email.gif di atas. Ukuran gambar yang sebenarnya dari file GIF ini adalah 132x37 pixel (ukuran suatu gambar  bisa kita ketahui dengan menggunakan program penampil gambar seperti ACDSee, IrfanView, dsb.). Kita akan mencoba menampilkan gambar itu lebih kecil misalnya menjadi 99x25 pixel dan lebih besar misalnya menjadi 165x47 pixel. Untuk itu, editlah kode HTML-nya sebagai berikut: 
<P>Sisipkanlah gambar di bawah ini:
<P><IMG SRC="email.gif"> <IMG SRC="email.gif" WIDTH=99 HEIGHT=25> <IMG SRC="email.gif" WIDTH=165 HEIGHT=47>
<P>Mudah, bukan?
Ingin tahu hasilnya setelah ditampilkan dalam browser?
Sisipkanlah gambar di bawah ini:

Mudah, bukan?
Selain menggunakan satuan pixel, kita pun bisa mengatur ukuran tampilan gambar dalam browser dengan satuan persen. Umumnya, satuan persen ini digunakan untuk mengatur lebar (WIDTH) gambar, bukan tinggi gambar. Sebab mengatur tinggi gambar dengan satuan persen akan menghasilkan tampilan yang tidak konsisten karena akan bergantung pada lebar jendela browser serta setting resolusi monitor. Oleh karena itu jika anda mengatur lebar gambar dengan satuan persen, atribut HEIGHT tidak perlu diatur lagi karena ukuran pixelnya secara otomatis diskala dengan ukuran yang benar. Misalnya: 
<IMG SRC="file_gambar" WIDTH=50%>
Ukuran gambar yang ditampilkan oleh browser akan mengikuti ukuran jendela browser relatif terhadap setting resolusi monitor. Jika monitor diset pada resolusi 800x600 pixel dan jendela browser dibuat maksimum, maka gambar akan ditampilkan dengan pada ukuran sekitar 400x300 pixel, yakni 50% dari ukuran jendela browser, bukan 50% dari ukuran gambar. Penggunaan satuan persen untuk pengaturan ukuran tampilan gambar ini, sering digunakan untuk gambar-gambar besar dan tampilannya ingin kita sesuaikan dengan ukuran jendela browser dan resolusi monitor. 
Apakah atribut WIDTH dan HEIGHT ini semata-mata digunakan untuk pengubahan ukuran tampilan gambar? Ternyata tidak. Atribut ini juga berfungsi untuk mempercepat tampilnya halaman web (loading). Karena dengan adanya kedua atribut ini, secara teknis memerintahkan browser untuk menyediakan tempat seukuran itu sebelum gambarnya sendiri selesai di-load. Jadi bila kita ingin menampilkan sebuah gambar sama dengan ukuran aslinya, alangkah baiknya bila atribut WIDTH dan HEIGHT ini tetap dituliskan dengan angka yang sama dengan lebar dan tinggi yang sebenarnya dari gambar tersebut.
MENGGUNAKAN GAMBAR SEBAGAI BACKGROUND
Pada pelajaran-pelajaran yang terdahulu, kita sudah mempelajari cara menggunakan warna sebagai latar belakang halaman web. Sekarang kita akan mempelajari cara menggunakan gambar sebagai latar belakang. Untuk warna, kita menggunakan atribut BGCOLOR="warna", sedangkan untuk gambar, kita menggunakan atribut BACKGROUND="file_gambar". Kedua atribut ini disisipkan dalam tag BODY. Sangat mudah, bukan? Misalnya kita ingin memanfaatkan gambar email.gif tadi sebagai latarbelakang halaman web maka cukup dengan menyisipkan atribut tersebut ke dalam tag BODY seperti di bawah ini:
<HTML><HEAD><TITLE>Latarbelakang Gambar</TITLE>
<BODY BACKGROUND="email.gif">
<H1><FONT COLOR="yellow">Maaf, ini hanya contoh, jadi tulisannya tidak serasi dengan latarbelakangnya</FONT></H1>
</BODY></HTML>
Bagaimana cara mendapatkan file-file image untuk dijadikan background? Mudah saja. Misalnya anda tertarik dengan background halaman web ini yang berlatarbelakang garis kotak-kotak abu-abu. Klik kanan pada sebarang tempat yang tampak background kotak-kotak itu maka akan muncul pop-up menu. Salah satu menu di dalamnya pasti bertuliskan Save Background As.... Pilih (klik) menu ini maka muncullah kotak dialog Save Picture. Di situ anda bisa memilih tempat (folder) dimana file image itu ingin anda simpan (misalnya di folder tempat halaman-halaman web anda). Anda pun bisa mengubah nama dari file image itu. Setelah itu klik tombol Save
MENGGUNAKAN GAMBAR SEBAGAI LINK
Masih ada satu lagi fungsi gambar. Gambar juga dapat digunakan sebagai link. Pada prinsipnya untuk membuat link gambar sama saja dengan membuat link teks. Kita tinggal mengganti teks yang bertindak sebagai link itu dengan tag penyisipan gambar (IMG SRC). Misalnya kita punya link seperti ini: email saya. Kode HTML dari link ini adalah: 
<A HREF="mailto:row_bee@yahoo.com">email saya</A>
Untuk membuat link gambar, kita tinggal mengganti tulisan email kami dengan tag penyisip gambar yaitu <IMG SRC="email.gif">. Sehingga lengkapnya tertulis:
<A HREF="mailto:row_bee@yahoo.com"><IMG SRC="email.gif"></A>