HTML iframe adalah elemen yang bisa kamu pakai buat menyematkan halaman web lain di dalam halaman web kamu. Cocok banget buat nampilin video, peta, atau halaman eksternal tanpa harus buka tab baru. Nah, di artikel ini, kita bakal bahas tuntas mulai dari sintaks sampai cara menghilangkan border. Yuk, langsung gaspol!
1. HTML Iframe Syntax
Sintaks dasar iframe cukup simpel, kayak gini:
<iframe src="https://www.sovyan.com" width="600" height="400"></iframe>Hasilnya:
src→ URL halaman yang mau dimasukkan.width&height→ Buat atur ukuraniframe.
2. Iframe – Set Height and Width
Biar tampilannya lebih rapi, kamu bisa atur tinggi dan lebar iframe sesuai kebutuhan. Bisa pakai atribut width dan height, atau CSS.
Contoh Pakai Atribut:
<iframe src="https://www.sovyan.com" width="300" height="300"></iframe>Hasilnya:
Contoh Pakai CSS:
<iframe src="https://www.sovyan.com" style="width: 300px; height: 300px;"></iframe>Hasilnya:
Kalau mau responsif, mending pakai CSS ya!
3. Iframe – Remove the Border
Secara default, iframe biasanya punya border. Kalau mau diilangin, bisa pakai CSS:
<iframe src="https://www.sovyan.com" style="border: none;"></iframe>Hasilnya:
Gampang, kan? Tinggal kasih border: none; di style.
4. Iframe – Target for a Link
iframe juga bisa dipakai buat nampilin hasil dari link yang diklik. Triknya pakai atribut name di iframe, lalu target di link-nya.
Contoh:
<iframe name="myIframe" width="600" height="400"></iframe>
<a href="https://www.sovyan.com" target="myIframe">Klik buat buka di iframe</a>Hasilnya:
Jadi, kalau link diklik, halaman bakal kebuka di dalam iframe, bukan di tab baru.
5. Kesimpulan
Sekarang kamu udah ngerti dasar-dasar HTML iframe, dari sintaks sampai cara ngehilangin border. Intinya, iframe itu keren buat nampilin konten eksternal di web kamu, asal dipakai dengan bijak.
6. HTML iframe Tag
Buat referensi tambahan, berikut format lengkap iframe tag:
<iframe src="URL" width="lebar" height="tinggi" style="border: none;"></iframe>Udah siap buat ngoding? Cobain sendiri di proyekmu! Kalau ada pertanyaan, langsung komen di bawah ya. Happy coding!
Komentar