Cara Membuat Iframe pada HTML
Iframe pada HTML merupakan singkatan dari Inline Frame. Tag "iframe" mendefinisikan suatu wilayah persegi panjang beserta dokumen yang ditampilkan oleh browser yang terpisah dari dokumen lainnya, termasuk scrollbar dan border-nya. Inline frame digunakan untuk embed (menanamkan) dokumen lain bersamaan dengan dokumen HTML yang digunakan saat ini.
Sebelum mempelajari materi tentang Cara Membuat Iframe pada HTML, terlebih dahulu pelajari materi tentang: Cara Menampilkan Gambar pada HTML Menggunakan Tag Image, Pembagian Layout pada HTML dan CSS, dan Cara Menggunakan File Path pada HTML.
Atribut 'src' digunakan untuk URL spesifik dari dokumen yang menempati sebuah frame.
Sintak: <iframe src="URL"></iframe>
Atribut panjang dan lebar digunakan untuk menspesifikkan ukuran dari Iframe. Nilai atribut secara spesifik dinyatakan dalam ukuran pixel secara default, tetapi juga dapat dinyatakan dalam ukuran lainnya seperti persen.
<!DOCTYPE html>
<html>
<body>
<p>
Konten berada disini:
</p>
<iframe
src="https://www.penelitian.id/"
height="300"
width="400">
</iframe>
</body>
</html>
Output:
Konten berada disini:
Baca Juga:
Menghilangkan Border pada Iframe:
Secara default, iframe memiliki border yang mengelilinginya. Untuk menghilangkan border tersebut, maka digunakan atribut style dan properti border CSS.
Contoh:
Secara default, iframe memiliki border yang mengelilinginya. Untuk menghilangkan border tersebut, maka digunakan atribut style dan properti border CSS.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p>
Konten berada disini:
</p>
<iframe
src="https://www.penelitian.id/"
height="300"
width="400"
style="border:none;">
</iframe>
</body>
</html>
Output:
Konten berada disini:
Mengubah Ukuran, Style, dan Warna dari Border Iframe:
Contoh:
<!DOCTYPE html>
<html>
<body>
<p>
Konten berada disini:
</p>
<iframe
src="https://www.penelitian.id/"
height="300"
width="400"
style="border:4px solid orange;">
</iframe>
</body>
</html>
Output:
Konten berada disini:
Mentargetkan Alamat Link yang Digunakan Iframe:
Iframe dapat digunakan sebagai target frame untuk link. Atribut target dari link harus mengacu nama atribut dari iframe.
Contoh:
Iframe dapat digunakan sebagai target frame untuk link. Atribut target dari link harus mengacu nama atribut dari iframe.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p>
Klik link teks berikut:
</p>
<iframe
height="300"
width="350"
src="https://www.penelitian.id/"
name="iframe_a">
</iframe>
<p>
<a
href="https://www.penelitian.id/"
target="iframe_a">
blog ElfanMauludi
</a>
</p>
</body>
</html>
Output:
Klik link teks berikut:
Klik link blog ElfanMauludi, maka Frame akan menuju ke alamat atau link dari Frame.Elemen <iframe> dalam HTML adalah alat yang kuat dan serbaguna yang memungkinkan pengembang web untuk menyisipkan konten dari satu halaman web ke dalam halaman web lainnya. Inilah beberapa keunggulan yang dimiliki oleh elemen <iframe>:
- Integrasi Konten Eksternal: Salah satu keunggulan utama dari elemen <iframe> adalah kemampuannya untuk menyisipkan konten dari sumber eksternal ke dalam halaman web. Ini memungkinkan penggunaan sumber daya seperti video, peta, widget, atau konten dari situs web lain secara mudah dan cepat.
- Pemisahan Konten dan Manajemen: Elemen <iframe> memungkinkan pengembang untuk memisahkan atau membagi konten. Konten yang disisipkan melalui iframe dapat dikelola secara terpisah dari halaman utama, mempermudah pemeliharaan, pembaruan, atau penggantian konten tanpa harus mengubah halaman utama.
- Penyediaan Konten yang Dinamis: Iframe memungkinkan penyediaan konten dinamis dalam halaman web. Penggunaan iframe untuk menampilkan konten yang diperbarui secara real-time, seperti kotak obrolan, feed media sosial, atau berita terbaru, dapat memberikan pengalaman yang lebih segar dan menarik bagi pengguna.
- Pembagian Halaman Web: Dalam beberapa kasus, iframe dapat digunakan untuk membagi halaman web menjadi bagian-bagian yang terpisah. Ini berguna dalam menampilkan bagian dari situs web lain yang relevan, seperti menu navigasi yang tetap, pembaruan status, atau konten terkait di sisi halaman.
- Integrasi dengan Layanan Pihak Ketiga: Penggunaan iframe memungkinkan integrasi dengan layanan pihak ketiga dengan mudah. Misalnya, untuk menyematkan formulir pendaftaran layanan pihak ketiga atau memperlihatkan konten dari layanan eksternal tanpa perlu meninggalkan halaman utama.
- Meningkatkan Modularitas: Dengan menggunakan elemen <iframe>, halaman web dapat dirancang secara modular. Pengembang dapat membuat bagian-bagian yang dapat digunakan kembali atau widget yang dapat disisipkan di berbagai halaman tanpa perlu menulis ulang kode secara berulang.
- Kombinasi Konten dari Berbagai Sumber: Iframe memungkinkan kombinasi konten dari berbagai sumber. Penggunaan iframe memungkinkan pengembang untuk menggabungkan konten dari situs web yang berbeda, menciptakan pengalaman pengguna yang lebih lengkap dan informatif.
- Ketergantungan yang Rendah: Penggunaan iframe juga memungkinkan pengembang untuk menambahkan fungsionalitas tanpa bergantung pada teknologi atau framework tertentu. Ini memungkinkan pengembang untuk tetap fleksibel dalam penggunaan teknologi.
Meskipun memiliki keunggulan, penggunaan iframe juga harus dipertimbangkan dengan hati-hati. Beberapa kendala yang mungkin timbul termasuk masalah keamanan terkait dengan situs web eksternal, masalah aksesibilitas, atau pengaruh terhadap SEO halaman web. Namun, dengan pemahaman yang baik tentang penggunaan yang tepat, iframe dapat menjadi alat yang sangat berguna dalam meningkatkan fungsionalitas dan pengalaman pengguna pada halaman web.
Elemen <iframe> dalam HTML adalah alat yang berguna untuk menyisipkan konten dari sumber eksternal ke dalam halaman web. Namun, selain kelebihannya, penggunaan <iframe> juga memiliki sejumlah kekurangan dan tantangan yang perlu dipertimbangkan:
- Masalah Keamanan: Salah satu kekurangan utama <iframe> adalah masalah keamanan. Ketika menyematkan konten dari sumber eksternal, terdapat risiko keamanan yang berkaitan dengan konten yang diambil dari situs web atau domain yang berbeda. Konten yang disisipkan dalam <iframe> dapat menjadi sasaran untuk serangan XSS (Cross-Site Scripting) jika tidak ditangani dengan benar.
- Pengaruh terhadap Kinerja dan Kecepatan Halaman: Penggunaan <iframe> dapat mempengaruhi kinerja dan kecepatan halaman. Situs web yang menggunakan banyak iframe atau menyematkan konten yang memerlukan banyak permintaan server eksternal bisa memperlambat waktu pemuatan halaman, terutama jika sumber daya yang disisipkan berasal dari server yang lambat.
- Masalah Responsivitas: Iframe dapat menimbulkan masalah responsivitas dalam desain responsif. Konten dalam iframe mungkin tidak responsif secara alami, menyebabkan kesulitan dalam menyesuaikan tampilan konten dengan baik di berbagai perangkat, terutama pada layar yang lebih kecil seperti perangkat mobile.
- Aksesibilitas Pengguna: Penggunaan iframe dapat menghadirkan masalah aksesibilitas. Konten dalam iframe mungkin tidak terbaca oleh teknologi pembaca layar atau dapat menyebabkan kesulitan bagi pengguna dengan kebutuhan khusus untuk mengakses informasi yang disajikan dalam iframe.
- Tantangan SEO (Search Engine Optimization): Meskipun mesin pencari modern bisa mengindeks konten dalam iframe, penggunaan iframe dalam beberapa kasus bisa mempengaruhi kinerja SEO. Konten dalam iframe mungkin tidak diindeks dengan baik, mengurangi kemampuan mesin pencari untuk memahami isi halaman secara keseluruhan.
- Kendala dalam Interaksi Antar-Konten: Saat menempatkan beberapa iframe dalam satu halaman, interaksi antar-konten mungkin menjadi terbatas. Konten dalam iframe biasanya terisolasi, yang dapat menyulitkan interaksi langsung antara konten dalam iframe dengan konten lain dalam halaman.
- Kompleksitas dalam Pengelolaan Konten: Penggunaan <iframe> dapat memperkenalkan kompleksitas dalam pengelolaan konten. Dengan menyematkan konten dari sumber eksternal, perlu perhatian ekstra dalam pemeliharaan, pembaruan, dan manajemen konten yang ada dalam <iframe>.
Saat menggunakan <iframe>, penting untuk mempertimbangkan kekurangan-kekurangan ini dan mengevaluasi apakah elemen tersebut merupakan solusi terbaik untuk kebutuhan spesifik dalam pembuatan halaman web. Terkadang, alternatif seperti penggunaan API atau integrasi langsung dapat menjadi pilihan yang lebih baik tergantung pada skenario penggunaan. Dalam banyak kasus, penggunaan <iframe> harus dilakukan dengan hati-hati dan memperhatikan dampaknya terhadap keamanan, kinerja, responsivitas, aksesibilitas, dan SEO halaman web.
Referensi Tambahan:
Artikel ini akan dibaca oleh: Achmad Cholis Najib, Adzraa Faradila Avilia Natasya Setiawan, Alvira Vita Listyandani, Andi Pebriyanto, dan Anisa Nurul Firdaus.
16 komentar untuk "Cara Membuat Iframe pada HTML"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa yang dimaksud dengan iframe pada html?
BalasHapusTag < iframe > digunakan untuk menentukan inline frame pada html. Bingkai tersebut digunakan untuk menyematkan dokumen lain pada dokumen HTML. Tag ini digunakan untuk membaca layar yang ditujukan terhadap konten pada Iframe.
HapusApa perbedaan antara Iframe dan Frame pada html?
BalasHapusPerbedaannya adalah Iframe dapat "float" di dalam konten pada halaman, dimana user dapat membuat halaman HTml dan menempatkan Iframe didalamnya, sehingga user dapat memiliki halaman dan menempatkannya pada dokumen lain secara langsung didalamnya. Sedangkan Frame tidak bisa.
HapusApakah aman untuk menggunakan iframe untuk menampilkan konten pada website?
BalasHapusGoogle merekomendasikan untuk tidak menggunakan Iframe pada halaman web. Pada forum google webmaster dengan jelas dinyatakan bahwa iframe dapat menyebabkan masalah bagi para penggunanya. Iframe terkadang digunakan untuk menampilkan konten pada halaman web, namun sangat dianjurkan untuk menghindari penggunaan iframe untuk menampilkan konten.
HapusFrame HTML digunakan untuk membagi jendela browser pengguna menjadi beberapa bagian dimana setiap bagian dapat memuat dokumen HTML secara terpisah. Kumpulan frame pada jendela browser dikenal sebagai frameset. Jendela atau window dibagi menjadi beberap frame dengan cara yang sama seperti pada proses pengaturan tabel yang diubah menjadi beberapa baris dan kolom.
BalasHapusApa yang dimaksud dengan frame atau bingkat dalam konteks web browser?
BalasHapusDalam konteks web browser, frame adalah bagian dari laman web atau jendela browser yang menampilkan konten secara independen dari sumbernya, dengan kemampuan untuk memuat konten secara mandiri.
HapusApa yang dimaksud dengan Iframe pada html?
BalasHapusIframe dalam HTMl adalah singkatan dari Inline Frame. Tag "Iframe" mendefinisikan wilayah persegi panjang pada dokumen tempat browser dapat menampilkan dokumen secara terpisah, termasuk juga scrollbar dan batas dokumen. Frame digunakan untuk menyematkan dokumen lain ke dalam dokumen HTML.
HapusApakah bisa menggunakan tag IFRAME pada html5?
BalasHapusPenggunaan elemen IFRAME pada HTML5 tetap dapat digunakan. Juga, jika IFRAME ingin dipergunakan untuk menampilkan konten html antar domain, proses tersebut juga tetap bisa berjalan lancar, selama tidak ada masalah pada domain yang akan ditampilkan.
HapusKenapa tidak dianjurkan untuk menggunakan IFRAME pada laman html?
BalasHapusBeberapa resiko keamanan yang dapat terjadi, jika sebuah laman menggunakan IFrame didalamnya.
Hapus1. Pengunjung situs kemungkinan akan mendapatkan sebuah formulir web berbahaya yang diapat dirikum dari sumber url tertentu yang didalmnya berisi phishing terhadap data pribadi dari pengunjung tersebut.
2. Pengguna yang berniat jahat dapat memasangi suatu plugin khusus pada situs yang telah dituju.
3. Pengguna dapat melakukan perubahan URL situs pada frame sehingga mengarah pada situs lain yang bersifat kejahatan.
4. Pengguna dapat melacak posisi dan jumlah klik dari pengguna yang lain pada situs yang terdapat frame tersebut.
5. Pengguna jahat dapat melakukan pembajakan terhadap sistem, atau dapat melakukan kendali jarak jauh melalui situs yang terpasang iframe tersebut.
Memang tidak terlalu dianjurkan bagi sebuah situs untuk menggunakan iframe didalamnya, selain memperlambar kinerja dari situs yang memiliki frame, juga situs yang ditautkan dapat melakukan perubahan sewaktu-waktu tanpa diketahui pihak situs yang membuat frame ke situs yang telah melakukan perubahan.
BalasHapus