Iframe Dalam Html

-

Iframe dalam Html


   Hallo semuanya, Pada Kesempatan ini saya akan membahas materi tentang Html, yaitu Iframe dalam Html. Sebelum lanjut ke materi nya, tahukah kalian apa itu iframe ?
   Iframe adalah sebuah tag Html yang digunakan untuk menampilkan sebuah halaman website ataupun dokumen html lainnya. Kita bisa menggunakan tag <iframe> untuk menampilkan sebuah halaman website ataupun dokumen lainnya.

Syntax Iframe
   Selain menggunakan tag <iframe>, kita juga harus menggunakan beberapa property pendukung agar konten yang ditampilkan lebih sempurna. Apa saja property pendukung nya ? Berikut ini adalah property - property pendukung nya.
  • src : untuk menampilkan konten / halaman yang dituju untuk ditampilkan
  • width : lebar konten yang akan ditampilkan
  • height : panjang konten yang akan ditampilkan
  • srcdoc : untuk memuat code html
  • title : sebagai tooltip dan akan dibaca oleh screen reader untuk aksebilitas
Selain property, ada juga beberapa attribut global yang dapat digunakan. Diantaranya sebagai berikut
  • id
  • class
  • style
Setelah mengetahui beberapa property dan attribut global yang dapat mendukung tag <iframe> agar lebih sempurna, sekarang kita akan mulai mempelajari codingan nya. Contohnya sekarang saya akan menampilkan Blog Freeze Gans dibawah ini dengan tag <iframe>. Berikut ini adalah codingan nya.
<!DOCTYPE html>
<html>
  <body>
    <iframe src="https://imansihombing.blogspot.com" width="auto" height="auto"></iframe>
  </body>
</html>

<!-- atau -->

<!DOCTYPE html>
<html>
  <body>
    <iframe src="https://imansihombing.blogspot.com" style="width:auto;height:auto;"></iframe>
  </body>
</html>
Kamu bisa mengubah ukurannya sesuai keinginan.

Sekarang kita akan membahas property srcdoc yang akan memuat code html. 
Berikut ini adalah codingan nya.
<!DOCTYPE html>
<html>
  <body>
    <iframe srcdoc="<p>Selamat datang di Blog Iman Sihombing</p><p>Tutorial Tentang Iframe</p>"></iframe>
  </body>
</html>
Hasilnya seperti dibawah ini

Selamat datang di Blog Iman Sihombing

Tutorial Tentang Iframe

Diatas adalah contoh penggunaan property srcdoc, kita akan mencoba untuk menambahkan CSS nya. Berikut ini contoh codingan nya.

<!DOCTYPE html>
<html>
  <body>
   <iframe srcdoc="<p style='color: blue; background-color: red;'>Selamat datang di Blog Iman Sihombing</p><p style='color: yellow; background-color: blue;'>Tutorial Tentang Iframe</p>"></iframe>
  </body>
</html>
Selamat datang di Blog Iman Sihombing
Tutorial Tentang Iframe
jika  masih belum mengerti, silahkan bertanya di kolom komentar yang sudah tersedia. Sekian dan Terimakasih.-------------------------------------------------------------------------------------

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Menambahkan Audio Di Html

-
Gambar
  Hallo semuanya kali ini saya akan membahas tutorial mengenai Html, yaitu tentang Cara Menambahkan Audio di Html. Kita bisa Menambahkan Audio di Html dengan berbagai cara. Sebelum adanya HTML5, untuk menambahkan audio ke Html menggunakan Flash Player. Namun seiring berkembangnya zaman dan sudah adanya HTML5, membuat kita lebih mudah dalam menambahkan audio di Html. Kita bisa menambahkan audio di Html menggunakan tag  <audio> . Kemudian untuk memberikan file video, kita bisa menggunakan tag  <source>  di dalam tag  <audio> . Berikut ini adalah contoh codingan nya <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cara Menambahkan Audio di HTML</title> </head> <body> <h1>Contoh Audio di dalam Website</h1> <audio controls> <source src="Serana.mp3" type="audio/mpeg"></audio> </body> </html> Hasilnya seperti dibaw...
Read more »

Cara Menampilkan File PDF di Html

-
Gambar
  Cara Menampilkan File PDF di Html Hallo Semuanya, kembali lagi di Blog Saya, kali ini saya akan memberikan cara bagaimana menampilkan File PDF di Html. Tahukah anda Tujuan Menampilkan PDF di dalam Website ? kebanyakan orang kalau website itu hanya berisi suatu Informasi ataupun tutorial, namun informasi yang dibuat tidak semuanya bersifat teks / gambar, ada juga yang menggunakan File PDF. Sebagai contoh seperti website sekolah, pemerintahan dan perpustakaan online. Disini kita akan masuk bagaimana caranya. 1.      1.  Sediakan File PDF 2.          2.   Upload File PDF ke Google Drive              3. Kemudian salin link file PDFnya. 4.           4.  Sekarang menampilkan file PDFnya dengan tag <iframe>. 5.        Sebagai contohnya <!doctype html> <html> <body> <iframe src=”Masukkan Link PDF nya” style=”heigh...
Read more »