<html>
<Head>
<title> Belajar Web </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="halaman">
<div id="judul">
<center><h1> Pemrograman Web </h1></center>
</div>
<center><h3 class="subjudul"> Data Mahasiswa </h3></center>
<div id="konten">
<div class="kiri">
<p align="left"> Ini Halaman Kiri </p>
</div>
<div class="tengah">
<center>
<table border="1">
<tr>
<th> Nama </th>
<th> Alamat</th>
<th> Kota </th>
<th> Umur </th>
</tr>
<tr>
<td> ....... </td>
<td> ....... </td>
<td> ....... </td>
<td> ....... </td>
</tr>
</table>
</center>
</div>
<div class="kanan">
<p> Ini halaman Kanan </p>
</div>
<div class="footer">
<p align="center">All Reserved 2014 </p>
</div>
</div>
</body>
</html>
Kemudian dilanjutkan dengan membuat file css nya, simpan nama file css nya dengan nama style.css berikut file css nya :
#halaman{
width:100%;
height:100px;
margin:0 auto;
padding:0 auto;
}
#judul{
width:100%;
height:100px;
background:#5f9ea0;
margin:0;
padding:0;
}
#konten{
width:100%;
height:300px;
float:left;
background:#fdf5e6;
}
.kiri{
width:25%;
height:300px;
float:left;
background:#add8e6;
}
.tengah{
width:50%;
height:300px;
float:left;
background:#fdf5e6
}
.kanan{
width:25%;
height:300px;
float:right;
background:#add8e6
}
.footer{
height:40px;
background:#8fbc8f;
clear:both;
}
.judul{
color:red;
padding:10px 0 0 10px;
}
.subjudul{
color:blue;
padding:0 0 0 0;
}
EmoticonEmoticon
Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.