Some text some message..
Some text some message..
Some text some message..
Some text some message..

Tag <iframe> Pada HTML

Previous Page

Elemen <iframe> atau inline frame merupakan elemen HTML yang digunakan untuk menyertakan dokumen lain di dalam halaman HTML itu sendiri. Dokumen tersebut dapat berupa halaman HTML, script penyedia iklan pihak ketiga, contoh kode program, ataupun media berupa video, audio dan gambar. Bagi kalangan video bloger, iframe banyak digunakan untuk menyisipkan konten video didalam halaman webnya misalnya video dari youtube, facebook dan lainnya.

Tag <iframe> akan menghasilkan suatu frame window independen yang mengambang yang berisi dokumen lain di dalam dokumen html itu sendiri. <Iframe> memungkinkan Anda untuk menampilan suatu halaman lain yang berada di luar halaman kita. Anda dapat menggunakan atribut src sebagai sumber rujukan dokumen lain yang akan ditampilkan. Atribut width memberikan nilai lebar iframe dalam satuan piksel dan atribut height memberikan nilai tinggi iframe tersebut dengan satuan piksel.

Menyertakan Konten HTML Ke Dalam <Iframe>

Halaman HTML yang berbentuk terpisah yang independen maupun halaman website utuh dapat dimasukkan ke dalam halaman HTML. Hal ini diperlukan saat anda memiliki tujuan khusus seperti menyisipkan kode-kode tertentu kedalam halaman HTML namun berasal dari tempat yang terpisah. Berikut contoh menggunakan elemen <iframe> yang berasal dari sumber "https://www.saidalfaruq.net/html/tag-[l]pre[g]-preformatted-text-pada-html-y8z6ax0t"

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.     <head>
4.     <meta charset="utf-8">
5.     <title>Demo tag iframe HTML</title>
6.  </head>
7.  <body>
8.     <iframe width="560" height="315" src="https://www.saidalfaruq.net/html/tag-[l]pre[g]-preformatted-text-pada-html-y8z6ax0t" frameborder="0" allowfullscreen></iframe>
9.  </body>
10. </html>
11. 

Jika dijalankan akan menghasilkan tampilan seperti di bawah ini :

Dari contoh diatas, tag <iframe> memungkinkan pengguna untuk berinteraksi secara independen terhadap halaman HTML yang disertakan. Seperti menelusuri banyak tautan, berpindah dari link satu dengan lainnya tanpa harus keluar dari halaman HTML utama.

Menyertakan Konten Youtube Ke Dalam <Iframe>

Untuk menyertakan konten video yang berasal dari media sosial seperti Youtube, Facebook dan lainnnya cukup dengan menyebutkan sumber dalam bentuk URL yang ditulis di dalam atribut src. Hal yang perlu dipahami adalah terdapat beberapa versi URL yang selalu digunakan oleh youtube. Misalnya :

URL = "https://www.youtube.com/watch?v=RG9TMn1FJzc"
URL = "https://youtu.be/RG9TMn1FJzc"
URL = "https://www.youtube.com/embed/RG9TMn1FJzc"

Ketiga URL di atas mengacu pada halaman yang sama. Untuk menyertakan konten video youtube ke dalam sebuah <iframe> silahkan gunakan format penulisan URL yang terakhir.

Berikut ini contoh penggunaannya :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.     <head>
4.     <meta charset="utf-8">
5.     <title>Demo tag iframe HTML</title>
6.  </head>
7.  <body>
8.     <iframe width="560" height="315" src="https://www.youtube.com/embed/RG9TMn1FJzc" frameborder="0" allowfullscreen></iframe>
9.  </body>
10. </html>
11. 

Jika dijalankan akan menghasilkan tampilan seperti di bawah ini :

Atribut Khusus

Atribut khusus pada tag <iframe> meliputi :

  • name
    Menetapkan nama elemen iframe. Nilai : Teks
  • src (source)
    Menetapkan alamat dokument yang akan disertakan. Nilai : URL
  • width
    Menetapkan lebar elemen iframe. Nilai : angka (pixel)
  • height
    Menetapkan tinggi elemen iframe. Nilai : angka (pixel)
  • allowfullscreen
    Mengijinkan agar iframe dapat menjadi layar penuh. Nilai : true | false

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<iframe>yayayayaya

Global Attributes :

Tag <iframe> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Event Attributes :

Tag <iframe> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <iframe> pada HTML:

iframe{
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
}

noteCatatan : <Iframe> dapat membantu mengurangi beban penggunaan media penyimpanan dihosting misalnya konten yang berasal dari youtube. Karena file tersebut berasal dari youtube otomatis juga disimpan di server youtube. Namun <iframe> juga memiliki kerawanan dalam faktor keamanan. Anda harus benar-benar tahu keamanan dari situs tempat diletakkan file tersebut. Karena konten dalam <iframe> dapat disisipi malware yang bisa mengganggu halaman wesite anda.

facebooktwittergoogle pluswhatapplinkedinpinterest

Previous Page

Daftar Isi HTML