HTML iFrame

Iframe adalah sebuah tag element html yang berfungsi menampilkan website di dalam website.

Contohnya:

Sudah paham kan?

Jadi kita bisa menampilkan website di dalam website.

Tag Iframe

Cara membuat iframe sangat sangat mudah, kita hanya perlu menggunakan tag <iframe src="url_situs" ></iframe>.

Misal, saya menampilkan homepage situs ini di atas, saya menggunakan html kode:

<iframe src="https://www.puntadewa.my.id" height="500px" width="100%"></iframe>

Nah, ifarme ini bisa diberi parameter. Yang umum digunakan adalah parameter height dan width.

Height untuk menentukan tinggi frame, sedangkan width untuk menentukan panjangnya.

Dalam kasus diatas, saya mengatur tingginya 500 piksel, dengan panjang 100%.

Membuat Full Screen Iframe

Bagaimana membuat iframe yang satu layar monitor penuh?

Nah, ini dibutuhkan bantuan kode CSS, berikut ini:

body, html
 {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
 }

#content
 {
  position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
 }

Kemudian untuk kode iframenya sebagai berikut:

<div id="content">
<iframe width='100%' height='100%' frameborder='0' src='https://puntadewa.my.id/' /></iframe>
</div>

Perhatikan, disana saya tambahkan tag div content. Tag tersebut saya beri style CSS dengan atribut posisinya absolute, dan margin semuanya diset 0.

Hasilnya seperti apa?

Supaya lebih paham, silahkan download file htmlnya disini.

Masih Bingung? Tanya dong yaaaak di kolom komentar.

Leave a Comment