Blog Belajar HTML: IFrame pada HTML

IFrame (Inline Frame) merupakan teknik semat dalam bingkai (frame). Dengan iframe, Anda tidak harus mengetikkan url (link) pada address bar browser, tetapi cukup menuliskannya pada atribut src pada tag iframe. Tag iframe menampilkan objek seperti situs, video, gambar di dalam sebuah halaman web, yang disematkan di antara tag <body> dan tag </body>.

Tipspengetahuan.com ditampilkan dalam iframe.

Ada beberapa atribut tag <iframe> yang umum digunakan:

- src yaitu alamat (url) yang ditampilkan dalam iframe

- width digunakan untuk menentukan lebar iframe (dalam px/piksel)

- height digunakan untuk menentukan tinggi iframe (dalam px/piksel)

- frameborder mengatur border iframe (dalam angka di mulai 0/tidak ada border)

Catatan: urutan penulisan atribut tidak ada urutan, boleh dimulai dari mana saja; misalnya dari height dulu kemudian src.

Contohnya seperti berikut: iframe.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Testing iframe</title>
        </head>
    <body>
        <h3>Iframe tipspengetahuan.com</h3>
        <iframe height="300px"
        src="http://tipspengetahuan.com"
        frameborder="0"
        width="600px"></iframe>
    </body>
</html>

Iframe video (embedded video) dari YouTube
Video yang ada di Youtube bisa Anda buat dalam iframe dan ditonton dari halaman web Anda. Dari menu Share pada video yang sedang ditonton, pilih Embed dan copy srcript yang ada di kotak teks:

Iframe embed video dari YouTube.

Selanjutnya Anda tuliskan dalam file html, iframeytube.html:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Testing iframe dari Youtube</title>
        </head>
    <body>
        <h3>Contoh Bacaan Ijab Kabul Pernikahan </h3>
        <iframe width="420px" height="315px"
        src="//www.youtube.com/embed/VXU5raThoZQ"
        frameborder="0" allowfullscreen></iframe>
    </body>
</html>

Iframe video YouTube.

Iframe gambar dari Photobucket

File gambar juga bisa Anda tampilkan dalam iframe dengan menuliskan alamat gambar pada atribut src. Contohnya gambariframe.html:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Testing iframe dari Photobucket</title>
        </head>
    <body>
        <h3>Kucing imut lagi tidur</h3>
        <iframe width="600px" height="500px"
        src="http://i794.photobucket.com/albums/yy228/jade95_2010/CUTENESS/206110120_j95.jpg"
        frameborder="0" allowfullscreen></iframe>
    </body>
</html>

Iframe file gambar dari Photobucket.

Catatan: Semua contoh-contoh di atas akan bekerja jika terkoneksi dengan internet.

^Baca juga: Belajar menggunakan input type HTMl untuk membuat beberapa kontrol.

Monday, September 8, 2014

IFrame pada HTML

No comments:

Post a Comment