{"id":8077,"date":"2019-05-16T09:08:07","date_gmt":"2019-05-16T09:08:07","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=8077"},"modified":"2023-03-01T16:09:30","modified_gmt":"2023-03-01T09:09:30","slug":"apa-itu-iframe","status":"publish","type":"post","link":"\/id\/tutorial\/apa-itu-iframe","title":{"rendered":"Apa itu iFrame? Pengertian dan cara menggunakannya"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Ada banyak istilah teknis yang harus Anda ketahui dan pahami dalam mendesain website, dan salah satunya adalah iFrame. iFrame adalah singkatan dari Inline Frame. Tool ini merupakan elemen yang powerful dan cukup berpengaruh di bidang desain web.<\/span><\/p><p><span style=\"font-weight: 400\">Fungsinya adalah menyertakan atau memasukkan semua jenis media yang bisa dipasangkan di situs. Pernah melihat suatu situs yang meng-embed video YouTube? Kemungkinan besar desainer atau pemilik web tersebut menyertakan elemen iFrame ke dalam halaman situs. <\/span><\/p><p><span style=\"font-weight: 400\">Di artikel ini kami akan membahas pengertian iFrame dan cara menggunakannya. Kami pun akan menjabarkan beberapa hal yang sebaiknya dipertimbangkan sebelum menyertakan iFrame ke dokumen <\/span><span style=\"font-weight: 400\">HTML<\/span><span style=\"font-weight: 400\">.<\/span><\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/ID-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noopener\">Download Istilah-Istilah Web Development untuk Pemula<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-apa-itu-iframe\"><b>Apa Itu iFrame<\/b><\/h2><p><span style=\"font-weight: 400\">iFrame adalah frame di dalam frame, dan dikenal sebagai komponen elemen HTML yang memungkinkan Anda untuk embed dokumen, video, dan media interaktif di suatu laman. Jika mengaktifkan iFrame, maka Anda akan menampilkan webpage sekunder di beranda utama. <\/span><\/p><p><span style=\"font-weight: 400\">Seperti yang telah dijelaskan pada paragraf awal, elemen iFrame berfungsi untuk menambahkan atau menyertakan konten dari source (sumber) yang lain. Elemen ini akan mengintegrasikan konten ke area mana saja yang ada di halaman tanpa harus menyertakannya di struktur layout website, seperti elemen tradisional pada umumnya. <\/span><\/p><p><span style=\"font-weight: 400\">Sesuatu yang berlebihan terkadang juga tidak baik. Sama halnya ketika Anda menggunakan iFrame terlalu sering. Penggunaan yang berlebihan akan membuat waktu loading situs semakin lama dan juga membuat web Anda rentan terhadap risiko keamanan online.<\/span><\/p><p><span style=\"font-weight: 400\">Hal ini dikarenakan dengan iFrame, Anda pastinya menggunakan konten dari berbagai sumber, termasuk website yang keamanannya tidak terjamin. iFrame memang menjadi bagian dari konten, tapi bukan bagian dari website.<\/span><\/p><p><span style=\"font-weight: 400\">Sebagai contoh, jika ingin menambahkan video dari YouTube, maka Anda harus memasukkan elemen iFrame ke postingan.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-cara-menggunakan-iframe\"><b>Cara Menggunakan iFrame<\/b><\/h2><p><span style=\"font-weight: 400\">Sampai di sini Anda sudah tahu kalau iFrame adalah elemen tambahan yang berfungsi untuk sharing konten dari situs atau sumber lain.<\/span><\/p><p><span style=\"font-weight: 400\">Elemen ini mempertegas topik tertentu yang ingin Anda sampaikan ke pembaca. Untuk memasukkan elemen iFrame ke dokumen HTML, gunakan tag <\/span><b>&lt;iframe&gt;<\/b><span style=\"font-weight: 400\">. <\/span><i><span style=\"font-weight: 400\">Copy<\/span><\/i><span style=\"font-weight: 400\"> kode di bawah ini dan <\/span><i><span style=\"font-weight: 400\">paste<\/span><\/i><span style=\"font-weight: 400\"> ke notepad, lalu simpan file dalam format <\/span><b>.html<\/b><span style=\"font-weight: 400\">:<\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/dXBohfjc4WA\" width=\"680\" height=\"480\" allowfullscreen&gt;&lt;\/iframe&gt;<\/pre><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"666\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/05\/contoh-kode-youtube-iframe.jpg\/public\" alt=\"Apa itu iFrame: contoh kode link video YouTube\" class=\"wp-image-8080\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/05\/contoh-kode-youtube-iframe.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/05\/contoh-kode-youtube-iframe.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/05\/contoh-kode-youtube-iframe.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/05\/contoh-kode-youtube-iframe.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p><b>Catatan<\/b><span style=\"font-weight: 400\">: link embed-nya bisa diganti dengan link video apa saja yang Anda inginkan<\/span><\/p><p><span style=\"font-weight: 400\">Kode yang kami contohkan di atas akan menampilkan video tutorial Youtube yang dibuat oleh Hostinger. Kami akan menjelaskan secara singkat setiap tag yang ada di kode tersebut:<\/span><\/p><ul class=\"wp-block-list\">\n<li>Tag <strong>&lt;iframe&gt;&hellip;&lt;\/iframe&gt;<\/strong> digunakan untuk menyertakan video ke dalam iFrame.<\/li>\n\n\n\n<li><strong>Source iFrame (src)<\/strong> mengacu pada link asal konten yang datang baik dari server eksternal ataupun internal. Jangan sampai lupa untuk memasukkan kode yang di-embed ke URL.<\/li>\n\n\n\n<li><b>Width <span style=\"font-weight: 400\">dan <\/span>height<span style=\"font-weight: 400\"> merupakan rasio aspek iFrame. Ada dua tipe rasio yang dapat digunakan, yakni ukuran yang sudah <\/span><i><span style=\"font-weight: 400\">fix<\/span><\/i><span style=\"font-weight: 400\">, misalnya 680&times;480 piksel (px), dan berbasis persentase (10%-100%) untuk mengatur iFrame secara otomatis.<\/span><\/b><\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-ancaman-keamanan\"><b>Ancaman Keamanan<\/b><\/h2><p><span style=\"font-weight: 400\">Sebenarnya, elemen iFrame sama sekali tidak membawa ancaman keamanan bagi website atau pembaca setia web Anda.<\/span><\/p><p><span style=\"font-weight: 400\">Bahkan tool ini dirancang untuk membantu para pembuat konten agar bisa menambahkan material visual ke website demi menarik perhatian pembaca atau pengunjung situs.<\/span><\/p><p><span style=\"font-weight: 400\">Hanya saja, yang harus Anda perhatikan pada saat penggunaan iFrame adalah link yang akan diembed. Anda wajib tahu apakah link tersebut berasal dari situs tepercaya atau tidak.<\/span><\/p><p><span style=\"font-weight: 400\">Pada tahun 2008 terjadi lonjakan injeksi kode iFrame pada beberapa website besar, misalnya ABC News. Serangan jenis ini mengalihkan pengunjung website ke suatu situs berbahaya yang nantinya menyebarkan virus ke PC mereka atau melakukan usaha pencurian data yang sensitif.<\/span><\/p><p><span style=\"font-weight: 400\">Karena itulah, kami sarankan untuk tidak selalu memasukkan iFrame ke website.<\/span><\/p><p><span style=\"font-weight: 400\">Jika menurut Anda website tersebut tidak aman, jangan coba-coba menautkannya ke situs Anda. Jangan pula memasang elemen iFrame di konten.<\/span><\/p><figure class=\"wp-block-image size-large\"><a href=\"\/id\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-29634\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-kesimpulan\"><b>Kesimpulan<\/b><\/h2><p><span style=\"font-weight: 400\">iFrame adalah elemen yang sangat bagus dan powerful untuk meningkatkan <\/span><i><span style=\"font-weight: 400\">engagement <\/span><\/i><span style=\"font-weight: 400\">para pengunjung situs. Dalam hal ini, iFrame menjadi bagian dari konten yang Anda buat, tapi tidak menjadi satu kesatuan dengan website.<\/span><\/p><p><span style=\"font-weight: 400\">Sebaiknya, jangan terlalu sering menggunakan iFrame. Kalau bisa, kembangkanlah website tanpa satu pun bantuan iFrame. Namun, jika Anda memang memerlukannya untuk tujuan pengembangan, carilah link dari situs yang benar-benar tepercaya.<\/span><\/p><p><span style=\"font-weight: 400\">Semoga dengan membaca artikel ini, Anda bisa lebih tahu tentang apa itu iFrame dan cara menggunakannya.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ada banyak istilah teknis yang harus Anda ketahui dan pahami dalam mendesain website, dan salah satunya adalah iFrame. iFrame adalah singkatan dari Inline Frame. Tool ini merupakan elemen yang powerful dan cukup berpengaruh di bidang desain web. Fungsinya adalah menyertakan atau memasukkan semua jenis media yang bisa dipasangkan di situs. Pernah melihat suatu situs yang [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/apa-itu-iframe\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":55,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Apa Itu iFrame? Pengertian dan Cara Menggunakannya","rank_math_description":"Dengan iFrame, Anda bisa menambahkan berbagai media dari sumber lain ke website. Ini pengertian apa itu iFrame dan cara menggunakannya.","rank_math_focus_keyword":"apa itu iframe, iframe adalah, cara menggunakan iframe, menggunakan iframe","footnotes":""},"categories":[7890],"tags":[5002,8445,8266,8443,8447,8444,8446,8397],"class_list":["post-8077","post","type-post","status-publish","format-standard","hentry","category-glosarium","tag-buat-website","tag-cara-menggunakan-iframe","tag-desain-web","tag-iframe","tag-iframe-adalah","tag-iframe-wordpress","tag-menggunakan-iframe","tag-web-design"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-iframe","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-iframe","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-iframe","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-iframe","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-iframe\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-iframe\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-iframe","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-iframe","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-iframe","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-iframe","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-iframe","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-iframe","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-iframe","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/8077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=8077"}],"version-history":[{"count":6,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/8077\/revisions"}],"predecessor-version":[{"id":29725,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/8077\/revisions\/29725"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=8077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=8077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=8077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}