Buat file baru dengan nama latihan6.html, header.html, kiri.html, kanan.html, bab1.html dan bab2.html dengan isi masing-masing sebagai berikut:
File latihan6.html
<frameset rows=20%,*>
<frame name=atas src=header.html>
<frameset cols=30%,*>
<frame name=kiri src=kiri.html>
<frame name=kanan src=kanan.html>
</frameset>
</frameset>
Pada tag <frameset rows=20%,*> maksudnya adalah frame yang dibuat terdiri dari dua bagian/baris dengan ukuran 20% bagian paling atas dan selebihnya (80%) adalah frame bagian bawah/baris kedua yang ditunjukkan dengan tanda ‘*’. <frame name=atas src=header.html> menunjukkan bahwa nama frame adalah atas dan diisi dengan dokumen header.html.
<frameset cols=30%,*> mempunyai arti bahwa frame bawah dibagi lagi menjadi dua kolom dengan ukuran 30% untuk frame kiri dan sisanya untuk frame sebelah kanan.
Kalau file tersebut dijalankan hasilnya sebagai berikut:
Untuk gambar lebih jelasnya klik saja gambarnya...
Tampilan tersebut dikarenakan file-file yang dibutuhkan oleh frame belum dibuat atau tidak ditemukan. Oleh karena itu lengkapi file-file sebagai berikut:
File header.html
<html>
<head>
</head>
<body>
<h1>Selamat Datang........</h1>
<h3>Di WEBsite Arif Jainuri.</h3>
</body>
</html>
File kiri.html
<html>
<head>
</head>
<body>
<h2>Daftar Isi</h2><hr>
<a href=kanan.html target=kanan>Isi Awal</a><br>
<a href=bab1.html target=kanan>Bab 1</a><br>
<a href=bab2.html target=kanan>Bab 2</a><br>
</body>
</html>
File kanan.html
<html>
<head>
</head>
<body>
<h2>Ini isi frame awal di frame kanan</h2><br>
<h3>Untuk latihan pembuatan frame</h3>
</body>
</html>
File bab1.html
<html>
<head>
</head>
<body>
<h2>Ini isi frame Bab 1</h2>
Isi Bab 1 di frame kanan
</body>
</html>
File bab2.html
<html>
<head>
</head>
<body><font color=blue>
<h2>Ini isi frame Bab 2</h2>
Isi Bab 2 di frame kanan
</body>
</html>
Maka hasil dari kode-kode tersebut adalah:
Untuk gambar lebih jelasnya klik saja gambarnya...
Untuk mengubah kode-kode tersebut menjadi halaman web siahkan klik DI SINI
Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH
EmoticonEmoticon