Membuat IFrame pada HTML

Pada tutorial kali ini kita akan membahas tentang bagaimana caranya membuat IFrame pada HTML ?. IFrame merupakan singkatan dari Inline Frame. IFrame disediakan oleh HTML agar halaman website saat ini dapat menampilkan sebuah halaman website lain yang dibungkus dalam sebuah frame. Namun, IFrame ini jarang sekali digunakan.

Saya mencoba menampilkan halaman form dengan iframe,…

Pertama buat dulu halaman formnya. Silahkan beri nama file tersebut dengan nama form.html.

Hasil dari website form adalah seperti gambar di bawah ini :

membuat iframe pada html

Kemudian barulah kita bingkai halaman halaman form ini ke dalam halaman Iframe. Silahkan anda buat file bernama index.html dengan syarat file ini berada 1 lokasi folder dengan file form.html.

Dan di bawah ini adalah hasilnya :

iframe pada html

IFrame memiliki atribut dasar, yakni :

Atribut Kegunaan
Frameborder Mendefinisikan ketebalan border yang akan diberikan.
Height Mendefinisikan tinggi frame.
Src Mendefinisikan URL website yang akan dibuka.
Width Menefinisikan lebar frame.
Scrolling Berisi nilai Boolean, yakni yes (frame dapat di scroll), atau no (frame tidak dapat di scroll).

Mengatur Border pada IFrame

Secara default IFrame menampilkan border pada frame-nya, anda pun dapat menghilangkannya dengan atribut frameborder=”0”.

Dan di bawah ini adalah outputnya :

mengatur border iframe

Mengatur ukuran IFrame

Ukuran IFrame pun juga dapat diatur dengan atribut width dan height.

Output :

mengatur ukuran iframe

Membuat Hypertext untuk IFrame

Pada tutorial ini akan mempelajari bagaimana caranya membuat Hypertext untuk Iframe. Dimana Iframe ini dijadikan sebagai target Link.

Yang menjadi acuan adalah nilai atribut dari atribut name pada elemen <iframe> kemudian dihubungkan dengan nilai atribut dari atribut target pada elemen <a>. Nilai atribut pada atribut name dan target harus sama.

Contoh disini saya akan memasukan halaman Form ke dalam halaman Iframe dengan cara di klik, jadi mula – mula halaman Form ini tidak ada pada bingkai Iframe.

Pertama – tama kita buat halaman Form terlebih dahulu, silahkan copy paste kode sumber di bawah ini, dan beri nama form.html :

Di bawah ini adalah hasilnya :

Membuat Hypertext IFrame

Lalu buat file index.html yang akan membingkai halaman form.html.

Sebelum di klik…

Membuat Hypertext IFrame 2

Sesudah diklik akan menampilkan halaman form.

Membuat Hypertext IFrame 3

Semoga materi Membuat IFrame pada HTML ini dapat dipahami.

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us