Contoh yang sudah jadi
(HTML)
<html>
<head>
<title>Selamat Datang Di Chatt-BOOK</title>
<link rel="icon" type="image/png" href="adsd1.png"/>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- Design Header website -->
<div id="header">
<div id="logo">
<img src="images/logo1.png" width="200px" height="50px"/>
</div>
<div id="login">
<table>
<tr><td>Email atau No.telp</td><td colspan="2">Kata sisandi</td></tr>
<tr>
<td><input type="text" class="text"/></td><td ><input type="password" class="text"/></td>
<td><a href="http://www.facebook.com"><input type="submit" class="masuk" value="Log In"/></a></td>
<tr><td colspan="2" align="right">Ada yang bisa dibantu?</td></tr>
</table>
</div>
</div>
<!-- Design Content website -->
<div id="content">
<div id="wrapper">
<div id="mobile">
<img src="buku1.png" width="300px"/> <br/>
<h2><font color="red">Terima kasih sudah datang</h2>
<p>Selamat menikmati obrolan bersama teman kalian.</p>
<ul>
<li>Pasang Profil kalian</li>
<li>Cari teman untuk mengobrol</li>
<li>Pilih permainan sesukamu</li>
</ul>
</div>
<div id="register">
<h1>Mendaftar Sekarang Juga</h1>
<p>gratis chatingan sampai kapanpun.</font></p>
<input type="text" class="reg" size="20" placeholder="Nama Depan">
<input type="text" class="reg" size="19" placeholder="Nama Belakang"> <br/><br/>
<input type="text" class="reg" size="45" placeholder="Email"><br/><br/>
<input type="text" class="reg" size="45" placeholder="Masukan kembali Email"><br/><br/>
<input type="text" class="reg" size="45" placeholder="Kata sandi"><br/>
<p>TANGGAL LAHIR</p>
<select name=bulan>
<option>Bulan </option>
<option value="januari">januari</option>
<option value="februari">februari</option>
<option value="maret">maret</option>
<option value="april">april</option>
<option value="mei">mei</option>
<option value="juni">juni</option>
<option value="juli">juli</option>
<option value="agustus">agustus</option>
<option value="september">september</option>
<option value="oktober">oktober</option>
<option value="november">november</option>
<option value="desember">desember</option>
</select>
<select name="tanggal">
<option value=" ">Tanggal </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name=tahun>
<option value=" "> Tahun</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
<span style="font:normal 10px Tahoma,Verdana;">
<a href="">Mengapa saya harus mengisi tanggal lahir?</a>
</span><br/><br/>
<input type="radio" name="radio"> Perempuan
<input type="radio" name="radio"> Laki Laki <br/><br/>
<p>Dengan mengeklik Mendaftar, Anda menyetujui<a href="">Ketentuan</a> kami dan bahwa Anda telah membaca
<a href="">Kebijakan data</a>,termasuk <a href="">penggunaan kuki</a>.</p>
<a href="http://www.facebook.com"><input type="submit" class="login" value="Mendaftar" />
</div>
<div id="clear"> </div>
<p align="right">Buat grup mengobrol,bisnis dan lain-lain</p>
</div>
</div>
<!-- Design Footer website -->
<div id="footer">
<div id="link" align="center">
<a href="">Bahasa Indonesia</a>
<a href="">English (US)</a>
<a href="">Español</a>
<a href="">Português (Brasil)</a>
<a href="">Français (France)</a>
<a href="">Deutsch</a>
<a href="">Italiano</a>
</div>
<div id="link2" align="center">
<table>
<tr>
<td><a href="">Mobile</a></td> <td><a href="">Find Friends</a></td>
<td><a href="">Badges</a></td> <td><a href="">People</a></td>
<td><a href="">Pages</a></td> <td><a href="">Places</a></td>
<td><a href="">Apps</a></td> <td><a href="">Games</a></td>
<td><a href="">Music</a></td>
</tr>
<tr>
<td><a href="">About</a></td> <td><a href="">Create Ad</a></td>
<td><a href="">Create Page</a></td> <td><a href="">Developers</a></td>
<td><a href="">Careers</a></td> <td><a href="">Privacy</a></td>
<td><a href="">Cookies</a></td> <td><a href="">Terms</a></td>
<td><a href="">Help</a></td>
</tr>
</table>
</div>
<div id="copy" align="center">
Created By : Ahdim Tutor © 2016 · <a href="">English (US)</a>
</div>
</div>
</body>
</html>
(CSS)
html,body{
margin:0 0 0 0;
padding:0 0 0 0;
}
h1,p{
margin:5px 0 5px 0;
}
a{
color:#6388b9;
text-decoration:none;
}
/* CSS HEADER */
#header{
height:85px;
display:block;
background-image:url(images/sdafsd1.png);
}
#logo{
float:left;
width:200px;
padding:20px 0 0 10px;
}
#login{
float:right;
padding:10px 10px 0 0;
}
#login table{
font:normal 12px Tahoma,Verdana;
color:#ffffff;
}
/* CSS CONTENT */
#content{
background-image:url(images/green-desktop.jpg);
min-height:500px;
}
#content #wrapper{
width:1000px;
padding:30px 0 0 0;
margin-left:auto;
margin-right:auto;
color:#666666;
}
#content #wrapper #mobile{
width:555px;
float:left;
}
ul{
margin:0 0 0 0;
padding:0 0 0 20px;
}
input.button_mobile{
width:142px;
height:40px;
border:none;
background-color:transparent;
background-image:url(images/button-mobile.png);
background-position:center center;
cursor:pointer;
}
#content #wrapper #register{
width:400px;
float:right;
}
#content #wrapper #register{
font:normal 12px Tahoma,Verdana;
border-bottom:silver 1px solid;
}
input.login{
border-radius:10px;
color:#ffffff;
font-size:30px;
background:rgba(128,128,128,0.19);
padding:5px 10px 5px 10px;
text-decoration:none;
}
input.login:hover{
background:rgba(128,128,128,0.19);
text-decoration:none;
cursor:pointer ;
}
#clear{
display:block;height:1px;clear:both;
}
/* CSS FOOTER */
#footer{
font:normal 12px Tahoma,Verdana;
display:block;
height:150px;
background-color:#204819;
}
#footer #link{
margin:0 30px 0 30px;
border-bottom:silver 1px solid;
}
#footer #link2{
margin:0 30px 0 30px;
}
#footer #link2 table tr td{
font:normal 12px Tahoma,Verdana;
}
#footer #link a, #footer #link2 a{
line-height:30px;
margin-right:10px;
}
#footer #copy{
margin:0 30px 0 30px;
}
Terima kasih sudah masuk ke blog saya....
