Membuat Frame

Frameset adalah serangkaian instruksi untuk membagi halaman browser menjadi beberapa halaman. Setiap halaman disebut frame. Frameset menentukan letak setiap frame, propertis-propertisnya, dan nama file yang ditampilkan bersama. Untuk mendefinisikan frameset, digunakan tag <frameset> diikuti dengan tag <frame> untuk menentukan file HTML yang akan dijadikan frame.

Atribut yang digunakan di dalam tag <frameset> diantaranya:

1. cols, untuk menentukan jumlah kolom dari frameset yang dibuat. Jumlah kolom ditentukan oleh jumlah koma diantara lebar tiap frame. Misal bila kita ingin membuat 2 kolom, dimana kolom pertama berukuran 150 dan kolom kedua lebar selebihnya, penulisan kodenya:
   cols="150,*"
   Bila ingin membuat frame dengan jumlah kolom 3, dimana kolom pertama berukuran 150, kolom kedua lebar selebihnya, dan kolom ketiga lebarnya 150, penulisan kodenya:
   cols="150,*,150"
2. rows, untuk menentukan jumlah baris dari frameset yang dibuat. Jumlah baris ditentukan oleh jumlah koma diantara lebar tiap frame. Misal bila kita ingin membuat 2 baris, dimana baris pertama berukuran 150 dan baris kedua lebar selebihnya, penulisan kodenya:
   rows="150,*"
   Bila ingin frame dengan jumlah baris 3, dimana baris pertama berukuran 150, baris kedua lebar selebihnya, dan baris ketiga lebarnya 150, penulisan kodenya:
   rows="150,*,150"
3. frameborder, untuk menentukan ada tidaknya pembatas diantara frame. Valuenya "yes" bila ada pembatas, "no" bila tidak perlu ada pembatas.
4. border, untuk menentukan ketebalan pembatas apabila ada pembatas.
5. bordercolor, untuk menentukan warna pembatasnya.

Contoh penulisan kode HTML untuk membuat frame HTML sebanyak 2 kolom dengan pembatas:

Kode HTML:

Langkah 1 buat kode dibawah ini tuliskan didalam notepad, simpan dengan nama: index.html

Langkah 2 buat kode dibawah ini tuliskan didalam notepad, simpan dengan nama: kiri.html

Langkah 3 buat kode dibawah ini tuliskan didalam notepad, simpan dengan nama: kanan.html

Simpan ketiga halaman web yang sudah kita buat kedalam 1 folder.”nama folder boleh apa saja”

Untuk melihat hasilnya klik index.html ,

Latihan 1.

Selanjutnya, kita akan membuat frame seperti dibawah ini

Sama halnya seperti  yang sebelumnya kita harus memiliki beberapa halaman web dan 4 data gambar dan disimpan dalam 1 folder.

Langkah 1 ubah 4 gambar yang sudah kita siabkan dengan cara, rename setiap gambar menjadi “picture1.jpg,picture2.jpg,koala.jpg,pinguin.jpg”.

Langkah 2 tuliskan kode dibawah ini, simpan dengan nama index.html

Langkah 3 tuliskan kode dibawah ini, simpan dengan nama induk.html

Untuk yang diberi kotak merah adalah alamat penyimpanan data”folder yang telah dibuat dan disimpan”

Cara menuliskannya,buka folder yang telah kita buat,hingga semua data yang telah kita buat tadi muncul. Kemudian  copy dan paste ke dalam notepad alamatnya. Seperti contoh dibawah.

Untuk melihat hasilnya. Klik induk dan pilih index.html,...selamat mencoba!