Iframe yang berasal dari kata inline frame adalah tag HTML yang digunakan untuk menampilkan halaman lain pada halaman web yang dibuat. Halaman yang ditampilkan bisa berasal dari website lain ataupun halaman lain pada website kita. Contohnya untuk menampilkan video YouTube pada halaman web maka kita bisa menggunakan iframe. Show
Cara Membuat iframe di HTMLIframe pada HTML dibuat dengan menggunakan tag <iframe>. Lalu diberi atribut <html> <head><title>Belajar Form</title></head> <body> <form action="submit.php" method="POST"> <p>Username: <input type="text" name="username" /></p> <p>Password: <input type="password" name="pass" /></p> <input type="button" name="submit" value="submit" /> </form> </body> </html>0 untuk menentukan lokasi halaman yang ditampilkan. Untuk mengatur lebar dan tinggi iframe dapat menggunakan atribut <html> <head><title>Belajar Form</title></head> <body> <form action="submit.php" method="POST"> <p>Username: <input type="text" name="username" /></p> <p>Password: <input type="password" name="pass" /></p> <input type="button" name="submit" value="submit" /> </form> </body> </html>1 dan <html> <head><title>Belajar Form</title></head> <body> <form action="submit.php" method="POST"> <p>Username: <input type="text" name="username" /></p> <p>Password: <input type="password" name="pass" /></p> <input type="button" name="submit" value="submit" /> </form> </body> </html>2. Agar lebih jelas berikut ini contoh kode HTML iframe dari website lain: <!DOCTYPE html> <html> <head> <title>Belajar iframe HTML</title> </head> <body> <h1>Contoh penggunaan iframe</h1> <p>Di bawah ini kita akan menampilkan halaman wikipedia pada halaman ini.</p> <iframe src="https://id.wikipedia.org/wiki/Halaman_Utama" width="800" height="500"></iframe> </body> </html> Hasil tampilan di web browser: Penjelasan: Pada baris ke-9 kita menampilkan halaman wikipedia dengan menggunakan iframe. Value dari atribut src diisi dengan alamat URL dari halaman yang akan ditampilkan yaitu wikipedia. Kemudian untuk mengatur lebar dan tinggi tampilannya kita dapat menggunakan width dan height. Ukurang yang digunakan pada width dan height adalah pixel. Bagaimana jika sumber atau halaman yang ingin kita tampilkan adalah berasal dari halaman atau file kita sendiri. Pertama kita siapkan dahulu halaman atau file yang akan menjadi sumber. Kita akan menggunakan kode HTML yang kita buat pada materi HTML sebelumnya yaitu materi membuat form di HTML (form login). <html> <head><title>Belajar Form</title></head> <body> <form action="submit.php" method="POST"> <p>Username: <input type="text" name="username" /></p> <p>Password: <input type="password" name="pass" /></p> <input type="button" name="submit" value="submit" /> </form> </body> </html> Simpan kode di atas dengan nama login.html. Lalu selanjutnya kita buat file baru lagi untuk menampilkan form login di atas menggunakan iframe: <!DOCTYPE html> <html> <head> <title>Belajar iframe HTML</title> </head> <body> <h1>Contoh iframe dari halaman sendiri</h1> <p>Berikut ini form login yang kita tampilkan dari file login.html dengan menggunakan iframe.</p> <iframe src="login.html" width="500" height="150"></iframe> </body> </html> Hasilnya: Penjelasan: Pada baris ke-9 di atas kita menampilkan halaman kita sendiri yang telah dibuat pada file login.html. Secara default, tampilan yang dihasilkan oleh tag <iframe> memiliki border dan juga scrollbar. Jika kita ingin menghilangkannya maka kita dapat menggunakan beberapa cara. Simak juga cara membuat list di html. Menghilangkan Border pada iframeUntuk menghilangkan border, pada HTML versi 4 dan versi dibawahnya dapat digunakan atribut frameborder dengan value 0. Berikut ini potongan kodenya: <iframe src="https://id.wikipedia.org/wiki/Halaman_Utama" width="800" height="500" frameborder="0"></iframe> Namun pada HTML5 frameborder sudah tidak disupport lagi. Kita harus menggunakan CSS. Berikut ini kodenya: <iframe src="https://id.wikipedia.org/wiki/Halaman_Utama" width="800" height="500" style="border:none;"></iframe> Saran: Gunakan ketentuan terbaru yaitu menggunakan CSS jika ingin menghilangkan border pada iframe. Pelajari juga materi lainnya tentang struktur html lengkap. Menghilangkan Scroll pada IframeTerkadang kita tidak ingin menampilkan scrollbar pada iframe yang kita buat. Untuk menghilangkannya kita dapat menggunakan atribut scrolling dengan value no. Berikut potongan kodenya: <iframe src="https://id.wikipedia.org/wiki/Halaman_Utama" width="800" height="500" scrolling="no"></iframe> Setelah kita menambahkan scrolling=”no” maka iframe tersebut juga tidak bisa di-scroll. Pada prakteknya iframe sering digunakan oleh web developer untuk menampilkan video dari YouTube pada halaman web. Secara default, YouTube menyarankan menggunakan iframe untuk menampilkan videonya. Lihat juga: membuat tabel pada HTML. Menampilkan Video YouTube menggunakan iframeUntuk menampilkan video YouTube pada halaman web kita dengan menggunakan HTML caranya adalah:
Contoh kode HTML dari YouTube: <iframe width="956" height="538" src="https://www.youtube.com/embed/2lAe1cqCOXo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> Simak juga fungsi head pada html. Membuat Hyperlink untuk iframeKita bisa membuka link pada iframe yang kita inginkan dengan menggunakan atribut target. Nah, inilah perbedaan antara link biasa dan iframe. Pada tag <a> ditambahkan atribut target, pada tag <iframe> ditambahkan atribut name. Value kedua atribut tersebut harus sama. Agar mudah dipahami, mari kita praktekkan. Pertama, buat file login.html dan isi dengan kode di bawah ini: <html> <head><title>Belajar Form</title></head> <body> <form action="submit.php" method="POST"> <p>Username: <input type="text" name="username" /></p> <p>Password: <input type="password" name="pass" /></p> <input type="button" name="submit" value="submit" /> </form> </body> </html> Kedua, buat file daftar.html dan isi dengan kode di bawah ini: <html> <head><title>Belajar Form</title></head> <body> <form action="submit.php" method="POST"> <p>Username: <input type="text" name="username" /></p> <p>Umur: <input type="number" name="umur" /></p> <p>E-mail: <input type="email" name="email" /></p> <p>Password: <input type="password" name="password" /></p> <p>Tanggal Lahir: <input type="date" name="tanggallahir" /></p> <p>Foto: <input type="file" name="foto" /><br /></p> <p>Jenis kelamin: <input type="radio" name="jeniskelamin" value="pria"> Pria <input type="radio" name="jeniskelamin" value="wanita"> Wanita</p> <br /><br /> <p>Saya bersedia mengikuti aturan forum <input type="checkbox" name="bersedia_ikut" value="ya"></p><br /><br /> <input type="hidden" name="userid" value="3487"> <input type="reset" value="Reset"> <input type="button" name="submit" value="submit" /> </form> </body> </html> Ketiga, buat file index.html lalu isi dengan kode di bawah ini: <!DOCTYPE html> <html> <head> <title>Belajar iframe HTML</title> </head> <body> <h1>Belajar Hyperlink Target Iframe</h1> <p>Iframe di bawah ini akan menampilkan link yang kita klik.</p> <iframe name="tes1" width="800" height="300"></iframe> <p><a href="login.html" target="tes1">Login</a> | <a href="daftar.html" target="tes1">Daftar</a></p> </body> </html> Buka index.html pada web browser maka akan ada tampilan iframe kosong dengan 2 link di bawahnya yaitu login dan daftar. Jika link login di-klik maka iframe akan menampilkan form login. Jika link daftar di-klik maka akan menampilkan form daftar. Syarat agar link bisa ditampilkan pada iframe adalah nama pada tag Apa itu iFrame dalam HTML?IFRAME adalah tag HTML yang digunakan dalam desain web untuk menampilkan sebuah laman web dalam sebuah bingkai pada sebuah laman web lainnya.
Apa perbedaan antara frame dan iFrame?Lebih jelasnya, berikut ini beberapa perbedaan antara frame dan iframe: Frame memerlukan frameset; iframe dapat berdisi sendiri tidak perlu frameset. Ukuran frame ditentukan duluan; iframe bebas. Posisi frame jelas dan berpatokan pada bagian sebelah kiri; iframe bersifat inline sehingga bebas diletakkan di mana saja.
Apa saja yang bisa di muat dalam iFrame pada HTML?IFrame adalah inline frame yang digunakan di dalam halaman web untuk memuat dokumen HTML lain di dalamnya.. Iklan.. Video Youtube.. Google Maps.. Posting media sosial.. Apa keuntungan menggunakan iFrame?Menghemat Penggunaan Media Penyimpanan (Storage)
karena Anda tidak perlu lagi mengupload file tersebut di media library Anda. Dengan melakukan embedding iFrame, maka file yang Anda gunakan tersebut tidak akan tersimpan di server. Sehingga, Anda tidak perlu memikirkan kekurangan ruang penyimpanan Anda lagi.
|