HTML

Iframe di HTML: Cara Membuat dan Contoh Sintaknya

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

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>

Ringkasan Bab

  • Tag <iframe> pada HTML berguna untuk menentukan inline frame
  • Atribut src mendefinisikan URL halaman yang akan disematkan
  • Selalu sertakan atribut title (untuk layar pembaca)
  • Atribut height dan width menentukan ukuran iframe
  • Gunakan border: none; untuk menghapus border di sekitar iframe

Sekian penjelasan tentang sintak dan contoh penggunaan iframe pada HTML, semoga bermanfaat.


Catur Kurnia Sari

Share
Tags: html