Close Menu
  • Pengetahuan Umum
  • Pilihan Ganda
  • Perbedaan
  • Tumbuhan
  • Website
    • HTML
    • CSS
    • JavaScript
    • Python
Facebook X (Twitter) Instagram
  • Demos
  • Buy Now
Facebook X (Twitter) Instagram Pinterest Vimeo
AnalisWinterAnalisWinter
  • Tumbuhan
  • Teknologi
  • Perbedaan
  • Website
  • Pengetahuan Umum
    1. Pilihan Ganda
    2. Bahasa Indonesia
    3. Kesenian
    4. IPS
    5. Matematika
    6. Penjaskes
    7. View All

    Ali sedang berjalan di pinggir trotoar, kemudian truk dari arah sama sedang melaju dengan keadaan cepat.

    Juni 20, 2025

    Pencetus pertama kali prinsip kimia hijau adalah?

    Juni 20, 2025

    Air hujan yang meresap ke dalam tanah akan mengalami perkolasi. Dalam proses tersebut air akan membentuk akumulasi yang disebut dengan?

    Juni 20, 2025

    Peningkatan jumlah kendaraan di jalan raya dapat meningkatkan kadar gas karbon di atmosfer

    Juni 20, 2025

    Perbedaan Cerpen dan Fabel Memahami Dua Bentuk Cerita Pendek

    Juni 16, 2024

    Teks Cerita Inspiratif Termasuk Karya?

    Oktober 17, 2024

    Apa yang Dimaksud dengan Ritme/Birama?

    Maret 24, 2025

    Apa yang Dimaksud dengan Tekstur dalam Unsur Seni Rupa?

    Maret 24, 2025

    Bentuk yang Dihasilkan dari Seni Patung

    Februari 22, 2025

    Sebutkan Cara Menciptakan Garis dalam Pembuatan Karya Seni Rupa

    Januari 3, 2025

    Ideologi Tertutup Mempunyai Ciri Khas Tertentu yang Membedakannya dengan Ideologi Terbuka

    Maret 11, 2025

    Pandangan Hidup Bangsa dan Ideologi Bagi Negara Indonesia adalah?

    Maret 10, 2025

    Tujuan Didirikan AFTA

    Maret 3, 2025

    Terangkan Tujuan Pendudukan Jepang di Indonesia!

    Februari 26, 2025

    Diskriminan persamaan koordinat 2x² + 5x – 3 = 0 adalah?

    Mei 5, 2025

    Tools Konversi Inci ke Sentimeter

    Desember 7, 2024

    300 Gram Berapa Sendok Makan

    Desember 6, 2024

    90 Menit Berapa Jam

    Desember 6, 2024

    Sikap yang Harus Diperhatikan pada Saat Gerakan Berguling Adalah?

    Maret 24, 2025

    Gerakan Senam Lantai yang Mendukung Gerakan Meroda Adalah?

    Maret 16, 2025

    Apa Saja Tujuan Dribbling Ball dalam Permainan Bola Basket?

    Maret 12, 2025

    Tujuan Menggiring Bola Tinggi dalam Permainan Bola Basket Adalah?

    Maret 12, 2025

    Salah satu manfaat utama dari pengolahan ikan melalui teknik fermentasi adalah

    Juni 7, 2025

    Apa yang Dimaksud dengan Teknik Sautéing?

    Juni 7, 2025

    Jelaskan Proses Pengemasan Vakum dan Manfaatnya pada Produk Olahan Pangan Hewani

    Juni 7, 2025

    Curacron vs Demolish

    Mei 12, 2025
Subscribe
AnalisWinterAnalisWinter
Home»HTML»Memahami Tag iframe dalam HTML

Memahami Tag iframe dalam HTML

Analis WinterBy Analis WinterJanuari 28, 2025
Memahami Tag iframe dalam HTML

Dalam HTML, tag <iframe> digunakan untuk menampilkan konten dari sumber eksternal, seperti halaman web lain, di dalam halaman kita. Tag ini sangat berguna ketika kalian ingin menambahkan elemen seperti peta, video, atau konten lain dari situs pihak ketiga tanpa harus mengalihkan pengguna ke halaman tersebut.

Memahami Tag <iframe> dalam HTML

1. Apa Itu <iframe>?

<iframe>, singkatan dari inline frame, adalah elemen HTML yang memungkinkan kalian untuk memasukkan konten dari halaman web lain ke dalam halaman web kalian. Konten yang dimasukkan melalui <iframe> tetap akan berfungsi seperti yang ada pada sumber aslinya, meskipun diakses dari halaman kalian.

2. Struktur Dasar <iframe>

Struktur dasar dari tag <iframe> adalah sebagai berikut:

<iframe src="URL_Sumber" width="lebar" height="tinggi"></iframe>
  • src: URL sumber konten yang ingin kalian tampilkan.
  • width: Lebar iframe (biasanya dalam piksel atau persen).
  • height: Tinggi iframe.

3. Contoh Penggunaan <iframe>

Misalnya, kalian ingin memasukkan peta dari Google Maps ke dalam halaman web. Kalian bisa menggunakan kode berikut:

<iframe 
  src="https://www.google.com/maps/embed?pb=... (kode embed dari Google Maps)" 
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy">
</iframe>

4. Atribut Penting pada <iframe>

Berikut adalah beberapa atribut lain yang sering digunakan pada <iframe>:

Atribut Deskripsi
src Menunjukkan URL sumber yang akan dimuat dalam iframe.
width Menentukan lebar iframe. Bisa dalam piksel atau persen.
height Menentukan tinggi iframe.
name Memberikan nama unik pada iframe, sering digunakan ketika ingin menghubungkannya dengan tautan yang memiliki target khusus.
sandbox Membatasi fungsi tertentu dari konten dalam iframe, meningkatkan keamanan.
allow Mengizinkan fitur tambahan seperti akses mikrofon, kamera, atau layar penuh di dalam iframe.
loading Mengontrol perilaku loading iframe. Nilai “lazy” akan menunda pemuatan iframe hingga hampir terlihat oleh pengguna.
allowfullscreen Mengizinkan iframe untuk menggunakan mode layar penuh.

5. Keamanan dalam Penggunaan <iframe>

Meski berguna, penggunaan <iframe> juga memiliki beberapa risiko keamanan, terutama jika sumber yang kalian ambil kurang terpercaya. Salah satu cara untuk mengurangi risiko adalah dengan menggunakan atribut sandbox, yang membatasi kemampuan skrip dan interaksi dari konten eksternal.

Contoh penggunaan sandbox:

<iframe src="https://contoh.com" width="600" height="400" sandbox="allow-scripts allow-same-origin"></iframe>

6. Tips Optimalisasi <iframe>

  • Lazy Loading: Gunakan atribut loading="lazy" untuk menunda pemuatan <iframe>, yang dapat meningkatkan waktu buka halaman.
  • Responsif: Sesuaikan ukuran <iframe> dengan lebar layar menggunakan CSS, agar tampilan iframe tetap baik pada perangkat seluler.

Contoh untuk membuat <iframe> responsif:

<style>
  .responsive-iframe {
    width: 100%;
    height: 400px;
  }
</style>

<iframe src="https://contoh.com" class="responsive-iframe"></iframe>

Kesimpulan

Tag <iframe> adalah alat yang sangat berguna dalam HTML untuk menambahkan konten dari sumber eksternal. Namun, penggunaannya memerlukan perhatian terhadap keamanan dan performa agar tidak mempengaruhi pengalaman pengguna. Dengan memanfaatkan atribut seperti sandbox dan loading=”lazy”, kalian dapat menggunakan <iframe> dengan lebih optimal dan aman.

Semoga penjelasan tentang tag <iframe> ini membantu kalian memahami cara kerjanya dan menerapkannya dalam proyek web kalian!

Share. Facebook Twitter Pinterest Telegram WhatsApp Copy Link
Analis Winter

Halo saya adalah Admin dari analiswinter. Semoga artikel kami dapat membatu.

Related Posts

Elemen Semantik pada HTML

Membuat Project Web Pribadi dengan HTML

Cara Menambahkan Audio pada HTML

Top Posts

Perbedaan Lacto B dan L Bio

Desember 28, 202462 Views

Perbedaan Benoson N dan Benoson G

Desember 28, 202461 Views

Perbedaan DAMRI Bisnis dan Eksekutif

Oktober 26, 202456 Views

Perbedaan Warna Baju Istri TNI

November 24, 202428 Views

Perbedaan NGT Terbuka dan Tertutup

November 29, 202424 Views
Facebook X (Twitter) Instagram Pinterest
  • Home
  • Buy Now
© 2025 ThemeSphere. Designed by ThemeSphere.

Type above and press Enter to search. Press Esc to cancel.