Ads by Yasya El Hakim
Tutorial Lengkap HTML: Iframe pada HTML - Bagian 21

Pada HTML, iframe dapat digunakan untuk menampilkan halaman lain didalam halaman kita.

Untuk membuat sebuah iframe, kalian dapat menggunakan tag <iframe>.
<iframe src="URL"></iframe> 

Atribut src berfungsi untuk menentukan URL (Alamat Web).

Mengatur Height dan Widht pada iframe

Kalian dapat menggunakan atribut height dan width untuk mengatur ukuran dari iframe.

Nilai dari atribut ditentukan dengan ukuran pixel, tetapi juga dapat ditentukan dengan ukuran persen seperti 50%, 80%, dan sebagainya.

Contoh

<iframe src="https://www.elcreativeacademy.com/p/tentang.html" height="200" width="300"></iframe> 
See the Pen 87. Iframe Widht Height by Yasya El Hakim (@elhakimyasya) on CodePen.

Atau kalian juga dapat menggunakan CSS pada iframe.

Contoh

<iframe src="https://www.elcreativeacademy.com/p/tentang.html" style="height:200px;width:300px;"></iframe> 
See the Pen 88. CSS pada IFrame by Yasya El Hakim (@elhakimyasya) on CodePen.

Menghilangkan Border (Garis Batas) pada iframe

Secara Default, iframe memiliki border atau garis batas disekelilingnya.

Untuk menghapusnya, kalian dapat menambahkan atribut style dan menggunakan property border.

Contoh

<iframe src="https://www.elcreativeacademy.com/p/tentang.html" style="border:none;"></iframe>
See the Pen 89. Iframe Frameborder by Yasya El Hakim (@elhakimyasya) on CodePen.

Dengan menggunakan CSS, kalian juga dapat mengatur ukuran, style dan warna Border dari iframe.

Contoh

<iframe src="https://www.elcreativeacademy.com/p/tentang.html" style="border:2px solid red;"></iframe> 
See the Pen 89. Iframe Border Style by Yasya El Hakim (@elhakimyasya) on CodePen.

Target Link

Kita dapat menentukan target link pada iframe.

Atribut target harus tertuju pada atribut name.

Contoh

<iframe src="p/tentang.html" name="iframe_a"></iframe>

<p><a href="https://www.elcreativeacademy.com" target="iframe_a">elcreativeacademy.com</a></p> 
See the Pen 90. Iframe Target by Yasya El Hakim (@elhakimyasya) on CodePen.

Sebelumnya: Tutorial Lengkap HTML: ID pada HTML - Bagian 20
Selanjutnya: Tutorial Lengkap HTML: JavaScript pada HTML - Bagian 22
Daftar Isi: Tutorial Lengkap HTML

Sumber: https://www.w3schools.com/

0Komentar

Sebelumnya Selanjutnya