20 July 2012

belajar html iframe

IFrame (Inline Frame)

Inline Frames merupakan tipe frames yang banyak digunakan. Micrsoft Internet Explorer 3.0 memperkenalkan sebuah fitur yang disebut inline frames yang didefinisikan dengan tag <iframe>. Inline Frames memungkinkan sebuah frames dengan scrollbar dipasang ditengah-tengah kode HTML seperti halnya image. Tag <iframe> beserta atributnya telah ada didalam standar W3C's HTML 4.0. Memasang inline frame caranya hampir sama dengan memasang image didalam sebuah dokumen HTML. Didalam <iframe> kita mengatur tinggi dan lebar frame dan dokumen HTML yang ingin ditampilkan. Sama seperti images kita bisa mengatur align dan mengatur atribut hspace dan vspace. Kita pun dapat mengatur garis sama seperti images.

Sintaks IFrame 
    <iframe src="URL"></frame>


Contoh : iframe.htm

  1. <html>  
  2.   <head>  
  3.     <title>Inline Frame</title>  
  4.   </head>  
  5. <body>  
  6. <h2>Inline Frames</h2>  
  7. Isi keterangan disini  
  8. <iframe src="http://eliastutik.blogspot.com" width="350" height="200" align="left" hspace="12"></iframe>  
  9. </body>  
  10. </html>  
Dokumen iframe.htm

IFrame sebagai Target dari sebuah link

Iframe dapat digunakan sebagai Target Frame untuk link
Atribut target dari link harus mengacu pada atribut name di iframe-nya.

Contoh : iframe_target.htm
  1. <html>  
  2.   <head>  
  3.     <title>Inline Frame dengan atribut Target</title>  
  4.   </head>  
  5. <body>  
  6. <iframe src="demo_iframe.htm" name="showframe"></iframe>  
  7. <p><a href="http://eliastutik.blogspot.com" target="showframe">Blognya eli</a></p>  
  8. <p>value/nilai atribut Target link harus sesuai dengan value/nilai atribut name di iframe-nya, link akan terbuka di iframe</p>  
  9. </body>  
  10. </html>  

Contoh : demo_iframe.htm
  1. <html>  
  2.   <head>  
  3.     <title>demo iframe</title>  
  4.   </head>  
  5. <body>  
  6. <h2>frame "demo iframe" yang masih belum ditempati</h2>  
  7. </body>  
  8. </html>  
Dokumen iframe_target.htm
Jika Anda klik link "Blognya eli" maka akan berubah seperti gambar dibawah ini.
Dokumen iframe_target.htm dengan iframe demo_iframe.htm
sumber:http://eliastutik.blogspot.com/2011/12/iframe-html.html
Previous Post
Next Post
Related Posts

0 komentar: