MODUL 10 BEKERJA DENGAN FRAME

Pada modul ini, Praktikan akan mengetahui dan memahami tentang fungsi dan cara menggunakan fitur FRAME yaitu metoda untuk membagi-bagi halaman web berdasakan baris dan kolom.

Frame atau dalam bahasa Indonesia disebut dengan Bingkai merupakan salah satu fiturHTML yang masih dipertahankan hingga HTML versi 4. Fitur ini digunakan untuk menampilkan beberapa file HTML dalam satu jendela browser secara bersamaan. Dengan kata lain, melalui fitur Frame ini, Anda dapat membagi-bagi tampilan halaman web menjadi beberapa kolom atau baris.

Berbeda dengan tabel, Jika sel pada tabel akan berisi data-data saja, maka pada frame, setiap framenya akan isi oleh sebuah file html. Oleh karena itu, jika Anda membangun web dengan frame dengan 2 kolom misalnya, maka Anda harus mempunyai 2 file html untuk mengisi 2 kolom tersebut dan 1 file html induknya.

Sejak kemunculan CSS, panggunaan frame ini sudah mulai berkurang, namun dalam proses pembelajaran, Anda sebaiknya juga tahu tentang prinsip kerja dan cara penggunaannya.

Terdapat dua tag utama dalam pembuatan frame ini, yaitu :

  • Tag <frameset [atribut]> content </frameset>

Tag frame set digunakan untuk menentukan berapa banyak baris dan atau kolom (frame) yang dibuat beserta ukurannya (satuannya % atau piksel). Atribut penting pada tag <frameset> adalah :

  • Rows untuk menentukan jumlah frame berdasarkan baris serta tingginya.
  • Cols untuk menentukan jumlah frame berdasarkan kolom serta lebarnya. Perhatikan contoh berikut :

Kode HTML diatas memerintahkan kepada browser agar dibuatkan 2 buah frame secara horizontal (baris/rows) dengan ukuran 50% tinggi layar digunakan untuk frame pertama dan diisi dengan file html dengan nama barissatu.html dan membuat frame kedua dengan ukuran 50% juga dari tinggi layar monitor dengan nama filenya barisdua.html.

Dari contoh diatas, terlihat bahwa dibutuhkan 3 buah file untuk dapat menjalankan frame ini, yaitu 1 file untuk frame kesatu dan 1 frame untuk mengisi frame kedua serta 1 file induknya. Maka tampilannya seperti berikut :

Yang perlu diingat dalam penggunaan tag <frameset> ini adalah pada script HTMLnya tidak boleh digunakan tag <body>. Posisinya adalah menggantikan tag <body> tersebut. Dalam tag <frameset> terdapat minimal satu tag <frame>.

  • Tag <frame [atribut]> (tag ini harus berada dalam tag <frameset> .. </frameset>.

Tag ini digunakan untuk mendefinisikan satu buah frame dengan atribut utamanya adalah src dan name. SRC digunakan untuk memanggil file htmlnya, dan name untuk memberikan nama dari frame. Perhatikan contoh berikut :

<frame src=barissatu.html>, SRC tersebut mengacu kepada file html yang ditampilkan. Artinya frame pertama dalam contoh diatas akan diisi dengan file html dengan nama barissatu.html.

Catatan:Ukuran kolom frameset dapat diatur dengan satuan persen dan pixel (cols = “200.500”), dan salah satu kolom dapat diatur untuk menggunakan ruang yang tersisa, dengan asterisk (cols = “25%,*”).

PRAKTIKUM

Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil kesimpulan.

Asumsi, Anda akan membuat desain web seperti berikut :

Header
Menu

content WebIklan
Footer

Dari gambar diatas dapat diambil kesimpulan,minimal dibutuhkan :

  1. Dibutuhkan 1 file html untuk header
  2. Dibutuhkan 1 file html untuk menu
  3. Dibutuhkan 1 file html untuk content web
  4. Dibutuhkan 1 file html untuk iklan
  5. Dibutuhkan 1 file html untuk footer.
  6. 1 file master.

Untuk no. 1 silahkan Anda buat seperti berikut :

Simpan dengan nama file header.html. lakukan hal yang sama untuk no. 2 s.d 5 simpan dengan nama file yang berbeda. Sehingga sekarang Anda sudah punya 5 file dengan nama header.html, menu.html, content.html, iklan.html dan footer.html.

Untuk file no. 6, ketikkan kode berikut :

Perhatikan pada frame konten, diberikan atribut name=content. Ini tujuannya nanti untuk mengarahkan link-link ke lokasi ini. Karena konten ini akan berubah-ubah sesuai dengan menu yang diklik user nantinya. Jika scrip diatas dijalankan, maka akan tampil seperti berikut :

Sekarang, silahkan Anda edit file menu.html seperti berikut :

Terlihat pada script diatas ditambahkan sebuah menu dengan target=kontent. Kontent ini adalah nama lokasi content web diatas, sehingga begitu menu ini di klik, maka akan tampil di halaman content web seperti berikut :

Untuk latihan, silahkan Anda buat untuk tampilan seperti berikut :

1.    Menu di sebelah kanan

KontenMenu

2.   Menu dan iklan di sebelah kiri

Menu Konten
  Iklan  

3. Menu dan iklan di sebelah kiri + footer

Menu Konten
  Iklan  
Footer

4. Menu sebelah kiri + footer+ Iklan di sebelah kanan

Menu Konten iklan
Footer

5.  Gabungan

LogoHeaderGambar
Ucapan Selamat Datang
Menu

KontenIklan
Footer

REFERENSI LANJUTAN :

  1. http://tutorial.belajarweb.net/html/html-frame.html
  2. http://manda.com/frames/
  3. http://www.tizag.com/htmlT/frames.php
  4. http://www.w3schools.com/tags/tag_frameset.asp