Membuat Website Itu Mudah (Bagian X – Frameset)

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%”>

Layout halaman frameset di atas akan tampak seperti di bawah ini:

frame 1 – 25% frame 2 – 50% frame 3 – 25%

Tag <frameset rows> berikut akan membagi layar menjadi tiga bagian baris masing-masing tingginya sebesar 25%, 50%, dan 25% dari tinggi keseluruhan area layar.

<frameset rows=”25%,50%,25%”>

Layout halaman frameset di atas akan tampak seperti di bawah ini :

frame 1 – 25%
frame 2 – 50%
frame 3 – 25%

Pembagian frame bisa dengan ukuran persentase (relatif) seperti contoh di atas, atau dengan ukuran pixel (absolut). Namun dengan pixel tidak dapat ditentukan ukuran seluruh frame, karena ukuran layar monitor yang digunakan juga belum tentu sama. Untuk itu digunakan tanda “*” untuk pengganti ukuran yang tidak tentu tadi. Contoh berikut akan membagi layar menjadi dua bagian baris masing-masing sebesar 100 pixel dan sisa pixel dari tinggi area layar.

<frameset rows=”100,*”>

Layout halaman frameset di atas akan tampak seperti di bawah ini :

frame 1 – 100 px
frame 2 – fleksibel

Sedangkan contoh ini akan membagi layar menjadi dua bagian kolom masing-masing sebesar 100 pixel dan sisa pixel dari lebar area layar.

<frameset cols=”100,*”>

Layout halaman frameset di atas akan tampak seperti di bawah ini :

frame 1
100 px
frame 2
fleksibel

Tag <frameset> tidak membutuhkan adanya tag <body> kecuali bila web browser yang digunakan tidak mendukung tag <frameset> tersebut.

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>

Frameset Vertikal

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>

Simpan file di My Documents sebagai “frameset-01.html” dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Documents, kemudian pada bagian Save as type pilih All Files, lalu ketik “frameset-01.html” pada bagian File name, klik tombol Save.

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% –>

Penjelasan

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>

Simpan file di My Documents sebagai “frameset-02.html” dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Documents, kemudian pada bagian Save as type pilih All Files, lalu ketik “frameset-02.html” pada bagian File name, klik tombol Save.

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

Penjelasan

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>

Simpan file sebagai “frameset-03.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>

Simpan file sebagai “frameset-04.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% ——————–>

Penjelasan

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>

Simpan file sebagai “frameset-05.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>

Simpan file sebagai “frame-6a.html”

Ketik baris perintah berikut ini :

<html><frameset cols=”120,*”>

<frame src=”frame-6a.html”>

<frame src=”frame_1.html” name=”showframe”>

</frameset>

</html>

Simpan file sebagai “frameset-06.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>

Penjelasan

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>

Siapkan juga file frame_2.html, misalnya sebagai berikut :

<html>
 <head>
  <title>Frame 2</title>
 </head>
 <body bgcolor="#009966">
  <div align="center">FRAME 2</div>
 </body>
</html>

Dan file frame_3.html, misalnya sebagai berikut :

<html>
 <head>
  <title>Frame 3</title>
 </head>
 <body bgcolor="#FFFFCC">
  <div align="center">FRAME 3</div>
 </body>
</html>

Simpan ketiga file tambahan ini pada folder yang sama dengan file-file frameset (frameset-01.html, frameset-02.html, frameset-03.html, frameset-04.html, frameset-05.html, frameset-06.html). Tentu saja dengan format .html seperti biasa.

Dengan demikian, maka file frameset akan menyertakan file frame_1.html, frame_2.html, frame_3.html ke dalam frame yang dibentuknya.

Kita lanjutkan di topik bahasan selanjutnya.■

Advertisements

3 Responses

  1. Terimakasih atas artikelnya yang sangat bermanfaat. Saya telah mempraktekkan artikel Anda mengenai Membuat Website Itu Mudah. Tapi ketika sampai pada bagian ke X, kok tidak dapat ditampilkan. Ketika kode html yang ada di artikel Anda kami copy ke notepad dan kami simpan dalam bentuk html, tapi juga tidak berhasil membuat frameset.

  2. Fani, terimakasih atas feedback-nya.
    Dalam tutorial ini dibutuhkan beberapa file HTML, yakni file frameset-nya sendiri, dan file-file lain yang menjadi isi dari frameset tersebut.
    Untuk itu, saya sudah menyiapkan catatan tambahan di bagian bawah tutorial.
    Mudah-mudahan bisa dipahami.

  3. Terima kasih banyak mas atas ilmunya. Ini saya lagi belajar banyak tentang desain web..Hehehehe tidak heran blog saya tampilannya seadanya.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: