HTML Iframe

  1. › 
  2. ›  › 
  3. HTML Iframe

Iframe

<iframe src=''>
Perhatikan contoh tampilan iframe dibawah ini :

Iframe berasal dari kata Inline Frame yang berarti sebuah bingkai dan termasuk elemen inline.
Tag iframe berfungsi menampilkan suatu halaman web didalam halaman web.

Atribut tag iframe

Tag Iframe sangat mirip dengan tag img, keduanya membutuhkan atribut src agar bisa berfungsi dan juga keduanya termasuk elemen inline. 
<iframe title='Halaman Depan' src='/' width='100%'></iframe>

Daftar atribut tag iframe

  1. src
    2. Atribut ini digunakan "memanggil" halaman yang akan dimuat didalam frame, dan berisi sebuah URL (penunjuk alamat) sumber halaman yang akan ditampilkan tersebut.
  2. title
    3. Berfungsi memberikan keterangan tentang iframe.
  3. height
    4. Atribut ini berfungsi untuk menentukan ketinggian <iframe>.
  4. width
    5. Atribut ini berfungsi untuk mengatur panjang <iframe>.

Penggunaan atribut tag iframe

Contoh iframe diatas merupakan tampilan iframe dengan atribut width='100%'.
Dibawah ini tampilan default iframe / tanpa atribut width dan height.

Selanjutnya contoh penggunaan atribut height:

<iframe title='Halaman Depan'
  src='/2022/08/mengenal-html.html'
  width='100%' height='400px'>
</iframe>

Tampilan iframe setelah ditambahkan atribut height='400px':


Berikut ini contoh penggunaan atribut style pada iframe untuk menghilangkan border (garis batas tepi):

<iframe title='Halaman Depan' src='/' style='border:none'>
</iframe>

Setelah border dihilangkan, bandingkan dengan contoh lainnya diatas.


CATATAN :
Atribut src berisi karakter '/' mendeklarasikan halaman induk / halaman depan suatu situs web.
Dimana karakter '/' merujuk pada URL induknya, yaitu seperti https://www.namasitus.com.
Jadi, misal jika pada situs www.namasitusA.com membuat iframe atau link dengan nilai atribut src='/' maka akan diarahkan ke URL https://www.namasitusA.com, begitupun disitus lainnya.
URL tersebut dinamakan URL Alternatif.
Tips menyematkan iframe
Seperti diketahui bahwa iframe adalah elemen inline, sehingga sifatnya "menempel" bersebelahan dengan elemen terdekatnya.
Perhatikan pada tampilan contoh terakhir, iframe tersebut menempel dengan teks yang berada didekatnya.

Untuk menampilkan ifram dihalaman dengan lebih rapi, gunakan atribut width='100%' untuk memblokade lebar halaman sehingga tidak ada tempat yang tersedia untuk elemen lain.

Alternatif lainnya, masukkan didalam tag <div>.
Dengan tag div, meskipun lebar iframe tidak memblokade halaman namun elemen div membantu memblokade lebar halaman.

<div>
<iframe title='Halaman Depan' src='/' style='display:block; margin:auto'></iframe>
</div>


Komentar

Posting Komentar