Frameset adalah salah satu cara untuk membagi-bagi halaman ke dalam beberapa bagian. Pekerjaan merancang halaman dengan memanfaatkan frameset menjadi pekerjaan yang mudah. Bagian-bagian utama pada website dapat dikelompokkan ke dalam frame, sedangkan bagian contentnya tetap berada di frame yang akan selalu berubah. Dengan demikian, kita dapat menentukan bagian mana yang akan menjadi kepala halaman (header), menu, kaki, content, dan bagian lain yang dianggap perlu.
Frameset berbeda dengan halaman HTML biasa, di dalam halaman frameset hanya terdapat pengaturan mengenai bagaimana sebuah halaman ditata (layout halaman). Pada halaman frameset ini, dapat ditampilkan beberapa halaman HTML sekaligus pada jendela web browser yang sama. Halaman-halaman HTML yang ditampilkan dalam frameset tersebut menempati bagiannya masing-masing, dan setiap frame dalam frameset tidak saling berkaitan satu dengan lainnya. Pada halaman yang panjang, scrolling hanya berlaku pada frame itu saja – biasanya scrolling hanya diberlakukan pada frame content saja.
Dengan adanya frameset, pengelolaan halaman menjadi mudah, namun jumlah file yang harus dikelola menjadi bertambah. Hal ini menjadi menyulitkan bagi yang belum terbiasa, mengingat perancang harus bekerja dengan beberapa dokumen HTML sekaligus.
Pembuatan halaman frameset menggunakan dua tag HTML, yaitu Tag <frameset> dan Tag <frame>, penjelasannya adalah sebagai berikut:
Tag Frameset
Tag <frameset> digunakan untuk mendefinisikan bagaimana jendela web browser akan dibagi menjadi frame-frame yang lebih kecil. Tag <frameset> ini dituliskan untuk membagi-bagi halaman ke dalam format baris dan kolom yang akan diisi dengan frame. Nilai baris atau kolom menentukan jumlah area layar yang akan digunakan oleh setiap baris atau kolom. Pada frame-frame tersebut ditempatkan halaman-halaman HTML. Satu halaman HTML akan menempati satu frame.
Tag <frameset cols> berikut akan membagi layar menjadi tiga bagian kolom masing-masing lebarnya sebesar 25%, 50%, dan 25% dari lebar keseluruhan area layar.
| <frameset cols=”25%,50%,25%”> |
| frame 1 – 25% | frame 2 – 50% | frame 3 – 25% |
| <frameset rows=”25%,50%,25%”> |
| frame 1 – 25% |
| frame 2 – 50% |
| frame 3 – 25% |
| <frameset rows=”100,*”> |
| frame 1 – 100 px |
| frame 2 – fleksibel |
| <frameset cols=”100,*”> |
| frame 1 100 px | frame 2 fleksibel |
Tag Frame
Tag <frame> dituliskan untuk menempatkan dokumen HTML yang akan disertakan pada frame.
Pada contoh berikut, frameset membagi halaman menjadi dua kolom, masing-masing lebar kolom adalah 25% dan 75% dari lebar area layar. Dokumen HTML dengan nama “frame_1.html” ditempatkan pada kolom pertama, dan dokumen HTML kedua bernama “frame_2.html” disertakan pada kolom kedua.
| <frameset cols=”25%,75%”> <frame src=”frame_1.html”> <frame src=”frame_2.html”> </frameset> |
Nah, sekarang kita coba membuat sebuah halaman website dengan frameset. Jalankan aplikasi Notepad. Klik Start > Programs > Accessories > Notepad. Kemudian ketik baris perintah berikut ini :
| <html> <frameset cols=”20%,60%,20%”><frame src=”frame_1.html”> <frame src=”frame_2.html”> <frame src=”frame_3.html”></frameset> </html> |
Jalankan aplikasi Explorer, klik My Documents, cari file “frameset-01.html” yang baru dibuat tadi, kemudian klik ganda file tersebut.
Jendela Internet Browser akan terbuka, memperlihatkan isi halaman frameset-01.html.
| <– 20% –> | <———– 60% ———–> | <– 20% –> |
Contoh latihan di atas memperlihatkan bagaimana cara membuat frame dengan tiga kolom vertikal masing-masing selebar 20%, 60%, dan 20% dari lebar area layar. Frame pertama berisi “frame_1.html”, frame kedua berisi “frame_2.html”, dan frame ketiga berisi “frame_3.html”.Frameset dengan menggunakan nilai persen tidak memiliki ukuran piksel yang pasti, lebar frameset ini akan mengikuti lebar layar dan dihitung sebagai persentase dari lebar layar.
Frameset Horizontal
Sekarang kita coba lagi membuat sebuah halaman website dengan frameset horizontal. Jalankan aplikasi Notepad. Klik Start > Programs > Accessories > Notepad.
Kemudian ketik baris perintah berikut ini :
| <html> <frameset rows=”200, *, 100″><frame src=”frame_1.html”> <frame src=”frame_2.html”> <frame src=”frame_3.html”></frameset> </html> |
Jalankan aplikasi Explorer, klik My Documents, cari file “frameset-02.html” yang baru dibuat tadi, kemudian klik ganda file tersebut.
Jendela Internet Browser akan terbuka, memperlihatkan isi halaman frameset-02.html.
| | 200 pixel | |
| | | | | * pixel (sisa dari tinggi layar) | | | | |
| 100 pixel |
Contoh latihan di atas memperlihatkan bagaimana cara membuat frameset dengan tiga baris horizontal masing-masing tingginya sebesar 200 pixel, * pixel (sisa tinggi dari tinggi layar), dan 100 pixel. Frame pertama berisi “frame_1.html”, frame kedua berisi “frame_2.html”, dan frame ketiga berisi “frame_3.html”.
Perhatikan bahwa frameset ini menggunakan frame yang tetap (frame 1 = 200pixel, frame 3 = 100 pixel) dan frame yang fleksibel ditandai dengan tanda asterik (*). Frame yang tetap akan memiliki ukuran yang pasti dalam hitungan piksel, tapi frame yang fleksibel memiliki ukuran sebagai sisa dari ukuran layar dikurangi oleh ukuran frame-frame tetap.
Tag Noframes
Selain Tag Frameset dan Tag Frame, di dalam halaman frameset juga harus ada Tag Noframes. Format penulisannya adalah sebagai berikut:
Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :
| <html><frameset cols=”20%,60%,20%”> <frame src=”frame_1.html”> <frame src=”frame_2.html”> <frame src=”frame_3.html”> <noframes> <body>Web browser tidak mendukung frame!</body> </noframes> </frameset> </html> |
Jalankan aplikasi Explorer, cari file “frameset-03.html” yang baru dibuat tadi di My Documents, kemudian klik ganda untuk membuka file tersebut. Jendela Internet Browser akan segera terbuka mempelihatkan isi file html tersebut.
Penjelasan
Contoh latihan di atas memperlihatkan bagaimana tag <noframes> dibuat. Tag noframes ini akan bekerja dan menampilkan isi tag <body> jika internet browser yang digunakan tidak mendukung frameset.
Frameset Kombinasi
Layout halaman HTML dapat dibuat sederhana dengan membaginya menjadi beberapa baris (rows). Kemudian, pada salah satu rows, kita dapat membaginya menjadi beberapa kolom. Hal ini sering dilakukan untuk mendapatkan layout halaman HTML yang optimal.
Sekarang kita coba untuk membuat layout halaman kombinasi tersebut. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :
<html>
<frameset rows="150,*">
<frame src="frame_1.html">
<frameset cols="20%,80%">
<frame src="frame_2.html">
<frame src="frame_3.html">
</frameset>
</frameset>
</html> |
Jalankan aplikasi Explorer, cari file “frameset-04.html” yang baru dibuat tadi di My Documents, kemudian klik ganda untuk membuka file tersebut. Jendela Internet Browser akan segera terbuka mempelihatkan isi file html tersebut.
| | 150pixel| | |
| <– 20% –> | < ——————- 80% ——————–> |
Contoh latihan di atas memperlihatkan cara membuat frameset kombinasi. Tag <frameset> yang pertama akan membagi layar menjadi dua frame horizontal, frame pertama di bagian atas tingginya 150 pixel dan frame kedua di bagian bawah tingginya adalah sisa pixel dari tinggi area layar. Kemudian tag <frameset> kedua akan membagi frame kedua (frame yang berada di bawah) menjadi dua frame vertikal, masing-masing sebesar 20% dan 80% dari lebar area layar.
Frameset dengan Scrolling dan Noresize
Layout halaman HTML ditampilkan oleh Browser sesuai dengan ukuran yang dituliskan. Jika isi frameset tersebut, yang disimpan dalam file HTML lebih besar ukurannya daripada ukuran frame yang disediakan, maka secara otomatis browser akan menampilkan scroll bar.
Sekarang kita coba untuk membuat layout halaman dengan scrolling dan tanpa scrolling. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :
| <html><frameset rows=”150,*”> <frame scrolling=”No” src=”frame_1.html”> <frameset cols=”25%,75%”> <frame scroling=”No” noresize=”noresize” src=”frame_2.html”> <frame noresize=”noresize” src=”frame_3.html”> </frameset> </frameset> </html> |
Jalankan aplikasi Explorer, cari file “frameset-05.html” yang baru dibuat tadi di My Documents, kemudian klik ganda untuk membuka file tersebut. Jendela Internet Browser akan segera terbuka mempelihatkan isi file html tersebut.
Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana atribut NORESIZE menyebabkan batas pinggiran antar frame tidak dapat digeser.
Frame Navigasi
Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
Ketik baris perintah berikut ini :
| <html><body> <a href=”frame_1.html” target=”showframe”>Frame 1</a><br> <a href=”frame_2.html” target=”showframe”>Frame 2</a><br> <a href=”frame_3.html” target=”showframe”>Frame 3</a> </body> </html> |
Ketik baris perintah berikut ini :
| <html><frameset cols=”120,*”> <frame src=”frame-6a.html”> <frame src=”frame_1.html” name=”showframe”> </frameset> </html> |
Jalankan aplikasi Explorer, cari file “frameset-06.html” yang baru dibuat tadi di My Documents, kemudian klik ganda untuk membuka file tersebut. Jendela Internet Browser akan segera terbuka mempelihatkan isi file html tersebut.
| Frame 1Frame 2 Frame 3 | <showframe> |
Contoh latihan di atas memperlihatkan penggunaan frame untuk memudahkan navigasi sebuah halaman Web. Untuk itu diperlukan sebuah dokumen HTML berisi link yang berfungsi sebagai navigasi pada satu frame, dan frame lainnya akan digunakan sebagai target dokumen yang ditunjukkan pada link-link tersebut.
Pada contoh di atas, file frame-6a.html berisi tiga buah link yang bila diklik akan dibuka pada frame bernama “showframe”, hal ini dapat dilihat dari penggunaan atribut TARGET=SHOWFRAME. Sedangkan file frameset-06.html berisi <frameset> yang membagi layar menjadi dua bagian, dan salah satu framenya diberi atribut NAME=SHOWFRAME. Pada frame inilah link-link dokumen yang ada pada file frame-6a.html akan terbuka.
Catatan: Pada contoh di atas, Anda diminta untuk menyiapkan halaman-halaman HTML sebagai frameset. Untuk itu, Anda dapat menyiapkan file-file: frameset-01.html, frameset-02.html, frameset-03.html, frameset-04.html, frameset-05.html, frameset-06.html seperti yang diminta.
Sebagaimana telah diuraikan di atas, frameset dipergunakan untuk layout halaman saja. File yang mengisi masing-masing bagian pada frameset diletakkan pada file yang terpisah. Dalam hal ini ada beberapa file lain yang perlu disiapkan, yaitu : frame_1.html, frame_2.html, frame_3.html.
Sebagai contoh, Anda dapat menyiapkan frame_1.html dalam bentuk yang sederhana, misalnya sebagai berikut :
<html> <head> <title>Frame 1 - Header</title> </head> <body bgcolor="#3399FF"> <div align="center">FRAME 1 - HEADER</div> </body> </html> |
<html> <head> <title>Frame 2</title> </head> <body bgcolor="#009966"> <div align="center">FRAME 2</div> </body> </html> |
<html> <head> <title>Frame 3</title> </head> <body bgcolor="#FFFFCC"> <div align="center">FRAME 3</div> </body> </html> |
Dengan demikian, maka file frameset akan menyertakan file frame_1.html, frame_2.html, frame_3.html ke dalam frame yang dibentuknya.
Tidak ada komentar:
Posting Komentar