Membuat Halaman Website dengan Frame

Sudah lihat tutorial membuat halaman website dengan table saya ini?? Nah, saya mau tunjukin cara gimana buat halaman website dengan frame, serupa tapi beda ya…. Dengan rencana tampilan yang sama dengan halaman website yang sudah kita buat dengan table, seperti ini

frame

Bedanya kalau frame, ada 3 file html berbeda dan ada 1 buah file html untuk mendefinisikan 3 html yang lain. Kita buat 3 html dengan nama logo.html, isi.html dan list.html. Sedangkan file html untuk mendefinisikan frame kita beri nama iframe.html

Berikut source code nya :
1. Logo.html

<html>
<head>
<title></title>
</head>
<body background=”cover.jpg” width=”900″ height=”300″>
</body>
</html>

2. List.html

<html>
<head>
<title></title>
</head>
<body bgcolor=”#CCCCFF”>
<p><h3>Link Tutorial</h3>
<ul>
<li><a href=”http://www.w3schools.com”>W3 School</a></li><br>
<li><a href=”http://www.ilmukomputer.org”>Ilmu Komputer</a></li><br>
<li><a href=”https://xcode.or.id”>X-Code</a></li&gt;
</ul>
</body>
</html>

3. Isi.html

<html>
<head>
<title></title>
</head>
<body>
<h2>Sekapur Sirih</h2>
<p>Belajar membuat website tidak hanya dilakukan di lingkungan sekolah atau kampus. Kamu pun mampu belajar <i>coding</i> dirumah dengan membuka beberapa halaman website yang ada di sisi kiri halaman website ini.
<p>
Bermacam – macam sintak <i>coding</i> dengan berbagai bahasa ada di <a href=”http://www.w3schools.com”>W3 School</a>, buat kamu yang suka dengan hal-hal berbau Jaringan Komputer, Security bisa coba kunjungi <a href=”https://xcode.or.id”>X-Code</a&gt;. Lalu dokumentasi dalam bentuk pdf bisa juga dipelajari dari <a href=”http://www.ilmukomputer.org”>Ilmu Komputer</a>.<p>

Lengkap sudah, selamat belajar

</body>
</html>

 

Sedangkan File untuk Mendefinisikan 3 html diatas, kita buat iframe.html. Dengan source code berikut :

<html>
<head>
<title></title>
</head>
<frameset rows=”30%,*” border=”0″> //memberikan ukuran untuk logo.html
<frame name=”atas” src=”logo.html” />
<frameset cols=”20%,*”> //memberikan ukuran sisi sebelah kiri (link)
<frame name=”menu” scrolling=”no” src=”list.html” />
<frame name=”isi” src=”isi.html” />
</frameset>
</frameset>
</html>

4 buah file html dan image yang berkaitan disimpan dalam satu folder.

Ketika membuka, bukalah yang iframe.html ya…

Selamat mencobaaaa….!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s