» » Membuat Templat Web Teknik Frame Sederhana

Membuat Templat Web Teknik Frame Sederhana

Bookmark and Share
Membuat web menggunakan teknik frame bukan hal yang baru, bahkan kebanyakan dari web yang berbasis html memakai teknik frame ini, Keunggulan dari pemakain teknik frame adalah, dari satu index saja, kita bisa mengimpletasikan banyak halaman, tampa harus pindah ke halam yang kita tuju
Penulisan script frame kurang lebih seperti ini
 
<frameset rows="*,*" cols="*" framespacing="0" frameborder="NO" border="0">
  <frame src="frame1.htm" name="topFrame" scrolling="NO" noresize>
  <frame src="fram2.htm" name="mainFrame">
</frameset>

Untuk contoh frame sederhana dan langkah - langkah pembuatan nya bisa di lihat dibawah ini
1. Buat file index.html
Scriptnya sebagai berikut

<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <frameset rows="90,*" cols="*" framespacing="10" frameborder="yes" border="10" bordercolor="#000000">   <frame src="atas.htm" name="topFrame" scrolling="NO" noresize>   <frameset rows="*" cols="146,*" framespacing="20" frameborder="yes" border="20" bordercolor="#000000">     <frame src="kiri.htm" name="leftFrame" scrolling="NO" noresize>     <frame src="main.htm" name="Frameutama">   </frameset> </frameset> <noframes><body> </body></noframes> </html>

2. Buat file atas.htm (untuk header web)

 <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #0000FF;
}
body {
    background-color: #CCCCCC;
}
-->
</style>
</head>
<body>
 <h2 align="center" class="style1">FRAME SCRIPT </h2>
</body>
</html>

3. Buat file kiri.htm

 <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    background-color: #999999;
}
.style1 {font-family: Geneva, Arial, Helvetica, sans-serif}
.style2 {
    color: #0000FF;
    font-weight: bold;
    font-size: 36px;
    font-family: Verdana;
}
-->
</style></head>

<body>
 <p align="center"><a href="artikel1.htm" target="Frameutama" class="style1">Artiekel 1 </a></p>
 <p align="center"><a href="artikel2.htm" target="Frameutama" class="style1">Artiekel 2 </a></p>
</body>
</html>

4. Buat file Main.htm (tempat untuk menampilkan artikel)

 <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
</body>
</html>

5. Buat file artikel1.htm (file ini yang akan di tampilkan pada halaman utama web)

 <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<p>script frame sangant membantu dalam menciptakan suatu web statik yang sangat menarik</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p><br>
  |</p>
<p>|</p>
<p>script frame sangant membantu dalam menciptakan suatu web statik yang sangat menarik</p>
<p>|</p>
<p><br>
|</p>
<p>|</p>
<p>|</p>
<p>script frame sangant membantu dalam menciptakan suatu web statik yang sangat menarik </p>
</body>
</html>

6. Buat file artikel2.htm (halam kedua yang akan di tampilkan pada web)

 <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<p>Membuat frame menggunakan html bagian kedua </p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>Membuat frame menggunakan html bagian kedua </p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>Membuat frame menggunakan html bagian kedua </p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>Membuat frame menggunakan html bagian kedua </p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>Membuat frame menggunakan html bagian kedua </p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp; </p>
<p>Membuat frame menggunakan html bagian kedua </p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>Membuat frame menggunakan html bagian kedua </p>
</body>
</html>

Simpan file dalam folder yang sama, kemudian jalankan index.htm
- Label: -

{ 1 komentar... Views All / Post Comment! }

Anonim mengatakan...

ajiiibb mantab boseee

3 Agustus 2012 pukul 01.00


Posting Komentar