Belajar Web

Membuat Website Itu Mudah (Bagian X Frameset)
Posted on Desember 24, 2008 by Tomy Hendarman

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,*>
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,*>
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>
</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_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_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%>
<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.
<html>
<frameset rows="150,*">

<frame src="frame_1.html">
<frameset cols="20%,80%">


</frameset>

</frameset>
</html>
|
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.
<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>
Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana atribut NORESIZE menyebabkan batas
pinggiran antar frame tidak dapat digeser.
Frame Navigasi
<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
<html><frameset cols=120,*>
<frame src=frame-6a.html>
<frame src=frame_1.html name=showframe>
</frameset>
</html>
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.

Belajar Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Belajar Web

Uploaded by

Copyright:

Available Formats

Membuat Website Itu Mudah (Bagian X Frameset)

Posted on Desember 24, 2008 by Tomy Hendarman

You might also like