Dalam pembahasan sebelumnya saya berbagi cara membuat web statis sederhana dengan sistem copy paste maka kali ini saya akan membahas hal yang sama tetapi dengan model iframe, jadi benar-benar hanya bagian tertentu yang berubah, bukan semuanya seperti pada sistem copy paste.

  • Secara kerangka dasar script yang kita buat sama seperti kemarin

    Gambar 01

    Gambar 01

  • Sebelumnya silahkan lihat cara copy code, anda cukup klik dari tombol yang sudah tersedia :

  • Langkah Pertama copy code di bawah ini dan paste pada notepad, lebih bagus pergunakan notepad++, yang belum punya bisa silahkan unduh di sini . simpan file dengan nama index.html.

<body>

<table width="100%" height="450">
<tr>
<td colspan="2" bgcolor="gold" height="100">
<center><h1>WEB SEDERHANA</h1></center>
</td>
</tr>
<tr>
<td valign="top" bgcolor="aqua" width="20%">
Menu :<br />
<ul>
<li><a href="home.html" target="tampil">Home</a></li>
<li><a href="profil.html" target="tampil">Profil</a></li>
<li><a href="gambar.html" target="tampil">Gambar</a></li>
</ul>
</td>
<td valign="top" bgcolor="pink" width="80%">

<iframe   src="home.html" name="tampil" width="100%"
height="100%" border="0">
</iframe>

</td>
</tr>
<tr>
<td colspan="2" bgcolor="black" align="center">
<font color="white">&amp;copy 2010
</font></td>
</tr>
</table>

</body>
  • Sekarang kita perhatikan uraian di bawah ini, yang dikotak ungu adalah sebuah iframe bisa dikatakan juga sebagai bingkai, itu berfungsi sebagai penampil dari hyperlink yang saya beri lingkaran warna pink. Nah syarat agar link yang kita klik tampil di iframe adalah dengan cara penamaan iframe. Dalam kasus ini saya menamai iframe dengan nama “tampil” (name=”tampil”), nama bisa apa saja ini hanya sebagai contoh saja. <a href=”home.html” target=”tampil”>Home</a> pada hyperlink kita berikan arah kemana dia mau terbuka, dalam hal ini kita arahkan ke iframe. Tadi kita telah memberi nama iframe tersebut dengan nama “tampil” maka pada target ketikkan nama target=”tampil”. src=”home.html” artinya secara default ketika halaman index.html dibuka maka yang akan tampil di iframe adalah halaman home.html. width dan height kita isi 100% adalah supaya dia bisa mengisi tabel secara penuh.

    Gambar 02

    Gambar 02

  • Langkah berikutnya adalah membuat halaman home.html, silahkan copy code di bawah ini pada notepad baru dan beri nama home.html :

<html>
<head>
<title>WEB SEDERHANA</title>
</head>

<body>

Selamat datang di web sederhana.
Selamat datang di web sederhana.
Selamat datang di web sederhana.
Selamat datang di web sederhana.
Selamat datang di web sederhana.
Selamat datang di web sederhana.
Selamat datang di web sederhana.
Selamat datang di web sederhana.
Selamat datang di web sederhana.
Selamat datang di web sederhana.
Selamat datang di web sederhana.

</body>

</html>
  • Selanjutnya membuat halaman profil.html, copy paste code di bawah ini pada notepad baru dan beri nama profil.html

<html>
<head>
<title>WEB SEDERHANA</title>
</head>

<body>

<ul>
<li>Nama</li>
<li>Tempat Tanggal Lahir</li>
<li>Jenis Kelamin</li>
<li>Agama</li>
<li>Pendidikan</li>
<li>Pekerjaan</li>
<li>Alamat</li>
</ul>

</body>

</html>
  • Terakhir membuat halaman gambar.html, copy paste code di bawah ini pada notepad baru dan berilah nama gambar.html, untuk gambar silahkan bereksperimen dengan gambar lain. Bisa foto sendiri, foto kartun atau apa, tapi ingat seperti pesan saya kemarin untuk penamaan file hindari penggunaan spasi. Jangan lupa pula mengganti nama file pada bagian <img src=”joko.jpg” border=”0″> dengan nama file foto anda, letakkan foto jadi satu dengan file index, home, profil dan gambar biar mudah dalam penampilan gambar.

<html>
<head>
<title>WEB SEDERHANA</title>
</head>

<body>

<img src="joko.jpg" border="0"/>

</body>

</html>

Sekarang jalankan file index.html dan cobalah klik menu-menu yang sudah ada, jika anda mengikuti instruksi dengan benar maka hyperlink akan tampil di bagian iframe, atau kanan tengah.

Nah mudah khan, silahkan bereksprimen, jika lancar anda hanya butuh waktu 5 menit untuk membuat sebuah web sederhana. Jika ada kesulitan silahkan tinggalkan komentar, secepat mungkin saya akan membantu anda

Tulisan Terkait