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:
Sekian tutorial membuat frame dari saya semoga bermanfaat apabila kurang di mengerti mogo ditanyain....
makasih banget gan, mau langsung saya praktekin nih, thanks ya...
ReplyDeletesilahkan gan,,slamat mencoba.
DeleteTerima kasih banyak Mas, tulisannya sangat membantu.
ReplyDeleteBlog
sama2 bang,terimakasih atas kunjungannya,dan jangan lupa berkunjung kembali.
Deletebermanfaat . sangat membantu dan patut di contoh . jadilah pemuda yang sangat baik contohnya seperti mas ini :)
ReplyDeleteTerimakasih banyak, saya turut senang apabila ada merasa terbantu
Delete