Belajar HTML Lengkap Part 18 : Cara Menampilkan Website Dengan Iframe (tag iframe)

Pengertian tag <iframe> pada HTML

Halo.. sobat ngoding, pada kesempatan hari ini kita akan belajar salah satu tag yang ada pada HTML yaitu tag <iframe> . Sebelum itu saya mau tanya dulu, pertanyaan nya adalah pernah gak temen-temen mengunjungi website atau blog yang di dalam nya terdapat kotak persegi dan di dalam kotak tersebut menampilkan halaman atau konten dari website lain ? misalkan saya ambil contoh kalian mengunjungi situs berita nih.. pada situs berita tersebut selain menampilkan berita-berita terkadang juga menanamkan konten dari website lain (embed) contoh nya menampilkan kurs mata uang yang di ambil dari situs lain atau mungkin teman-teman pernah menemui website atau blog menanamkan video yang asal nya dari situs pihak ketiga misalkan youtube, pernah gak ? saya anggap pasti pernah lah ya hehe. Semua contoh di atas bisa di buat menggunakan tag <iframe> , pengen tau cara membuat nya ? simak dulu berikut apa definisi dari tag <iframe> di bawah ini.

Tag <iframe> adalah tag yang mempunyai fungsi untuk menghubungkan konten dari halaman website lain kedalam halaman website kita tanpa harus membuka website tersebut secara langsung. Tag <iframe> dalam penggunan umum bisa untuk menyisipkan halaman, script iklan, aplikasi serta video dari situs lain. Tag <iframe> memiliki tag penutup </iframe> dan untuk menampilkan website lain ke dalam halaman kita perlu menambahkan atribut src ke dalam tag pembuka <iframe> sebagai alamat (URL) dari website lain yang ingin di tampilkan pada halaman website kita.

Atribut-atribut pada tag <iframe>

Selain atribut src yang ada pada tag <iframe> ada juga beberapa atribut penyusun lain nya yang umum di gunakan pada tag <iframe>, berikut atribut yang ada pada tag <iframe> beserta fungsinya di bawah ini :

Atribut	Nilai	Fungsi
src	URL	Untuk menempatkan alamat (URL) dari konten atau halaman website lain ke dalam kotak iframe.
sandbox	allow-forms. allow-pointer-lock. allow-popups. allow-same-origin. allow-scripts. allow-top-navigation	ini di gunakan untuk membolehkan batasan-batasan tambahan untuk konten pada iframe.
name	teks	Untuk memberikan nama atau variabel pada elemen iframe agar dapat di identifikasi.
seamless	seamless	Ini di gunakan untuk menentukkan bahwa iframe harus nampak seperti bagian dari konten dalam dokumen tersebut.
srcdoc	kode_html	Ini di gunakan untuk menentukkan konten halaman HTML yang akan ditampilkan dalam sebuah iframe
height	pixels	Untuk mengatur ukuran tinggi iframe.
width	pixels	Untuk mengatur ukuran lebar iframe.

Cara membuat iframe pada HTML

Berikut kode HTML untuk menampilkan konten atau halaman dari website lain, perhatikan berikut ini :

Kode HTML contoh 1 :

<iframe src="https://ngodingtah.blogspot.com" name="contoh1" height="500px" width="500px"></iframe>

Hasil dari contoh 1 :

Penjelasan contoh 1 :

Untuk contoh satu di atas pada iframe akan secara otomatis membuka halaman beranda dari blog Ngodingtah ? karena nilai yang di tulis pada atribut src mengarah ke halaman tersebut, kemudian nilai dari atribut height di isi dengan 500px dan width juga di isi dengan nilai 500px yang artinya akan membuat iframe dengan ukuran tinggi serta lebar 500px, sedangkan atribut name di isi dengan nilai contoh1 yang berarti memberikan nama variabel pada iframe dengan nama contoh1.

Kode HTML contoh 2 :

<iframe src="demo_iframe_sandbox_form.htm" sandbox="allow-forms"></iframe>

Hasil contoh 2 :

Penjelasan contoh 2 :

Untuk contoh 2 disini iframe di arahkan pada sebuah halaman di mana halaman tersebut berisi sebuah form, karena pada elemen iframe di berikan atribut sandbox dengan nilai allow-forms yang artinya membolehkan sebuah form di proses pada iframe jadi form dalam iframe dapat di proses, jika atribut sandbox tidak di definisikan maka form tidak dapat di jalakan karena di blokir oleh iframe. Untuk demo dari contoh 2 teman-teman dapat mengunjungi link yang ada di bawah ini :

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_iframe_sandbox_form

Kode HTML contoh 3 :

<iframe seamless="seamless" srcdoc="<p>Hello world!</p>" src="https://ngodingtah.blogspot.com"></iframe>

Hasil dari contoh 3 :

Penjelasan contoh 3 :

Atribut srcdoc menentukan konten HTML halaman untuk ditampilkan dalam iframe, jika browser yang di gunakan support dengan atribut srcdoc maka yang akan tampil adalah nilai dari atribut srcdoc, jika tidak support maka akan membuka halaman yang ada pada nilai atribut src sedangkan atribut seamless di gunakan untuk menentukkan bahwa iframe harus nampak seperti bagian dari konten dalam dokumen tersebut.

Demikian semoga materi yang di sampaikan jelas sampai jumpa di episode berikutnya, Terimakasih.

Incoming search terms :

→ membingkai web page dengan tag iframe
→ iframe full page
→ iframe video
→ iframe script
→ iframe no border
→ contoh penggunaan dan fungsi iframe
→ cara iframe
→ iframe pada html
→ contoh iframe
→ web menampilkan isi html
→ cara membuat iframe di html
→ contoh website yang menggunakan iframe
→ apa yang di maksud iframe
→ materi tentang iframe html
→ rio annada putra

Ngoding Tah ?

Manusia Kalem Yang Senang Ber-exsperimen.

Share this post