Cara Membuat Tag HTML Iframe untuk Situs Web Anda

HTML adalah bahasa markup yang kuat yang memungkinkan pengembang membuat halaman web interaktif dan dinamis. Salah satu elemen HTML yang paling berguna adalah iFrame, yang merupakan singkatan dari Inline Frame. iFrame adalah elemen HTML yang memungkinkan Anda menyematkan konten eksternal di dalam halaman web.

iFrame adalah fitur populer yang digunakan oleh pengembang untuk mengintegrasikan konten eksternal, seperti video, gambar, dokumen, dan umpan media sosial, ke dalam situs web mereka. Dengan menggunakan iFrame, Anda dapat menampilkan konten eksternal di situs web Anda tanpa harus mengunggahnya ke server Anda. Ini menghemat waktu dan ruang penyimpanan Anda.

Saat menggunakan iframe, penting untuk mempertimbangkan dampaknya terhadap kinerja dan aksesibilitas situs web. Meskipun iframe menawarkan fleksibilitas dalam menyematkan konten, penggunaan yang berlebihan dapat menyebabkan waktu muat halaman yang lebih lambat dan dapat menimbulkan tantangan bagi pengguna penyandang disabilitas atau pada perangkat tertentu. Oleh karena itu, disarankan untuk menggunakan iframe dengan bijaksana dan memastikannya meningkatkan daripada mengurangi pengalaman pengguna.

Selain itu, memastikan bahwa konten dalam iframe responsif dan beradaptasi dengan baik dengan ukuran layar yang berbeda dapat meningkatkan kegunaan keseluruhan di seluruh perangkat, berkontribusi pada pengalaman menjelajah yang mulus untuk semua pengguna.

Pada artikel ini, kita akan mengeksplorasi proses pembuatan iframe untuk situs web Anda seperti Blogger dan Wordpress. Iframe berguna untuk menampilkan konten eksternal di dalam situs web Anda dan dapat meningkatkan pengalaman pengguna. Kami akan membahas dasar-dasar pembuatan iframe, termasuk kode HTML dan CSS yang diperlukan, serta praktik terbaik untuk implementasi.

A. Apa itu Iframe?

iframe, kependekan dari inline frame, adalah elemen HTML yang memungkinkan Anda menyematkan dokumen web atau halaman situs web lain di dalam situs web Anda sendiri. Ini pada dasarnya membuat jendela ke halaman web lain, memungkinkan pengunjung situs Anda untuk melihat dan berinteraksi dengan konten dari sumber yang berbeda tanpa meninggalkan situs web Anda. Iframe sering digunakan untuk menyematkan video, pemutar audio, umpan media sosial, dan konten web lainnya dari penyedia pihak ketiga.

Dengan bantuan iFrame anda bisa menyematkan satu halaman web di dalam halaman web lain. Ini berfungsi seperti jendela yang menampilkan konten situs web lain di dalam situs web Anda. Anda juga dapat menggunakan iFrame untuk menampilkan konten dinamis yang diperbarui secara otomatis tanpa pengguna harus menyegarkan halaman.

Membuat iframe untuk situs web Anda adalah proses yang mudah. Pertama, Anda perlu memutuskan konten apa yang ingin Anda tampilkan di iframe Anda. Bisa berupa video, peta, atau bahkan situs web lain. Setelah Anda memutuskan kontennya, Anda harus mendapatkan kode sumber untuk itu. Ini biasanya dapat ditemukan dengan mengklik kanan pada konten dan memilih 'Lihat sumber halaman' atau 'Periksa elemen'.

Tapi, sebelum anda menggunakan iFrame ada beberapa hal yang harus anda ketahui tentang kode HTML. Ada beberapa kode HTML yang didukung iFrame dan ada juga yang tidak support. Berikut adalah daftar flags atau opsi yang ada dalam tag iFrame.

Attribute	Deskripsi	Kompatibilitas HTML
align	Penyelarasan elemen iframe	Tidak digunakan lagi di HTML 4.01 dan di HTML5
frameborder	Nilai 1 memberi tahu browser untuk menggambar batas antara bingkai dan bingkai lainnya. Nilai 0 memberi tahu browser untuk tidak menggambar batas.	HTML 4 only
height	Tinggi bingkai Dalam HTML 4.01, tinggi bisa dalam piksel Di HTML5, tinggi dapat dalam piksel atau sebagai persentase	HTML 4.01, HTML5
longdesc	URI dari deskripsi panjang bingkai	HTML 4 only
marginheight	Jumlah piksel di antara konten bingkai dan margin atas dan bawah	HTML 4 only
marginwidth	Jumlah piksel di antara konten bingkai dan margin kiri dan kanan.	HTML 4 only
Name	Nama elemen	HTML 4.01, HTML5
scrolling	Atribut yang menunjukkan apakah bingkai harus memiliki bilah gulir ya: bingkai akan menampilkan bilah gulir Tidak: bingkai tidak akan menampilkan bilah gulir auto: frame akan memiliki bilah gulir, sesuai kebutuhan	HTML 4 only
sandbox	Jika atribut adalah string kosong, pembatasan akan diterapkan ke konten dalam bingkai. Jika atribut bukan string kosong, itu akan mencantumkan token pembatasan yang dipisahkan spasi yang dicabut. Token yang valid adalah: Allow-forms: bingkai dapat mengirimkan formulir allow-same-origin: konten iframe akan diperlakukan karena berasal dari asal yang sama dengan dokumen induk allow-scripts: bingkai dapat menjalankan skrip allow-top-navigation: iframe dapat memuat konten dari dokumen induk	HTML5 only
seamless	Boolean yang menunjukkan bahwa browser dapat merender dokumen iframe dengan mulus sehingga tampak terpisah dari dokumen induk	HTML5 only
src	URL halaman yang akan disematkan	HTML 4.01, HTML5
srcdoc	Konten HTML halaman yang disematkan (bukan URL)	HTML5 only
width	Lebar bingkai Dalam HTML 4.01, lebar bisa dalam piksel, sedangkan Di HTML5, lebar dapat dalam piksel atau sebagai persentase	HTML 4.01, HTML5

B. Menggunakan Atribut iFrame

Selain menentukan sumber konten, iFrame juga mendukung berbagai atribut yang memungkinkan Anda menyesuaikan tampilan dan perilakunya. Mari jelajahi beberapa atribut iFrame yang paling umum digunakan dan berikan contoh cara menggunakannya dalam kode HTML Anda.

1. Atribut src

Atribut "src" menentukan sumber konten eksternal yang ingin Anda sematkan dalam iFrame. Ini bisa berupa URL halaman web, URL video, atau URL valid lainnya. Misalnya:

<iframe src="https://www.penaadventure.com"></iframe>

2. Atribut width dan height

Atribut "lebar" dan "tinggi" memungkinkan Anda mengatur dimensi iFrame dalam piksel. Ini penting untuk memastikan bahwa iFrame cocok dengan tata letak halaman web Anda. Misalnya:

<iframe src="https://www.penaadventure.com" width="500" height="400"></iframe>

3. Atribut frameborder

Atribut "frameborder" menentukan apakah iFrame harus menampilkan batas atau tidak. Menyetel ini ke "0" akan menghapus batas, sedangkan mengaturnya ke "1" akan menampilkan batas. Misalnya:

<iframe src="https://www.penaadventure.com" frameborder="0"></iframe>

4. Atribut allowfullscreen

Atribut "allowfullscreen" memungkinkan Anda mengaktifkan atau menonaktifkan mode layar penuh untuk video yang disematkan dalam iFrame. Menyetel ini ke "true" akan mengaktifkan mode layar penuh, sedangkan mengaturnya ke "false" akan menonaktifkannya. Misalnya:

<iframe src="https://www.youtube.com/embed/channel1234" allowfullscreen="true"></iframe>

5. Atribut scrolling

Atribut "scrolling" menentukan apakah iFrame harus menampilkan scrollbar atau tidak. Mengatur ini ke "ya" akan mengaktifkan bilah gulir, sedangkan mengaturnya ke "tidak" akan menonaktifkannya. Misalnya:

<iframe src="https://www.penaadventure.com" scrolling="no"></iframe>

6. Atribut sandbox

Atribut "sandbox" memungkinkan Anda untuk membatasi kemampuan konten eksternal dalam iFrame, sehingga mencegah masalah keamanan. Misalnya:

<iframe src="https://www.penaadventure.com" sandbox></iframe>

7. Atribut name

Atribut "name" memungkinkan Anda menetapkan nama unik ke iFrame, yang dapat berguna untuk menargetkannya dengan JavaScript. Misalnya:

<iframe src="https://www.penaadventure.com" name="iFrameKoe"></iframe>

8. iFrame - Target untuk Link Tautan

Selain contoh penggunaan di atas, iframe juga dapat digunakan sebagai bingkai target untuk link tautan. Anda dapat mengatur iframe menjadi bingkai target untuk link tautan menggunakan atribut target dalam tautan HTML.
Atribut target link harus mengacu pada atribut name iframe, contoh:

<iframe src="https://www.penaadventure.com" name="iFrame_Link" title="iFrame Saya"></iframe>

<p><a href="https://www.datainchi.com" target="iFrame_Link">Penggunaan iFrame untuk link tautan</a></p>

Contoh lainnya penggunaan iFrame untuk target link tautan, daapt anda lihat di bawah ini.

<iframe height="300" width="350" src="https://www.penaadventure.com/demo_iframe.htm" name="iframe_a"> </iframe>
<p><a href="https://www.youtube.com/embed/s4BibernJxU" target="iframe_a">I-Frame</a></p>
<p>A link will open in an iframe when the target attribute matches the iframename</p>

iFrame dalam HTML adalah fitur canggih yang memungkinkan Anda menyematkan konten eksternal ke situs web Anda. Meskipun iFrame memiliki kelebihan, seperti integrasi yang mudah digunakan dan mulus, iFrame juga memiliki kekurangan, seperti waktu muat yang lebih lambat dan risiko keamanan. Dengan mengikuti tips yang diuraikan dalam panduan ini dan menyadari potensi kekurangannya, Anda dapat menggunakan iFrame dalam HTML secara efektif dan meningkatkan pengalaman pengguna di situs web Anda. Ingatlah untuk menguji kode iFrame Anda, mengoptimalkan konten Anda, dan memilih sumber tepercaya untuk memastikan bahwa situs web Anda aman dan dapat diakses oleh semua pengguna.