Tutorial HTML 37 : Cara Input iFrame ke Web Page

Last Updated on August 22, 2022 by

iFrame adalah salah satu elemen penting dari web page HTML. Seri belajar HTML berikut ini akan mengupas tuntas cara menggunakan HTML iFrame beserta contoh-contoh kodenya.

Belajar HTML : Definisi iFrame Adalah

HTML iFrame adalah singkatan dari inline frame. iFrame merupakan bagian dokumen web khusus untuk menyematkan dan menampilkan suatu dokumen terpisah.

Elemen iFrame pertama kali diperkenalkan di HTML5, menggantikan <frame> yang dinilai ketinggalan zaman.

Anda bisa menggunakan iFrame untuk menampilkan halaman web di dalam halaman web lain. Adapun contoh koding pemakaian iFrame adalah :

<iframe src="https://www.codekey.id" width="50%" height="500px"></iframe>

Setiap HTML iFrame secara otomatis ditandai dengan garis pinggir (border) standar. Namun Anda tetap bisa mengubah bentuk, model, warna, atau bahkan menghapus garis pinggir tersebut memakai properti border CSS:

<iframe src=" https://www.codekey.id " width="50%" height="500px" style="border: none;"></iframe>
 

Struktur Sintaksis HTML iFrame Adalah

Gunakan tags <iframe> untuk memasukkan iFrame ke website Anda. Struktur sintaksis HTML iFrame adalah:

<iframe src="page_URL"></iframe>

Sama seperti di hyperlink, URL halaman yang akan Anda sertakan harus ditentukan dalam atribut src. Atribut ini harus disertakan ke kode iFrame agar dapat berfungsi sebagaimana mestinya.

4.  Atribut HTML iFrame Adalah

Terdapat empat atribut penting dalam iFrame yang bisa Anda gunakan. Adapun keempat atribut iFrame adalah:

• Src: menentukan URL yang disematkan.
• Height dan Width: menetapkan ukuran panjang (height) dan lebar (width) dokumen.
• Name: mendefinisikan nama iFrame.
• Sandbox: membatasi penayangan konten tertentu.

1. Atribut SRC

Atribut src menentukan URL (alamat web) halaman yang akan disematkan di iFrame. Kode ini juga dapat merujuk pada suatu dokumen HTML. Contoh kodingnya adalah:

<iframe src="https://www.codekey.id">Teks ini ditampilkan jika iframe tidak didukung</iframe>

2. Atribut Width dan Height

Elemen width dan height merupakan pasangan atribut iFrame yang saling melengkapi.

Atribut width menetapkan ukuran lebar dari iFrame HTML; sementara height menetapkan ukuran panjang.

Nilai keduanya sudah langsung diatur dalam satuan piksel, namun masih bisa diubah ke bentuk persen dengan memakai simbol persen (%).

Contoh kodingnya adalah:

<iframe src=" https://www.codekey.id" width="50%" height="500px"></iframe>

3. Atribut Name

Atribut name (nama) bersifat opsional dan berfungsi untuk menetapkan nama dari elemen iFrame. Contoh koding iFrame dengan atribut name:

<iframe src=" https://www.codekey.id" name="iframe_example "></iframe>

4. Atribut Sandbox

Sama seperti name, atribut sandbox juga bersifat opsional.

Kode sandbox berfungsi menambah batasan-batasan tertentu di konten iFrame HTML. Ketika digunakan, ia dapat “melarang” konten memakai plugin atau memutar media yang sifatnya berat (seperti video) secara otomatis.

Contoh penerapan kode sandbox di iFrame:

<iframe src=" https://www.codekey.id" sandbox></iframe>

Tips Bonus Belajar HTML iFrame

• Anda dapat menumpuk elemen <p> dalam tag <iframe> untuk menambahkan teks tertentu saat browser user tidak mendukung iFrame. Teks tersebut dapat ditampilkan secara otomatis.
• Beberapa contoh terbaik pemakaian iFrame pada HTML adalah penyematan contoh kode di web edukasi, penambahan objek multimedia (seperti video) di artikel, atau memberikan applet (aplikasi kecil; plugin) dari pihak ketiga.

Demikianlah pembahasan belajar HTML iFrame kali ini. Jangan sampai ketinggalan belajar koding HTML lainnya hanya di CODEKEY! Yuk baca gratis artikel-artikel edukatifnya sekarang juga di https://codekey.id/, sampai bertemu lagi.