Belajar HTML - Menampilkan Halaman Lain dengan Iframe

Januari 19, 2025
html-iframe

Halo teman-teman,

Setelah sebelumnya kita belajar tentang cara menggunakan ID di HTML, sekarang kita masuk ke fitur menarik yang memungkinkan kita menyisipkan halaman web lain ke dalam halaman kita sendiri, yaitu iframe.

Apa itu iframe? Iframe (inline frame) adalah elemen HTML yang digunakan untuk menampilkan halaman web lain di dalam sebuah halaman HTML. Ini bisa sangat berguna kalau kamu ingin menampilkan video, peta, atau halaman eksternal tanpa membuat pengunjung meninggalkan situs kamu.

Dasar Penggunaan <iframe>

Elemen iframe ditulis seperti ini:

<iframe src="https://www.example.com"></iframe>

  • src adalah URL dari halaman yang ingin kamu tampilkan

  • Secara default iframe punya ukuran dan border standar, tapi bisa disesuaikan

Menentukan Ukuran Iframe

Kamu bisa menambahkan atribut width dan height untuk mengatur ukuran iframe:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Atau menggunakan CSS langsung:

<iframe src="https://www.example.com" style="width:100%; height:500px;"></iframe>

Menghilangkan Border Iframe

Secara default, iframe punya border tipis. Kamu bisa hilangkan dengan CSS:

<iframe src="https://www.example.com" style="border:none;"></iframe>

Kamu juga bisa mengatur warna dan gaya border kalau memang dibutuhkan.

Iframe sebagai Target Link

Iframe bisa dijadikan sebagai target dari sebuah link. Caranya, kamu beri nama pada iframe dan arahkan link ke target tersebut.

Contoh:

<iframe src="halaman-awal.html" name="frameku" width="400" height="200"></iframe>
<a href="halaman-lain.html" target="frameku">Tampilkan halaman lain di iframe</a>

Saat link diklik, konten iframe akan berubah ke halaman yang baru tanpa reload seluruh halaman.

Hal yang Perlu Diperhatikan

  • Tidak semua situs mengizinkan kontennya ditampilkan lewat iframe (karena alasan keamanan)

  • Gunakan iframe hanya jika memang dibutuhkan agar halaman tetap ringan dan cepat dimuat

Dengan iframe, kamu bisa menampilkan banyak jenis konten dari luar ke dalam halaman HTML kamu. Tapi pastikan kamu tetap mempertimbangkan kenyamanan pengguna, ya.

Kalau kamu punya contoh penggunaan iframe atau pernah mengalami error saat menggunakannya, tulis aja di komentar. Kita bahas bareng!

Di materi selanjutnya, kita akan mulai mengenal JavaScript di HTML—bahasa pemrograman yang bikin halaman web jadi lebih interaktif dan dinamis. Sampai ketemu di tutorial berikutnya!

Tidak ada komentar