Skip to main content

A.3.12. Iframe

A.3.12.1. Pengertian iframe​

Pada chapter sebelumnya, kita sudah membahas cara untuk menyisipkan gambar, audio dan video. Lalu apakah bisa kita menyisipkan sebuah dokumen html atau halaman web kedalam website yang kita buat?🤔 bisa! Yuk kita bahas.

Untuk menyisipkan sebuah halaman web atau dokumen HTML kedalam website yang kita buat sendiri adalah dengan menggunakan tag <iframe>. Apa itu <iframe>?

<iframe> pada HTML digunakan untuk menyematkan (embeding) dokumen HTML lain ke dalam suatu dokumen lainnya. Elemen ini memungkinkan kita untuk menampilkan halaman web lain di dalam halaman web yang kita buat.

A.3.12.2. Penggunaan iframe​

Pada pembahasan ini, kita akan coba untuk menyisipkan sebuah halaman website yang kita ambil dari website React.JS Ofiicial Website.

Seperti biasa, silahkan temen-temen siapkan satu buah file HTML baru dan buat struktur HTML nya terlebih dahulu. lalu bisa temen-temen tulis kembali kode di bawah ini ya:

<h1>Menyisipkan website React.js</h1>
<iframe src="...." frameborder="0" width="100%" height="400"></iframe>

Pada kode diatas, terdapat beberapa attribut yang digunakan di dalam tag iframe. diantaranya:

  • src: nilai dari attribut ini adalah sumber atau source dari dokumen atau halaman web yang ingin kita sisipkan kedalam website kita.
  • frameborder: nilai dari attribut ini adalah angka atau number. Berfungsi untuk membuat garis tepi pada frame yang dihasilkan.
  • width: nilai dari attribut ini adalah angka dalam bentuk persentase atau pixel. Berfungsi untuk mendefinisikan lebar dari frame yang akan dibuat.
  • height: nilai dari attribut ini juga angka dalam bentuk persentase atau pixel. Berfungsi untuk mendefinisikan tinggi dari frame yang akan dibuat.

Nah, sekarang coba kita isikan attribut src nya dengan URL dari website target ya.

<h1>Menyisipkan website React.js</h1>
<iframe
  src="https://react.dev"
  width="100%"
  height="400"
  frameborder="0"
></iframe>

Coba temen-temen buka file nya di web browser maka akan terlihat hasil seperti pada gambar di bawah ini:

Output

Selain menyisipkan website dari internet, kita juga bisa menyisipkan dokumen dari lokal milik kita sendiri. Sekarang, coba temen-temen buat file baru dengan nama file_1.html lalu isikan kode di bawah ini: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contoh File 2</title>
  </head>

  <body>
    <h1>Hallo From File 2!</h1>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
      sapiente!
    </p>
  </body>
</html>

Lalu, temen-temen rubah nilai attribut src dari kode di file sebelumnya dengan ./file_2.htmldan lihat hasilnya di web browser.

Output

Gimana ni? mudah kan hehe:D
Selanjutnya, kita akan membahas mengenai tag <script> dan <link> beserta kegunaannya di dalam HTML ya!

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/a-html/chapter-A.3-tags-pada-html/chapter-A.3.12-iframe