IFRAME adalah elemen HTML yang memungkinkan Anda menyisipkan konten dari sumber eksternal ke dalam halaman web Anda. Ini dapat berupa halaman web lain, video, peta, widget, atau konten lain yang berasal dari domain yang berbeda. Dalam tutorial ini, kami akan menjelaskan cara menggunakan tag <iframe> untuk menyematkan konten dari sumber eksternal ke dalam halaman web Anda.
Apa itu IFRAME?
IFRAME adalah singkatan dari “Inline Frame”. Ini adalah elemen HTML yang membentuk kotak atau frame kecil di dalam halaman web Anda, yang dapat berisi konten dari sumber eksternal. Konten ini dapat berasal dari domain yang berbeda dan akan ditampilkan dalam kotak yang terpisah di dalam halaman utama.
Penggunaan Dasar IFRAME
Berikut adalah contoh penggunaan dasar tag <iframe>:
1 | <iframe src="https://www.tutupkurung.com"></iframe> |
Dalam contoh ini, halaman web dari “https://www.tutupkurung.com” akan ditampilkan di dalam kotak IFRAME di halaman web Anda.
Menentukan Lebar dan Tinggi IFRAME
Anda dapat menentukan lebar dan tinggi IFRAME menggunakan atribut width dan height:
1 | <iframe src="https://www.tutupkurung.com" width="600" height="400"></iframe> |
Mengatur Border dan Responsif
Anda dapat menghilangkan border di sekitar IFRAME dengan mengatur atribut frameborder menjadi “0”:
1 | <iframe src="https://www.tutupkurung.com" frameborder="0"></iframe> |
Untuk membuat IFRAME responsif, Anda bisa menggunakan CSS dengan memanfaatkan teknik “padding hack”:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <style> .responsive-iframe { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ } .responsive-iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <div class="responsive-iframe"> <iframe src="https://www.tutupkurung.com"></iframe> </div> |
Contoh Full Laman Web dengan IFRAME
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <title>Contoh Halaman Web dengan IFRAME</title> <style> .iframe-container { position: relative; width: 100%; padding-bottom: 60%; /* Adjust this value for aspect ratio */ height: 0; } .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } </style> </head> <body> <h1>Situs Web dalam IFRAME</h1> <div class="iframe-container"> <iframe src="https://www.tutupkurung.com"></iframe> </div> </body> </html> |
Hasil pada Web Browser:
Mengakses Konten yang Aman
Penting untuk diingat bahwa saat menggunakan IFRAME, Anda perlu memperhatikan keamanan. Jangan menyematkan konten dari sumber yang tidak tepercaya, karena ini dapat membuka potensi serangan cross-site scripting (XSS) dan ancaman keamanan lainnya.
Kesimpulan
Penggunaan tag <iframe> memungkinkan Anda untuk dengan mudah menyematkan konten dari sumber eksternal ke dalam halaman web Anda. Ini adalah cara yang berguna untuk menampilkan video, peta, widget, atau halaman lain di dalam konteks situs web Anda. Tetapi selalu perhatikan keamanan dan pastikan Anda hanya menyematkan konten dari sumber yang tepercaya. Dengan memahami dan menguasai penggunaan IFRAME, Anda dapat memberikan pengalaman yang lebih kaya dan interaktif kepada pengunjung situs Anda.
Tutorial lengkap html dapat anda lihat pada Index Tutorial HTML: Tingkat Dasar Hingga Tingkat Lanjut.