TUTORIAL HTML 7
Sitenblog 10:29 PM
Apa ya frame itu ? Jangan bayangin kayak piguranya foto ya.:) Gampangnya gini. Hompej yang menggunakan frame itu membagi halaman situs menjadi beberapa bagian, dan tiap bagian menampilkan file yang berbeda. Lihat contoh layout berikut ini:
Lihat layout di atas. Dalam satu layar monitor sebenarnya kita menampilkan tiga buah file yang berbeda, yaitu file judul.html, file menu.html dan file isi.html. Agak mirip dengan waktu pembahasan tabel (membuat layout halaman web), bedanya kalau tabel hanya menampilkan satu file sedangkan ini tiga file. Tentu ada keuntungan tersendiri dong. Tapi sebelum saya bercerita lebih lanjut, kita coba dulu membuat frame, ikuti langkah-langkah berikut:
Salin kode HTML berikut kemudian simpan dengan nama "judul.html". Saya sarankan gunakan notepad.
<HTML>
<HEAD></HEAD>
<BODY BGCOLOR="red">
<FONT SIZE=7 COLOR="blue"><CENTER><B>COOL HOMEPAGE</B></CENTER></FONT>
</BODY></HTML>
Berikutnya salin juga kode HTML berikut dan simpan dengan nama "menu.html". Jangan lupa untuk menyimpan semua file di folder yang sama.
<HTML>
<HEAD></HEAD>
<BODY BGCOLOR="yellow">
<FONT SIZE=2 COLOR="red">
Menu:<BR>
Di sini<BR>
Di sana<BR>
Di atas
</FONT>
</BODY></HTML>
Persiapan terakhir, salin tulisan ini (saran saya gunakan copy-paste, ee bukannya dari tadi ngomongnya, ngobrol dong) dan simpan dengan nama "isi.html".
<HTML>
<HEAD></HEAD>
<BODY BGCOLOR="blue">
<FONT SIZE=3 COLOR="yellow">
Ini adalah isi homepage saya. Keren kan. ;)
</FONT>
</BODY></HTML>
Fiuh ... sekarang kita mulai membuat hompej dengan frame.
Tag yang diperlukan untuk bikin frame nggak banyak kok, cuman dua, yaitu <FRAMESET> dan <FRAME>. Terus setelah punya tiga file tadi, kita perlu bikin file induk yang nanti kita namakan ... mmm ... induk.html aja, okey ?!? Isi file induk itu kira-kira begini:
<HTML>
<HEAD>
<TITLE>Pertama kali bikin frame</TITLE>
</HEAD>
<FRAMESET>
.....
</FRAMESET>
</HTML>
Di antara tag <FRAMESET> dan </FRAMESET> nantinya akan kita isi tag <FRAME>. Perhatikan juga tidak ada tag <BODY> karena file induk memang tidak memerlukannya. Sekarang kita perdetil file induk kita. Kita akan membuat layout file kita berbentuk seperti di atas, sebuah judul, kemudian menu di samping, dan di kanannya merupakan isi. Berarti dari layout tersebut kita memerlukan dua buah baris (anda masih ingat definisi baris dan kolom bukan, seperti yang kita bicarakan saat tutorial membuat tabel), dan pada baris yang bawah kita bagi menjadi dua buah kolom. Berarti yang kita perlukan adalah seperti ini.
Mmm pelan-pelan, pertama saya akan membagi dulu menjadi dua baris, baris atas sebesar (tepatnya setinggi) 20% dan baris bawah 80%. Kodenya adalah seperti ini.
<HTML>
<HEAD>
<TITLE>Pertama kali bikin frame</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
..... isi
</FRAMESET>
</HTML>
Bisa ngikutin kan ? Perhatikan di mana saya meletakkan tanda petik, ROWS="20%,80%". Sekarang baris yang bawah kita bagi menjadi dua kolom, kiri dan kanan. Kolom kiri selebar 25% dan kolom kanan selebar 75%. Kodenya adalah seperti ini.
<HTML>
<HEAD>
<TITLE>Pertama kali bikin frame</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
..... isi baris pertama, tidak perlu dibagi
<FRAMESET COLS="25%,75%">
.... isi baris kedua, setelah dibagi dua kolom
</FRAMESET>
</FRAMESET>
</HTML>
Nah kita sudah membagi layoutnya. Kini kita tentukan isinya dengan menggunakan tag <FRAME>. Untuk baris yang atas kita memanggil file judul.html, dan untuk baris bawah kita memanggil file menu.html dan isi.html. Perhatikan kode berikut (catatan untuk FRAME anda tidak perlu menutup dengan tag </FRAME>):
<HTML>
<HEAD>
<TITLE>Pertama kali bikin frame</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
<FRAME SRC="judul.html">
<FRAMESET COLS="25%,75%">
<FRAME SRC="menu.html">
<FRAME SRC="isi.html">
</FRAMESET>
</FRAMESET>
</HTML>
Selamat. Selesailah frame pertama anda. Simpan kode di atas dengan nama induk.html (bebas sih namanya), kemudian panggil dengan browser favorit anda. Hasilnya harus seperti ini. :p
Secara garis besar anda telah memahami cara membuat frame. Namun kini kita akan memperhatikan atribut-atributnya secara lebih detil sehingga anda akan dapat mengatur frame anda dengan lebih fleksibel. Kita mulai dengan tag <FRAMESET>. Tag ini memiliki beberapa atribut, seperti bentuk di bawah:
<FRAMESET COLS="..." ROWS="..." BORDER="..." BORDERCOLOR="..." FRAMEBORDER="YES"> ... </FRAMESET>
Baik, saya bahas satu-persatu.
Anda kelihatannya sudah faham atribut COLS dan ROWS karena tadi telah kita gunakan. Namun lebih baik tetap saya jelaskan. Atribut COLS akan membagi bidang menjadi beberapa kolom. Anda dapat menulis COLS="30%,70%" untuk membagi bidang menjadi dua kolom berukuran (urut dari kiri) 30% dan 70%. Juga anda dapat menulis COLS="20%,20%,60%" untuk membagi bidang menjadi tiga kolom, dst. Anda juga dapat membaginya bukan dalam persen, seperti COLS="250,450" yang membagi bidang menjadi dua kolom berukuran 250 pixel dan 450 pixel. Atau bahkan anda dapat membagi menjadi COLS="200,300,*" yang artinya anda membagi menjadi 3 kolom berukuran 200 pixel, 300 pixel dan sisanya. :) Ini akan bermanfaat jika anda tidak yakin lebar halaman seluruhnya, sehingga ukuran frame anda tidak kurang atau berlebihan. Yang lebih asyik, anda dapat membagi menjadi seperti ini COLS="200,*,2*" yang berarti kolom ketiga berukuran dua kali lipat kolom kedua. (Catatan: hati-hati saat membagi bidang dalam %, karena ukuran layar yang anda gunakan bisa jadi berbeda dengan pemakai lainnya. Dalam persen, ukuran frame anda akan mengikuti besar layar. Ukuran layar monitor yang umum adalah 640x480, 800x600 dan 1024x768)
Seperti halnya COLS, atribut ROWS juga berfungsi membagi bidang. Bedanya ROWS membagi menjadi beberapa baris, bukan kolom. Aturannya persis sama, bisa dalam persen maupun dalam pixel.
Atribut berikutnya adalah BORDER yang menentukan tebal batas antar frame. Anda dapat menset BORDER="0" (sama dengan tanpa border), BORDER="2" (ada batas tipis) atau BORDER="10" (memakai batas tebal). Anda dapat melihat contoh file yang tadi dengan border="2" dan dengan border="10". Rasakan bedanya.
O, ya kodenya menjadi seperti ini.
<HTML>
<HEAD>
<TITLE>Pertama kali bikin frame</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%" BORDER="10">
<FRAME SRC="judul.html">
<FRAMESET COLS="25%,75%">
<FRAME SRC="menu.html">
<FRAME SRC="isi.html">
</FRAMESET>
</FRAMESET>
</HTML>
Kemudian atribut BORDERCOLOR berguna untuk menentukan warna pembatas antar frame. Anda dapat mengeset dengan menggunakan istilah seperti BORDERCOLOR="red" ataupun menggunakan kode warna yang telah kita pelajari, seperti BORDERCOLOR=#00CCFF. Ini contoh file tadi dengan border="10" dan BORDERCOLOR="green", silakan klik.
Kalau file di atas, kodenya seperti ini:
<HTML>
<HEAD>
<TITLE>Pertama kali bikin frame</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%" BORDER="10" BORDERCOLOR="green">
<FRAME SRC="judul.html">
<FRAMESET COLS="25%,75%">
<FRAME SRC="menu.html">
<FRAME SRC="isi.html">
</FRAMESET>
</FRAMESET>
</HTML>
Terakhir adalah atribut FRAMEBORDER. Jika kita menggunakan FRAMEBORDER="YES" maka batas akan ditampilkan dalam bentuk 3 dimensi, dan jika menggunakan FRAMEBORDER="NO", batas akan ditampilkan dalam bentuk datar (tidak jelas terlihat).
Sekarang kita akan membicarakan mengenai atribut pada tag <FRAME>
Bentuk umumnya adalah sebagai berikut:
<FRAME BORDERCOLOR="..." FRAMEBORDER="YES" MARGINHEIGHT="..." MARGINWIDTH="..." NAME="..." NORESIZE SCROLLING="YES" SRC="...">
Atribut BORDERCOLOR dan FRAMEBORDER fungsinya persis seperti pada tag <FRAMESET>. Di sini warna yang didefinisikan oleh tag yang lebih dalam akan menang melawan warna yang didefinisikan oleh tag yang luar, juga ada tidaknya border akan ditentukan oleh tag yang lebih dalam (bingung kan, tapi saat mendapat masalah ini anda akan mengerti :)).
Kemudian MARGINHEIGHT berfungsi menentukan besar margin antara batas atas dan bawah frame, dengan isinya. Sedang MARGINWIDTH menentukan besar margin kiri dan kanan. Kedua atribut tersebut memiliki harga minimal 1. Karena adanya margin dan border, maka ukuran 'benda' (bisa gambar atau apapun) harus 8 pixel lebih kecil dari ukuran frame untuk memberikan tampilan yang diinginkan.
Setelah itu atribut NORESIZE berfungsi untuk membuat ukuran frame tidak dapat diubah. Coba anda buka file induk yang tadi (klik ini), kemudian geser-geser border yang ada. Anda dapat menggesernya bukan ? Dengan kata lain anda dapat mengubah ukuran frame karena tidak dituliskannya atribut NORESIZE ini pada file induk.html.
Berikutnya atribut SCROLLING yang berfungsi untuk menentukan ada tidaknya scrollbar. Hey anda tahu kan yang dimaksud dengan scrollbar ? Kalau anda ingin melihat bagian atas halaman tutorial ini, maka anda menggerakkan scrollbar ke atas. Ya, itu dia. Nah atribut SCROLLING="YES" akan menyebabkan selalu ada scrollbar pada frame, atribut SCROLLING="NO" menyebabkan tidak ada scrollbar dalam kondisi apapun dan atribut SCROLLING="AUTO" menyebabkan scrollbar akan muncul saat dibutuhkan, yaitu saat isi frame lebih besar daripada ukuran frame. Ngerti kan ? Ngerti lah yau, saya pusing nech neranginnya kalau belum ngerti. :)
Kemudian atribut SRC adalah atribut yang utama, yaitu memanggil file yang akan mengisi frame. Pada file induk.html, dengan atribut SRC kita telah memanggil file judul.html, menu.html dan file isi.html. SRC tidak selalu harus memanggil file html, kita juga dapat menuliskan SRC="tintin.gif" untuk menampilkan gambar di dalam frame misalnya. Anda dapat bereksperimen, terserah.
Terakhir - sengaja nech saya akhirkan - adalah atribut NAME. Atribut ini berfungsi memberi nama frame. Yup, itu saja. Sama seperti saat anda memberi nama pada hewan kesayangan anda. Untuk apa ? Tentu saja agar anda dapat memanggilnya bukan ?
Sekarang kita mulai permainan yang menarik. Sebelumnya, sebagai persiapan anda harus membuat sebuah file lagi, namakan file itu tambahan.html. Isi filenya adalah sebagai berikut:
<HTML>
<HEAD></HEAD>
<BODY BGCOLOR="green">
<FONT SIZE=5 COLOR="yellow">
<B>Ini isinya cuman tambahan kok.</B>
</FONT>
</BODY></HTML>
Nah kita sudah siap untuk memulai permainan ini.
Sekarang edit file menu.html anda menjadi seperti ini.
<HTML>
<HEAD></HEAD>
<BODY BGCOLOR="yellow">
Menu:<BR>
<A HREF="tambahan.html" target="kiri">Di sini</A><BR>
<A HREF="tambahan.html" target="kanan">Di sana</A><BR>
<A HREF="tambahan.html" target="atas">Di atas</A><BR>
<A HREF="http://www.geocities.com/rohim94" target="_blank">Link saya</A><BR>
<A HREF="http://snow.prohosting.com/nasyrul" target="_top">Link lain</A><BR>
<A HREF="http://www.geocities.com/smun14" target="_self">Link lain lagi</A><BR>
<A HREF="http://snow.prohosting.com/rohim" target="_parent">Link aneh</A>
</BODY></HTML>
Simpan dengan nama menu2.html. Anda lihat pada file menu2.html saya menambahkan beberapa link dan tag <A HREF .... TARGET=....>. Nanti akan saya terangkan manfaatnya di bawah.
Kemudian edit juga file induk.html anda menjadi seperti di bawah dan namakan dengan nama final.html. Perhatikan bahwa saya menambahkan atribut NAME pada tiap frame. Dan juga saya mengubah salah satu SRC, dari menu.html menjadi menu2.html
<HTML>
<HEAD>
<TITLE>Pertama kali bikin frame</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
<FRAME NAME="atas" SRC="judul.html">
<FRAMESET COLS="25%,75%">
<FRAME NAME="kiri" SRC="menu2.html">
<FRAME NAME="kanan" SRC="isi.html">
</FRAMESET>
</FRAMESET>
</HTML>
Mari saya cek, anda punya file judul.html, menu2.html dan isi.html. Anda juga punya file final.html. OK semuanya siap, buka file "final.html" dengan browser anda, dan klik link-link yang ada. Apa yang terjadi ? Lihat di sini.
Yup, dahulu saya pernah menjanjikan untuk menerangkan fungsi atribut TARGET pada tag <A HREF>. Kini akan saya terangkan. Kita dapat mengisi target dengan nama-nama frame sehingga saat mengklik, file baru akan terbuka di frame yang dituju. Di sini kita menamakan frame kita dengan "atas", "kiri" dan kanan". Kita juga dapat mengisi target dengan empat hal berikut:
• _blank, ini akan membuka window baru dan menampilkan alamat yang dipanggil di sana.
• _top, akan menampilkan alamat yang dipanggil di window yang sama - full satu window - tidak peduli sebelumnya ada frame atau tidak.
• _self, menampilkan alamat yang dipanggil di tempat yang sama. Kalau yang memanggil adalah sebuah frame, maka halaman yang dipanggil akan ditampilkan di frame itu.
• _parent, ini akan menampilkan alamat yang dipanggil di frameset satu tingkat lebih tinggi dari frame yang memanggil.
Jadi kalau anda bermain dengan frame, yang paling aman adalah menggunakan target="_top" yang berarti alamat yang dipanggil akan muncul lengkap mengisi satu window, full; atau sekalian memakai target="_blank" yang berarti alamat yang dipanggil akan muncul di window baru.
Terakhir, anda harus memperhatikan bahwa ada browser tertentu yang tidak mensupport frame. Artinya halaman situs anda tidak akan tampak, saat mereka panggil. Untuk mensiasatinya anda dapat menggunakan tag <NOFRAME>. Tempatkan tag ini di dalam tag <FRAMESET>. Jika browser tidak mensupport frame, maka tulisan yang ada di dalam tag NOFRAME lah yang akan ditampilkan. Perhatikan contoh berikut.
<HTML>
<HEAD>
<TITLE>Pertama kali bikin frame</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
<NOFRAME>
Tulisan yang berada di sini akan ditampilkan oleh browser yang tidak mensupport frame. Di sini anda dapat menulis apapun, termasuk menampilkan gambar dan link.
</NOFRAME>
<FRAME NAME="atas" SRC="judul.html">
<FRAMESET COLS="25%,75%">
<FRAME NAME="kiri" SRC="menu2.html">
<FRAME NAME="kanan" SRC="isi.html">
</FRAMESET>
</FRAMESET>
</HTML>
Akhirnya ... capekk. :( ... Ngantuk .. tapi seneng. :)
btw saya masih punya hutang satu tutorial HTML lagi untuk diselesaikan. Huahhh.
Oleh Abdur Rahim
Posted by ibnuradinas.blogspot.com
Posted by Abol Ezz
on 10:29 PM.
Filed under
