Cara Membuat Tampilan Face-mu Sendiri


Gambar Tampilan Face-mu





1.Instal Notepad ++ atau pakai Notepad biasa,setelah itu masukkan kata seperti di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Selamat Datang di Face-mu Masuk, Daftar, atau Pelajari Selengkapnya
</title>
<link rel="stylesheet" href="styleheader.css" type=text/css />
<link rel="shortcut icon" href="images/icon.png"/>
</head>
<style type="text/css">
.header, .footer{
background-color : blue;
}

.header{
height : 70px;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
}

#lebar{
width : 1000px;
}

.footer{
padding-top : 30px;
padding-bottom : 50px;
padding-right : 200px;
padding-left : 300px;
color : white;
font-family : Arial;
font-size : small;
font-weight : bold;
}

.bg-color{
height : 500px;
background-image : url(bg.jpg);
background-color : white;
background-repeat : repeat-x;
}

.login{
float : right;
color : white;
font-family : arial;
font-size : small;
}

#logo{
margin-top : 20px;
float : left;
height : 35px;
}

#kanan{
float: left;
padding: 5px;
width:370px;
height: 380px;
}

#tengah {
float: left;
}

#kiri {
float: left;
width: 780px;
height: 380px;
}

#gambar{
padding-top : 40px;
padding-bottom : 4 0px;
padding-left : 150px;
width: 600px;
height: 400px;
font-family : Arial;
font-size : small;
font-weight : bold;
color: black;
}

#huruf{
font-family : Arial;
font-size : small;
font-weight : bold;
line-height : 30px;
color: black;
}

#button_masuk{
background-color : white;
color : black;
}

#button_daftar{
background-color : white;
color : black;
}
</style>
<link type="image/x-icon" rel="icon" href="icon.png">
</head>
<body>
<div class="header">
<div id="lebar">
<div id="logo">
<img src="facemu.png">
</div>
<div class="login">
<table>
<tr>
<td>Email</td>
<td>Password</td>
<td> </td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="password"></td>
<td><input type="submit" value="Masuk" id="button_masuk"></td>
</tr>
<tr>
<td height="25"><input type="checkbox" checked>Ingat saya</td>
<td height="25">Lupa kata sandi?</td>
<td height="25"> </td>
</tr>
</table>
</div>
</div>
</div>
<div class="bg-color">

<form action="my_action.jsp">
<div id="tengah">
<div id="kiri">
<div id="gambar">
<font size="5"> Face-mu membantu Anda terhubung dan berbagi dengan orang-orang dalam kehidupan Anda di SMK Al KAAFFAH </font>
<img src="fc.png">
</div>
</div>
</div>
</form>
<div id="kanan">
<div id="huruf">
<h2>Mendaftar <br>
Gratis,sampai kapanpun. </h2>
<hr style="color: red">
<form action="my_action.jsp">
<table>
<tr>
<td>Nama Depan :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Nama Belakang :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Email Anda :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Kata Sandi Baru:</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>Ulangi Sandi  :</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>Jenis Kelamin  :</td>
<td><select name="kelamin">
<option value="pria" selected>Laki-laki
<option value="wanita">Perempuan
<option value="tidak ada">Tidak Laki-laki dan Perempuan
</select></td>
</tr>
<tr>
<td>Tanggal Lahir :</td>
<td><select name="Day">
<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="month">
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">Nopember</option>
<option value="12">Desember</option>
</select>

<select name="years">
<option value="1">1990</option>
<option value="1">1991</option>
<option value="1">1992</option>
<option value="1">1993</option>
<option value="1">1994</option>
<option value="1">1995</option>
<option value="1">1996</option>
<option value="1">1997</option>
<option value="1">1998</option>
<option value="1">1999</option>
<option value="1">2000</option>
<option value="1">2001</option>
<option value="1">2002</option>
<option value="1">2003</option>
<option value="1">2004</option>
<option value="1">2005</option>
<option value="1">2006</option>
<option value="1">2007</option>
<option value="1">2009</option>
<option value="1">2010</option>
<option value="1">2011</option>
<option value="1">2012</option>
<option value="1">2013</option>
<option value="1">2014</option>
</select>

</table></td>
</tr>
</table>
</form>
Mengapa Saya Perlu Mengisinya? <br>
<input type="submit" value="Mendaftar" id="button_daftar">
<hr style="color: black">
Buat Halaman untuk Guru SMK Al KAAFFAH, grup persami, atau usaha
</tr>
</div>
</div>
</div>
<div id="footer">

</form>
</div>
</div>
</div>
<div class="footer">
Powered by Yuliaji Bagas Prasojo - Karya TKJ SMK AL KAAFFAH, Kepanjen Malang,Indonesia
</div>
</body>
</html>


Jika sudah Masukkan lalu save dengan format .HTML.Selamat mencoba.......


0 komentar:

Langganan: Postingan (Atom)
Copyright © 2013 Sharing Al Kaaffah and Blogger Themes.