Ahmad Dahlan I'm just ordinary man with a big dream

Belajar HTML – Membuat Jendela dengan Tag Iframe

58 sec read

membuat inline frame dengan iframe

Matamu.NET – Tag Iframe HTML digunakan untuk memasukkan laman website ke dalam sebuah laman website. Laman website tersebut akan ditampilkan dalam bentuk jendela yang melekat pada laman. Sumbernya bisa berasal dari laman website sendiri maupun laman website lain.

A. Syntax Iframe HTML

Inline frame ditulis dengan tag <iframe>. Syntax Ifram ditulis dengan urutan sebagai berikut :

<iframe src="url" title="description">

Secara default Elemen HTML ini menampilkan laman dari link yang menjadi target. Kita dapat mengatur ukuran box Iframe dengan attribute width (lebar) dan height (tinggi).

Contoh Syntax dari Iframe dengan attribute Height dan Witdh sebagai berikut :

<iframe src="url" height="200" width="300" title="Iframe Example"></iframe>

atau syntax bisa dimasukkan ke dalam style dengan syntax sebagai berikut :

<iframe src="url" style="height:200px; width:300px;" title="Iframe Example"></iframe>

Catata : Karena Style lebih tinggi dari CSS, maka menulsikan ukuran box ifram dengan style akan mencegah box tersebut dienterupsi oleh CSS. Jika langusng ditulis dalam bentuk attributte, maka attribute tersebut akan dienterupsi css.

Responsive Size

Value dari attribute height dan width di Iframe bisa dimasukkan ke dalam bentuk fix yakni px atau responsive. Responsive itu berarti ukurannya mengikuti ukuran device yang digunakan dengan value %.

<iframe src="url" style="height:200px; width:100%;" title="Iframe Example"></iframe>

Catatan :

Iframe ini banyak digunakan untuk memasukkan fitur yang tidak bisa disediakan pada pada website anda seperti memasukkan URL video dari Youtube.

Membuat Source pemutar Video cukup berat apalagi pengguna VPS speksifikasi rendah. Jadi kita gunakan saja YouTube sebagai tempat penyimpanan dan pemutar Video, lalu masukkan Video tersebut dengan Tag Iframe.

Ahmad Dahlan I'm just ordinary man with a big dream

Leave a Reply

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