MATERI: FRAME PADA HTML
Frame Digunakan untuk membagi halaman web yang terdiri dari beberapa file html yang saling terintegrasi satu dengan yang lainnya.
Struktur Dokumen dalam frame Layout Documents <FRAMESET>. Fungsi : Membagi jendela menjadi beberapa bagian. Content Documents <FRAME SRC= url > Fungsi : Mengisi dari suatu frame, ini merupakan dokumen HTML Struktur Dokumen Menggunakan Frame <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <FRAMESET>. <HTML>
Atribut dalam Frameset COL : Membuat Vertical FRAME ROW : Membuat Horizontal FRAME FRAMESPACING : Spasi di sekitar FRAME FRAMEBORDER : Membuat border pada FRAME Contoh : <FRAMESET COLS= 150,150,150 >. <FRAMESET ROWS= 10%,40%,50% >.. <FRAMESET ROWS= *,*,* >.. <FRAMESET COLS= 25%,40%,* >.. <FRAMESET COLS= *,3* >..
Atribut dalam Frame SRC MARGIN WIDTH MARGIN HEIGHT SCROLLING NORESIZE FRAMEBORDER Sintaks : 1. <FRAMESET COLS= 15%,25%,*> <FRAME SRC= url > 2. <FRAMESET COLS= 15%,25%,*> <FRAME SRC= url > <FRAME SRC= url > <FRAME SRC= url >
Menggunakan Frame kolom <FRAMESET COLS="*,*,*"> <FRAME SRC="file://I:/Latihan HTML/form.htm"> <FRAME SRC="file://I:/Latihan HTML/combo.htm"> <FRAME SRC="file://I:/Latihan HTML/GUESTBOOK.HTM">
Menggunakan Frame Baris <FRAMESET ROWS="*,*,*"> <FRAME SRC="file://I:/Latihan HTML/form.htm"> <FRAME SRC="file://I:/Latihan HTML/combo.htm"> <FRAME SRC="file://I:/Latihan HTML/GUESTBOOK.HTM">
Menggunakan Frame Baris & Kolom <FRAMESET ROWS="*,*,*"> <FRAMESET COLS="*,*,*"> <FRAME SRC="file://I:/Latihan HTML/form.htm"> <FRAME SRC="file://I:/Latihan HTML/combo.htm"> <FRAME SRC="file://I:/Latihan HTML/GUESTBOOK.HTM"> <FRAME SRC="file://I:/Latihan HTML/combo.htm"> <FRAME SRC="file://I:/Latihan HTML/GUESTBOOK.HTM"> Hasil yang ditampilkan
<FRAMESET COLS="*,*"> <FRAMESET ROWS="*,*,*"> <FRAME SRC="file://I:/Latihan HTML/form.htm"> <FRAME SRC="file://I:/Latihan HTML/combo.htm"> <FRAME SRC="file://I:/Latihan HTML/GUESTBOOK.HTM"> <FRAME SRC="file://I:/Latihan HTML/GUESTBOOK.HTM"> Hasil yang ditampilkan
Memformat Tampilan Frame 1. Mengatur Margin <html> <head> <title></title> </head> <FRAMESET ROWS="*,*"> <FRAME SRC="file://I:/Latihan HTML/CONTOH.HTML" MARGINHEIGHT=40 MARGINWIDTH=40> <FRAME SRC="file://I:/Latihan HTML/CONTOH.HTML"> </html> Hasil yang ditampilkan
<html> <head> <title></title> </head> <FRAMESET ROWS="*,*"> <FRAME SRC="file://I:/Latihan HTML/CONTOH.HTML" MARGINHEIGHT=40 MARGINWIDTH=40 SCROLLING="NO"> <FRAME SRC="file://I:/Latihan HTML/CONTOH.HTML" MARGINHEIGHT=40 MARGINWIDTH=40 SCROLLING="YES"> </html> Hasil yang ditampilkan
2. NORESIZE <html> <head> <title></title> </head> <FRAMESET ROWS="*,*"> <FRAME SRC="file://I:/Latihan HTML/CONTOH.HTML" MARGINHEIGHT=40 MARGINWIDTH=40 NORESIZE> <FRAME SRC="file://I:/Latihan HTML/CONTOH.HTML" MARGINHEIGHT=40 MARGINWIDTH=40 NORESIZE> </html> Hasil yang ditampilkan
3. FRAMEBORDER <html> <head> <title></title> </head> <FRAMESET ROWS="*,*"> <FRAME SRC="file://I:/Latihan HTML/CONTOH.HTML" MARGINHEIGHT=40 MARGINWIDTH=40 FRAMEBORDER="NO"> <FRAME SRC="file://I:/Latihan HTML/CONTOH.HTML" MARGINHEIGHT=40 MARGINWIDTH=40 FRAMEBORDER="NO"> </html> Hasil yang ditampilkan
Link dan Target Pada Frame Induk.html <html> <head> <title></title> </head> <FRAMESET COLS="50%,*"> <FRAME SRC="file://I:/Latihan HTML/index.HTM"> <FRAME NAME="target link" src=""> </html> Hasil dari kedua program diatas Index.html <html> <head> <title></title> </head> <BODY> <H2 ALIGN="center">Link Index</H2> <A HREF="PICTURE1.JPG" TARGET="target link">gambar 1</A><BR> <A HREF="PICTURE2.JPG" TARGET="target link">gambar 2</A><BR> <A HREF="Winter.JPG" TARGET="target link">winter</a><br> <A HREF="Sunset.JPG" TARGET="target link">sunset</a><br> </BODY> </html>
Sebelum di klik link Gambar Setelah di klik link Gambar Nilai Atribut Target alternatif adalah : _self Akan menampilkan link target pada frame yang sama _parent Akan menutupi seluruh halaman _top Akan menutupi seluruh halaman _blank Akan membuat jendela baru
Floating Frame <html> <head> <title></title> </head> <BODY> <H2 ALIGN="center">Link Index</H2> <A HREF="PICTURE1.JPG" TARGET="target link">gambar 1</A><BR> <A HREF="PICTURE2.JPG" TARGET="target link">gambar 2</A><BR> <IFRAME SRC="FORM.HTM" ALIGN=RIGHT></IFRAME> <A HREF="Winter.JPG" TARGET="target link">winter</a><br> <A HREF="Sunset.JPG" TARGET="target link">sunset</a><br> </BODY> </html> Hasil yang ditampilkan