Langsung ke konten utama

Iklan





HTML Iframe

Gambar
waktu publikasi
Iframe pada HTML merupakan singkatan dari Inline Frame. Tag "iframe" mendefinisikan suatu wilayah persegi panjang beserta dokumen yang ditampilkan oleh browser yang terpisah dari dokumen lainnya, termasuk scrollbar dan border-nya. Inline frame digunakan untuk embed (menanamkan) dokumen lain bersamaan dengan dokumen HTML yang digunakan saat ini.

Atribut 'src' digunakan untuk URL spesifik dari dokumen yang menempati sebuah frame.
Sintak:
<iframe src="URL"></iframe>

Pengaturan Panjang dan Lebar Iframe:
Atribut panjang dan lebar digunakan untuk menspesifikkan ukuran dari Iframe. Nilai atribut secara spesifik dinyatakan dalam ukuran pixel secara default, tetapi juga dapat dinyatakan dalam ukuran lainnya seperti persen.

<!DOCTYPE html>

<html>

 

<body>

<p>

Konten berada disini:

</p>

 

<iframe 

src="https://elfanmauludi-tik.blogspot.com/"

height="300" 

width="400">

</iframe>

 

</body>

 

</html>

Output:

Konten berada disini:
Menghilangkan Border pada Iframe:
Secara default, iframe memiliki border yang mengelilinginya. Untuk menghilangkan border tersebut, maka digunakan atribut style dan properti border CSS.

 Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<p>

Konten berada disini:

</p>

 

<iframe 

src="https://elfanmauludi-tik.blogspot.com/"

height="300" 

width="400" 

style="border:none;">

</iframe>

 

</body>

 

</html>

Output:

Konten berada disini:



Mengubah Ukuran, Style, dan Warna dari Border Iframe:

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<p>

Konten berada disini:

</p>

 

<iframe 

src="https://elfanmauludi-tik.blogspot.com/"

height="300"

width="400" 

style="border:4px solid orange;">

</iframe>

 

</body>

 

</html>

Output:

Konten berada disini:



Mentargetkan Alamat Link yang Digunakan Iframe:
Iframe dapat digunakan sebagai target frame untuk link. Atribut target dari link harus mengacu nama atribut dari iframe.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<p>

Klik link teks berikut:

</p>

 

<iframe 

height="300" 

width="350" 

src="https://elfanmauludi-tik.blogspot.com/"

name="iframe_a">

</iframe>

 

<p>

<a 

href="https://elfanmauludi-tik.blogspot.com/"

target="iframe_a">

blog ElfanMauludi

</a>

</p>

 

</body>

 

</html>

Output:

Klik link teks berikut:

blog ElfanMauludi [klik]

Klik link blog ElfanMauludi, maka Frame akan menuju ke alamat atau link dari Frame.

Browser pendukung: Tag <iframe> didukung penggunaannya oleh beberapa browser berikut ini:
  • satu, Google Chrome
  • dua, Internet Explorer
  • tiga, Firefox
  • empat, Opera
  • lima, Safari


Iklan
Oleh
Labels:
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

Komentar

  1. AnonimSenin, 24 Mei 2021 07.17.00 WIB

    Apa yang dimaksud dengan iframe pada html?

    BalasHapus
    Balasan
    1. AnonimSenin, 24 Mei 2021 07.18.00 WIB

      Tag < iframe > digunakan untuk menentukan inline frame pada html. Bingkai tersebut digunakan untuk menyematkan dokumen lain pada dokumen HTML. Tag ini digunakan untuk membaca layar yang ditujukan terhadap konten pada Iframe.

      Hapus
  2. AnonimSenin, 24 Mei 2021 07.20.00 WIB

    Apa perbedaan antara Iframe dan Frame pada html?

    BalasHapus
    Balasan
    1. AnonimSenin, 24 Mei 2021 07.20.00 WIB

      Perbedaannya adalah Iframe dapat "float" di dalam konten pada halaman, dimana user dapat membuat halaman HTml dan menempatkan Iframe didalamnya, sehingga user dapat memiliki halaman dan menempatkannya pada dokumen lain secara langsung didalamnya. Sedangkan Frame tidak bisa.

      Hapus
  3. AnonimSenin, 24 Mei 2021 07.22.00 WIB

    Apakah aman untuk menggunakan iframe untuk menampilkan konten pada website?

    BalasHapus
    Balasan
    1. AnonimSenin, 24 Mei 2021 07.22.00 WIB

      Google merekomendasikan untuk tidak menggunakan Iframe pada halaman web. Pada forum google webmaster dengan jelas dinyatakan bahwa iframe dapat menyebabkan masalah bagi para penggunanya. Iframe terkadang digunakan untuk menampilkan konten pada halaman web, namun sangat dianjurkan untuk menghindari penggunaan iframe untuk menampilkan konten.

      Hapus

Posting Komentar

Respon komentar 7 x 24 jam, so please be patient :D