Iframe HTML

Iframe HTML digunakan untuk menampilkan halaman web dalam halaman web.

Sintaks Iframe HTML

Tag <iframe> HTML menentukan sebuah bingkai inline.

Bingkai inline digunakan untuk menyematkan dokumen lain di dalam dokumen HTML saat ini.

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

Tips: Merupakan praktik yang baik untuk selalu menyertakan atirbut title untuk <iframe>. Ini digunakan oleh pembaca layar untuk membaca konten iframe.

Iframe - Mengatur Tinggi dan Lebar

Gunakan atribut height and width untuk menentukan ukuran iframe.

Tinggi dan lebar ditentukan dalam piksel secara default.

Contoh:

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

Atau Anda dapat menambahkan atribut style dan menggunakan properti CSS height dan width.

Contoh:

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

Iframe - Menghapus Border

Secara default, iframe memiliki batas (border) di sekelilingnya.

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

Contoh:

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

Dengan CSS, Anda juga dapat mengubah ukuran, style, dan warna bingkai iframe.

Contoh:

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

Iframe - Target untuk Link

Sebuah iframe dapat digunakan sebagai frame target untuk sebuah link.

Atribut target link harus mengacu pada atribut name iframe.

Contoh:

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

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

Ringkasan

• Tag <iframe> HTML menentukan bingkai inline
• Atribut src mendefinisikan URL dari halaman untuk disematkan
• Selalu sertakan atribut title (untuk pembaca layar)
• Atribut height dan width menspesifikasikan ukuran iframe
• Gunakan border:none; untuk menghapus batas (border) di sekitar iframe

Sumber referensi: w3schools