Frame dan IFrame Click to edit Master subtitle style Pengenalan Web STMIK AKAKOM Yogyakarta
Frame Digunakan untuk membuat 2 atau lebih area terpisah yang bisa digulung (scrollable areas) dalam satu jendela browser Dengan kata lain, frame membuat kita dapat menampilkan lebih dari satu HTML document dalam satu jendela browser Masing-masing HTML document disebut sebagai frame, dan setiap frame independent satu sama lain. Frame-frame tersebut terletak dalam satu wadah/bingkai yang disebut frameset
Kelemahan Frame Frame (relatif) sulit digunakan bagi user (mis: pencetakan, tombol back) Pengelolaan lebih dari 1 HTML document dalam 1 jendela terkadang menyulitkan bagi web developer Kemungkinan tidak akan didukung untuk standar HTML ke depan 33
Pembuatan Frame Dibutuhkan : file satu.html (mengisi bagian kiri) File dua.html (mengisi bagian kanan) Frameset dengan pembagian berdasar kolom
File : satu.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> </head> <body style="background-color:green"> <h1>ini File Satu</h1> </body> </html> 55
File : dua.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> </head> <body style="background-color:yellow"> </body> </html> Ini file yang kedua 66
File Utama : fset.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> </head> <frameset cols="25%,*"> <frame src="satu.html"></frame> <frame src="dua.html"></frame> </frameset> </html> 77
<frameset> <frameset> digunakan untuk membagi dokumen ke dalam frame Pembagian bisa secara kolom (cols) atau baris (rows) Bentuk umum : <frameset cols rows = ukuran_kolom_atau_baris > Ukuran_kolom_atau_baris bisa berupa : Persen Pixel Asterisk ( * ) 88
Contoh <frameset> Untuk membagi jendela menjadi : 2 kolom, dengan ukuran 25% dan 75% <frameset cols= 25%, 75% > 3 kolom, dengan ukuran 25%, 25% dan sisanya <frameset cols= 25%, 25%, * > 2 baris, dengan ukuran 100 piksel, dan sisanya <frameset rows= 100px, * > 3 kolom, dengan ukuran 100 piksel, dan 2 kolom lain sisanya <frameset cols= 100px, *, *> 99
Catatan <frameset> <frameset> menggantikan tag <body>, sehingga untuk dokumen html yang menggunakan tag <frameset> tidak ada tag <body> Elemen konten dari <frameset> hanyalah : Tag <frame> Tag <frameset> lain, saat nested frameset Tag <noframes> 10
<frame> Tag <frame> merupakan elemen konten dari <frameset> Tag <frame> digunakan untuk menentukan behaviour dari tiap frame termasuk isi dari frame tersebut Bentuk paling sederhana dari frame: <frame src= URL_konten_dari_frame > URL_konten_dari_frame bisa berisi dokumen HTML, image atau lainnya 11
Nested Frameset Yaitu frameset yang terletak di dalam frameset yang lain <frameset rows="80px,*" > <frame src="satu.html"></frame> <frameset cols="100px,*"> <frame src="dua.html"></frame> <frame src="girl.jpg"></frame> </frameset> </frameset> 12
Hasil 13
Attribut frameset Beberapa attribut penting frameset: Frameborder = yes no 1 0 Border = nilai_integer Frameborder, untuk menentukan apakah frame yang dibuat mempunyai border ( yes 1 ) atau tidak ( no 0 ) default : yes Border, untuk menentukan ukuran border (jika frameborder berisi nilai yes 1 )
contoh <frameset rows="80px,*" frameborder="no" > <frame src="satu.html"></frame> <frameset cols="100px,*"> <frame src="dua.html"></frame> <frame src="girl.jpg"></frame> </frameset> </frameset>
contoh <frameset rows="80px,*" frameborder="yes" border="1"> <frame src="satu.html"></frame> <frameset cols="100px,*"> <frame src="dua.html"></frame> <frame src="girl.jpg"></frame> </frameset> </frameset> 16
Attribut frame name = nama_frame Sangat penting untuk pengaksesan frameborder = yes 1 no 0 Ada tidaknya border, default = yes scrolling = yes no auto Ada tidaknya scroll bar, default = auto marginwidth = nilai_integer Batas kanan/kiri halaman terhadap frame marginheight = nilai_integer Batas atas bawah halaman terhadap frame noresize = noresize Menjadikan ukuran frame tak bisa dirubah 17
Contoh <frameset rows="80px,*" frameborder="yes" border="1" > <frame src="satu.html" scrolling="no"></frame> <frameset cols="100px,*"> <frame src="dua.html"></frame> <frame src="girl.jpg" marginwidth="20" marginheight="20"></frame> </frameset> </frameset> 18
Hasil 19
Contoh lain <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> </head> <frameset rows="80px,*" frameborder="yes" border="5"> <frame src="satu.html" scrolling="no"></frame> <frameset cols="100px,*"> <frame src="dua.html" frameborder="0"></frame> <frame src="girl.jpg" frameborder="0"></frame> </frameset> 20
Hasil 21
<noframes> Tag <noframes> digunakan untuk mengantisipasi jika browser yang digunakan tidak mendukung adanya frame Contoh : <frameset cols= 25%,* > <frame src= file_a.html ></frame> <frame src= file_b.html ></frame> <noframes> Browser anda tidak mendukung frame </noframes </frameset> 22
Inline frame (iframe) Berfungsi untuk meletakkan suatu potongan dokumen HTML lain ke dalam suatu dokumen HTML tanpa harus membagi dokumen ke dalam beberapa frame dengan frameset 23
Attribut iframe Attribut <iframe> mirip dengan attribut <frame>, beberapa penambahan : Untuk alignment digunakan : style= float: left right none Pengaturan ukuran digunakan : height = nilai_integer width = nilai_integer 24
Contoh <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> </head> <body> Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. <hr/><iframe src="satu.html" scrolling="yes" width="100" height="100" style="float:right"></iframe>ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. </body> </html> 25
Hasil: 26
Link dalam Frame Penggunaan hyperlink dalam frame sama dengan hyperlink biasa, beberapa hal penting yang harus diperhatikan : Frame yang akan dijadikan target lokasi dokumen harus diberi nama Nama frame disebutkan pada target hyperlink 27
Contoh : Akan dibuat File utama : linkframe.html File Header : head.html File Menu : menu.html File Isian : satu.html dan dua.html (keduanya sudah dibuat di slide sebelumnya) 28
Linkframe.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> </head> <frameset rows="80px,*"> <frame src="head.html"></frame> <frameset cols="100px,*"> <frame src="menu.html"></frame> <frame name="content"></frame> </frameset> 29
Head.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> </head> <body> <h1>www.myweb.com</h1> </body> </html> 30
<html> <body> Menu.html <h3>menu</h3> <a href="satu.html" target="content">file Satu</a><br/> <a href="dua.html" target="content">file Dua</a> </body> </html> Untuk setiap link yang dibuat, target diisikan nama frame tujuan 31
Tampilan awal 32
Menu File Satu diklik 33
Link iframe <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> </head> Target Link = nama iframe tujuan <body> <a href="dua.html" target="kotak" >Isikan File Dua</a> Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. <hr/><iframe src="satu.html" name="kotak" width="100" height="100 style="float:right"></iframe> Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. Ini sekedar Tes saja. </body> </html> Iframe diberi nama 34
Hasil 35
Setelah link diklik 36
Selesai 37