Web Desain (ADM 3326)

Modul 10. Bekerja dengan Frame

Frame digunakan untuk membagi jendela browser menjadi beberapa bagian dan masing-
masing bagian terdiri dari dokumen html tersendiri. Untuk membuat sebuah frame, tag yang
digunakan adalah:
Format penulisan tag frame :
<frameset>……..</frameset>
Format penulisan elemen tag frame:
<frame>…….</frame>
Dalam frame kita tidak lagi memerlukan tag body, sehingga struktur dasar frame adalah sebagai
berikut :

Tag frameset memiliki atribut diantaranya :

 border : menentukan tebal garis border
 cols :menentukan lebar kolom (px/%/*) ,dan untuk mentukan jumlah kolom yaitu memakai
tanda koma ( , ). Jumlah kolom ditentukan oleh jumlah koma diantara lebar tiap frame.
Misal jika kita ingin menggunakan 2 kolom, dimana kolom pertama berukuran 150 dan
kolom kedua lebarnya 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"
 rows : menentukan panjang baris (px/%/*) , dan untuk mentukan jumlah baris yaitu
memakai tanda koma ( , ). Jumlah baris ditentukan oleh jumlah koma diantara lebar tiap
frame. Misal bila kita ingin membuat 2 baris, dimana baris pertama berukuran 150 dan baris

Rika Febriana, SKom, MMSI Page 1

Web Desain (ADM 3326)

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"
 frameborder: nilai-nilai 0 atau 1. Batasan bingkai akan jadi tak kelihatan jika kita memilih 0
 framespacing : spasi di sekitar frame
 bordercolor : untuk menentukan warna pembatasnya
Tag frame memiliki atribut diantaranya :
 name : untuk menentukan nama frame atau untuk target link
 scr : berfungsi untuk menujukkan/lokasi sumber file.
 Scrolling: untuk menunjukkan apakah kita akan menggunakan scrolling bar di samping atau
bawah halaman , opsi inputnya adalah “yes, no atau auto”. Jika tidak scrollbars tidak akan
Nampak.
 Noresize : penetapan atribut, perbatasan bingkai tidak akan resizable. Para pemakai tidak
bisa melihat ukuran windows dengan menggukan mouse.
1. Frame dapat digunakan untuk berbagai macam keperluan, antara lain:
Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain
menampilkan isinya
2. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame,
sedangkan sisi frame yang lain menampilkan isis dokumen
3. Membuat suatu dokumen tanya jawab, dll.

Target Frame

Nama frame predefined : _self, _top, _parent, _blank sering digunakan untuk menunjukkan
target penampilan dari suatu link.

 _ self : akan menampilkan link target pada frame yang sama

 _parent : akan menutupi seluruh halaman
 _top : akan menutupi seluruh halaman
 _blank : akan membuat jendela baru

Rika Febriana, SKom, MMSI Page 2

Web Desain (ADM 3326)

Frame Vertikal

Frame vertical akan membentuk pembagian secara bertumpuk dari atas ke bawah. Untuk
membentuk frame vertical digunakan atribut rows pada tag frameset. Lanjutkan dengan latihan
berikut ini.

Frame Horizontal

Rika Febriana, SKom, MMSI Page 3

Web Desain (ADM 3326)

Frame Campuran

Iframe

Iframe ini digunakan untuk menampilkan halaman web dalam halaman web.

<iframe src=”url”></iframe>

 Iframe mengatur tinggi dan lebar

Tinggi dan atribut lebar digunakan untuk menentukan tinggi dan lebar dari iframe. Nilai
atribut yang ditetapkan dalam pixel secara default, tetapi mereka juga dapat dalam persen
(seperti “80%”).

Rika Febriana, SKom, MMSI Page 4

Web Desain (ADM 3326)

<iframe src=”demo_iframe.htm” width=”200″ height=”200″></iframe>

 Iframe – Hapus Perbatasan

Atribut frameborder menentukan apakah atau tidak untuk menampilkan perbatasan sekitar
iframe. Mengatur nilai atribut untuk “0” untuk menghapus perbatasan:

Contoh :

<iframe src=”demo_iframe.htm” frameborder=”0″></iframe>

 Menggunakan iframe sebagai Sasaran untuk sebuah Link

Iframe dapat digunakan sebagai kerangka target untuk link. Atribut target link harus
mengacu pada nama atribut iframe :

<iframe src=”demo_iframe.htm” name=”iframe_a”></iframe>

<p><a href=”http://www.w3schools.com” target=”iframe_a”>W3Schools.com</a></p>

Rika Febriana, SKom, MMSI Page 5

Web Desain (ADM 3326)

Praktikum 1 :

Latihan 1 : Jalankan kode program berikut ini

- Simpan kode berikut dengan nama framekiri.html

- Simpan kode berikut dengan nama framekanan.html

- Simapan kdoe berikut dengan nama frame.html

Rika Febriana, SKom, MMSI Page 6

Web Desain (ADM 3326)

- Jalan frame.html

Latihan 2 :

Buatlah kode program berikut ini:

Rika Febriana, SKom, MMSI Page 7

Web Desain (ADM 3326)

Latihan 3 :

Jalankan kode program berikut ini

- Frame.html

- Head.html

- Home.html

- Menu.html

Rika Febriana, SKom, MMSI Page 8