how to make a frameset in html

pada tanggal


Cara Membuat Frame HTML Mengunakan Kode HTML


Cara Membuat Frame HTML


Cara Membuat Frame HTML - Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian. Setiap bagian kita isi dengan sebuah halaman web yang sesuai. Keuntungan dari penggunaan frame adalah mudahnya pengaturan hubungan antar satu halaman dengan halaman lainnya.

Frame dapat digunakan untuk berbagai macam keperluan, antara lain:
1. Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya
2. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isis dokumen
3. Membuat suatu dokumen tanya jawab, dll.

Cara Membuat Frame HTML

Untuk membuat halaman web yang menggunakan frame kita perlu membuat beberapa file html, yaitu:
  • Sebuah pendefinisi file. File tersebut kita butuhkan untuk menampilkan halaman web dengan bentuk frame

    •
  • Beberapa file pengisi frame, yang jumlahnya tergantung dari berapa bagian yang akan kita buat pada frame tersebut


Sama halnya seperti membuat tabel, dalam mendefinisikan frame, hal pertama yang harus dilakukan adalah mendefinisikan dahulu bentuk frame yang akan dibuat, misalnya bentuk frame pada contoh berikut:

Untuk filennya anda bisa lihat seperti di bawah ini:


Berikut ini pembuatan tabel.html

Save dengan nama tabel.html

<!DOCTYPE html>
<html>
<head>
 <title>Tabel</title>
</head>
<body>
 <style>
  tbody > tr:nth-child(2n+1) > td, tbody > tr:nth-child(2n+1) > th {
   
  }
  table{
   width           : 70%;
   margin          : auto;
   border-collapse : collapse;
   box-shadow      : darkgrey 3px;
  }
  thead tr {
   background-color: #36c2ff;
  }
 </style>
 <center><h2>Tabel Mahasiswa</h2></center>
 <p>Ini adalah contoh tabel mahasiswa. Biodata mahasiswa fakultas ilmu komputer kelas bk14 angkatan 2014 Universitas indonesia Timur yang terdiri dari nomor, stambuk, nama mahasiswa,kelas mahasiswa, jurusan</p>
 

 <table width="600" border="1">
  <tr bgcolor="#36c2ff">
   <th align="center">No</th>
   <th valign="middle">Nim</th>
   <th valign="middle">Nama</th>
   <th align="center">Kelas</th>
   <th>Jurusan</th>
  </tr>
  <td align="center">1</td>  
  <td valign="middle">14.1401.081</td>
  <td align="center">Putu Ariana</td>
  <td align="center">Bk14</td>
  <td align="center">Teknik Informatika</td>
  <tr bgcolor="magenta">
   <td valign="middle">2</td>
   <td valign="middle">14.1401.011</td>
   <td valign="middle">Ayu</td>
   <td valign="middle">Hk14</td>
   <td valign="middle">teknik Informatika</td>
  </tr>
  <tr bgcolor="#36c2ff">
   <td align="center">3</td>
   <td align="center">14.1401.080</td>
   <td align="center">NI kadek tika</td>
   <td align="center">Ck14</td>
   <td align="center">teknik Informatika</td>
  </tr>
 </table>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:





Dan untuk pembutan listnya scripnya ada dibawah ini:

Save dengan Nama List.html



<!DOCTYPE html>
<html>
<head>
 <title>List</title>
</head>

<body bgcolor="#36c2ff">
 <ul>
  <h3><li>Contoh List</h3></li>
  <ol type="a">
   <b><li>Ordered List (Set dengan huruh dan angka remawi)</li></b>
   <ul>
    <li>Ordered List dengan huruf</li>
   </ul>
   <ol type="a">
    <li>nasi goreng</li>
    <li>Bakso</li>
    <li>panngsit</li>
   </ol>
   <br />
   <ul>
    <li>Ordered List dengan angka remawi</li>
   </ul>
   <ol type="I">
    <li>nasi goreng</li>
    <li>Bakso</li>
    <li>panngsit</li>
   </ol>
   <br />
   <b><li>Unordered list (Set dengan simbol yang lain) </li></b>

   <br />
   <ul type="disc">
    <li>Contoh Simbol Unorderd</li>
   </ul>
   <br />
   <ul type="circle">
    <li>pascal</li>
    <li>C++</li>
    <br />
   </ul>
   <ul type="square">
    <li>html</li>
    <li>css</li>
   </ul>
   <br />
   <ul type="disc">
    <li>html</li>
    <li>css</li>
   </ul>
   <br />
   <b><li>Defenition List</li></b>
   <br />
   <dl>
    <dt>facebook.com</dt>
    <dd>google.com</dd>
    <dt>twiter.com</dt>
    <dd>bbm</dd>
   </dl>
  </ol>
 </ul>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:



Kemudian untuk framesetnya scripnya bisa di lihat di bawah ini:

Untuk menyimpan frameset anda save dengan nama index.html








<!DOCTYPE html>



<html>



   <frameset cols="35%,65%" border="5%">



    <frame name="list" src="list.html">



    <frame name="tabel" src="Tabel.html">



   </frameset>



 </html>
Berikut penampakannya jika dijalankan melalui browser:
BURUNG IRIAN
BURUNG CENDERAWASIH
CUKUP SEKIAN
TERIMA KASIH

Komentar

Posting Komentar