Hai teman-teman, apa kabar? Semoga sehat dan bahagia selalu ya. Kali ini kita akan belajar tentang tag iframe HTML dasar. Tag iframe adalah tag HTML yang digunakan untuk menampilkan halaman web lain di dalam halaman web kita. Dengan tag iframe, kita bisa melakukan embedding konten dari sumber eksternal, seperti video YouTube, post Instagram, tweet Twitter, file PDF, dan lain-lain.
|
| Gambar 14.1 : Ilustrasi Tag Iframe |
Tag iframe sangat berguna untuk membuat halaman web kita lebih menarik dan interaktif. Kita juga bisa menghemat bandwidth dan mempercepat loading halaman web kita dengan menggunakan tag iframe. Namun, kita juga harus berhati-hati dalam menggunakan tag iframe, karena ada beberapa risiko keamanan dan aksesibilitas yang bisa terjadi.
Mari kita pelajari lebih lanjut tentang tag iframe HTML dasar dengan langkah-langkah berikut ini.
Daftar Isi
Apa itu Tag Iframe HTML?
Tag iframe HTML adalah tag yang digunakan untuk menentukan bingkai (frame) inline. Bingkai inline adalah bingkai yang menyematkan dokumen lain di dalam dokumen HTML saat ini. Tag iframe HTML memiliki bentuk sebagai berikut:
<iframe src="url" title="title" width="width" height="height"></iframe>Penjelasan atribut-atribut pada tag iframe HTML adalah sebagai berikut:
src: atribut ini digunakan untuk menentukan sumber atau lokasi halaman web yang ingin kita tampilkan di dalam iframe. Sumber halaman web bisa berupa URL (alamat web) atau nama file HTML yang berada di folder yang sama dengan file HTML kita.title: atribut ini digunakan untuk menulis judul atau deskripsi singkat dari halaman web yang kita tampilkan di dalam iframe. Judul ini akan membantu pengguna yang menggunakan pembaca layar (screen reader) untuk mengakses halaman web kita.widthdanheight: atribut ini digunakan untuk menentukan lebar dan tinggi dari iframe yang kita tampilkan. Nilai dari atribut ini bisa berupa piksel (px) atau persen (%).
Bagaimana Cara Menggunakan Tag Iframe HTML?
Untuk menggunakan tag iframe HTML, kita perlu menambahkan tag tersebut ke dalam dokumen HTML kita. Kita bisa meletakkan tag iframe HTML di mana saja di dalam tag <body> sesuai dengan kebutuhan kita. Berikut ini adalah contoh cara menggunakan tag iframe HTML:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Iframe HTML Dasar</title>
</head>
<body>
<h1>Belajar Tag Iframe HTML Dasar</h1>
<p>Ini adalah contoh halaman web yang menggunakan tag iframe HTML dasar.</p>
<p>Berikut ini adalah iframe yang menampilkan video YouTube:</p>
<iframe src="https://www.youtube.com/embed/5qap5aO4i9A" title="Video YouTube" width="560" height="315"></iframe>
</body>
</html>Penjelasan kode di atas adalah sebagai berikut:
- Kita menambahkan tag
<iframe>setelah tag<p>yang berisi teks “Berikut ini adalah iframe yang menampilkan video YouTube:”. - Kita memberikan atribut
srcdengan nilai “https://www.youtube.com/embed/5qap5aO4i9A” yang merupakan URL dari video YouTube yang ingin kita tampilkan di dalam iframe. - Kita memberikan atribut
titledengan nilai “Video YouTube” yang merupakan judul atau deskripsi singkat dari video YouTube yang kita tampilkan di dalam iframe. - Kita memberikan atribut
widthdengan nilai “560” dan atributheightdengan nilai “315” yang merupakan lebar dan tinggi dari iframe dalam satuan piksel.
Berikut adalah tampilan hasil dari code di atas:
|
| Gambar 14.2 : Tampilan Hasil Kode Tag Iframe |
Apa Saja Keuntungan dan Kerugian Menggunakan Tag Iframe HTML?
Menggunakan tag iframe HTML memiliki beberapa keuntungan dan kerugian yang perlu kita ketahui sebelum memutuskan untuk menggunakannya. Berikut ini adalah beberapa keuntungan dan kerugian menggunakan tag iframe HTML:
Keuntungan
- Kita bisa menampilkan konten dari sumber eksternal tanpa harus mengunduh atau menyimpannya di server kita sendiri. Hal ini bisa menghemat bandwidth dan mempercepat loading halaman web kita.
- Kita bisa menampilkan konten yang dinamis dan interaktif, seperti video, animasi, form, dan lain-lain, tanpa harus menggunakan bahasa skrip atau plugin tambahan.
- Kita bisa mengatur ukuran dan posisi dari iframe sesuai dengan keinginan kita dengan menggunakan atribut atau CSS.
Kerugian
- Kita bisa mengalami masalah keamanan jika kita menampilkan konten dari sumber yang tidak terpercaya atau tidak aman. Konten tersebut bisa mengandung virus, malware, atau kode jahat yang bisa merusak atau mencuri data dari halaman web kita.
- Kita bisa mengalami masalah aksesibilitas jika kita tidak memberikan atribut
titleataualtpada tag iframe HTML. Pengguna yang menggunakan pembaca layar atau browser yang tidak mendukung iframe tidak akan bisa mengakses atau memahami konten yang kita tampilkan di dalam iframe. - Kita bisa mengalami masalah navigasi jika kita tidak memberikan atribut
namepada tag iframe HTML. Pengguna tidak akan bisa menggunakan tombol back atau forward pada browser untuk kembali ke halaman sebelumnya atau berpindah ke halaman selanjutnya.
Kesimpulan
Demikianlah artikel tentang tag iframe HTML dasar. Tag iframe HTML adalah tag yang digunakan untuk menampilkan halaman web lain di dalam halaman web kita. Dengan tag iframe HTML, kita bisa melakukan embedding konten dari sumber eksternal, seperti video YouTube, post Instagram, tweet Twitter, file PDF, dan lain-lain.
Untuk menggunakan tag iframe HTML, kita perlu menambahkan tag tersebut ke dalam dokumen HTML kita dengan beberapa atribut penting, seperti src, title, width, dan height. Kita juga perlu mengetahui keuntungan dan kerugian menggunakan tag iframe HTML sebelum memutuskan untuk menggunakannya.
Semoga artikel ini bermanfaat dan membantu teman-teman dalam belajar HTML dasar. Jangan lupa untuk berlatih dan bereksperimen dengan kode-kode yang sudah kita pelajari. Selamat belajar dan sampai jumpa di artikel selanjutnya.