MS Wulandari - HTML 1 PERTEMUAN VII FRAME A. MEMBUAT DAN MENGGUNAKAN FRAME Frame digunakan untuk : Membuat daftar isi pada suatu sisi frame sementara sisi frame yang lain untuk menampilkan isi Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isi dokumen Membuat suatu dokumen tanya jawab, dimana sisi frame yang satu berisi daftar pertanyaan sedangkan sisi frame yang lain berisi jawabannya. Dokumen frame tidak boleh berada dalam elemen BODY. Dokumen frame menggunakan elemen FRAMESET. FRAMESET mempunyai dua buah atribut : ROWS : membagi jendela browser menjadi beberapa baris frame. COLS : membagi jendela browser menjadi beberapa kolom frame. Struktur dasar dokumen HTML dengan frame adalah : <HTML> <HEAD> </HEAD> <FRAMESET ROWS= nilai_baris COLS= nilai_kolom > <FRAME>. </FRAME> </FRAMESET> </HTML> Tag <FRAME> mempunyai 6 atribut, yaitu : SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING dan NORESIZE. Berikut contoh frame yang kompleks : <FRAME SRC= url NAME= windoww_name SCROLLING=YES NO AUTO MARGINWIDTH= value MARGINHEIGHT= value NORESIZE> Atribut yang paling penting dari tag FRAME adalah SRC. SRC menunjukan bahwa frame berisi url, yang biasnya adalah file HTML, contoh : <FRAME SRC = sample.html > Nilai baris dan nilai kolom adalah kumpulan nilai yang menyatakan banyaknya frame yang dibuat serta ukuran masing-masing frame. Setiap nilai dalam daftar dipisahkan tanda koma dan dapat dinyatakan dalam ukuran : Pixel, contoh : <FRAMESET ROWS= 200,400,500 > Persentase, contoh : <FRAMESET ROWS= 30%,40%,30% > Nilai relatif, contoh : <FRAMESET ROWS= 4*,*,3* >, tanda * menyatakan suatu bagian dari sisa ruang yang ada. Didepan tanda * tidak ada angka, maka dianggap bahwa angka tersebut adalah 1. Ketiga pengaturan diatas dapat dikombinasikan penggunaannya. <FRAMESET ROWS= 60,20%,4* >. Untuk membuat frame baris, gunakan elemen FRAME yang dinyatakan dalam elemen FRAMESET, seperti dibawah ini : <title>frame dua dokumen</title> <frameset rows=2*,3*>
MS Wulandari - HTML 2 Untuk membuat frame kolom, gunakan elemen FRAME yang dinyatakan dalam elemen FRAMESET, seperti dibawah ini : <title>frame dua dokumen</title> <frameset cols=2*,3*> Untuk membuat frame yang terdiri dari frame baris dan frame kolom, atribut ROWS dan COLS digunakan bersama-sama dalam elemen FRAMESET, contoh : <title>frame empat dokumen</title> <frameset rows=*,* cols=*,*> <frame src="d:\materi_ngajar\ppn C\llist4.html"> <frame src="d:\materi_ngajar\ppn C\llist7.html"> Frame berulang adalah frameset didalam frameset yang lain. Untuk membuat frame seperti gambar anda perlu membuat beberapa FRAMESET seperti contoh dibawah ini : <!Membagi jendela browser dengan 3 bagian> <frameset rows=25%,50%,25%> <frame src="d:\materi_ngajar\ppn C\llist4.html"> <!Frame kedua dibagi menjadi dua kolom> <frameset cols=75%,75%> <frame src="d:\materi_ngajar\ppn C\llist2.html"> <frame src="d:\materi_ngajar\ppn C\llist3.html"> </frameset> <!Frame ketiga untuk file footer> </frameset> </Noframes> </html>
MS Wulandari - HTML 3 B. MENGATUR TAMPILAN FRAME Untuk menentukan margin pada frame kita menggunakan atribut MARGINWIDTH, yaitu menentukan nilai margin kiri dan nilai margin kanan suatu frame. Sedangkan MARGINHEIGHT digunakan untuk menentukan margin atas dan margin bawah frame. Format menggunakan kedua atribut tersebut : MARGINWIDTH= value <title>frame dua dokumen</title> <frameset rows=2*,3*> <frame src="d:\materi_ngajar\ppn C\llist6.html" marginwidth=40 marginheight=40> </frameset> </html> Secara otomatis frame akan mempunyai scrollbar untuk menggeser-geser isi dokumen jika ukuran dokumen tersebut lebih besar dari nilai frame yang ditetapkan. Nilai yang berlaku untuk atribut SCROOLING adalah yes, no atau auto, formatnya : <frame scrolling= yes no auto > <title>frame dua dokumen</title> <frameset rows=2*,3*> <frame src="d:\materi_ngajar\ppn C\llist2.html" SCROLLING=yes> <frame src="d:\materi_ngajar\ppn C\llist3.html"> Setiap frame dapat diubah-ubah ukurannya. Jika menginginkan suatu frame tidak dapat diubah-ukurannya gunakan atribut NORESIZE. Atribut ini sangat berguna jika anda membuat logo yag selalu ditampilkan dan tidak dapat diubah-ubah ukurannya. Format menggunakan atribut ini : <FAME NORESIZE>. Hati-hati dalam menggunakan NORESIZE. Jika isi dari frame melebihi ukuran frame, maka sisa isi frame tidak dapat dilihat.
MS Wulandari - HTML 4 <title>penggunaan NORESIZE</title> <frameset cols=*,*> <frame src="d:\materi_ngajar\ppn C\llist2.html" NORESIZE> <frame src="d:\materi_ngajar\ppn C\llist3.html"> Untuk memperoleh tampilan frame yang menarik. Anda dapat menggunakan : Atribut BORDER : digunakan untuk mengatur lebar border. Angka yang menyertai adalah satuan pixel. Formatnya : <FRAMESET BORDER= value > Atribut FRAMEBORDER : atribut ini mempunyai nilai yes atau no. Jika FRAMEBORDER= yes maka border akan ditampilkan dalam bentuk 3D. Untuk membuat halaman web tanpa border, pada FRAMESET lakukan set FRAMESETBORDER= no dan BORDER= 0. Atribut BORDERCOLOR : digunakan untuk memberi warna background pada frame. Bordercolor bisa diikuti dengan nama warna, nomor warna (tipe RGB). <title>penggunaan BORDERCOLOR</title> <frameset BORDER="8" BORDERCOLOR="GREEN" rows=*,*> <frame src="d:\materi_ngajar\ppn C\LIST\llist4.html" > <frame src="d:\materi_ngajar\ppn C\LIST\llist6.html"> C. TARGET HYPERLINK Anda dapat membuat suatu dokumen untuk terbuka pada suatu frame tertentu tanpa menutup frame yang ada saat ini. Suatu dokumen dapat diarahkan untuk terbuka pada frame tertentu, baik pada jendela browser atau frame tertentu. Atribut untuk mengarahkan dokumen tersebut adalah atribut TARGET, sedangkan lokasi jendela atau frame yang dituju dibuat dengan menggunakan atribut NAME. Atribut NAME memberikan nama pada suatu frame/jendela yang akan digunakan untuk menghubungkan suatu link ke frame tersebut. <title>penggunaan TARGET DAN NAME</title> <frameset cols=*,*> <frame name="sumber" target="data" src="d:\materi_ngajar\ppn C\FRAME\sumber.html"> <frame name="data" src="d:\materi_ngajar\ppn C\FRAME\data.html"> File sumber : <title>menu List</title> <BASE TARGET="data"> <body bgcolor="lightgrey"> <MENU> <LH><EM>Planet dalam sistem tata surya : </EM><BR><BR> <LI><A HREF="merkurius.html">Merkurius</A> <LI><A HREF="venus.html">Venus</A> </MENU> </body> </html> File data : <title>nested Unordered List</title> <body bgcolor="lightgrey"> <UL> <LH><EM>Planet dalam sistem tata surya : </EM><BR><BR> <LI>Merkurius <UL> <LI>57,9 juta kilometer dari matahari <LI>Tidak punya satelit </UL> <LI>Venus
MS Wulandari - HTML 5 <UL> <LI>108 juta kilometer dari matahari <LI>Tidak punya satelit </UL> </UL> </body> </html> Setelah di klik Merkurius, frame kanan berubah menjadi : Program diatas memberikan nama (atribut NAME) sumber pada suatu frame. Kemudian untuk menampilkan suatu dokumen web ke frame sumber gunakan atribut TARGET. Jika mempunyai target yang sama untuk setiap link atau mempuyai target dengan nama-nama yang sama, gunakan tag BASE untuk membuat default target dari semua link yang tidak mempunyai target dengan nama-nama yang sama, gunakan tag BASE untuk membuat default target dari semua link yang tidak mempunyai target khusus. Penggunaannya adalah : <BASE TARGET= default >. Dengan demikian, default akan menjadi target bagi semua link yang tidak mempunyai target khusus. NAMA _blank _self _parent _top _open FUNGSI Browser akan menampilkan suatu jendela baru untuk menampilkan dokumen dari link yang diinginkan Browser akan menampilkan pada jendela yang sama dengan jendela pemanggilnya Dokumen akan ditampilkan pada jendela sebelumnya. Nilai _top akan bertindak seperti _self jika dokumen sudah berada di jendela utama browser Akan membuka dokumen pada seluruh jendela utama browser, tanpa tergantung pada struktur frame saat ini. <A HREF="D:\MATERI_NGAJAR\PPN C\llist7.html" TARGET= _blank > <A HREF="D:\MATERI_NGAJAR\PPN C\llist7.html" TARGET= _self > <A HREF="D:\MATERI_NGAJAR\PPN C\llist7.html" TARGET= _parent > <A HREF="D:\MATERI_NGAJAR\PPN C\llist7.html" TARGET= _top > Tidak semua browser mendukung adanya frame. Atribut NOFRAMES akan membantu menyelesaikan masalah ini. Dengan elemen <NOFRAMES> </NOFRAMES> akan membuat isi dokumen seperti dokumen html normal.
MS Wulandari - HTML 6