-->

Iklan bawah header

Belajar HTML Part 14 : Membuat Iframe Pada HTML

iframe

Iframe (inline frame) merupakan tag html yang digunakan untuk menampilkan halaman website lain pada halaman web yang kita buat. Contohnya saja saat kita ingin menampilkan video youtube pada halaman web maka kita bisa menggunakan iframe.

Membuat Iframe di HTML

Inline frame pada HTML dibuat dengan menggunakan tag <iframe> dan dengan menambahkan atribut src untuk menentukan lokasi halaman yang akan ditampilkan. Untuk menentukan lebar dan tiggi iframe, kita bisa menggunakan atribut width dan height. Untuk lebih jelasnya lihat contoh berikut:


<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Iframe di HTML</title>
</head>
<body>
<h1>Berikut contoh penggunaan tag iframe</h1>
<p>Berikut halaman yang ditampilkan dengan iframe.</p>
<iframe src="https://www.offaweb.com" width="800" height="500"></iframe>
</body>
</html>

Hasilnya:

iframe

Lalu bagaimana jika halaman yang ingin kita tampilkan berasal dari halaman atau file kita sendiri. Pertama siapkan terlebih dahulu halaman atau file yang akan menjadi sumber.

login.html


<!DOCTYPE html>
<html>
<head>
<title>Form Login</title>
</head>
<body>
<form action="submit.php" method="POST">
<p>Username: <input type="text" name="username"/></p>
<p>Password: <input type="password" name="password"/></p>
<input type="button" name="submit" value="submit"/>
</form>
</body>
</html>

index.html


<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Iframe di HTML</title>
</head>
<body>
<h1>Contoh penggunaan iframe yang berasal dari halaman sendiri</h1>
<p>Berikut ini form login yang akan ditampilkan dihalaman sendiri</p>
<iframe src="login.html" width="600" height="200"></iframe>
</body>
</html>
iframe

Tampilan halaman secara default yang ditampilkan oleh tag <iframe> akan secara otomatis memiliki border dan juga scrollbar. Jika ingin menghilangkannya, bisa kalian ikuti beberapa cara berikut ini.

Menghilangkan Border dan Scrollbar pada Iframe

Terkadang kita ingin menghilangkan border dan scrollbar yang tampil secara otomatis pada iframe yang kita buat. Untuk menghilangkan border pada iframe gunakan atribut style dengan value border:none dan gunakan atribut scrolling dengan value no untuk menghilangkan scrollbar. Berikut contohnya.

 
<iframe src="https://www.offaweb.com" width="700" height="300" scrolling="no" style="border:none"></iframe>

Menampilkan Video Youtube Menggunakan Iframe

Berikut cara menampilkan video youtube pada halaman web yang kita punya dengan menggunakan HTML.

  1. Pertama buka halaman video youtube yang ingin kamu tampilkan pada halaman websitemu

  2. Kedua klik kanan pada video lalu pilih "copy embed code"

  3. terakhir pastekan pada halaman website kamu.


<iframe width="900" height="490" src="https://www.youtube.com/" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen"></iframe>

Membuat Hyperlink untuk Iframe

Kita bisa membuat hyperlink di dalam iframe, sehingga kita bisa membuka link pada iframe yang kita inginkan dengan menggunakan atribut target. Nah, ini merupakan perbedaan antara membuat link di HTML biasa dan iframe. Untuk lebih jelasnya lihat contoh berikut.

login.html


<!DOCTYPE html>
<html>
<head>
<title>Form Login</title>
</head>
<body>
<form action="submit.php" method="POST">
<p>Username: <input type="text" name="username"/></p>
<p>Password: <input type="password" name="password"/></p>
<input type="button" name="submit" value="submit"/>
</form>
</body>
</html>

daftar.html


<html>
<head>
<title&t;Form Daftar</title>
<body> <form action="submit.php" method="POST">
<p>Username: <input type="text" name="username"/></p>
<p>Umur: <input type="number" name="umur" /></p>
<p>E-mail: <input type="email" name="email"/></p>
<p>Password: <input type="password" name="password"/></p>
<p>Tanggal Lahir: <input type="date" name="tanggallahir"/></p>
<p>Foto: <input type="file" name="foto" /><br/></p>
<p>Jenis kelamin:
<input type="radio" name="jeniskelamin" value="pria">Pria
<input type="radio" name="jeniskelamin" value="wanita">wanita</p>
<br/><br/>
<p>Saya bersedia untuk mengikuti aturan forum ini
<input type="checkbox" name="bersedia_ikut" value="ya"></p><br/><br/>
<input type="hidden" name="userid" value="3487">
<input type="reset" value="reset"> <input type="button" name="submit" value="submit"/>
</form>
</body>
</html>

index.html


<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Iframe di HTML</title>
</head>
<body>
<h1>Belajar membuat hyperlink untuk iframe</h1>
<p>Berikut hyperlink pada iframe</p>
<iframe name="tes1" width="700" height="250"></iframe>
<p><a href="login.html" target="tes1">Login</a> | <a href="daftar.html" target="tes1">Daftar<a></p>
</body> </html>

Selanjutnya

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel