Frame & Iframe HTML: Pengertian, Macam, Cara Menggunakan

Frame


Frame memungkinkan kita membagi sebuah halaman website menjadi beberapa baris dan/atau kolom jendela, di mana masing-masing kolom atau baris tersebut dapat memuat dokumen HTML (halaman website) yang lain yang berbeda.

Tag untuk menyatakan Frame adalah <frameset> dan masing-masing jendela dalam frame dinyatakan dengan tag <frame>.

Menentukan ukuran masing-masing frame dengan atribut "rows" atau "cols" pada tag <frameset>.

Jika kita menggunakan atribut rows: nanti frame yang terbentuk akan tersusun sebagai baris-baris, sedangkan apabila menggunakan atribut cols: frame tersusun sebagai kolom-kolom.

Ukuran frame dapat dinyatakan dalam persen maupun pixel.

Pada tag <frame> kita gunakan atribut "src", kemudian nilanya berupa alamat url dokumen HTML lain yang ingin kita masukkan ke dalam frame.

Contoh:
* Frame Baris
<frameset rows="25%,25%,25%,25%">
<frame src="https://www.andisyam.web.id/doc1.hmtl"/>
<frame src="https://www.andisyam.web.id/doc2.hmtl"/>
<frame src="https://www.andisyam.web.id/doc3.hmtl"/>
<frame src="https://www.andisyam.web.id/doc4.hmtl"/>
<frameset>

*Frame Kolom
<frameset cols="25%,25%,25%,25%">
<frame src="https://www.andisyam.web.id/doc1.hmtl"/>
<frame src="https://www.andisyam.web.id/doc2.hmtl"/>
<frame src="https://www.andisyam.web.id/doc3.hmtl"/>
<frame src="https://www.andisyam.web.id/doc4.hmtl"/>
<frameset>

Nilai pada atribut rows/cols, yaitu "25%,25%,25%,25%" menunjukkan bahwa ukuran frame yang pertama, kedua, ketiga dan keempat adalah 25% (1/4) dari keseluruhan jendela.

Kita bisa mengubah ukuran frame menurut selera kita, bisa juga ukuran frame dinyatakan dalam pixel.

Beberapa atribut lain yang bisa digunakan dalam element <frameset>:
* noresize="noresize" - Atribut ini berfungsi agar frame tidak memiliki batas. Secara otomatis, frame akan memiliki batas berupa bingkai yang memiliki scrool bar.
* name="name" - Menggunakan atribut ini untuk memberi nama frame. Dengan memberi nama pada sebuah frame, kita bisa membuat sebuah link yang apabila kita mengkliknya halaman website (dokumen HTML) tujuan link tersebut akan terbuka pada frame yang terpilih atau tertarget. Misalkan kita membuat sebuah frameset dengan dua buah frame. Frame pertama berisi sebuah dokumen HTML dengan beberapa buah link di dalamnya. Kemudian frame kedua kita beri nama frame2 dengan cara menambahkan atribut name dengan nilanya adalah frame2 => name="frame2". Kode HTML frameset tersebut akan tampak seperti ini:
<frameset cols="25%,75%">
<frame src="https://www.andisyam.web.id/doc1.hmtl"/>
<frame name="frame2" src="https://www.andisyam.web.id/doc2.hmtl"/>
</frameset>

Pada dokumen HTML yang kita tampilkan pada frame pertama berisi beberapa buah link. Agar masing-masing link apabila diklik dokumen HTML tujuan link bisa terbuka pada frame kedua (frame dengan nama frame2), kita harus menambahkan atribut target dengan nilainya adalah nama frame kedua, yaitu frame2. Kode link akan tampak seperti ini:
<a href="https://www.andisyam.web.id/link1.html" target="frame2">Link1</a>


Note: Kita tidak bisa menggunakan element <frameset> bersamaan dengan element <body>. Jadi, saat membuat frameset, jangan gunakan element <body> pada dokumen HTML tersebut.

IFRAME


Sebenarnya, iframe ini hampir sama dengan element <frameset> yang baru kita bahas di atas. Iframe juga dapat menampilkan halaman website lain pada sebuah halaman website secara inline. Ini seperti melihat halaman website lain melalui jendela yang kita buat dengan Iframe.

Tag yang digunakan untuk membuat iframe adalah: <iframe>

Format penulisannya sebagai berikut: <iframe src="url"></iframe>

Atribut "src" menunjukkan alamat website yang akan kita tampilkan ke dalam iframe. Atribut lain yang sering digunakan dalam iframe antara lain:
* width="nilai" => Untuk mengatur lebar iframe. Bisa dalam satuan persen maupun pixel.
* height="nilai" => Untuk mengatur tinggi iframe. Bisa dalam satuan persen maupun pixel.
* frameborder="nilai" => Menentukan tebal batas/bingkai dari iframe. Jika kita memberi nilai nol (0) pada atribut tersebut, maka iframe akan tampak tanpa bingkai/batas.
* name="nilai" => Untuk memberi nama iframe.

Contoh:
<iframe src="https://www.andisyam.web.id/iframe.html" width="340" height="420" name="iframeku" frameborder="4"></iframe>

Kita juga bisa menargetkan sebuah link agar terbuka pada kotak iframe dengan cara yang sama seperti pada frameset yang baru kita bahas tadi.

Note: Iframe dapat digunakan bersamaan dengan element <body>. Jadi kita tidak perlu menghilangkan element body pada saat kita ingin membuat sebuah atau beberapa iframe pada sebuah halaman website.

Related Posts →


Open Disqus Close Disqus



This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Blogger Cookies