Jumat, 15 Februari 2013

Membuat frame



”Ilmu yang kau pelajari hendaknya harus berguna bagi orang lain, dan sebarkanlah ilmu itu kepada mereka yang bersungguh-sungguh ingin belajar”.

Nah…, karena itulah… munafik rasanya jika sedikit pengetahuan yang kumiliki ini tidak aku kabarkan. Walau aku bukan seorang ahli, tapi tidak ada salahnya jika saya yang newbi berbagi pengetahuan.

Baiklah, langsung saja ikuti langkah-langkah di bawah ini:

Buat form header
Untuk tampilan frame atas
Tulis coding ini:

<html>
<head>
<title></title>
</head>
<body bgcolor="black">
<br>
<h2 ><font color="red">.::: Aku yakin ilmu yang kupelajari kelak akan berguna untuk orang lain :::.</font></h2>
</body>
</html>

Buat form menu
Untuk tombol yang ketika di klik akan dibawa kearah tampilan yang diinginkan
Tulis coding ini:

<html>
<head>
<title></title>
</head>
<body bgcolor="#gdddd">
<! - - membuat table - - >
<table border=2>
<tr >
<! - - Memberikan kalimat diatas table dengan caption - - >
            <caption align="top"><u>Pilih yang anda sukai</u></caption>
<! - - Membuat baris tabel dengan nama home - ->
            <th width=134><a href="tampilan.html" target="tampilan">Home</a></td>
</tr>
<tr>
<! - - a href adalah mengambil dari from lain - - >
<! - - target adalah tujuan tampilan -  - >
            <td><a href="badak.html" target="tampilan"><font size=4>Badak<font></a></td>
</tr>
<tr>
            <td><a href="gajah.html" target="tampilan"><font size=4>Gajah<font></a></td>
</tr>
</table>
</body>
</html>

Buat form tampilan
Hanya untuk menampilkan tampilan awal diframe saja
Ini codingnya:

<html>
<head>
<title></title>
</head>
<body>
<br>
<font color="green" size="44">Selamat datang di situs kebun binatang .....</font><br>
<font size="5">Klik tombol sebelah kiri untuk memilih...!</font>
</body>
</html>

Buat form badak
Ini adalah tampilan gambar
Disini saya menampilkan gambar didalam table.
Ini codingnya:

<html>
<head>
<title></title>
</head>
<body>
<table align=center border=1>
<tr>
 <td align="center">
<img src="badak.jpg" width="370" height="500">
</td>
</tr>
</table>
</body>
</html>

Buat form gajah
Ini codingnya:

<html>
<head>
<title></title>
</head>
<body>
<table align=center border=1>
<tr>
 <td align="center">
<img src="gajah.jpg" width="370" height="500">
</td>
</tr>
</table>
</body>
</html>

Tahap terakhir buat frame
Tulis coding ini:

<html>
<head>
<title>Latihan menggunakan frame</title>
</head>
<! - - membuat frame di buka dengan framset dan frame untuk tujuan - ->
<! - - noresize untuk mengunci -- >
<frameset rows=100,*>
            <frame src="header.html" name="header" noresize>
            <frameset cols=174,*>
            <frame src="menu.html" name="menu">
            <frame src="tampilan.html" name="tampilan">
            </frameset>
            </frameset>
<body>
</body>
</html>

Nah.., setelah semua coding diatas telah ditulis…
















Dan jika di klik tombol sebelah kiri dengan kata badak:

















Untuk tombol Gajah, ini tampilannya:
















Oke…, cukup sekian…
Semoga ini bisa berguna…
Selamat belajar…...
 

 

Tidak ada komentar:

Posting Komentar