Tampilan Log In Untuk Situs Website anda
Screen Shoot
Untuk membuat tampilan Log in seperti ini dibutuhkan gambar yang bisa anda
download disini sehingga nanti memudahkan anda untuk membuat tampilannya
Membuat Tampilan seperti ini anda harus menguasai HTML dan Css Silahkan and abaca Tutorial saya sebelumnya di Setelah anda mampu mengerti akan bahasa HTML dan Css Maka tidaklah sulit untuk mempelajarinya.
Langkah langkah Membuat Tampilan Log In
seperti diatas:
1. Siapkan Gambar yang bisa anda
download seperti gambar diatas
2. Memulainya dengan membuat Css dari gambar tersebut
3. Buat Form Log IN dengan Html
Membuat Css dari gambar yang sudah tersedia
Source code :
*{ margin: 0; padding: 0; }
body{ font-family: Georgia, serif; background: url(images/login-page-bg.jpg) top center no-repeat #c4c4c4; color: #3a3a3a; }
.clear { clear: both; }
Form { width: 406px; margin: 170px auto 0; }
legend { display: none; }
fieldset { border: 0; }
label { width: 115px; text-align: right; float: left; margin: 0 10px 0 0; padding: 9px 0 0 0; font-size: 16px; }
input { width: 220px; display: block; padding: 4px; margin: 0 0 10px 0; font-size: 18px;
color: #3a3a3a; font-family: Georgia, serif;}
input[type=checkbox]{ width: 20px; margin: 0; display: inline-block; }
.button { background: url(images/button-bg.png) repeat-x top center; border: 1px solid #999;
-moz-border-radius: 5px; padding: 5px; color: black; font-weight: bold;
-webkit-border-radius: 5px; font-size: 13px; width: 70px; }
.button:hover { background: white; color: black; }
Pada huruf yang berwarna merah tersebut merupakan gambar yang digunakan sebagai background yang nantinya menjadi tampilan pada form. Untuk membuat form agar tampilan dari Css bisa ditampilkan oleh browser maka sekarang kita harus membuat form dengan Html
Untuk Membuat form dengan Html caranya seperti ini :
Source code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Login Page</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="do_login.php" method="post">
<fieldset>
<legend>Log in</legend>
<label for="login">Email</label>
<input type="text" name="email"/>
<div class="clear"></div>
<label for="password">Password</label>
<input type="password" name="password"/>
<div class="clear"></div>
<br />
<input type="submit" style="margin: -20px 0 0 287px;" class="button" name="submit" value="Log in"/>
</fieldset>
</form>
</body>
</html>
Nah untuk Source code yang digaris bawahi itu sangat penting untuk action dari Halaman Log In untuk bisa masuk ke dalam sebuah website. Untuk lebih jelasnya silahkan melakukan eksperimen dengan file yang sudah saya siapkan. Semoga artikel ini bermanfaat.
Title : Membuat Tampilan Halaman Log In Website
Description : Tampilan Log In Untuk Situs Website anda Screen Shoot Untuk membuat tampilan Log in seperti ini dibutuhkan gambar yang bisa anda download di...