Mengenal Iframe Pada HTML ~ Setiyono's Blog

Assalamualaikum Wr.Wb

Pada kesempatan kali ini saya ingin mengajak teman semua untuk mengenal Iframe pada HTML tentunya dengan kemampuan semampu saya untuk itu bila ada kekurangan atau kesalahan mohon di koreksi.

Oke, Mari kita mulai.Apa itu Iframe?

Dan apa fungsinya? iframe berfungsi untuk menampilkan web page(halaman web) pada sebuah web page(halaman web). Maksudnya kita akan menampilkan suatu halaman web tertentu pada web kita. Tag yang digunakan untuk menampilkan iframe adalah <iframe> dan penutupnya </iframe>.

Penulisan Iframe kurang lebih seperti contoh di bawah ini

Sekarang mari kita belajar tentang tag dasar Iframe

Menampilkan halaman web lain:

<body>
<iframe src="navabar2.html"></iframe>
</body>

SS Coding

SS Hasil

Jika di lihat dari Coding saya di atas maka halaman HTML yang saya buat tidak memiliki script Navbar ataupun yang lain.Tetapi dengan Iframe saya dapat menampilkan halaman lain di HTML saya.Jadi seolah olah tampilan navbar tersebut ada di HTML itulah fungsi dari Tag Iframe.

Mengatur Tinggi dan lebar

Ini digunakan untuk mengatur tinggi dan lebar frame yang akan di tampilkan.

Berikut script nya:

<iframe src="navbar2.html" width="800" height="300"></iframe>

SS coding

SS Hasil

Dari hasil di atas terlihat bahwa ukuran frame yang di tampilkan berubah menjadi lebih besar.Atau teman - teman semua bisa mengatur lebar atau tinggi sesuai dengan keinginan.

Menghilangkan Border pada tepi frame

Pada syntax default Iframe sudah memiliki border,walaupun kita tidak menuliskan syntax border maka border akan muncul secara sendirinya.Untuk itu jika teman - teman semua maka bisa dengan syntax berikut ini

<iframe src="navbar2.html" width="500" height="300" frameborder="0"></iframe>

Dengan menambahkan syntax "frameborder="0"/"1" maka teman - teman bisa menghilangkan atau menampilkan border.Jika ingin menampilkan border gunakan "1" jika ingin menghilangkan border gunakan "0".

SS coding

SS Hasil

Menghilangkan Scrolling pada Iframe

Pada syntax Iframe default akan secara otomatis keluar scroll maka jika teman - teman semua semua bisa menggunakan Syntax seperti berikut

<iframe src="navbar2.html" width="800" height="300" frameborder="0" scrolling="no"></iframe>
</body>

Dengan menggunakan "scrolling" teman - teman dapat menghilangkan scrolling.

Ada beberapa pilihan:"yes"untuk memunculkan scrolling walaupun secara default sudah muncul scrolling jika halaman yang di tampilkan pada frame terlalu besar.Jika ingin menghilangkan scrolling gunakan "no".

SS coding