Pengertian Frameset
Bentuk-Bentuk Frameset :
a. Frame kolom adalah frame yang menampilkan informasi dalam sebuah web browser dalam bentuk kolom.
b. Frame baris adalah frame yang menampilkan informasi dalam sebuah web browser dalam bentuk baris.
c. Frame campuran adalah frame yang menampilkan informasi dalam sebuah web browser dalam bentuk baris dan kolom
d. Frame navigasi adalah frame yang menampilkan informasi dalam sebuah web browser dengan target link pada frame kedua atau yang lainnya.
e. Frame inline adalah frame yang menampilkan informasi dalam sebuah web browser {frame dalam sebuah page web / halaman web}.
Baik langsung saja disini saya akan memberikan sebuah coding untuk membuat frameset sederhana. Disini saya menggunakan NetBeans IDE 8.2. Buatlah project dan simpan pada disk C:xampp/htdocs/buatfolder(bebas). Simpan dengan nama index.php. Kemudian buat satu file lagi dengan nama style.css. Simpan pada folder css, didalam folder yang sudah anda buat tadi. File index berfungsi untuk menamppilkan sebuah halaman web, jadi misalkan anda mau membuka file website anda, fille inilah yang harus anda buka. Dan untuk file css berfungsi untuk mengedit halaman index. Oke gan, langsung saja kita ke codingnya ya...
Coding : index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel websiteku</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body >
<div class="header">
<h1>PEMROGAMAN WEB</h1>
</div>
<div class="main">
<div class="kiri">
<h3>Menu:</h3>
<ul>
<li><a href="#">HTML</li>
<li><a href="#">PHP</li>
<li><a href="#">CSS</li>
<li><a href="#">JAVA</a></li>
</ul>
</div>
<div class="tengah">
<h1><a>SISTEM INFORMASI</a></h1>
<p>Nama : Burhanuddin Yusuf Iqbal</p>
<p>NIM : 5160311016</p>
<p>Email :<a href="#"> Burhanuddinyi@gmail.com</a></p>
<p>Copyright@2018</p>
</div>
<div class="footer">
<h1><a>UNIVERSITAS TEKNOLOGI YOGYAKARTA</a></h1>
</div>
</body>
</html>
coding: style.css
html, body{
height: 100%;
}
.header{
height: 20%;
width:100%;
background: orange;
text-align: center; color: pink;
font-size: 40px;
display: table;
font-family: sans-serif;
}
.main{
height: 50%;
width: 100%;
margin: 0;
padding: 0;
}
.main .kiri{
width: 30%;
height: 100%;
float: left;
background: lawngreen;
text-align: justify;
font-size: 20px;
}
.main .kiri h3{
text-align: center;
color: blue;
}
.main .tengah{
width: 70%;
height: 100%;
float: right;
background: red;
text-align: center; color: wheat;
font-size: larger;
}
.footer{
width: 100%;
height: 30%;
background: yellow;
text-align: center; color: blue;
clear: both;
font-size: 30px;
display: table;
}
Berikut adalah hasil runningnya:
Oke, cukup sekian gan. Semoga bermanfaat. Tunggu episode selanjutnya ya. Sampai jumpa. Dadaaaa...
Tulisan yang saya buat berasal dari berbagai sumber, dan apabila ada konten copy paste akan saya sertakan sumbernya. Jika ada komplain silahkan hubungi saya. Terimakasih...
ConversionConversion EmoticonEmoticon