Kamis, 06 Juni 2013

Belajar membuat tampilan awal Facebook dengan tag div

Kali ini, kita akan mencoba membuat tampilan web "face-mu" dimana tampilannya seperti tampilan awal facebook. Disini kita menggunakan CSS dalam pembuatan face-mu ini. Meskipun tidak mirip dengan facebook yang asli, bisa dikatakan lumayan untuk tingkat pemula..hhe..
Inilah tampilan web face-mu



<!DOCTYPE html>
<html lang="en">

<head>
<link rel="shortcut icon" href="icon.png" />
<title>Face-mu</title>
<link rel="stylesheet" href="facemu.css" type="text/css" />

</style>
</head>

<body>

<div class="header">

<div class="logo"><img src="facemu.png"></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 />
<br />
Face-mu membantu Anda terhubung dan berbagi<br />
dengan orang-orang dalam kehidupan Anda di<br />
Indonesia.
<br />
<br />
<br />
<img src="indonesia.png" width=400>
</div>
<div class="isi_kanan">
<br />
<font size=5><b>Mendaftar</b></font><br />
Gratis, sampai kapanpun
<hr color="#4283d4" width=400 align="left"/>

<table cellpadding=5>
<tr>
<td>Nama Depan</td>
<td> : <input type="text" size=25 /></td>
</tr>

<tr>
<td>Nama Belakang</td>
<td> : <input type="text" size=25 /></td>
</tr>

<tr>
<td>Email Anda</td>
<td> : <input type="text" size=25 /></td>
</tr>

<tr>
<td>Masukkan Ulang Email</td>
<td> : <input type="text" size=25 /></td>
</tr>

<tr>
<td>Kata Sandi Baru</td>
<td> : <input type="text" size=25 /></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=1>Mengapa saya perlu mengisinya?</font></td>
</tr>
</table>

<center><input type="button" value="Mendaftar" id="button_masuk"></center>
<hr color=#4283d4 width=400 align="left"/>
<font size=1>Buat halaman <font color="black">untuk selebritis, grup musik, atau bisnis</font></font>
</div>
</div>

<div class="footer" align="center">
Face-mu &copy; 2011 Alivi Nur Rosida
</div>

</body>
</html>

Untuk melihat code .css lihat dibawah ini :

<!--.header {
float: left;
background-color: #4283d4;
height: 60px;
margin: 0px auto;
width: 1230px;
padding: 10px;
}
.logo {
float: left;
height: 50px;
margin:20px 10px 10px 200px;
}
.kotak {
float: right;
height: 100px;
padding: 5px;
font-family: arial;
font-size: 10px;
color: white;
}
#button_masuk{
background-color: #4283d4;
color: white;
}
#button_mendaftar{
background-color: #4283d4;
color: white;
}
.isi {
float: left;
height: 470px;
background-image: url(bg.jpg);
padding: 0px;
}
.isi_kiri {
float: left;
width: 500px;
font-size: 18px;
font-family: arial;
color: #4283d4;
font-weight: bold;
margin:0px 10px 10px 200px;
}
.isi_kanan {
float: right;
width: 507px;
font-family: arial;
color: #4283d4;
margin:0px 0px 10px 30px;
}
.footer {
clear: both;
width: 1247px;
height: 20px;
background-color: #4283d4;
font-family: arial;
font-size: 12px;
font-weight: bold;
color: white;
}
-->

Sumber :
http://blog.um.ac.id/alivi/informatika-3/pemrograman-web/membuat-tampilan-awal-web-menyerupai-facebook/

noreply@blogger.com (rian saadillah sukamdi Yan) 06 Jun, 2013


-
Source: http://besoklagiaja.blogspot.com/2013/06/belajar-membuat-tampilan-awal-facebook.html
--
Manage subscription | Powered by rssforward.com
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)