Iframe HTML
Iframe HTML digunakan untuk menampilkan halaman web di dalam halaman web.
Sintaks Iframe HTML
Tag HTML <iframe>menentukan bingkai sebaris.
Bingkai sebaris digunakan untuk menyematkan dokumen lain dalam dokumen HTML saat ini.
Sintaksis
<iframe src="url" title="description"></iframe>
Tip: Ini adalah praktik yang baik untuk selalu menyertakan
titleatribut untuk <iframe>. Ini digunakan oleh pembaca layar untuk membacakan konten iframe.
Iframe - Atur Tinggi dan Lebar
Gunakan atribut heightand widthuntuk 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 styleatribut dan menggunakan CSS heightdan width
properti:
Contoh
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"
title="Iframe Example"></iframe>
Iframe - Hapus Perbatasan
Secara default, iframe memiliki batas di sekitarnya.
Untuk menghapus batas, tambahkan styleatribut dan gunakan
borderproperti CSS:
Contoh
<iframe src="demo_iframe.htm" style="border:none;"
title="Iframe Example"></iframe>
Dengan CSS, Anda juga dapat mengubah ukuran, gaya, dan warna batas iframe:
Contoh
<iframe src="demo_iframe.htm" style="border:2px solid red;"
title="Iframe Example"></iframe>
Iframe - Target untuk Tautan
Sebuah iframe dapat digunakan sebagai frame target untuk sebuah link.
Atribut targettautan harus merujuk ke nameatribut 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 Bab
- Tag HTML
<iframe>menentukan bingkai sebaris - Atribut
srcmendefinisikan URL halaman yang akan disematkan - Selalu sertakan
titleatribut (untuk pembaca layar) - Atribut
heightandwidthmenentukan ukuran iframe - Gunakan
border:none;untuk menghapus batas di sekitar iframe
Latihan HTML
Tag iframe HTML
| Tag | Description |
|---|---|
| <iframe> | Defines an inline frame |
Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .