Membuat Frame pada HTML

frame

Untuk membuat Frame seperti pada layout di atas, kita cukup membuat beberapa source code HTML seperti berikut :

Yang pertama kita harus membuat file yang diberi nama frame.html

<html>

<head>

<title>Pemrograman Web</title>

</head>

<frameset cols=”30%,*”>

<frame src=”menu1.html”>

<frame src=”content1.html”>

</frameset>

</html>

Dari source code di atas kita belum bias akses apa-apa tanpa harus membuat dahulu dua file yang terdapat pada source tersebut. Yaitu menu1.html dan content1.html

<html>

<head>

<title>Praktikum Pemrograman Web</title>

</head>

<body>

<ol>

<h2>Contoh Dari isi Frame</h2>

<li><a href=”StyleHuruf”>Style huruf</a></li>

<li><a href=”table1.html”>Table1</a></li>

<li><a href=”table2.html”>Table2</a></li>

<li><a href=”table3.html”>Table3</a></li>

</ol>

</body>

</html>

Content1.html

<body>

<h2>Search Engine</h2>

<ol>

<li><a href=”google.com”>Google</a></li>

<li><a href=”yahoo.com”>Yahoo</a></li>

<li><a href=”ask.com”>ASK.com</a></li>

<li><a href=”dogpile.com”>Dogpile</a></li>

<li><a href=”id.wikipedia.com”>Wikipedia</a></li>

<li><a href=”livesearch.com”>LiveSearch</a></li>

</ol>

</body>

Setelah membuat menu1.html dan content1.html, lalu kita membuat file-file yang di panggil pada menu1 tersebut. Yaitu adanya table1.html, table2.html, dan table3.html :

Table1.html

<html>

<title>Table1</title>

<body><div align=center>

<p>Dalam HTML:<br>table ditandai debngan tag table

<br>Baris ditandai dengan tag tr

<br>Table ditandai dengan tag td

<br><h4>Membuat 1 kolom</h4>

<table border=”1″>

<tr>

<td>Teknik Informatika</td>

</tr>

</table>

<h4>1 baris dengan 3 kolom</h4>

<table border=”2″>

<tr>

<td>komputer</td>

<td>internet</td>

</td>

<td>web</td>

</tr>

</table>

<h4>2 baris 3 kolom</h4>

<table border=”3″>

<tr>

<td>PHP</td>

<td>javascript</td>

<td>AJAX</td>

</tr>

<tr>

<td>joomla</td>

<td>Drupal</td>

<td>Mamboo</td>

</tr>

</table>

</div>

</body>

</html>

Table2.html

<html>

<title>Table2</title>

<body>

<div align=center>

<h4>2 kolom di dalam 1 baris</h4>

<table border=”1″>

<tr>

<th>Nama</th>

<th colspan=”2″>Kontak</th>

</tr>

<tr>

<td>Fitri</td>

<td>085646966692</td>

<td>081325299933</td>

</tr>

</table>

<h4></h4>

<table border=”1″>

<tr>

<td>Nama</td>

<td>Fitri</td>

</tr>

<tr>

<th rowspan=”2″>Kontak</th>

<td>085646966692</td>

</tr>

<tr>

<td>081325299933</td>

</tr>

</table>

</div>

</body>

</html>

Table3.html

<html>

<title>Table3</title>

<body>

<div align=center>

<table border=”1″>

<tr>

<td><p>TeknikInformatika</p>

<p>Pemrograman Web Plug 2</p>

</td>

<td>Table Cell:

<table border=”1″>

<tr>

<td>Saya</td>

<td>Kamu</td>

</tr>

<tr>

<td>Anda</td>

<td>Dia</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>Cell List

<ul>

<li>Windows</li>

<li>Linux</li>

<li>PCBSD</li>

<li>Solaris</li>

</ul>

</td>

<td>

<ol>

<li>Ubuntu</li>

<li>Kubuntu</li>

<li>Edubuntu</li>

<li>Nubuntu</li>

<li>Gobuntu</li>

</ol>

</td>

</tr>

</table>

</div>

</body>

</html>

Setelah semua file dibuat hasilnya akan seperi berikut :

1

Jika pada menu Table1 di klik maka akan muncul seperti berikut ini :

2

Jika pada menu Table2 di klik maka akan muncul seperti berikut ini :

3

Jika pada menu Table3 di klik maka akan muncul seperti berikut ini :

4

Untuk selanjutnya, silahkan mencoba sendiri di rumah ya…

Advertisement