Cara Membuat Iframe di HTML dengan mudah

Cara Membuat Iframe di HTML dengan mudah - Apa kabar semuanya? semoga dalam keadaan sehat wal afiat ya. Sekarang gubug web akan membagikan tutorial mengenai frame, seperti pada postingan sebelumnya yaitu membahas Dasar membuat frameset di HTML, ada sedikit yang berbeda disini ialah pada penulisan tag nya, yaitu dengan iframe, bila kita ingin mengetahui apa kegunaannya adalah untuk memanggil halaman lain agar bisa tampil di halaman home/index atau bisa diartikan untuk menampilkan website lain agar bisa tampil di website kita.

Mungkin ada sedikit perbedaan dengan tag frameset yaitu iframe tidak terlalu memperhatikan lebar antar halaman serta pada kolom dan baris nya. Untuk mengatur lebar dan tinggi nya halaman itu ditangani oleh tag lain seperti misalnya dengan tag table atau div. Namun ada kesamaan yaitu pada pembagian dokumen HTML nya, seperti yang sudah dibahas pada frameset yaitu pasti disitu ada halaman/dokumen sebagai dokumen master atau bisa kita katakan sebagai dokumen pemanggil dan akan ada dokumen/halaman yang dipanggilnya.

baca juga : Membuat Website sederhana dengan menggunakan frameset

Sekarang kita akan sama - sama membicarakan tentang tag dan attribut apa saja yang digunakan. Dimulai dari tag nya yaitu <iframe> dan memiliki tag penutup </iframe> berarti disini bersifat tag container. Selanjutnya mengenai attribut - attribut nya, diantaranya sebagai berikut :

• align, digunakan untuk menentukan perataannya, yang bisa kita gunakan yaitu right atau left.
• frameborder, digunakan untuk menentukan mau diberi border/garis batas atau tidak pada halaman iframenya.
• width, untuk menentukan lebar dari iframe tersebut, disarankan menggunakan satuan persen agar lebih dinamis.
• height, untuk menentukan tinggi dari iframe tersebut, disarankan menggunakan satuan persen agar lebih dinamis.
• scrolling, untuk menentukan di berikan scroll atau tidak pada iframenya, pilihan value yang bisa kita berikan yaitu yes, no, atau auto.
• src, untuk menampilkan halaman yang akan ditampilkan pada halaman awal/pembuka.

Untuk lebih jelas nya yuk mari kita ikuti secara teknis nya dibawah ini.
Screenshot

Tampilan halaman home.html

Tampilan halaman aboutme.html

Tools

• Web Editor (Notepad ++, DW, dll)
• Web Browser (Mozilla Firefox, Google Chrome, dll)

Cara Pasang
[Membuat dokumen yang dipanggil] [Halaman pertama]
Ketikan sintax dibawah ini

<p>Nama : Uzumaki Naruto <br>

Pengguna Jurus : Rasengan <br>

Ayah dan ibu saya sudah tiada ketika aku masih bayi, sampai akhirnya karena saya mempunyai tekad yang kuat sekarang bisa menggapai mimpi ku untuk menjadi hokage<br>

</p>

Simpan dengan ekstensi *.html atau dengan nama aboutme.html

[Membuat dokumen yang dipanggil] [Halaman kedua]
Ketikan sintax dibawah ini

<p>Website ini digunakan untuk menceritakan perjalanan hidup saya.</p>

Simpan dengan ekstensi *.html atau dengan nama home.html

[Membuat dokumen master] [Halaman ketiga]
Ketikan sintax dibawah ini

<a href="home.html" target="panggil">Home</a> | <a href="aboutme.html" target="panggil">About Me</a>



<iframe name="panggil" src="home.html" height=100% width=100% frameborder=no></iframe>

Simpan dengan ekstensi *.html atau dengan nama home.html

Perlu Diingat !!!

• Untuk mengikuti latihan diatas diharapkan agar sama dalam penulisan sintax nya serta penamaan halamannya, namun apabila sudah mulai paham bisa bebas memberikan penamaan halamannya.
• Dan untuk isi/content nya boleh diganti sesuai selera teman - teman ya, diatas hanya sekedar latihan saja.