Scribd
Unggah
8 tayangan

Modul-13

Dokumen ini menjelaskan tentang penggunaan frame dalam desain web, termasuk cara membuat dan mengatur layout menggunakan tag <FRAMESET> dan <FRAME>. Penjelasan mencakup langkah-langkah pembuatan file HTML yang diperlukan serta atribut-atribut yang dapat digunakan untuk mengatur tampilan frame. Selain itu, dokumen juga membahas tentang penggunaan atribut TARGET untuk mengarahkan link ke frame tertentu dan cara menangani browser yang tidak mendukung frame.

Diunggah oleh

safapblaoli
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
8 tayangan

Modul-13

Dokumen ini menjelaskan tentang penggunaan frame dalam desain web, termasuk cara membuat dan mengatur layout menggunakan tag <FRAMESET> dan <FRAME>. Penjelasan mencakup langkah-langkah pembuatan file HTML yang diperlukan serta atribut-atribut yang dapat digunakan untuk mengatur tampilan frame. Selain itu, dokumen juga membahas tentang penggunaan atribut TARGET untuk mengarahkan link ke frame tertentu dan cara menangani browser yang tidak mendukung frame.

Diunggah oleh

safapblaoli
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 12

Internet dan Web Design

Modul -13
Frame
Apa ya frame itu ? Jangan bayangin kayak piguranya foto ya.. Hompege yang menggunakan frame itu
membagi halaman situs menjadi beberapa bagian, dan tiap bagian menampilkan file yang berbeda.
Lihat contoh layout berikut ini:

File: "judul.html"
File= "isi.html"
File=
"menu.html"

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.

Hasilnya seperti berikut:<<

Copy Right : Tonni Limbong, S.Kom 65


Internet dan Web Design

Berikutnya salin juga kode HTML berikut dan simpan dengan nama "menu.html". Jangan lupa untuk
menyimpan semua file di folder yang sama.

Hasilnya akan seperti ini:

Copy Right : Tonni Limbong, S.Kom 66


Internet dan Web Design

Persiapan terakhir, salin tulisan ini (saran saya gunakan copy-paste) dan simpan dengan nama
"isi.html".

Hasilnya seperti berikut ini:

Copy Right : Tonni Limbong, S.Kom 67


Internet dan Web Design

Sekarang kita mulai membuat hompege 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
induk.html.

Hasilnya sepert berikut:

Copy Right : Tonni Limbong, S.Kom 68


Internet dan Web Design

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.

Kita akan membagi dulu menjadi dua baris, baris atas sebesar (tepatnya setinggi) 20% dan baris
bawah 80%. Kodenya adalah seperti ini.

Copy Right : Tonni Limbong, S.Kom 69


Internet dan Web Design

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.

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>):

Hasilnya seperti berikut:

Copy Right : Tonni Limbong, S.Kom 70


Internet dan Web Design

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)

Copy Right : Tonni Limbong, S.Kom 71


Internet dan Web Design

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". 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">

Copy Right : Tonni Limbong, S.Kom 72


Internet dan Web Design

<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.

Copy Right : Tonni Limbong, S.Kom 73


Internet dan Web Design

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.

Copy Right : Tonni Limbong, S.Kom 74


Internet dan Web Design

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

Copy Right : Tonni Limbong, S.Kom 75


Internet dan Web Design

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>

Copy Right : Tonni Limbong, S.Kom 76

Anda mungkin juga menyukai