iFrame HTML

Dalam tutorial ini akan belajar bagaimana menggunakan iframe untuk menampilkan halaman web di dalam halaman web lain.

Apa itu iframe?

Iframe atau bingkai inline digunakan untuk menampilkan objek eksternal termasuk halaman web lain di dalam halaman web. Iframe cukup banyak bertindak seperti browser web mini di dalam browser web. Selain itu, konten di dalam iframe sepenuhnya independen dari elemen di sekitarnya.

Sintaks dasar untuk menambahkan iframe ke halaman web dapat diberikan dengan:

<iframe src="URL"></iframe>

URL yang ditentukan dalam atribut src menunjuk ke lokasi objek eksternal atau halaman web.

Contoh berikut menampilkan file "hello.html" di dalam iframe di dokumen saat ini.

<iframe src="hello.html"></iframe>

Mengatur Lebar dan Tinggi iFrame

Atribut height dan width digunakan untuk menentukan tinggi dan lebar iframe.

<iframe src="hello.html" width="400" height="200"></iframe>

Kalian juga dapat menggunakan CSS untuk mengatur lebar dan tinggi iframe, seperti yang ditunjukkan di sini:

<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>

Silakan lihat tutorial tentang Gaya HTML untuk mempelajari metode penerapan CSS ke elemen HTML.

CATATAN

Nilai atribut width dan height ditentukan dalam pixels secara default, tetapi Kalian juga dapat menyetel nilai ini dalam persentase, seperti 50%, 100%, dan seterusnya. Lebar default iframe adalah 300 piksel, sedangkan tinggi default adalah 150 pixels.

Menghapus Frameborder Default

Iframe memiliki batas di sekitarnya secara default. Namun, jika Kalian ingin mengubah atau menghapus batas iframe, cara terbaik adalah menggunakan properti batas CSS.

Contoh berikut hanya akan membuat iframe tanpa batas.

<iframe src="hello.html" style="border: none;"></iframe>

Demikian pula, Kalian dapat menggunakan properti border untuk menambahkan batas pilihan Kalian ke iframe. Contoh berikut akan membuat iframe dengan batas biru 2 pixels.

<iframe src="hello.html" style="border: 2px blue solid;"></iframe>

Menggunakan iFrame sebagai Target Tautan

Iframe juga dapat digunakan sebagai target untuk hyperlink.

Sebuah iframe dapat diberi nama menggunakan atribut name. Ini menyiratkan bahwa ketika tautan dengan atribut target dengan nama itu sebagai nilai diklik, sumber daya yang ditautkan akan terbuka di iframe itu.

Mari kita coba contoh untuk memahami cara kerjanya pada dasarnya:

<iframe src="demo-page.html" name="myFrame"></iframe>
<p>
  <a href="https://madao-code.web.app/" target="myFrame">Buka Madao Code</a>
</p>