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….!!!

Advertisements

Membuat Halaman Web dengan Table

Kali ini kita mencoba buat halaman website dengan table. Yap, biasanya table kita gunakan saat ingin menampilkan sebuah data kan? Yang ini lain, kita coba mendesain sebuah halaman website dengan table.

Rencananya kita akan membuat tampilan website seperti ini :

screenshot

Untuk awalnya, kita buat sebuah folder untuk menyimpan halaman website maupun gambar yang akan digunakan. Folder tersebut berisi sebuah gambar bernama cover.jpg dan sebuah halaman website bernama home.html.

Home.html inilah yang akan menjadi tempat kita mendesain halaman web. Berikut source code nya :

 

<html>
<head> <title>Home </title></head>
<body align=”center” >

<table align=”center” height=”200″ width=”900″>
<tr>
<td background=”cover.jpg” width=”900″ height=”200″>
</td>
</tr>
</table>

<table align=”center” width=”900″ height=”400″>
<tr>
<td bgcolor=”#BFE3FE” valign=”top”><p><br><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>
</td>
<td width=”700″ valign=”top”><p><br>
<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
</td>
</tr>
</table>

<table align=”center” width=”900″ height=”50″>
<tr align=”center” bgcolor=”#80C8FE”>
<td><a href=”http://www.facebook.com”>Facebook</a></td&gt;
<td><a href=”http://www.twitter.com”>Twitter</td&gt;
<td><a href=”http://www.instagram.com”>Instagram</td&gt;
</tr>
</table>

</body>
</html>

Selamat mencoba ya…..