Pem. WEB – contoh layout web sederhana dengan Frame


frameweb
screenshot outputnya

berikut script yang harus dibuat:

index.html
<html>
<head>
<title>Ah. Handoyo[1412110156]</title>
</head>
<frameset rows=”20%,*” cols=”*” framespacing=”0″ border=”1″>
<frame src=”header.html” noresize=”noresize”/>
<frameset rows=”*” cols=”20%,*” framespacing=”0″ border=”1″>
<frame src=”menu.html” noresize=”noresize”/>
<frameset rows=”100%,*” cols=”*” framespacing=”0″ border=”1″>
<frame name =”content” src=”content.html” noresize=”noresize”/>
</frameset>
</frameset>
</frameset>
</html>

header.html
<html>
<head><title>Header</title></head>
<body>
<table border=”20″ align=”center”>
<tr><td><font size=”7″ color=”violet”>WWW.KOSONGAN.COM</font></td></tr>
</table>
</body>
</html>

menu.html
<html>
<head><title>Ini adalah file menu halaman web</title>
<base target=”content”>
</head>
<body>
<table border=”1″ cellpadding=”0″ cellspacing=”0″ align=”center”>
<tr><td bgcolor=”orange” width=”20%” align=”center”><font size=”7″><a href=”content.html”>Beranda</a></font></td></tr>
<tr><td bgcolor=”orange” align=”center”><font size=”7″><a href=”profile.html”>Profil</a></font></td></tr>
<tr><td bgcolor=”orange” align=”center”><font size=”7″><a href=”kontak.html”>Kontak</a></font></td></tr>
</table>
</body>
</html>

content.html
<html>
<head><title>Ini adalah file content halaman web</title></head>
<body bgcolor=”#e0e0e0″>
<div style=”padding:10px;margin:10px;”>
<h1>HALAMAN BERANDA</h1>
</div>
</body>
</html>

profile.html
<html>
<head><title>Profil</title></head>
<body bgcolor=”sky blue”>
<div style=”padding:10px;margin:10px;”>
<h1>HALAMAN PROFILE</h1>
Informasi Profil
</div>
</body>
</html>

kontak.html
<html>
<head><title>Kontak</title></head>
<body bgcolor=”sky blue”>
<div style=”padding:10px;margin:10px;”>
<h1>HALAMAN kontak</h1>
Informasi kontak
</div>
</body>
</html>

save semua file dalam satu folder dan hasilnya seperti gambar di atas… kalau belum faham di tanyakan bisa di comment🙂


One thought on “Pem. WEB – contoh layout web sederhana dengan Frame

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s