Belajar HTML Mudah Pemula Chapter 14

Bekerja dengan Frame

HTML memungkinkan kita untuk memasukkan halaman web lain ke dalam website kita sendiri. Web tersebut akan dimasukkan dalam sebuah frame. Dalam HTML ada 2 jenis frame yaitu frameset dan iframe. Insya Allah kita akan bahas keduanya di artikel ini.

FRAMESET

Tag Frameset kita pakai bila kita hanya ingin membagi web menjadi beberapa bagian saja. Misalnya kita ingin sebuah web dimana kolom sebelah kiri berisi deretan link navigasi dan sebelah kanan adalah halaman isinya (contohnya internet banking BCA). Bagaimana cara membuatnya?

Kita perlu membuat sebuah file HTML yang kita gunakan sebagai wadah semua halaman yang ingin kita tampilkan. Jika kita ingin membuat sebuah halaman dengan 2 kolom, maka berarti minimal ada 3 file yang harus kita siapkan:

1. File Frameset
2. File pengisi frame kiri
3. File pengisi frame kanan

Sebagai contoh, kita ingin membuat sebuah halaman untuk memasarkan produk affiliasi cafebisnis.com. Di sebelah kanan adalah frame berisi informasi singkat dari kita dan penawaran spesial kita. Sebelah kiri adalah halaman cafebisnis. Yuk kita buat

Pertama, buat dulu file frameset.html Isinya seperti ini:

<frameset cols="25%,75%">
   <frame src="informasi.html" />
   <frame src="http://cafebisnis.com/?reg=admin" />
</frameset> 

Saya jelaskan dulu ya. Baris pertama adalah tag frameset yang dilengkapi atribut cols. Atribut ini untuk mengatur lebar kolom-kolom frame nanti. Dalam contoh diatas saya buat kolom kiri 25% dan kolom kanan 75%.

Setelah terdefinisi, kita tinggal menunjukkan file-file apa saja yang ingin kita masukkan dalam frame. Baris kedua berguna memasukkan file informasi.html ke dalam frame kiri. Kemudian di baris ketiga kita definisikan frame sebelah kanan berisi URL affiliasi dari cafebisnis.

Sampai sini, jika anda membuka file frameset.html tersebut, maka akan muncul error di kolom kiri dan web cafebisnis di kolom kanan. Kenapa error? Karena kita belum membuat file informasi.html kan? Jadi, mari kita buat sekarang.

File informasi.html bisa berisi apa saja, misalnya informasi dari anda perihal web cafebisnis. Yuk kita isi file informasi.html dengan artikel singkat berikut:

<p>Di sebelah kanan halaman ini adalah web cafebisnis, 
tempat dimana kita bisa belajar banyak soal WordPress
dan bagaimana menghasilkan uang menggunakan blog</p>
<p>Untuk mendaftar, silahkan klik menu registrasi
dan ikuti saja petunjuknya</p>

Nah, selesai deh. Sekarang bisa anda cek frameset.html dan akan tampak isi file informasi.html berada di kolom kiri dan web cafebisnis di kolom kanan. Untuk tutorial iframe, kita bahas di artikel mendatang aja ya? Oke, sampai jumpa lagi