MS Wulandari - HTML 1

(1)

PERTEMUAN VII FRAME

A. MEMBUAT DAN MENGGUNAKAN FRAME Frame digunakan untuk :

 Membuat daftar isi pada suatu sisi frame sementara sisi frame yang lain untuk menampilkan isi

 Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isi dokumen

 Membuat suatu dokumen tanya jawab, dimana sisi frame yang satu berisi daftar pertanyaan sedangkan sisi frame yang lain berisi jawabannya.

Dokumen frame tidak boleh berada dalam elemen BODY. Dokumen frame menggunakan elemen FRAMESET. FRAMESET mempunyai dua buah atribut :

 ROWS : membagi jendela browser menjadi beberapa baris frame.

 COLS : membagi jendela browser menjadi beberapa kolom frame.

Struktur dasar dokumen HTML dengan frame adalah :

<HTML>

<HEAD>

</HEAD>

<FRAME>

……….

</FRAME>

</FRAMESET>

</HTML>

Tag <FRAME> mempunyai 6 atribut, yaitu : SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING dan NORESIZE. Berikut contoh frame yang kompleks :

<FRAME SRC=”url” NAME=”windoww_name” SCROLLING=YES|NO|AUTO

MARGINWIDTH=”value” MARGINHEIGHT=”value” NORESIZE>

Atribut yang paling penting dari tag FRAME adalah SRC. SRC menunjukan bahwa frame berisi url, yang biasnya adalah file HTML, contoh : <FRAME SRC =”sample.html”>

Nilai baris dan nilai kolom adalah kumpulan nilai yang menyatakan banyaknya frame yang dibuat serta ukuran masing-masing frame. Setiap nilai dalam daftar dipisahkan tanda koma dan dapat dinyatakan dalam ukuran :



Pixel , contoh : <FRAMESET ROWS=”200,400,500”>



Persentase , contoh : <FRAMESET ROWS=”30%,40%,30%”>



Nilai relatif , contoh : <FRAMESET ROWS=”4*,*,3*”> , tanda * menyatakan suatu bagian dari sisa ruang yang ada. Didepan tanda * tidak ada angka, maka dianggap bahwa angka tersebut adalah 1.

Ketiga pengaturan diatas dapat dikombinasikan penggunaannya. Contoh : <FRAMESET ROWS=”60,20%,4*”>.

Untuk membuat frame baris, gunakan elemen FRAME yang dinyatakan dalam elemen FRAMESET, seperti dibawah ini :

<html>

<head><title>Frame dua dokumen</title> </head>

</frameset> </html>

(2)

Untuk membuat frame kolom, gunakan elemen FRAME yang dinyatakan dalam elemen FRAMESET, seperti dibawah ini :

<html>

<head>

<title>Frame dua dokumen</title>

</head>

</frameset> </html>

Untuk membuat frame yang terdiri dari frame baris dan frame kolom, atribut ROWS dan COLS digunakan bersama-sama dalam elemen FRAMESET, contoh :

<html>

<head>

<title>Frame empat dokumen</title>

</head>

</frameset> </html>

Frame berulang adalah frameset didalam frameset yang lain. Untuk membuat frame seperti gambar anda perlu membuat beberapa FRAMESET seperti contoh dibawah ini :

<html>

<head>

</head>

<!Membagi jendela browser dengan 3 bagian>

<!Frame kedua dibagi menjadi dua kolom>

</frameset>

<!Frame ketiga untuk file footer>

</frameset> </Noframes> </html>

(3)

B. MENGATUR TAMPILAN FRAME

Untuk menentukan margin pada frame kita menggunakan atribut MARGINWIDTH, yaitu menentukan nilai margin kiri dan nilai margin kanan suatu frame. Sedangkan MARGINHEIGHT digunakan untuk menentukan margin atas dan margin bawah frame. Format menggunakan kedua atribut tersebut : MARGINWIDTH=”value”

Contoh :

<html>

<head>

<title>Frame dua dokumen</title>

</head>

</frameset>

</html>

Secara otomatis frame akan mempunyai scrollbar untuk menggeser-geser isi dokumen jika ukuran dokumen tersebut lebih besar dari nilai frame yang ditetapkan. Nilai yang berlaku untuk atribut SCROOLING adalah yes, no atau auto, formatnya : <frame scrolling=”yes|no|auto”>

Contoh :

<html>

<head> <title>Frame dua dokumen</title> </head>

</frameset> </html>

Setiap frame dapat diubah-ubah ukurannya. Jika menginginkan suatu frame tidak dapat diubah-ukurannya gunakan atribut NORESIZE. Atribut ini sangat berguna jika anda membuat logo yag selalu ditampilkan dan tidak dapat diubah-ubah ukurannya. Format menggunakan atribut ini :

<FAME NORESIZE>. Hati-hati dalam menggunakan NORESIZE. Jika isi dari frame melebihi ukuran frame, maka sisa isi frame tidak dapat dilihat.

(4)

Contoh :

<html>

<head> <title>Penggunaan NORESIZE</title> </head>

</frameset> </html>

Untuk memperoleh tampilan frame yang menarik. Anda dapat menggunakan :



Atribut BORDER : digunakan untuk mengatur lebar border. Angka yang menyertai adalah satuan pixel. Formatnya : <FRAMESET BORDER=”value”>

 Atribut FRAMEBORDER : atribut ini mempunyai nilai “yes” atau “no”. Jika FRAMEBORDER= “yes”

maka border akan ditampilkan dalam bentuk 3D. Untuk membuat halaman web tanpa border, pada FRAMESET lakukan set FRAMESETBORDER=”no” dan BORDER=”0”.

 Atribut BORDERCOLOR : digunakan untuk memberi warna background pada frame. Bordercolor bisa diikuti dengan nama warna, nomor warna (tipe RGB).

Contoh :

<html>

<head> <title>Penggunaan BORDERCOLOR</title> </head>

</frameset> </html>

C. TARGET HYPERLINK

Anda dapat membuat suatu dokumen untuk terbuka pada suatu frame tertentu tanpa menutup frame yang ada saat ini. Suatu dokumen dapat diarahkan untuk terbuka pada frame tertentu, baik pada jendela browser atau frame tertentu. Atribut untuk mengarahkan dokumen tersebut adalah atribut TARGET, sedangkan lokasi jendela atau frame yang dituju dibuat dengan menggunakan atribut NAME. Atribut NAME memberikan nama pada suatu frame/jendela yang akan digunakan untuk menghubungkan suatu link ke frame tersebut.

Contoh :

<html>

<head> <title>Penggunaan TARGET DAN NAME</title> </head>

</frameset> </html>

File sumber :

<html>

</head>

<MENU>

<LH>Planet dalam sistem tata surya :

<LI><A HREF="merkurius.html">Merkurius</A>

<LI><A HREF="venus.html">Venus</A>

</MENU> </body> </html>

File data :

<html>

<head> <title>Nested Unordered List</title> </head>

<UL>

<LH>Planet dalam sistem tata surya :

<LI>Merkurius <UL>

<LI>57,9 juta kilometer dari matahari

<LI>Tidak punya satelit </UL>

<LI>Venus

(5)

<UL>

<LI>108 juta kilometer dari matahari

<LI>Tidak punya satelit </UL>

</UL> </body> </html>

Setelah di klik Merkurius, frame kanan berubah menjadi :

Program diatas memberikan nama (atribut NAME) “sumber” pada suatu frame. Kemudian untuk menampilkan suatu dokumen web ke frame “sumber” gunakan atribut TARGET. Jika mempunyai target yang sama untuk setiap link atau mempuyai target dengan nama-nama yang sama, gunakan tag BASE untuk membuat default target dari semua link yang tidak mempunyai target dengan nama-nama yang sama, gunakan tag BASE untuk membuat default target dari semua link yang tidak mempunyai target khusus.

Penggunaannya adalah : <BASE TARGET=”default”>. Dengan demikian, default akan menjadi target bagi semua link yang tidak mempunyai target khusus.

NAMA FUNGSI

_blank Browser akan menampilkan suatu jendela baru untuk menampilkan dokumen dari link yang diinginkan

_self Browser akan menampilkan pada jendela yang sama dengan jendela pemanggilnya

_parent Dokumen akan ditampilkan pada jendela sebelumnya.

_top Nilai _top akan bertindak seperti _self jika dokumen sudah berada di jendela utama browser

_open Akan membuka dokumen pada seluruh jendela utama browser, tanpa tergantung pada struktur frame saat ini.

Contoh :

Tidak semua browser mendukung adanya frame. Atribut NOFRAMES akan membantu menyelesaikan masalah ini. Dengan elemen <NOFRAMES> </NOFRAMES> akan membuat isi dokumen seperti dokumen html normal.

(6)