Mungkin pernah anda jumpai sebuah blog/web ditampilkan di dalam blog/web. Itulah fungsi tag iframe. Digunakan untuk menampilkan sebuah dokumen html di dalam dokumen html. Selain untuk menampilkan blog/web di dalam blog tentu saja iframe juga dapat digunakan untuk menampilkan dokumen html yang lain. Hal seperti ini seperti yang kita lihat di blogger/blogspot pada comment box. Comment editor adalah sebuah box yang dihasilkan melalui tag iframe. Didalamnya terdapat kode html lengkap sebagaimana sebuah desain web/blog, dimana digunakan tag pembuka dan penutup html, head, dan body.
Kode dasar tag iframe
<iframe src="URL" width="x" height="xx" scrolling="xxx" name="xxxxx" style="xxxx"></iframe>
Keterangan :
- URL alamat dokumen html yang akan ditampilkan melalui tag iframe.
- x width (lebar) iframe dalam satuan pixel(px).
- xx height (tinggi) iframe dalam satuan pixel(px).
- xxx scrolling iframe berfungsi untuk menampilkan scroller dengan value yes, no , auto.
- xxxx attribute style terdiri dari property css berikut nilainya. Beberapa css property dapat digunakan untuk pengaturan iframe seperti, display, width, height, border, margin, padding dll.
- xxxxx : nama dokumen html yang akan ditampilkan melalui tag iframe.
Attribute yang umum digunakan dalam tag iframe
<iframe src="URL" width="x" height="xx" scrolling="xxx" style="xxxx" name="xxxxx"></iframe>
<iframe class="my-class" src="URL" width="x" height="xx" scrolling="xxx" name="xxxx"></iframe>
<iframe id="my-id" src="URL" width="x" height="xx" scrolling="xxx" name="xxxx"></iframe>
Attribute id dan attibute class & tag iframe
Attribute id dan class dapat digunakan untuk tag iframe. Menggunakan tag ini sangat efektif karena membuat tag iframe menjadi lebih simple. Untuk penggunaan attribute id dan class anda harus menambahkan css properties sebagai pengatur iframe.Contoh:
<style type="text/css"> iframe#my-id{ padding:20px; border:2px solid #888; margin:20px 0; background:transparent; } </style> <iframe id="my-id" src="URL" width="x" height="xx"scrolling="xxx" name="xxxx"></iframe>
<style type="text/css"> iframe.my-class{ width:400px; height:500px; padding:20px 15px; border:2px solid #888; margin:20px; background:transparent; } </style> <iframe class="my-class" src="URL" scrolling="x" name="xx"></iframe>
Attribute lain dalam tag iframe
Beberapa attribute menjadi pelengkap tag iframe namun attribute-attribute ini jarang digunakan karena property css yang digunakan melalui attribute style mampu menggantikan fungsi attribute berikut ini dengan lebih sempurna.- title : berisi teks yang berkaitan dengan dokumen yang akan ditampilkan.
- frameborder : value 0 (tanpa border) , 1 (menggunakan border)
- longdesc : long description (value txt)
- marginwidth : mengatur margin kanan dan kiri (mengatur jarak dengan obyek di atas dan dibawahnya dengan value = px).
- marginheight : mengatur margin atas dan bawah (jarak dengan obyek di atas dan bawahnya (px)
Di bawah ini telah disertakan 2 buah iframe dengan URL sama (object sama) tetapi ditampilkan dengan 2 cara berbeda. Anda dapat mengganti URL dengan alamat obyek lain seperti misalnya alamat blog anda. Silahkan edit kode untuk mendapatkan hasil berbeda/
Please click the button to display. Continue with editing code and click to see the results!
saya praktekkan di page blogspot kok perintah margin tidak berfungsi ya mas?
BalasHapus