Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
Cara Mudah Membuat Frame
Hai. Kali ini saya akan menjelaskan tentang pembuatan frame untuk dokumen html anda. Pemakaian frame secara baik dapat membantu penampilan web site anda dan mempermudah navigasi halaman-halaman web tersebut. Ingat, kata kuncinya adalah pemakaian secara baik. Jelas? Membagi halaman web menjadi beberapa frame sebenarnya sangat mudah. Konsep dasarnya adalah seperti ini: Setiap frame adalah dokumen html biasa. Jika anda ingin membagi halaman web anda menjadi 2 frame yang bersebelahan, maka anda harus membuat dokumen html yang lengkap untuk frame kiri dan dokumen html yang lengkap pula untuk frame sebelah kanan. Sebagai tambahan anda perlu membuat dokumen html ketiga. Dokumen ini adalah frame definition document (untuk mudahnya kita sebut saja MASTER PAGE) dan berisi tag <FRAME> yang menentukan tata letak setiap frame dan dokumen html yang akan mengisi frame tersebut. Sebetulnya, memang hanya itu fungsinya. Pada dasarnya, hanya ada dua tag utama tentang frame yang paling perlu kita perhatikan: <FRAMESET> dan <FRAME>. Cara paling mudah untuk menjelaskannya adalah dengan mengajak anda terjun langsung dan mulai membuat frame. Saya jamin, dalam waktu 90 menit anda tidak akan perlu pusing-pusing lagi dalam membuat frame. Nggak yakin? Jangan buat saya jadi ragu-ragu. Mari kita buktikan! Perlu saya tekankan bahwa kalau anda berkeinginan untuk membuat dokumen html yang baik, maka anda harus menyediakan waktu untuk mempelajari tag-tag yang bersangkutan. Kalau anda menggantungkan diri pada fasilitas "table wizard" yang ada di dalam "editor html canggih yang amat sangat mudah dipakai" yang banyak tersedia di pasaran, fleksibilitas anda akan sangat terbatas. Dan hasil akhirnya mungkin tidak akan seperti yang anda harapkan. Menurut pendapat saya, editor html terbaik untuk dipakai adalah editor berbasis teks. Program-program ini akan mempermudah penulisan dokumen html anda, tetapi tidak mengerjakannya untuk anda.
2
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.
3
Ok, ini yang menarik... membuat master page anda. Mulai dengan ini.
<HTML> <HEAD> <TITLE>Frame HTML Saya- Master Page</TITLE> </HEAD> <BODY> </BODY> </HTML> Hapus tag <BODY>. Master page tidak menggunakannya... <HTML> <HEAD> <TITLE>Frame HTML Saya- Master Page</TITLE> </HEAD> </HTML> ...yang dipakai adalah tag <FRAMESET>. <FRAMESET> </FRAMESET> 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".
4
Mari kita tentukan bagaimana penampilan halaman tersebut
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! 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>
5
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> 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> Mari kita kembali ke bentuk 2 frame, halaman yang dibagi menjadi 2 kolom sama besar. <FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> </FRAMESET> 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>
6
Ada satu hal yang sangat penting dan harus anda perhatikan
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.
7
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 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.
8
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. <HTML> <HEAD> <TITLE>Membuat Frame- Daftar</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <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=" TARGET="_top">PTS Online</A><BR> <A HREF=" TARGET="_top">Web Tutorial</A> </BODY> </HTML> Coba lihat Master Page.
Presentasi serupa
