HTML DASAR – Membuat IFrame pada HTML

  • Post
    codeorayo
    Keymaster
    none
    Pada tutorial kali ini kita akan membahas tentang bagaimana caranya membuat IFrame pada HTML ?. IFrame merupakan singkatan dari Inline Frame. IFrame disediakan oleh HTML agar halaman website saat ini dapat menampilkan sebuah halaman website lain yang dibungkus dalam sebuah frame. Namun, IFrame ini jarang sekali digunakan.

    Saya mencoba menampilkan halaman form dengan iframe,…

    Pertama buat dulu halaman formnya. Silahkan beri nama file tersebut dengan nama form.html.

    Code:




    Form

    Form Registrasi

    Username :

    Password :

    Asal Kota :


    Hasil dari website form adalah seperti gambar di bawah ini :

    [img width=590,height=442]http://lautankode.com/wp-content/uploads/2018/01/IFrame.png[/img]

    Kemudian barulah kita bingkai halaman halaman form ini ke dalam halaman Iframe. Silahkan anda buat file bernama index.html dengan syarat file ini berada 1 lokasi folder dengan file form.html.

    Code:



    Ini adalah halaman Iframe

    Frame di bawah ini akan menampilkan halaman Form



    Dan di bawah ini adalah hasilnya :

    [img width=459,height=356]http://lautankode.com/wp-content/uploads/2018/01/Iframe-Output.png[/img]

    IFrame memiliki atribut dasar, yakni :

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td]Atribut[/td] [td]Kegunaan[/td]
    [td]Frameborder[/td] [td]Mendefinisikan ketebalan border yang akan diberikan.[/td]
    [td]Height[/td] [td]Mendefinisikan tinggi frame.[/td]
    [td]Src[/td] [td]Mendefinisikan URL website yang akan dibuka.[/td]
    [td]Width[/td] [td]Menefinisikan lebar frame.[/td]
    [td]Scrolling[/td] [td]Berisi nilai Boolean, yakni yes (frame dapat di scroll), atau no (frame tidak dapat di scroll).[/td]

    Mengatur Border pada IFrameSecara default IFrame menampilkan border pada frame-nya, anda pun dapat menghilangkannya dengan atribut frameborder=”0”.

    Code:



    Ini adalah halaman Iframe

    Frame di bawah ini akan menampilkan halaman Form



    Dan di bawah ini adalah outputnya :

    [img width=450,height=349]http://lautankode.com/wp-content/uploads/2018/01/Iframe-Mengatur-Border-Frame.png[/img]

    Mengatur ukuran IFrameUkuran IFrame pun juga dapat diatur dengan atribut width dan height.

    Code:



    Ini adalah halaman Iframe

    Frame di bawah ini akan menampilkan halaman Form



    Output :

    [img width=446,height=344]http://lautankode.com/wp-content/uploads/2018/01/Iframe-Mengatur-Ukuran-Iframe.png[/img]

    Membuat Hypertext untuk IFramePada tutorial ini akan mempelajari bagaimana caranya membuat Hypertext untuk Iframe. Dimana Iframe ini dijadikan sebagai target Link.

    Yang menjadi acuan adalah nilai atribut dari atribut name pada elemen 

    Form


    Sebelum di klik…

    [img width=473,height=370]http://lautankode.com/wp-content/uploads/2018/01/Iframe-Membuat-Hypertext-IFrame-2.png[/img]

    Sesudah diklik akan menampilkan halaman form.

    [img width=476,height=379]http://lautankode.com/wp-content/uploads/2018/01/Iframe-Membuat-Hypertext-IFrame-3.png[/img]

    Semoga materi Membuat IFrame pada HTML ini dapat dipahami.

    https://www.lautankode.com/membuat-frame-pada-html/

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com
  • You must be logged in to reply to this topic.