Berhubung saya tidak bgitu suka menggunakan frame untuk membuat template web maka dari itu pada akhirnya saya memberikan sedikit ilmu yang pernah saya pelajari, yaitu membuat template web menggunakan html dan css. Cara ini sebenarnya tidak terlalu sulit, cukup dengan memahami struktur dari web tersebut maka kita bisa menentukan layout tersebut dan siap untuk build layout. Perhatikan gambar berikut.
Nah dari gambar di atas maka kita bisa simpulkan bahwa pada umumnya web itu pasti memiliki elemen dibawah ini
1. Header
2. Kontent
3. Sidebar
4. Footer
Untuk membuat halaman seperti gambar di atas maka kita harus membuat file index.html ataupun index.php dan 1 file tambahan yaitu css nah untuk mencoba silahkan copy scrip dibawah ini dan paste di notepad++ kemudian simpan dengan nama index.html.
</p>
<html>
<title>halaman index</title>
<head>
<link rel="stylesheet"type="text/css"href="css.css">
</head>
<body>
<div id="wrapper">
<div id="header"></p>
</div>
<div id="page">
<div id="konten"></p>
<form action="proses.php"method="POST">
<table width="300"bgcolor="#f1f1f1"align="center"></p>
<tr>
<td>Tanggal</td>
<td>:</td>
<td><input type="text"name="tanggal"placeholder="Input Date Here"></td>
</tr>
<tr>
<td>Judul</td>
<td>:</td>
<td><input type="text"name="judul"placeholder="Input Title Here"></td>
</tr>
<tr>
<td>Konten</td>
<td>:</td>
<td><input type="text"name="konten"placeholder="masukan konten anda di sini"name="konten"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="submit"value="simpan">
<input type="submit"value="edit">
</td>
</tr>
</table>
</form></p>
</div>
<div id="sidebar">
<?php include "menu.php"; ?>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
<p style="text-align: justify;"><span style="line-height: 1.714285714; color: #444444; font-size: 1rem;">
<html>
<title>halaman index</title>
<head>
<link rel="stylesheet"type="text/css"href="css.css">
</head>
<body>
<div id="wrapper">
<div id="header"></p>
</div>
<div id="page">
<div id="konten"></p>
<form action="proses.php"method="POST">
<table width="300"bgcolor="#f1f1f1"align="center"></p>
<tr>
<td>Tanggal</td>
<td>:</td>
<td><input type="text"name="tanggal"placeholder="Input Date Here"></td>
</tr>
<tr>
<td>Judul</td>
<td>:</td>
<td><input type="text"name="judul"placeholder="Input Title Here"></td>
</tr>
<tr>
<td>Konten</td>
<td>:</td>
<td><input type="text"name="konten"placeholder="masukan konten anda di sini"name="konten"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="submit"value="simpan">
<input type="submit"value="edit">
</td>
</tr>
</table>
</form></p>
</div>
<div id="sidebar">
<?php include "menu.php"; ?>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
<p style="text-align: justify;"><span style="line-height: 1.714285714; color: #444444; font-size: 1rem;">
Kedua silahkan kopi kode css dibawah ini paste di notepad++ dan beri nama dengan css.css pada folder yang sama dengan file index kemudian jalankan file index.html menggunakan browser sobat masing-masing.
body{
background: #f1f1f1;
}
#wrapper{
background: #f1f1f1;
border: 1pxsolidblack;
width: 960px;
margin: 0pxauto;
height: auto;
}
#header{
background: white;
width: 940px;
margin: 0pxauto;
height: 100px;
margin-top: 10px;
}
#page{
background: blue;
border: 1pxsolidblack;
width: 940px;
height: 400px;
margin:0pxauto;
margin-top:10px;
margin-bottom: 10px;
}
#konten{
background: black;
width: 630px;
margin: 0pxauto;
float: left;
height: auto;
}
#sidebar{
background: red;
float: right;
width: 300px;
margin: 0pxauto;
}
#footer{
background: black;
margin: 0pxauto;
width: 940px;
height: 30px;
}
background: #f1f1f1;
}
#wrapper{
background: #f1f1f1;
border: 1pxsolidblack;
width: 960px;
margin: 0pxauto;
height: auto;
}
#header{
background: white;
width: 940px;
margin: 0pxauto;
height: 100px;
margin-top: 10px;
}
#page{
background: blue;
border: 1pxsolidblack;
width: 940px;
height: 400px;
margin:0pxauto;
margin-top:10px;
margin-bottom: 10px;
}
#konten{
background: black;
width: 630px;
margin: 0pxauto;
float: left;
height: auto;
}
#sidebar{
background: red;
float: right;
width: 300px;
margin: 0pxauto;
}
#footer{
background: black;
margin: 0pxauto;
width: 940px;
height: 30px;
}
Nah selesai mudah bukan untuk membuat template web, mudah mudahan bermanfaat bagi sobat , apabila sobat masih kurang jelas silahkan bisa di Search Google …
Terimakasih..
No comments:
Post a Comment