.jpeg "Iframe dalam Html")
Iframe adalah sebuah tag Html yang digunakan untuk menampilkan sebuah halaman website ataupun dokumen html lainnya. Kita bisa menggunakan tag <iframe> untuk menampilkan sebuah halaman website ataupun dokumen lainnya.
Syntax Iframe
Selain menggunakan tag <iframe>, kita juga harus menggunakan beberapa property pendukung agar konten yang ditampilkan lebih sempurna. Apa saja property pendukung nya ? Berikut ini adalah property - property pendukung nya.
- src : untuk menampilkan konten / halaman yang dituju untuk ditampilkan
- width : lebar konten yang akan ditampilkan
- height : panjang konten yang akan ditampilkan
- srcdoc : untuk memuat code html
- title : sebagai tooltip dan akan dibaca oleh screen reader untuk aksebilitas
Selain property, ada juga beberapa attribut global yang dapat digunakan. Diantaranya sebagai berikut
- id
- class
- style
Setelah mengetahui beberapa property dan attribut global yang dapat mendukung tag <iframe> agar lebih sempurna, sekarang kita akan mulai mempelajari codingan nya. Contohnya sekarang saya akan menampilkan Blog Freeze Gans dibawah ini dengan tag <iframe>. Berikut ini adalah codingan nya.
<iframe src="https://freezegans.blogspot.com"></iframe>
Hasilnya seperti dibawah ini.
Mengapa hasilnya terlalu kecil ? Karena kita belum mengatur height (panjang) dari konten yang kita tampilkan. Jika kamu ingin mengatur width (lebar) nya, bisa kamu tambahkan property nya di dalam tag <iframe>. Untuk mengatur width dan height nya, kita bisa menggunakan dua cara. Pertama langsung menuliskan property width dan height dan yang kedua bisa kita tuliskan dalam attribut style. Berikut ini contoh codingan nya.
<!DOCTYPE html>
<html>
<body>
<iframe src="https://freezegans.blogspot.com" width="auto" height="auto"></iframe>
</body>
</html>
<!-- atau -->
<!DOCTYPE html>
<html>
<body>
<iframe src="https://freezegans.blogspot.com" style="width:auto;height:auto;"></iframe>
</body>
</html>
Hasilnya seperti dibawah ini.
Kamu bisa mengubah ukuran panjang dan lebar nya sesuai keinginan. Disini saya hanya menggunakan auto.
Sekarang kita akan membahas property srcdoc yang akan memuat code html. Berikut ini adalah codingan nya.<!DOCTYPE html>
<html>
<body>
<iframe srcdoc="<p>Selamat datang di Blog Freeze Gans</p><p>Tutorial Tentang Iframe</p>"></iframe>
</body>
</html>
Hasilnya seperti dibawah ini
Diatas adalah contoh penggunaan property srcdoc, sekarang kita akan coba untuk menambahkan CSS nya. Berikut ini contoh codingan nya.
<!DOCTYPE html> <html> <body> <iframe srcdoc="<p style='color: blue; background-color: red;'>Selamat datang di Blog Freeze Gans</p><p style='color: yellow; background-color: blue;'>Tutorial Tentang Iframe</p>"></iframe> </body> </html>
Hasilnya seperti dibawah ini
Bagaimana ? Mudah kan ? Jika kamu masih belum mengerti, silahkan bertanya di kolom komentar yang sudah tersedia. Sekian dan Terimakasih.