Iframe di HTML: Cara Membuat dan Contoh Sintaknya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 1, 2020

Fungsi dari iframe pada HTML adalah digunakan untuk menampilkan halaman web di dalam halaman web.

Section Artikel

1 Sintaks Iframe di HTML
2 Iframe – Mengatur Height dan Width
3 Iframe – Menghapus Border
4 Iframe – Target untuk Link
5 Ringkasan Bab

Sintaks Iframe di HTML

Tag <iframe> pada HTML digunakan untukmenentukan bingkai (frame) inline.

Inline frame digunakan untuk menyematkan dokumen lain di dalam dokumen HTML saat ini.

<iframe src="url" title="description">

Tips: Penggunaan iframe yang baik apabila selalu menyertakan title pada atribut <iframe . Berguna bagi layar pembaca untuk membaca konten apa yang ada pada iframe.

Iframe – Mengatur Height dan Width

Untuk menentukan ukuran iframe gunakan atribut height dan width yang di inginkan.

Height dan width ditentukan dalam ukuran pixel secara default.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Iframe di HTML</h2>
<p>Untuk menentukan ukuran iframe gunakan atribut height dan width yang di inginkan.</p>

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

</body>
</html>

Atau untuk menentukan height dan width dapat menambahkan atribut style dan menggunakan properti height dan width pada CSS.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Iframe di HTML</h2>
<p>Atau untuk menentukan height dan width dapat menambahkan atribut style dan menggunakan properti height dan width pada CSS.</p>

<iframe src="demo_iframe.htm" style="height:200px;width:300px" title="Iframe Example"></iframe>

</body>
</html>

Iframe – Menghapus Border

Secara default, iframe pada HTML memiliki border di sekelilingnya.

Untuk menghapus border, tambahkan atribut style dan gunakan properti border yang ada pada CSS.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Menghapus Border Iframe</h2>
<p>Untuk menghapus default border pada iframe, gunakan CSS:</p>

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

</body>
</html>

Dengan menggunakan properti CSS, anda juga dapat mengubah ukuran, style, dan warna border iframe.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Custom Border Iframe</h2>
<p>Dengan menggunakan properti CSS, anda juga dapat mengubah ukuran, style, dan warna border iframe.</p>

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

</body>
</html>

Iframe – Target untuk Link

Iframe dapat digunakan sebagai bingkai target pada sebuah link.

Atribut target dari sebuah link harus mengacu pada atribut name dari iframe.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target untuk Link</h2>

<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>

<p><a href="https://www.dosenit.com" target="iframe_a">dosenit.com</a></p>

<p>Jika atribut target dari sebuah link cocok dengan name iframe, link tersebut akan terbuka di iframe.</p>

</body>
</html>