Frame adalah suatu cara membagi jendela browser dalam beberapa sub jendela yang lebih kecil, masing-masing menampilkan dokumen HTML berbeda. Seperti sebuah buku lengkap dengan daftar isinya.
Di sebelah kiri merupakan menu, jika diklik akan tampil di sebelah kanan (background putih).
Sebelum membahas cara pembuatan Frame dan Form dalam HTML, mari kita ketahui dahulu kelebihan dan kekurangan penggunaan Frame.
Kelebihan penggunaan Frame:
- Anda dapat membuat suatu bagian halaman yang tidak dapat digerakkan (di-scroll)
- Dapat digunakan untuk membangun halaman web yang memerlukan navigasi cepat, seperti buku dan daftar isinya
- Dengan menggunakan tag <noframe>, anda dapat dengan mudah menambahkan content alternatif untuk browser browser yang tidak mendukung frame
Kekurangan penggunaan Frame:
- Tidak semua browser mendukung frame, terutama browserlama
- Penggunaan frame membuat pengembangan situs web lebih sulit karena anda harus membuat dan mengatur banyak file untuk mengisi satu halaman
- Pengunjung tidak dapat mem-bookmark suatu halaman dalam frame
Buka Notepad, lalu Copy Paste Kode berikut: (Simpan semua file dalam 1 folder).
1. Membuat File utama, simpan dengan nama utama.html
<html>2. Membuat File Header, simpan dengan nama header.html
<head>
<title> Membuat Form dan Frame </title>
</head>
<frameset rows="40%,*" border="0">
<frame name="atas" scrolling="no" src="header.html" />
<frameset cols="20%,*">
<frame name="menu" scrolling="no" src="menu.html" />
<frame name="isi"/>
</frameset>
</frameset>
<body>
</body>
</html>
Sebelum Copy Paste kode berikut, pastikan sudah menyiapkan gambar, rename gambar yang dijadikan header dengan nama hd.jpg. Dan pastikan menyimpannya dalam 1 folder.
<html>3. Membuat File Menu, simpan dengan nama menu.html
<head>
</head>
<body bgcolor="green">
<center> <img src="./hd.jpg"> </center>
</body>
</html>
<html>4. Membuat File Selamat Datang, simpan dengan nama slmt dtg.html
<head>
</head>
<body bgcolor="#ffffa1">
<a href = "slmt dtg.html" target="isi">Selamat Datang </a>
<br>
<a href = "form.html" target="isi">Form </a>
</body>
</html>
<html>5. Membuat Form, simpan dengan nama form.html
<head>
</head>
<body>
<b>Selamat Datang di percobaan frame HTML</b>
<br>
Ini adalah contoh sederhana.
</body>
</html>
<html>
<head>
</head>
<body>
<b>FORM</b>
<br> <br>
<table>
<form name="form" method=post>
<tr><td>Nama</td><td> = </td><td><input type=text name="nama"></td></tr>
<tr><td>Bulan</td><td> = </td><td><select name="tanggal">
<option value="Januari">Januari</option>
<option value="Febuari">Febuari</option>
<option value="Maret">Maret</option>
<option value="April">April</option></td></tr>
<tr><td>Jenis Kelamin</td><td>=</td><td><input type=radio name="jk" value="lakilaki">Laki-laki</td>
<tr><td> </td><td> </td><td><input type=radio name="jk" value="perempuan">Perempuan</td>
<tr><td>Hobi</td><td>=</td><td><input type=checkbox name="hobi" value="makan">makan</td></tr>
<tr><td></td><td></td><td><input type=checkbox name="hobi" value="minum">minum</td></tr>
<tr><td></td><td></td><td><input type=checkbox name="hobi" value="tidur">tidur</td></tr>
<tr><td>Foto</td><td>=</td><td><input type=file name="foto"></td></tr>
<tr><td></td><td></td><td><input type=submit name="Daftar" value="Daftar">
<input type=reset name="Hapus" value="Hapus"></td></tr>
</form>
</table>
</body>
</html>
Jika tidak mau repot Copy Paste kode, silahkan langsung download semua file disini. Extract dahulu semua filenya, kemudian buka utama.html.
No comments:
Post a Comment
Berkomentarlah yang bijak. Komentar anda mencerminkan kehidupan anda.