Frame

Konsep Frame

Frame atau yang biasa juga disebut bingkai, merupakan salah satu fasilitas yang disediakan oleh web browser dengan cara membagi Windows-Client Area menjadi beberapa bagian (sub window). Pembagian ini dapat dilakukan secara horizontal maupun vertikal. Banyak sekali yang dapat dilakukan oleh frame seperti tampilan web yang lebih bervariasi.

Meskipun frame memiliki kemampuan untuk membagi jendela browser sebanyak yang diingingkan tapi dalam prakteknya, tidak akan lebih dari dua atau tiga buah frame yang digunakan. Karena penggunaan frame yang berlebihan hanyalah akan menimbulkan kebingungan.

Dasar penggunaan frame adalah memiliki dua buah dokumen yang b erbeda, yaitu :

1. Layout Documents (dokumen tata letak)

Dokumen ini biasanya tidak menampilkan isi apapun, fungsinya hanya untu membagi jendela menjadi beberapa bagian, Dalam frame, dokumen ini dibuat dengan menggunakan sepadang tag <Frameset>

2. Content Documents (dokumen isi).

Dokumen ini adalah dokumen yang nantinya akan mengisi frame tersebut. Dokumen ini adalah merupakan dokumen HTML biasa, namun dokumen ini nantinya kan divariasikan melalui Hyperlink, dimana link dapat dibuat pada satu bingkai dapat ditampilkan pada bingkai yang lain. Dokumen ini didefinisikan dengan tag <Frame src=”url”>

Membuat Bingkai FRAME baris dan kolom, serta variasi FRAME

Membuat bingkai/frame sama dengan membuat layout documents yaitu dengan menggunakan sepasang tag <FRAMESET>…</FRAMESET>. Dalam pembuatan frame, tidak menggunakan sepasang tag <BODY>…</BODY> sebagaimana jika ingin membuat dokumen HTML.

Sepasang tag <BODY> tersebut akan digantikan dengan sepasang tag <FRAMESET>. Sehingga bentuk struktur dokumen HTMLnya akan berubah menjadi seperti dibawah ini :

<HTML>

<HEAD>

<TITLE> ….</TITLE>

</HEAD>

<FRAMESET>

       ISI BINGKAI

</FRAMESET>

<HTML>

Seperti halnya dengan tabel, FRAME dapat terbagi atas baris dan kolom. Untuk membagi frame menjadi beberapa baris, dapat menambahkan atribut ROWS pada tag <FRAMESET>. Sedangkan untuk membuat beberapa kolom dapat menambahkan atribut COLS pada tag <FRAMESET>. Masing-masing atribut tersebut mempunyai nilai yang dapat ditentukan  dengan piksel atau persentase. Misalnya : <FRAMESET COLS=”100, 100″> berarti frame akan terdiri atas dua kolom yang masing-masing kolom lebarnya sebanyak 100 piksel. Atau dapat juga dituliskan <FRAMESET COLS=”20%, 70%> yang berarti frame terdiri atas 2 kolom dengna lebar kolom pertama 30% dari jendela browsernya dan kolom kedua lebarnya 70%.

Aturan-aturan dasar dalam pembagian baris dankolom pada tag <FRAMESET> adalah sebagai berikut :

  1. Dalam pembagian baris/kolom, setiap nilai dipisahkan dengan tanda koma”,” Baris/kolom harus mempunyai nilai berdasarkan banyak baris/kolom tersebut. Misalnya nilai 25%, 25%, 50% akan membuat tiga buah baris/kolom pada frame.
  2. Jika nilai yang diberikan berupa persentase, maka nilai-nilai tersebut jangan kurang dan jangan lebih dari nilai 100%.
  3. Untuk membuat sisa nilai persentase, biasanya menggunakan tanda *. MIsalnya : 25%, Artinya akan membuat dua buah baris/kolom yang pertama lebarnya 25% dan yang kedua kaan menggunakan beberapa pun lebar dair ruang tersisa.
  4. Ada juga penggunaan : COLS =”,2″ Hal ini berarti pembagian frame menjadi dua kolom, dimana kolom kedua memiliki lebar dua kali lebih besar dari kolom pertama.

Format Tampilan Frame

Frame yang telah dibuat dapat diformat sesuai dengan keinginan pembuatnya. Format pada frame antara lain MARGIN, BORDER, NORESIZE, dan SCROLLING. Semua format tersebut merupakan atribut yang terdapat pada tag <FRAME>

Atribut Margin

Dokumen HTML yang mengisi sebuah frame dapat ditentukan marginya, baik margin kiri maupan margin kanan.  Selain margin kiri dan kanan, dapat ditentukan pula margin atas dan bawah. Untuk menentukan margin-margin tersebut digunakan atribut MARGINWIDTH DAN MARGIN HEIGHT pada tag <FRAME>. Atribut-atribut menggunakan value/nilai dalam satuan piksel.

Atribut Border

Atribut Border berguna untuk mangatur tebel titpisnya garis pemisah antar frame. Jika tidak diinginkan adanya garis pemisah, dapat menambahkan nilai “0” pada atribut Border.

Atribut Noresize

Jika frame yang telah dibuat tidak dpat diubah ukurannya ketika ditampilkan pada browser, maka dapat ditambahkan atribut NORISIZE pada <FRAME>.

Atribut Scrolling

Jika isi dokumen HTML yang dimasukkan ke dalam frame mempunyai karakter yang panjang dan lebarnya melebihi panjang dan lebar jendela browsernya, maka frame dari isi dokumen tersebut akan mengandung scroll kiri-kanan atau scrll atas-bawah (Batang penggulung).

Link dan Target pada Frame

Hal mendasar yang perlu diketahui adalah tentang kemana halaman yang menjadi target sebuah link akan ditampilkan. Misalkan akan dibuat dua buah kolom frame. Kolom frame pertama berisikan dokumen HTML yang bersisi beberapa teks penghubung untuk link. Bila teks penghubung link tersebut diklik, maka akan ditampilkan pada halaman baru yang akan menggantikan halaman kolom frame pertama tersebut. Jika ingin kembali ke halaman semual, maka harus dibuat link baliknya.

Salah satu keuntungan frame adalah dapat manampilkan target link pada frame lain dalam satu jendela browser, dengan tanpa harus membuat link balik ke halaman utama. Atau dapat juga menampilkannya pada jendela browser yang baru.

Untuk menampilkan link tersebut yaitu dengan car amanmbahkan atribut TARGET pada tag <A> dan atribut NAME pada tag <FRAME>. Nama yang diberikan kepada atribut NAME harus sama dengan nama pada atribut TARGET.

Misalnya pada dokumen HTML :

< A HREF = “url” TARGET = “target1”> teks_penghubung </A>

maka pada frame tempat menampilkan target sebuah link harus diberi nama sesuai dengan nama pada atribut TARGET diatas yaitu :

<FRAME SRC=”url” NAME-“target1”>

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: