Sekarang ini penggunaan frame untuk membagi halaman web menjadi beberapa kolom sudah hampir tidak digunakan semenjak adanya teknik CSS dan PHP. Tetapi jika kita ingin sekedar mengetahui fungsi frame tersebut atau bahkan ingin mempelajarinya lebih lanjut maka dapat membaca tutorial atau catatan si Boy….o ini hehehe….. dengan adanya frame, memungkinkan kita untuk mempunyai sebuah menu dan content dalam satu halaman atau dengan kata lain dapat menampilkan beberapa file HTML dalam satu halaman. Untuk dapat menampilkan beberapa file HTML kita memerlukan tag <frame> dan diletakkan diantara tag pembuka <frameset> dan tag penutup </frameset>. Berikut adalah contoh penggunaannya (terlebih dahulu kita buat beberapa file yaitu: header.html, menu.html, content.html dan index.html):
File pertama: header.html
<html>
<head><title>Ini adalah file header halaman web</title></head>
<body>
<H1>HEADER HALAMAN WEB ebook link knowledge</H1>
</body>
</html>
File kedua: menu.html
<html>
<head><title>Ini adalah file menu halaman web</title></head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>
File Ketiga: content.html
<html>
<head><title>Ini adalah file content halaman web</title></head>
<body>
<p> Paragraph pertama adalah isi yang pertama dalam halaman content.html</p>
<p> Paragraph kedua adalah isi ynag kedua dalam halaman content.html</p>
</body>
</html>
File Kempat: index.html
<html>
<head><title>Ini adalah halaman utama</title></head>
<frameset rows="20%, *">
<frame src="header.html">
<frameset cols="10%, *">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
Untuk mengetahui cara kerja aplikasi yang telah kita buat, maka Anda dapat melakukan copy & paste lalu simpan keempat folder tersebut diatas dalam satu buah folder. Jangan lupa memberi nama fie HTML sesuai dengan nama diatas.
OK selesai dech latihan kita tapi belum selesai!!!!!! maksudnya hirup udara dulu atau minum kopi dulu WKWKWKWKWKW @#$@%!$
Catatan: File yang telah kita buat diatas masih belum bisa
memanggil sebuah link dokumen karena belum kita kasih fasilitasnya.
Beberapa attribut yang dapat digunakan untuk memanipulasi tag frame:
Rows : digunakan untuk menentukan tinggi baris yang akan membagi halaman, pada contoh diatas kita bagi halaman menjadi dua buah yaitu baris pertama sebesar 20% berisi header.html dan baris kedua sebesar 80% berisi file menu.html dan content.html. Nilai “*” pada bagian <frameset rows=”20% *”> adalah nilai total lebar halaman (100%) dikurangi lebar halaman yang telah ditentukan (20%). Jika kita memberi nilai rows adalah dalam satuan persen berarti kita mengacu pada ukuran monitor komputer yang kita gunakan tetapi jika kita menginginkan lebar atau tinggi sesuai dengan ukuran yang diinginkan maka kita pakai dalam satuan pixel.
Cols : digunakan untuk menentukan lebar kolom yang akan membagi halaman web kita . Penentuan nilai lebar kolom sama seperti pada saat kita menggunakan attribut rows di atas. pada contoh diatas yaitu file keempat index.html kolom kita bagi menjadi dua yaitu kolom pertama selebar 10% diisi dengan file kedua menu.html dan kolom kedua selebar 90% dengan file ketiga content.html.
Src : digunakan untuk menentukan sumber file yang akan ditampilkan di dalam frame
OK selesai dech latihan kita tapi belum selesai!!!!!! maksudnya hirup udara dulu atau minum kopi dulu WKWKWKWKWKW @#$@%!$
Catatan: File yang telah kita buat diatas masih belum bisa
memanggil sebuah link dokumen karena belum kita kasih fasilitasnya.
Beberapa attribut yang dapat digunakan untuk memanipulasi tag frame:
Rows : digunakan untuk menentukan tinggi baris yang akan membagi halaman, pada contoh diatas kita bagi halaman menjadi dua buah yaitu baris pertama sebesar 20% berisi header.html dan baris kedua sebesar 80% berisi file menu.html dan content.html. Nilai “*” pada bagian <frameset rows=”20% *”> adalah nilai total lebar halaman (100%) dikurangi lebar halaman yang telah ditentukan (20%). Jika kita memberi nilai rows adalah dalam satuan persen berarti kita mengacu pada ukuran monitor komputer yang kita gunakan tetapi jika kita menginginkan lebar atau tinggi sesuai dengan ukuran yang diinginkan maka kita pakai dalam satuan pixel.
Cols : digunakan untuk menentukan lebar kolom yang akan membagi halaman web kita . Penentuan nilai lebar kolom sama seperti pada saat kita menggunakan attribut rows di atas. pada contoh diatas yaitu file keempat index.html kolom kita bagi menjadi dua yaitu kolom pertama selebar 10% diisi dengan file kedua menu.html dan kolom kedua selebar 90% dengan file ketiga content.html.
Src : digunakan untuk menentukan sumber file yang akan ditampilkan di dalam frame
Frameborder dan framespacing : kita dapat menggunakan attribut ini untuk menghilangkan border frame yang berwarna abu-abu sehingga di dapatkan sebuah layout yang lebih cantik. Coba kita rubah kode HTML file index.html diatas menjadi
<html>
<head><title>Ini adalah halaman utama</title></head>
<frameset frameborder="0" framespacing="0" rows="20%, *">
<frame src="header.html">
<frameset frameborder="0" framespacing="0" cols="10%, *">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
Coba liat perubahan yang terjadi……..!!!!!!!
Catatan: frameborder dan framespacing mempunyai fungsi yang sama tetapi karena tidak semua browser mendukung fungsi tag ini maka kita tulis keduanya.
Noresize dan scrolling: jika kita menginginkan agar frame kita dapat discroll atau digulung dan diubah ukurannya maka kita pakai scrolling dan noresize.
Scrolling: mempunyai nilai yes atau no, menyatakan ada tidaknya scroll di dalam frame. Kalau header ya jangan dikasih fasilitas scroll ntar berabe……
Noresize: tidak mengijinkan frame dirubah ukurannya oleh pengunjung.
Catatan: frameborder dan framespacing mempunyai fungsi yang sama tetapi karena tidak semua browser mendukung fungsi tag ini maka kita tulis keduanya.
Noresize dan scrolling: jika kita menginginkan agar frame kita dapat discroll atau digulung dan diubah ukurannya maka kita pakai scrolling dan noresize.
Scrolling: mempunyai nilai yes atau no, menyatakan ada tidaknya scroll di dalam frame. Kalau header ya jangan dikasih fasilitas scroll ntar berabe……
Noresize: tidak mengijinkan frame dirubah ukurannya oleh pengunjung.
<html>
<head><title>Ini adalah halaman utama</title></head>
<frameset frameborder="2" framespacing="2" rows="20%, *">
<frame src="header.html" scrolling="no">
<frameset frameborder="2" framespacing="2" cols="10%, *">
<frame src="menu.html" scrolling="auto" noresize>
<frame src="content.html" scrolling="yes" noresize>
</frameset>
</html>
Coba liat perubahan atau perbedaan yang terjadi, jika gak ada mungkin bisa dicari penyebabnya bersama-sama……heheheheh lagi ngetes pengunjung ya????
Kita sudah punya catatan nich bahwa aplikasi yang telah dibuat belum bisa menampilkan dokumen link jadi gimana ya? ya kita buat lah biar bisa lebih ciamik lagi yaitu mampu menampilkan menu-menu yang ada di file menu.html kedalam content.html. Tapi bagaimana caranya bro??? OK, kita ikuti aja cara selanjutnya. heheheheh
Cara kita untuk membuat sebuah menu yaitu dengan cara memberi nama tag masing-masing frame dan base target kedalam file menu.html. lebih jelasnya kita buat dua buah file lagi dan diberi nama about.html dan contact.html.
Kita sudah punya catatan nich bahwa aplikasi yang telah dibuat belum bisa menampilkan dokumen link jadi gimana ya? ya kita buat lah biar bisa lebih ciamik lagi yaitu mampu menampilkan menu-menu yang ada di file menu.html kedalam content.html. Tapi bagaimana caranya bro??? OK, kita ikuti aja cara selanjutnya. heheheheh
Cara kita untuk membuat sebuah menu yaitu dengan cara memberi nama tag masing-masing frame dan base target kedalam file menu.html. lebih jelasnya kita buat dua buah file lagi dan diberi nama about.html dan contact.html.
about.html
<html>
<head><title>Ini adalah halaman About</title></head>
<body>
<p>ebook link kowledge merupakan halaman web yang berisi tentang
tutorial HTML, CSS, Javascript, PHP. Dan siapa saja boleh
menggunakan content yang ada di dalamnya untuk keperluan apapun</p>
</body>
</html>
contact.html
<html>
<head><title>Ini adalah halaman Contact</title></head>
<body>
<p>Anda dapat menghubungi kami melalui email:bagongw@rocketmail.com</p>
</body>
</html>
Simpan kedua file tersebut diatas about.html dan contact.html di folder tempat kita menyimpan keempat file sebelumnya ya .
File index.html kita rubah sedikit kodenya yaitu dengan memberi nama masing-masing tag framenya dan simpan kembali.
File index.html kita rubah sedikit kodenya yaitu dengan memberi nama masing-masing tag framenya dan simpan kembali.
<html>
<head><title>Ini adalah halaman utama</title></head>
<frameset rows="20%, *">
<frame name="header" src="header.html">
<frameset cols="10%, *">
<frame name="menu" src="menu.html">
<frame name="content" src="content.html">
</frameset>
</html>
Untuk file menu.html kita tambahkan base target dan sumber dokumen pada linknya dan simpan kembali.
<html>
<head>
<title>Ini adalah file menu halaman web</title>
<base target="content">
</head>
<body>
<ul>
<li><a href="content.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</body>
</html>
Sekarang Kita sudah bisa menikmati menu Home, About Us dan Contact Us di menu.html. Sekarang bobok dulu ah……k
Info: Semua file tersebut diatas telah berhasil dijalankan menggunakan browser FireFox, IE dan Opera.
