Salah
satu teknik pengaturan tata letak dokumen web yang telah dipelajari sebelumnya
adalah dengan menggunakan tabel. Pada pembahasan ini, diperkenalkan teknik lain
dalam mengatur tata letak dokumen web dengan menggunakan frame.
Sama
halnya dengan tabel, frame akan membagi web page dalam baris dan kolom,
bedanya, jika digunakan frame, web page akan terbagi menjadi beberapa windows
yang masing – masing bagian mempunyai nama (nantinya akan menjadi target). Tiap
bagian windows ini akan berisi web page. Jadi dengan menggunakan frame, kita
dapat menampilkan beberapa web page dalam satu halaman. Sehingga tampilan
halaman HTML yang salah satu atau beberapa bagian berganti-ganti isinya
sedangkan bagian lain tetap sehingga dapat menghemat bandwidth internet dan
mempercepat proses download secara keseluruhan.
Sintaks
umum yang digunakan untuk membuat frame :
<HTML>
<HEAD>
</HEAD>
<FRAMESET BORDER=”#” { [ROWS | COLS] } = { #,[#,[...]]
}>
<FRAME SRC=”url” NAME=”FrameName”>
</FRAMESET>
</HTML>
|
Frame Syntax
<FRAMESET>
Tag
frameset ini mempunyai 2 buah atribut ROWS dan COLS. Frame document ini tidak
mempunyai BODY, tapi memiliki tag <FRAMESET> dan diakhiri dengan tag
</FRAMESET>. Di dalam FRAMESET ini hanya dapat mempunyai tag FRAMESET
lainnya, tag FRAME atau tag NOFRAMES.
ROWS=”list”
Digunakan
untuk frame pembagi horizontal. Atribut ROWS memakai daftar nilai yang
dipisahkan dengan koma. Secara umum digunakan nilai prosentase.
<FRAMESET
ROWS=”10%,25%,65%”>
Jika totalnya
tidak 100%, maka semua presentase akan diskalakan sehingga total menjadi 100%.
Untuk pengisian nilainya dimungkinkan juga menggunakan nilai pixel selain
menggunakan nilai prosentase, untuk menggunakan sisa space pada layar bisa
digunakan tanda *
<FRAMESET
ROWS=”100,250,*”>
<FRAMESET
ROWS=”100,*,300,100”>
COLS=”list”
Digunakan
untuk frame pembagi vertikal. Atribut COLS memakai daftar nilai yang dipisahkan
dengan koma. Tag FRAMESET ini dapat bersarang didalam tag FRAMESET yang lain.
<FRAMESET COLS=”20%,80%”>
<FRAMESET COLS=”200,*”>
<FRAME>
Mendefinisikan
frame tunggal dalam frameset. Beberapa atribut yang sering digunakan adalah :
SRC=”url” :Atribut SRC ini berisi
URL ke dokumen yang akan ditampilkan
pada frame ini.
NAME=”window_name”
:Atribut NAME berisi nama frame yang bisa ditunjuk oleh link pada dokumen yang
lain, biasanya dari frame lain pada dokumen yang sama. Atribut NAME ini
bersifat optional.
Frame bernama
bisa mempunyai isi target window dengan menggunakan atribut TARGET.
SCROLLING=”yes|no|auto”
Atribut
SCROLLING mendeskripsikan apakah frame harus mempunyai scrollbar atau tidak. Pilih
“yes” jika diinginkan scrollbar selalu tampak pada frame, pilih “no” jika tidak
menginginkan scrollbar tidak tampak atau pilih “auto” sehingga browser yang
nanti menentukan akan menampilkan scrollbar jika dibutuhkan. Atribut ini
bersifat optional dan nilai defaultnya adalah auto.
NORESIZE
Atribut
NORESIZE ini mengindikasikan jika frame tidak dapat di ubah ukurannya oleh
user. Secara default, semua frame dapat diubah ukurannya.
BORDERCOLOR=color
Memberi
warna pada border yang memisahkan frame ini dengan yang lain, misalkan
BORDERCOLOR=green.
BORDERCOLOR
dapat digunakan pada satu atau lebih <FRAME> atau dengan <FRAMESET>
untuk mengatur warna default pada semua border.
MARGINWIDTH=pix
Secara
default, terdapat 8 pixel margin kiri dan kanan untuk setiap frame yang dapat
diperkecil ataupun diperbesar.
MARGINHEIGHT=pix
Secara
default, terdapat 8 pixel margin atas dan bawah pada setiap frame yang dapat
diperkecil atau diperbesar.
Frame Target
Target
frame digunakan untuk menentukan tujuan ditampilkannya suatu informasi dari
suatu link. Biasanya, target frame ini disesuaikan dengan nama frame yang akan
dijadikan tujuan menampilkan informasi tersebut.
Ada nama frame
predefined yang dapat digunakan sebagai target, seperti yang diperlihatkan pada
tabel di bawah ini : _self, _top, _parent, _blank.
Jenis – Jenis Target
Frame
Nama Frame
|
Kegunaan
|
_self
|
Digunakan
apabila target frame adalah frame tempat link berada
|
_top
|
Digunakan
apabila target frame adalah windows tempat frame berada. Dengan menggunakan
_top sebagai target, maka definisi
frame yang ada pada window browser akan hilang, diganti dengan definisi frame
yang baru jika ada
|
_parent
|
Target frame
adalah setingkat di atas frame link berada
|
_blank
|
Digunakan
apabila hasil link ingin ditampilkan di window baru
|
Penggunaan Frame
Pada
bagian ini, kita akan mencoba menggunakan frame untuk membagi halaman web
menjadi 2 (dua) bagian atau lebih secara horizontal.
Sebelum
mencoba frame baris, silahkan buat beberapa dokumen web yang nanti akan
ditampilkan di tiap frame. Misalkan terdapat tiga halaman yang akan ditampilkan
yang terdiri dari halaman header.htm, main.htm, jur_mi.htm.
1. header.htm
<html>
<head>
<title>
Header Politeknik Telkom
</title>
</head>
<body>
<center>
<h3>Politeknik Telkom</h3>
<h5>Jl. Telekomunikasi No. 1 Dayeuh
Kolot
Bandung</h5>
<hr>
[ <a href="Jur_mi.html">
Manajemen Informatika </a> ]
[ <a href="#"> Komputer Akuntansi </a> ]
[ <a href="#"> Teknik Komputer </a> ]
</center>
</body>
</html>
|
2. main.htm
<html>
<head>
<title>Main
Politel</title>
</head>
<body>
<h3>Selamat datang di Politeknik
Telkom</h3>
Saat ini kami berlokasi di Kampus
Politeknik Telkom <br>Jl. Telekomunikasi No. 1 Dayeuh Kolot
Bandung.<br>
Beberapa jurusan yang
terdapat di Politeknik Telkom diantaranya :
<ol>
<li>Jurusan Manajemen
Informatika</li>
<li>Jurusan Komputer
Akuntansi</li>
<li>Jurusan Teknik
Komputer</li>
</ol>
</body>
</html>
|
3.
jur_mi.htm
<html>
<head>
<title>Jurusan Manajemen
Informatika</title>
</head>
<body>
<h3>Jurusan Manajemen
Informatika</h3>
<hr>
Jurusan ini berkonsentrasi
untuk mencetak lulusan yang
mampu menguasai teknologi ICT
yang handal dan siap pakai. Kurikulum yang dipersiapkan untuk mencapai tujuan
tersebut seperti diperlihatkan pada tabel berikut ini :
<table width="100%"
border="1" cellpadding="1"
cellspacing="1">
<tr bgcolor="#e2e2e2">
<td>Tahapan</td>
<td>Mata Kuliah /
Praktikum</td>
</tr>
<tr>
<td
rowspan="7">Semester 1</td>
<td>Algoritma
Pemrograman</td>
</tr>
<tr><td>Bahasa
Inggris</td></tr>
<tr><td>Pengenalan
Komputer</td></tr>
<tr><td>Praktikum
Pascal</td></tr>
<tr><td>Praktikum Pengenalan
Komputer</td></tr>
<tr><td>Praktikum Aplikasi
Internet</td></tr>
<tr><td>Praktikum Dasar
Jaringan Komputer</td></tr>
</table>
</body>
</html>
|
4. frame_baris.htm
<html>
<head>
<title>Frame Baris</title>
</head>
<frameset
rows="25%,75%">
<frame src="header.htm"
scrolling="no">
<frame src="main.htm"
name="main">
</frameset>
<noframes><body>
</body></noframes>
</html>
|
0 comments:
Post a Comment