Belajar Koding HTML Bagian 15: Membuat Iframes

Inline Frame atau iFrame HTML adalah elemen yang berguna untuk menampilkan konten eksternal dalam halaman web, seperti video, maps, atau halaman web lain. Dengan kata lain, iFrame bertindak sebagai jendela ke dunia online lain yang langsung ditampilkan di halaman web milikmu. Dengan menggunakan iFrame, kamu dapat menambahkan konten dari sumber lain tanpa harus mengubah seluruh struktur atau layout halaman web. Artinya, kamu bisa menyajikan konten yang lebih dinamis dan interaktif tanpa perlu melakukan banyak perubahan pada kode HTML halaman. iFrame memberikan fleksibilitas dan keterpaduan, memungkinkan developer meningkatkan user experience dengan cara yang relatif sederhana.

Namun, penting untuk diingat bahwa menggunakan iFrame untuk menyematkan halaman web lain bisa menambahkan resource yang harus dimuat. Hal ini kemungkinan memengaruhi performa dan waktu pemuatan halaman. Oleh karena itu, penggunaan iFrame sering difokuskan pada konten seperti video atau maps saja agar menjaga efisiensi dan responsivitas. Dalam HTML, elemen <iframe> digunakan untuk menyematkan halaman web lain ke dalam halaman web Anda. Ini memungkinkan Anda menampilkan konten eksternal seperti video, peta, atau dokumen lain tanpa meninggalkan halaman utama.

Dalam HTML, elemen <iframe> digunakan untuk menyematkan halaman web lain ke dalam halaman web Anda. Ini memungkinkan Anda menampilkan konten eksternal seperti video, peta, atau dokumen lain tanpa meninggalkan halaman utama.

Contoh dasar penggunaan <iframe>:

Pada contoh di atas, atribut src menentukan URL halaman yang akan ditampilkan dalam iframe. Atribut width dan height mengatur ukuran iframe dalam piksel. Selalu disarankan untuk menyertakan atribut title yang menjelaskan isi iframe, guna meningkatkan aksesibilitas bagi pengguna yang menggunakan pembaca layar.

Atribut penting lainnya:

name: Menentukan nama untuk iframe, yang dapat digunakan sebagai target untuk tautan atau formulir.
allowfullscreen: Mengizinkan iframe untuk masuk ke mode layar penuh.
loading: Mengatur apakah iframe harus dimuat segera (eager) atau ditunda hingga diperlukan (lazy).
sandbox: Menerapkan serangkaian batasan keamanan pada konten dalam iframe.

Contoh penggunaan atribut name:

<a href="https://www.contoh.com" target="iframe_a">Buka Contoh.com di Iframe</a>

Tampilan Hasil (Output) Iframes

Tampilan Hasil (Output) Iframes, Jika di Klik alamat halaman tersebut

Dalam contoh ini, tautan akan membuka "https://www.contoh.com" di dalam iframe yang bernama "iframe_a".

Catatan penting:

Penggunaan iframe yang berlebihan dapat mempengaruhi kinerja halaman web Anda.
Beberapa situs mungkin membatasi penyematan konten mereka melalui iframe untuk alasan keamanan.
Pastikan konten yang disematkan berasal dari sumber tepercaya untuk menghindari risiko keamanan.

Dengan memahami dan menggunakan elemen <iframe> dengan tepat, Anda dapat meningkatkan interaktivitas dan fungsionalitas halaman web Anda.

Referensi