Om Swastyastu...
Halo semeton sareng sami, etemu lagi dengan saya. Sebelumnya saya telah membuat halaman twitter yang tampilannya lumayan mirip dengan yang aslinya, tapi masih acak-acakan. hehehe...
Halo semeton sareng sami, etemu lagi dengan saya. Sebelumnya saya telah membuat halaman twitter yang tampilannya lumayan mirip dengan yang aslinya, tapi masih acak-acakan. hehehe...
Nah disini saya juga coba membuat halaman facebook menggunakan html + css dan hasilnya lumayan mirip dengan tampilan halaman facebook yang asli.
Langsung saja anda buka dulu notepad atau notepad++ yang ada di laptop anda, kemudian buat script html dengan judul facebook.html atau copy script di bawah ini:
facebook.html
<html>
<head>
<link rel="shortcut icon" href="fb.jpg" />
<title>Facebook</title>
</style>
</head>
<body>
<div class="header">
<div class="logo">facebook</div>
<div class="kotak">
<br/>
<input type="button" value="Masuk" id="button_masuk">
<br/>
</div>
<div class="kotak">
Password :
<br/>
<input type="text" size=20>
<br/>
Lupa kata sandi Anda?
</div>
<div class="kotak">
Email :
<br/>
<input type="text" size=30>
<br/>
<input type="checkbox">Biarkan saya tetap masuk
</div>
</div>
<div class="isi">
<div class="isi_kiri">
<br/>
<br/>
Facebook membantu Anda terhubung dan berbagi dengan orang-orang<br />
dalam kehidupan Anda di Indonesia.<br />
<img src="jaringan.jpg" width="612"height="312">
</div>
<div class="isi_kanan">
<br/>
<br/>
<font size=5><b>Mendaftar</b></font><br/>
Gratis, sampai kapanpun
<hr color="#CCCCCC" width="400" align="left"/>
<table cellpadding=5>
<tr>
<td>Nama Depan</td>
<td> : <input type="text" size=30/></td>
</tr>
<tr>
<td>Nama Belakang</td>
<td> : <input type="text" size=30/></td>
</tr>
<tr>
<td>Email Anda</td>
<td> : <input type="text" size=30/></td>
</tr>
<tr>
<td>Masukkan Ulang Email</td>
<td> : <input type="text" size=30/></td>
</tr>
<tr>
<td>Kata Sandi Baru</td>
<td> : <input type="password" name="userpassword" size=30 /></td>
</tr>
<tr>
<td>Saya Seorang</td>
<td> : <select name="kelamin">
<option>Wanita</option>
<option>Pria</option>
</select></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td> : <select name="tanggal">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="bulan">
<option>Januari</option>
<option>Februari</option>
<option>Maret</option>
<option>April</option>
<option>Mei</option>
<option>Juni</option>
<option>Juli</option>
<option>Agustus</option>
<option>September</option>
<option>Oktober</option>
<option>November</option>
<option>Desember</option>
</select>
<select name="tahun">
<option>1980</option>
<option>1981</option>
<option>1982</option>
<option>1983</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><font size=2>Mengapa saya perlu mengisinya?</font></td>
</tr>
</table>
<input type="button" value="Mendaftar" id="button_mendaftar">
<hr color="#CCCCCC" width="400" align="left"/>
<font size=2>Buat halaman <font color="#999999">untuk selebritis, grup musik, atau bisnis</font></font>
</div>
</div>
<div class="footer" align="center">
Facebook © 2013 Ngakan Nyoman Diarse
<hr color="#CCCCCC"><br/>
<center>Perihal Iklan Pengembang Karir Ketentuan . Cari Teman Privasi Seluler Pusat Bantuan Blog Widget</center>
</div>
</body>
</html>
kebudian buat script cssnya dengan judul facebook.css atau bisa langsung dicopy scrip di bawah ini:
facebook.css
<!--.header {
float: left;
background-color: #003366;
height: 60px;
margin: 0px auto;
width: 1330px;
padding: 10px;
}
.logo {
float: left;
height: 50px;
font-family: calibri;
font-size: 45px;
font-weight: bold;
color: #FFFFFF;
margin:2px 12px;
}
.kotak {
float: right;
height: 100px;
padding: 5px;
font-family: arial;
font-size: 10px;
color: #FFFFFF;
}
#button_masuk{
background-color: #003366;
color: #FFFFFF;
}
#button_mendaftar{
background-color: #006600;
color: white;
margin: 0px 190px;
}
.isi {
float: left;
height: 470px;
width: 1348px;
background-color: #FFFFFF;
padding: 0px;
}
.isi_kiri {
float: left;
width: 650px;
font-size: 18px;
font-family: arial;
color: #003366;
font-weight: bold;
margin: 0px 20px;
}
.isi_kanan {
float: right;
width: 507px;
font-family: arial;
color: #003366;
margin: 0px 0px;
}
.footer {
clear: both;
width: 1348px;
height: 20px;
background-color: #FFFFFF;
font-family: arial;
font-size: 12px;
font-weight: bold;
color: #003399;
}
Simpan script-script di atas di dalam satu folder misal nama folder facebook, lalu simpan gambar di bawah ini di folder facebook tersebut beserta script-script di atas.
fb.jpg
jaringan.jpg
Inilah hasil halaman facebook yang saya buat menggunakan html+css.
Terima kasih semoga bermanfaat...^_^. Om Shant Shanti Shanti Om.
Tidak ada komentar:
Posting Komentar