membuat frame

Pelajaran 1

Pertama-tama kita butuh beberapa dokumen html untuk tutorial ini. Buka Notepad dan copykan yang berikut ini agar anda bisa segera mulai.

<HTML> <HEAD> <TITLE>Frame HTML Saya</TITLE> </HEAD> <BODY>

</BODY> </HTML>

Setiap dokumen akan kita beri nama. Dalam tutorial Cara Mudah Membuat Tabel dan Cara Mudah Membuat Form kita sudah gunakan terlalu banyak nama pria. Rasanya kini saatnya menghadirkan beberapa gadis muda di sini.

<HTML> <HEAD> <TITLE>Frame HTML Saya</TITLE> </HEAD> <BODY> Lisa </BODY> </HTML>

Buat folder dengan nama frame dan simpan file tersebut dengan nama lisa.html.

Sekarang coba anda buat dokumen html yang lain.

<HTML> <HEAD> <TITLE>Frame HTML Saya</TITLE> </HEAD> <BODY> Putri </BODY> </HTML>

Simpan di folder tadi dengan nama putri.html.

Lakukan hal yang sama untuk Tessy, Tina, Sari, dan Ratna. Simpan semuanya di folder frame. Seharusnya anda sekarang mempunyai satu folder dengan 6 dokumen html yang berdiri sendiri-sendiri.

Ok, ini yang menarik... membuat master page anda. Mulai dengan ini.

<HTML> <HEAD> <TITLE>Frame HTML Saya- Master Page</TITLE> </HEAD>

<BODY> </BODY>

</HTML>

http://www.tutorial.or.id/form/index.html

http://www.tutorial.or.id/form/index.html

http://www.tutorial.or.id/tabel/index.html

Hapus tag <BODY>. Master page tidak menggunakannya...

<HTML> <HEAD> <TITLE>Frame HTML Saya- Master Page</TITLE> </HEAD> </HTML>

...yang dipakai adalah tag <FRAMESET>.

<HTML> <HEAD> <TITLE>Frame HTML Saya- Master Page</TITLE> </HEAD>

<FRAMESET> </FRAMESET>

</HTML>

Agar lebih bersih dan jelas, saya tidak akan tuliskan lagi tag <HTML>, <HEAD> dan <TITLE>. Ingat, anda harus tetap menuliskannya di dokumen anda.


Sekarang adalah waktu yang tepat untuk menyimpannya. Simpan di folder anda (bersama gadis-gadis tadi) dengan nama index.html. Jika anda coba buka file tersebut di browser anda sekarang, halaman ini masih kosong. Tentu saja, yang anda katakan barulah "Inilah Master Page saya".

Mari kita tentukan bagaimana penampilan halaman tersebut. Kita minta pada browser untuk membaginya menjadi 2 kolom, masing-masing menempati 50% bagian.

<FRAMESET COLS="50%,50%"> </FRAMESET>

Sabar... halaman ini masih tetap kosong, masih ada satu hal lagi yang harus kita lakukan.

Kita harus beritahu browser apa yang mengisi masing-masing frame.

<FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> </FRAMESET>

LIHAT. Anda seharusnya bangga dengan frame html yang sudah anda ciptakan!

http://www.tutorial.or.id/frame/contoh/contoh01.htm

Satu hal lagi sebelum kita lanjutkan. Ingat bahwa <FRAMESET> adalah tag container, sedangkan <FRAME> bukan. Bagi anda yang tidak tahu apa artinya, tag container adalah tag yang berpasangan, jadi memiliki <TAG> pembuka dan </TAG> penutup.

Pelajaran 2

Kita ingat bahwa tag <FRAMESET> lah yang melakukan semua pembagian. Memang itulah yang dilakukannya... membagi halaman. Tag ini menentukan juga bagaimana pembagian tersebut dilakukan. Tapi ingat, kapanpun anda ingin melakukan pembagian - gunakan <FRAMESET>. Dapatkah kita membagi halaman menjadi lebih dari 2 bagian? Ya, tapi jangan lupa menyediakan satu halaman untuk setiap frame atau anda akan membingungkan browser.

<FRAMESET COLS="20%,20%,20%,20%,20%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAME SRC="ratna.html"> <FRAME SRC="tina.html"> <FRAME SRC="sari.html"> </FRAMESET>

LIHAT

Tentu saja kita bisa membuat setiap frame berbeda ukurannya. Pastikan anda tidak salah hitung atau browser akan menampilkan interpretasinya sendiri.

<FRAMESET COLS="10%,20%,30%,15%,25%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAME SRC="ratna.html"> <FRAME SRC="tina.html"> <FRAME SRC="sari.html"> </FRAMESET>

LIHAT

Bila halaman kita bagi menjadi baris (ROWS) dan bukannya kolom (COLS), kita akan mendapat sesuatu yang berbeda sama sekali.

<FRAMESET ROWS="10%,20%,30%,15%,25%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAME SRC="ratna.html"> <FRAME SRC="tina.html"> <FRAME SRC="sari.html"> </FRAMESET>

LIHAT

Mari kita kembali ke bentuk 2 frame, halaman yang dibagi menjadi 2 kolom sama besar.





LIHAT

Kita bisa mengganti 50% dengan 50 pixels (picture elements, setiap titik di layar komputer anda. Atau kita gunakan saja istilah titik. OK? OK). Dan kita bisa gunakan * sebagai pengganti angka. * berarti berapapun sisanya.

<FRAMESET COLS="50,*"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> </FRAMESET>

LIHAT

Ada satu hal yang sangat penting dan harus anda perhatikan. Misalkan anda membuat frame selebar 100 titik di sebelah kiri, dan 100 titik di kanan. Karena ukuran layar anda adalah 800x600, maka frame ketiga di tengah menjadi selebar 600 titik. Semuanya tampak bagus dan keren... untuk anda. Misalkan layar komputer saya ukurannya hanya 640x480. Kedua frame dengan lebar 100 titik tadi hanya tampil selebar 80 (640/800x100) titik di layar saya. Bila anda memakai ukuran absolut dalam tag <FRAMESET> anda, SELALU gunakan paling tidak satu * sebagai frame yang elastis. Dengan cara ini segala sesuatunya akan tampak baik bagi semua orang.

Ini adalah kesalahan umum yang sering terjadi dalam pemakaian frame dan saya ingin anda ekstra hati-hati mengenai hal ini. Pembagian halaman yang paling umum adalah frame kecil di sebelah kiri berisi menu atau topik bahasan dan frame utama yang lebih besar di sebelah kanan seperti ini. Masalahnya adalah ... Jika anda membuat frame menggunakan persentase (misalnya <FRAMESET COLS="15%,85%">) segala sesuatunya akan tampak baik bagi anda. Tapi... bagi orang lain dengan ukuran layar yang berbeda, yang tampak mungkin seperti ini.

Penyebabnya adalah karena anda menentukan frame sebelah kiri lebarnya 15%. 15% dari apa? 15% dari berapapun lebar layar komputer mereka. Ini berarti frame kiri bisa 'tampil beda' bagi orang yang berbeda pula. Bagaimana mengatasinya? Sudah tahu nanya... Gunakan saja nilai absolut untuk frame kiri dan buatlah frame kanan elastis (misalnya <FRAMESET COLS="120,*">). Gitu aja kok repot.

Tidak ada salahnya jika nilai absolut tersebut kita perbesar sedikit. Supaya tidak terlalu sesak dan ada ruang untuk bernafas. Sebagai contoh, jika 100 titik mencukupi tetapi tampak terlalu sempit... ubahlah lebar frame menjadi 120 atau 125 titik.

Biasakanlah untuk memeriksa tampilan anda dengan beberapa ukuran layar yang berbeda. Kalau anda menggunakan Windows 98, ubahlah setting layar anda (Di desktop anda, klik kanan kemudian pilih Properties-Settings-Screen Area). Supaya praktis, ubah pilihan (Properties-Settings-Advanced-General) menjadi "Apply the new color setting without restarting". Dengan demikian anda tidak harus me-restart komputer setiap kali. Cara lain adalah menggunakan program Quickres dari Microsoft.

Kita juga dapat membuat lebih dari satu frame elastis dan menyatakan ukurannya relatif satu terhadap yang lain.

<FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAME SRC="ratna.html"> </FRAMESET>

LIHAT


http://www.microsoft.com/windows/download/quik_res.exe

http://www.tutorial.or.id/frame/contoh2/contoh02.htm





Terjemahannya kurang lebih demikian: Buat 3 frame. Buat frame pertama selebar 50 titik. Sisanya bagikan kepada frame 2 dan 3, tetapi buatlah frame 3 dua kali lebih besar dari frame 2. Tempatkan Lisa di frame pertama, Putri di frame kedua dan Ratna ketiga.

Pastikan bahwa semuanya dibuat dengan urutan yang benar. <FRAME> pertama ditampilkan sesuai dengan ukuran yang pertama dalam tag <FRAMESET> (50/lisa), ukuran kedua untuk frame kedua (*/putri) dan ukuran ketiga untuk frame ketiga (2*/ratna). Saya tahu bahwa untuk anda hal ini sudah sangat jelas, tetapi ini sangat penting dan saya ingin memberi perhatian yang lebih untuk itu.

Bagaimana jika kita ingin membagi Ratna menjadi dua bagian horisontal. Ingat yang saya katakan bahwa kalau anda ingin membagi halaman, anda harus menggunakan tag <FRAMESET>. Pertama-tama kita harus mengganti Ratna dengan pasangan tag <FRAMESET>.

<FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAMESET> </FRAMESET> </FRAMESET>

Pada saat ini kita katakan pada browser: Buat 3 frame. Buat frame pertama selebar 50 titik. Sisanya bagikan kepada frame 2 dan 3, tetapi buatlah frame 3 dua kali lebih besar dari frame 2. Tempatkan Lisa di frame pertama, Putri di frame kedua dan frame ketiga akan kita bagi lebih lanjut. Sekarang kita harus menentukan bagaimana pembagian frame ketiga tersebut kita lakukan.

Kita akan membaginya menjadi dua bagian mendatar sama besar.

<FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAMESET ROWS="50%,50%"> </FRAMESET> </FRAMESET>

Dan saya pikir kita akan tempatkan kembali Ratna di atas sedangkan Tina di bawah. Dan inilah hasilnya.

<FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="ratna.html"> <FRAME SRC="tina.html"> </FRAMESET> </FRAMESET>

LIHAT

Keren kan? Saya jadi ingin melakukannya sekali lagi! Mari kita bagi Lisa menjadi 3 bagian mendatar. Bagian paling atas tingginya 50 titik. Sisanya kita bagi dua sama besar. Kita akan menempatkan Lisa di ketiga bagian tadi. Inilah seluruh perubahan yang harus kita lakukan.


<FRAMESET COLS="50,*,2*"> <FRAMESET ROWS="50,*,*"> <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="putri.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="ratna.html"> <FRAME SRC="tina.html"> </FRAMESET> </FRAMESET>

LIHAT

Saya tahu hasilnya tidak terlalu bagus. Sebetulnya kalau kita membuat halaman dengan frame sebanyak itu hasilnya akan tampak berantakan. Patokan yang umum digunakan adalah: jangan membuat lebih dari 3 frame dalam satu halaman. Kalau anda bisa hilangkan seluruhnya, itu lebih baik lagi.

Sekarang adalah waktu yang tepat untuk memikirkan orang-orang yang masih menggunakan browser lama yang tidak mampu menampilkan frame. Walau sebagian besar, kalau tidak semua, pengunjung web anda bisa melihat tampilan frame, mungkin masih ada di antara mereka yang menggunakan komputer atau browser lama. Kalau anda ingin membantu mereka, anda dapat menambahkan versi tanpa-frame pada web anda...

<FRAMESET COLS="50,*,2*"> <FRAMESET ROWS="50,*,*"> <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="putri.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="ratna.html"> <FRAME SRC="tina.html"> </FRAMESET> </FRAMESET> <NOFRAMES> <BODY> Tuliskan versi tanpa-frame anda di sini. Jika seseorang menggunakan browser lama, dia akan lewati semua hal di atas dan langsung sampai di sini. Browser yang mampu menampilkan frame akan mengabaikan apapun yang ada di dalam tag <NOFRAMES>. Anda mungkin bertanya-tanya tentang beberapa hal saat ini. Haruskah saya membuat versi alternatif web saya? Barangkali. Berapa banyak orang yang akan terlewatkan kalau saya tidak melakukan hal ini? Sangat sedikit. Menurut anda haruskah saya mengkhawatirkannya? Tidak. Apakah anda mengkhawatirkannya? Tidak. Mengapa anda memasukkannya ke dalam tutorial ini? Karena ini termasuk salah satu bahasan dan saya ingin anda paling tidak mengetahuinya. Apakah anda memang selalu menyenangkan dan menarik seperti ini? Tentu. </BODY> </NOFRAMES>


Pelajaran 3

Mari kita kembali ke bentuk yang lebih sederhana.


LIHAT

Kita dapat juga menempatkan gambar di dalam frame. Dalam folder contoh ada file dengan nama world.gif. Cari dan copykan ke folder anda sendiri.

<FRAMESET COLS="50%,50%"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162> <FRAME SRC="putri.html"> </FRAMESET>

LIHAT Jangan lupa untuk menggunakan atribut HEIGHT & WIDTH untuk setiap tag image.

Mari kita coba menempatkan gambar tersebut ke dalam frame yang sesuai ukurannya. Pertama-tama perkecil frame kiri menjadi selebar 146 titik. Karena kita menggunakan nilai absolut, kita buat frame kanan elastis.

<FRAMESET COLS="146,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162> <FRAME SRC="putri.html"> </FRAMESET>

LIHAT

Selanjutnya kita bagi frame kiri menjadi 2 bagian mendatar. Bagian atas tingginya 162 titik dan bagian bawah sisanya. Kita tempatkan world.gif dan Lisa di kedua frame tersebut.

<FRAMESET COLS="146,*"> <FRAMESET ROWS="162,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="putri.html"> </FRAMESET>

LIHAT Seperti anda lihat, kita punya sedikit masalah.

Scrollbar yang anda lihat bisa diubah dengan YES, NO atau AUTO. YES berarti frame tersebut selalu memiliki scrollbar- baik diperlukan atau tidak. NO artinya tidak akan ada scrollbar, bahkan jika isi





frame anda sebesar Pulau Jawa... browser hanya akan menampilkan sebanyak yang dia bisa. AUTO adalah defaultnya. Jika diperlukan, scrollbar akan dimunculkan, jika tidak, scrollbar akan disimpan di tempat yang aman. Mari kita hilangkan scrollbar tersebut.

<FRAMESET COLS="146,*"> <FRAMESET ROWS="162,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="putri.html"> </FRAMESET>

LIHAT

Kita masih tetap punya masalah. Gambar tadi tidak tampil sebagaimana mestinya di dalam frame. Kedua atribut berikut ini berkaitan dengan margin. Browser secara otomatis memberi jarak antara frame dan isinya. Hal ini perlu untuk estetika. Anda dapat mengatur jarak ini dengan MARGINWIDTH dan MARGINHEIGHT. Yang pertama mengatur margin kiri & kanan, yang kedua margin atas & bawah. Kita akan mengubah nilai keduanya menjadi 1. (1 adalah nilai terkecil)

<FRAMESET COLS="146,*"> <FRAMESET ROWS="162,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="putri.html"> </FRAMESET>

LIHAT

Sayangnya ini tidak sepenuhnya menyelesaikan masalah. Dimensi frame diukur dari as ke as.

Juga ada margin minimal selebar 1 titik yang harus diperhitungkan. Karena nilai default garis batas frame adalah 6 titik, kita harus tambahkan 8 pada setiap dimensi frame (setengah dari 6, ditambah 1, dikalikan 2). Kalau ini membingungkan anda, tambahkan saja 8 pada setiap dimensi frame untuk mendapatkan ukuran yang sesuai.

<FRAMESET COLS="154,*"> <FRAMESET ROWS="170,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="putri.html"> </FRAMESET>

LIHAT

Ini akan menampilkan gambar anda secara sempurna di dalam frame, atau paling tidak sangat mendekati. Pernahkah anda melihat tampilan di dalam frame yang terpotong di satu atau lebih sisinya?

http://www.tutorial.or.id/frame/frem/index.htm




Bila anda menggunakan ukuran absolut, bersama dengan frame elastis... Dan jika anda selalu tambahkan 8 pada ukuran gambar untuk mendapatkan dimensi frame yang sesuai, tampilan frame anda akan memuaskan hampir setiap orang. Percayalah.

Pelajaran 4

Berikutnya kita akan coba beberapa perubahan kecil. Mungkin tidak seluruhnya bisa berjalan di semua browser. Jika atribut ini tidak dimengerti, browser akan mengabaikannya.

Pertama-tama kita dapat mengubah ketebalan pembatas frame.

<FRAMESET COLS="154,*" BORDER=20> <FRAMESET ROWS="170,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="putri.html"> </FRAMESET>

LIHAT

Kita dapat mengubah warna pembatas tersebut.

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAMESET ROWS="170,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="putri.html"> </FRAMESET>

LIHAT

Kita dapat menghilangkan tampilan pembatas untuk masing-masing <FRAMESET> dengan FRAMEBORDER.

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAMESET ROWS="170,*" FRAMEBORDER=NO > <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="putri.html"> </FRAMESET>

LIHAT

Kita dapat mencegah agar pengunjung tidak mengubah ukuran frame. Kecuali anda mempunyai situasi yang khusus, tidak ada alasan untuk terlalu banyak menggunakan atribut ini.

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAMESET ROWS="170,*" FRAMEBORDER=NO > <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO




MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="putri.html" NORESIZE> </FRAMESET>

LIHAT

Ok. Sesudah kita belajar sedikit tentang pembuatan frame, mari kita kembali ke bentuk yang sederhana dan kita akan pelajari bagaimana membuat link antar frame.

<FRAMESET COLS="33%,67%"> <FRAME SRC="ratna.html"> <FRAME SRC="putri.html"> </FRAMESET>

LIHAT

Yang akan kita lakukan adalah menambahkan link dari ratna.html ke sari.html. Jadi bukalah ratna.html dengan Notepad dan tambahkan yang berikut ini...

<HTML> <HEAD> <TITLE>Frame HTML Saya</TITLE> </HEAD> <BODY> Ratna<P> Anda harus mengunjungi teman saya Sari </BODY> </HTML>

Kemudian tambahkan linknya, dan simpan.

<HTML> <HEAD> <TITLE>Frame HTML Saya</TITLE> </HEAD> <BODY> Ratna<P> Anda harus mengunjungi teman saya <A HREF="sari.html">Sari</A> </BODY> </HTML>

Sekarang cobalah.

<FRAMESET COLS="33%,67%"> <FRAME SRC="ratna.html"> <FRAME SRC="putri.html"> </FRAMESET>

LIHAT




Jika link tadi anda klik, anda akan lihat halaman milik Ratna digantikan oleh Sari. OK, OK... saya tahu anda tidak terkesan. Yang anda inginkan adalah, klik link di halaman Ratna dan tampilkan hasilnya di frame milik Putri. Well, ini memerlukan sedikit penambahan.

Anda harus memberi nama/NAME <FRAME> yang ada di master page. Lakukanlah... beri nama untuk frame kedua.

<FRAMESET COLS="33%,67%"> <FRAME SRC="ratna.html"> <FRAME SRC="putri.html" NAME="FRAME-1"> </FRAMESET>

Saya ingin membuat catatan di sini. Frame kedua tadi sebenarnya bukan milik Putri. Itu adalah sekedar frame kedua dari beberapa frame dan kita telah tempatkan putri.html di dalamnya. Jika kita tidak menuliskan apapun di dalam tag <FRAME>, frame tersebut akan kosong.

Catatan- nama <FRAME> harus diawali dengan huruf atau angka. Kalau tidak, nama tersebut akan diabaikan. (Satu perkecualian adalah nama frame yang berawalan dengan garis bawah _ Pemakaiannnya akan kita bahas sebentar lagi.)

Selanjutnya kita harus menambahkan sesuatu pada link tersebut di halaman milik Ratna, jadi buka ratna.html lagi (dengan Notepad) dan tambahkan TARGET.

<HTML> <HEAD> <TITLE>Frame HTML Saya</TITLE> </HEAD> <BODY> Ratna<P> Anda harus mengunjungi teman saya <A HREF="sari.html"TARGET="FRAME-1">Sari</A> </BODY> </HTML>

Hal ini akan menyebabkan link tersebut ditampilkan di frame dengan nama FRAME-1.

LIHAT

Pemakaian link seperti ini sangat membantu anda menghubungkan halaman-halaman di web site anda sendiri. Tetapi bagaimana kalau anda ingin menggunakan link tersebut untuk menampilkan halaman dari luar web site anda? Coba tambahkan link yang lain di halaman milik Ratna.

<HTML> <HEAD> <TITLE>Frame HTML Saya</TITLE> </HEAD> <BODY> Ratna<P> Anda harus mengunjungi teman saya <A HREF="sari.html" TARGET="FRAME-1">Sari</A> <P>Dan tentu saja anda harus melihat karya besar Bram di <A

HREF="http://www.pts.co.id" TARGET="FRAME-1">PTS Online</A><P> </BODY> </HTML>


LIHAT Seperti yang dapat anda lihat, ini menyebabkan halaman milik orang lain ditampilkan di dalam frame anda.

Bagaimana anda bisa menampilkan link dari luar tidak di dalam frame tetapi sepenuh window browser? Mudah, ubahlah TARGET menjadi _top.

<HTML> <HEAD> <TITLE>Frame HTML Saya</TITLE> </HEAD> <BODY> Ratna<P> Anda harus mengunjungi teman saya <A HREF="sari.html" TARGET="FRAME-1">Sari</A> <P>Dan tentu saja anda harus melihat karya besar Bram di <A

HREF="http://www.pts.co.id" TARGET="_top">PTS Online</A><P> </BODY> </HTML>

LIHAT Selalu gunakan cara ini jika membuat link ke luar web site anda. Percayalah, pengunjung anda akan menghargainya!

_top adalah satu di antara 4 'magic targets'. Selengkapnya adalah _self, _blank, _parent dan _top. Hanya inilah target yang dapat diawali dengan karakter selain alfa-numerik. Sebagai tambahan, setiap target berawalan garis bawah_ yang bukan salah satu dari keempat 'magic targets' akan diabaikan. Untuk saat ini, _top adalah satu-satunya yang perlu kita perhatikan.

Catatan- Jangan salah menuliskan TARGET="_top" dengan TARGET="_TOP". Pada umumnya HTML bisa dituliskan dalam huruf besar maupun kecil, tetapi tidak dalam hal ini. Penggunaan _TOP dan bukannya _top kadang-kadang menyebabkan link tersebut ditampilkan di browser baru dan bukan di browser yang sudah terbuka. Karena sudah disinggung, itulah yang dilakukan oleh TARGET="_blank".... menampilkan link di window browser yang baru.



Pelajaran 5

Saya rasa kita akan mencoba membuat frame dari awal lagi. Bukan yang terlalu rumit, hanya seperti ini.

Sebelum kita mulai, saya ingin menekankan.... jangan buat yang aneh-aneh! Web site dengan terlalu banyak frame dan link yang bertebaran di seluruh halaman akan membingungkan kita dalam membuatnya, dan akan lebih membingungkan lagi untuk diikuti. Saya rasa itu saja, mari kita mulai!

Pertama-tama kita harus menentukan hasil akhir yang kita inginkan. Saya pikir rancangan sederhana yang cukup bagus adalah judul/logo di bagian atas, direktori di sebelah kiri, dan frame utama di kanan. Terlebih dulu kita akan membuat Master Page.

<HTML> <HEAD> <TITLE>Membuat Frame</TITLE> </HEAD>


</HTML>

Buatlah folder baru dan simpan file di atas dengan nama index.html. Gambar yang akan kita pakai sebagai judul adalah "MY FRAMZ PAGE". Nama file ini adalah frame1.gif dan terletak di folder frem. Copykan ke folder yang baru saja anda buat.

Bagi layar menjadi dua bagian horisontal.


<FRAMESET ROWS="83,*"> </FRAMESET>

</HTML>

Perhatikan, angka 83 kita dapat dari tinggi gambar ditambah 8 (75+8=83). Perhatikan juga, karena kita memakai ukuran absolut maka kita gunakan frame elastis.

Kemudian tempatkan judul.html di frame atas (kita akan membuat file tersebut beberapa saat lagi). Tuliskan juga pasangan tag <FRAMESET> karena kita akan membagi frame bagian bawah lebih lanjut.


<FRAMESET ROWS="83,*"> <FRAME SRC="judul.html"> <FRAMESET>

http://www.tutorial.or.id/frame/coba/index.htm

</FRAMESET> </FRAMESET>

</HTML>

LIHAT Anda bisa coba membukanya sekarang, tetapi anda akan mendapatkan pesan kesalahan karena memang belum lengkap.

Kita akan membagi frame bawah menjadi dua bagian. Di sebelah kiri kita tempatkan daftar.html dan di sebelah kanan home.html. Sekali lagi, kita belum membuat file-file ini sehingga anda masih akan mendapatkan suatu pesan kesalahan (atau dua) (atau tiga).


<FRAMESET ROWS="83,*"> <FRAME SRC="judul.html"> <FRAMESET COLS="20%,80%"> <FRAME SRC="daftar.html"> <FRAME SRC="home.html"> </FRAMESET> </FRAMESET>

</HTML>

LIHAT

Karena kita akan menempatkan daftar kita di sebelah kiri dan halaman-halaman lain tampil di frame kanan, kita harus menamai frame tersebut. Inilah satu-satunya frame yang akan berganti-ganti isinya sehingga frame ini sajalah yang perlu kita beri nama.


<FRAMESET ROWS="83,*"> <FRAME SRC="judul.html"> <FRAMESET COLS="20%,80%"> <FRAME SRC="daftar.html"> <FRAME SRC="home.html" NAME="FRAME-UTAMA"> </FRAMESET> </FRAMESET>

</HTML>

LIHAT OK. Kita sudah selesaikan yang satu ini.... untuk sementara.

Mari kita buat judul.html. Mulai dengan yang berikut ini dan simpanlah.

http://www.tutorial.or.id/frame/coba2/coba03.htm



<HTML> <HEAD> <TITLE>Membuat Frame- Judul</TITLE> </HEAD> <BODY BGCOLOR="#0000FF"> </BODY> </HTML>

Perhatikan kita buat warna latar belakangnya biru. LIHAT judul.html LIHAT Master Page

Tampilkan gambarnya dan <CENTER>-kan.

<HTML> <HEAD> <TITLE>Membuat Frame- Judul</TITLE> </HEAD> <BODY BGCOLOR="#0000FF"> <CENTER><IMG SRC="frame1.gif" WIDTH=500 HEIGHT=75></CENTER> </BODY> </HTML>

LIHAT judul.html LIHAT Master Page

Saya ingin mengingatkan, jika anda melihat source dokumen saya untuk membantu membuat dokumen anda, anda mungkin menemukan beberapa hal yang tidak anda mengerti atau bertentangan dengan apa yang saya utarakan. Ini disebabkan saya harus membuat dokumen saya sedemikian rupa sehingga tutorial ini bisa tampil dan diikuti dengan benar. Masuk akal? Jika tidak, jangan coba melihat source dokumen tersebut kecuali anda ingin membingungkan diri sendiri.

Baiklah.... seperti anda lihat kita menghadapi masalah lagi, yaitu munculnya scrollbar dan letak gambar yang kurang pada tempatnya. Buka Master Page anda. Hilangkan scrollbarnya dan sesuaikan marginnya.


<FRAMESET ROWS="83,*"> <FRAME SRC="judul.html" SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAMESET COLS="20%,80%"> <FRAME SRC="daftar.html"> <FRAME SRC="home.html" NAME="FRAME-UTAMA"> </FRAMESET> </FRAMESET>

</HTML>

LIHAT

Sekarang kita buat Daftarnya. Mulai dengan yang berikut ini dan simpan dengan nama daftar.html.



http://www.tutorial.or.id/frame/coba2/judul02.htm


http://www.tutorial.or.id/frame/coba2/judul01.htm

<HTML> <HEAD> <TITLE>Membuat Frame- Daftar</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML>

LIHAT daftar.html LIHAT Master Page

Beri judul dan tuliskan teks untuk link-nya. Kita akan tambahkan informasi link tersebut sebentar lagi.

<HTML> <HEAD> <TITLE>Membuat Frame- Daftar</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF">

<H3>Daftar</H3>

Home<P>

Ke sini<BR> atau ke sana<P>

atau kunjungi<BR> PTS Online<BR> Web Tutorial

</BODY> </HTML>

LIHAT daftar.html LIHAT Master Page

Sekarang tambahkan informasi link tersebut.


<H3>Daftar</H3>

<A HREF="home.html">Home</A><P>

<A HREF="sini.html">Ke sini</A><BR> <A HREF="sana.html">atau ke sana</A><P>

atau kunjungi<BR> <A HREF="http://www.pts.co.id/">PTS Online</A><BR> <A HREF="http://www.tutorial.or.id/">Web Tutorial</A>

</BODY> </HTML>


http://www.tutorial.or.id/frame/coba2/daftar02.htm


http://www.tutorial.or.id/frame/coba2/daftar01.htm

Pelajaran 6

Mari kita buat home.html, sini.html dan sana.html. Karena anda sudah bekerja sangat keras (dan saya bosen ngetik terus), pilih saja yang gampang dan copykan yang berikut ke Notepad lalu simpan.

Simpan teks di bawah ini dengan nama home.html

<HTML> <HEAD> <TITLE>Membuat Frame- Home</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H1 ALIGN=center>Halaman Utama.</H1> Selamat datang di homepage saya! Homepage ini pasti menarik dan mudah diikuti karena guru saya, selain SANGAT menarik dan menyenangkan, telah mengajarkan cara

yang benar dalam membuat Frame!<P> <CENTER>Selamat menikmati!</CENTER><P> </BODY> </HTML>

LIHAT home.html

Simpan yang ini dengan nama sini.html

<HTML> <HEAD> <TITLE>Membuat Frame- Sini</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H1 ALIGN=center>Sini</H1> Selamat datang di sini. </BODY> </HTML>

LIHAT sini.html

Dan tentu saja yang ini sebagai sana.html.

<HTML> <HEAD> <TITLE>Membuat Frame- Sana</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H1 ALIGN=center>Sana</H1> Anda sudah sampai di sana. </BODY> </HTML>

LIHAT sana.html

Sekarang LIHAT Master Page.


http://www.tutorial.or.id/frame/coba/sana.htm

http://www.tutorial.or.id/frame/coba/sini.htm

http://www.tutorial.or.id/frame/coba2/home01.htm

Ada yang kita lupakan. Kalau saja anda ingat masalah yang anda hadapi pada saat membuat halaman direktori.... Anda ingat? Bagus! Jadi bukalah daftar.html dan tambahkan TARGET yang diperlukan.


<H3>Daftar</H3>

<A HREF="home.html" TARGET="FRAME-UTAMA">Home</A><P>

<A HREF="sini.html" TARGET="FRAME-UTAMA">Ke sini</A><BR> <A HREF="sana.html" TARGET="FRAME-UTAMA">atau ke sana</A><P>

atau kunjungi<BR> <A HREF="http://www.pts.co.id/" TARGET="_top">PTS Online</A><BR> <A HREF="http://www.tutorial.or.id/" TARGET="_top">Web Tutorial</A>

</BODY> </HTML>

membuat frame

Documents