Belajar HTML Part 28 - Iframe

HTML Iframe
Iframe digunakan untuk menampilkan halaman web dalam halaman web. Iframe dalam HTML didefinisikan dengan tag <iframe>.

Berikut ini merupakan contoh dari tampilan iframe, yaitu halaman web berisi suatu halaman web.
Contoh

Secara default, iframe memiliki border di sisi bingkai iframe.

Sintax Iframe

<iframe src="URL"></iframe>

Atribut src digunakan untuk menetukan URL (alamat web) dari kerangka halaman.

Mengatur Lebar dan Tinggi pada Iframe
Untuk mengatur lebar dan tinggi kerangka halaman inline dalam iframe, gunakan atribut width dan height.

Nilai atribut width dan height secara default ditentukan dalam pixel, tetapi bisa juga dalam persen (seperti "70%", "90%", dan lain sebagainya).
Contoh

<!DOCTYPE html>
<html>
<body>

<iframe src="https://king-octahasan.blogspot.co.id" height="650" width="1200"></iframe>

</body>
</html>

Atau kita juga dapat menggunakan properti CSS (style) untuk mengatur tinggi dan lebar iframe.
Contoh

<!DOCTYPE html>
<html>
<body>

<h2>Belajar Iframe dalam HTML</h2>
<p>KIta juga dapat menggunakan properti CSS width dan height untuk menentukan ukuran iframe, seperti berikut:</p>

<iframe src="https://king-octahasan.blogspot.co.id" style="height:650px;width:1200px"></iframe>

</body>
</html>

Hasilnya:

Menghapus border dalam Iframe

Secara default, iframe memiliki border di sekitarnya. Untuk menghapus border, tambahkan atribut style dan gunakan properti border.
Contoh

<!DOCTYPE html>
<html>
<body>

<iframe src="https://king-octahasan.blogspot.co.id" style="border:none;"></iframe>

</body>
</html>

Hasilnya:

Pada contoh di atas, menggunakan properti CSS, yaitu "border:none;". Artinya border dalam bingkai iframe "ditiadakan (none)".

Dengan menggunakan properti CSS (style), kita juga dapat mengubah ukuran, tampilan dan warna border iframe.
Contoh

<!DOCTYPE html>
<html>
<body>

<iframe src="https://king-octahasan.blogspot.co.id" style="border:2px solid red;"></iframe>

</body>
</html>

Hasilnya:

Target sebuah Link

Sebuah iframe dapat digunakan sebagai target bingkai (frame) untuk sebuah link.

Atribut target dalam link harus mengacu pada atribut name pada iframe. Artinya, apabila target dalam link cocok atau sama dengan nama iframe, maka link yang dituju akan terbuka di kerangka iframe tersebut.

Contoh

<!DOCTYPE html>
<html>
<body>

<iframe height="400px" width="1200" src="https://king-octahasan.blogspot.co.id" name="iframe_a"></iframe>

<p>Ini juga adalah sebuah link menuju <a href="https://king-octahasan.blogspot.com" target="iframe_a">KING-OCTAHASAN</a> seperti tampilan yang di atas.</p>

<p>Bila target dalam link cocok dengan nama iframe, maka link yang dituju akan terbuka di iframe</p>

</body>
</html>

Hasilnya: