• ..


Pada kesempatan kali ini, saya akan mencoba membuat tampilan halaman web seperti Facebook. Disini saya akan memanfaatkan penggunaan CSS. Akan tetapi, saat ini saya hanya akan membuat kerangkanya saja, untuk membuat isinya, prinsipnya sama dengan membuat kerangkanya.
Untuk tampilannya, silakan lihat dibawah :

 

Untuk tampilan di atas, kode htmlnya adalah seperti berikut:  
<!DOCTYPE html>
<html lang="en">
<head>
 <title>FaceTech</title>
 <style type="text/css">

 .header
 {
  background-color: #4c76cb;
  width: 1424px;
  height: 90px;
  color: white;
 }
 
 .background
 {
  height: 570px;
  background-image: url("http://i371.photobucket.com/albums/oo155/haqiphoenix/bg.jpg");
 }
 
 .footer
 {
  padding-top: 0px;
  background-color: #4c76cb;
  width: 1424px;
  height: 50;
 }
 
 .foot
 {
  padding-left: 20px;
  font-weight: bold;
  font-style: italic;
 }
 
 .gambar
 {
  padding-top: 80px;
  padding-left: 100px;
  width: 600px;
  height: 250px;
 }
 
 .gambarft
 {
  float: left;
  padding-top: 3px;
  padding-left: 100px;
 }
 
 .tabel
 {
  float: right;
  padding-top: 3px;
  padding-right: 100px;
 }
 
 .teks
 {
  padding-top: 50px;
  padding-left: 100px;
 }
 
 </style>

 <LINK REL="SHORTCUT ICON" HREF="http://i371.photobucket.com/albums/oo155/haqiphoenix/ft.png"/>
</head>
<body>
 <div class="header">
  <div class="gambarft">
   <img src="http://s371.photobucket.com/albums/oo155/haqiphoenix/?action=view&amp;current=face-tech.png" target="_blank"><img src="http://i371.photobucket.com/albums/oo155/haqiphoenix/face-tech.png" border="0" alt="Photobucket">
  </div>
  <div class="tabel">
   <table>
    <tr>
     <td>Email</td>
     <td>Sandi</td>
    </tr>
    
    <tr>
     <td><input type="text"></td>
     <td><input type="password"></td>
     <td><input type="submit" value="Masuk"></td>
    </tr>

    <tr>
     <td><input type="checkbox">Ingat Saya</td>
     <td><a href="#">Lupa Kata Sandi?</a></td>
     <td> </td>
    </tr>
   </table>
  </div>
 </div>
 <div class="background">
  <div class="teks">
   <img src="http://s371.photobucket.com/albums/oo155/haqiphoenix/?action=view&amp;current=teks.png" target="_blank"><img src="http://i371.photobucket.com/albums/oo155/haqiphoenix/teks.png" border="0" alt="Photobucket">
  </div>
  <div class="gambar">
   <img src="http://s371.photobucket.com/albums/oo155/haqiphoenix/?action=view&amp;current=PetaIndonesia.png" target="_blank"><img src="http://i371.photobucket.com/albums/oo155/haqiphoenix/PetaIndonesia.png" border="0" alt="Photobucket">
  </div>
 </div>
 <div class="footer">
  <div class="foot">
   &copy;HaQiPhoEnix - 2011
  </div>
 </div>
</body>
</html>