<html>
<head>
<style type="text/css">
.label{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#21AB41;
}
.tableBorder{
border:solid 1px #00DAFF;
margin-top:100px;
}
.message{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#21AB41;
}
</style>
<title>Masuk Ke Halaman Utanama</title>
</head>
<body>
<table cellpadding="2px" cellspacing="1px" bgcolor="#C5D2ED" width="400px" class="tableBorder" align="center">
<tr>
<td colspan="2" bgcolor="#21AB41"> </td>
</tr>
<tr>
<td colspan="2" class="label"> </td>
</tr>
<tr>
<td align="center" colspan="2">
<img src="gambar/kunci.png" border="0" align="absbottom"/>
<span class="message">Masuk Ke Halaman Utama</span>
</td>
</tr>
<tr>
<td colspan="2" class="label"> </td>
</tr>
<tr>
<td class="label" align="right" width="40%">Username:</td>
<td align="left" width="60%"><input type="text" placeholder="Username" name="username" maxlength="20" required autofocus/></td>
</tr>
<tr>
<td class="label" align="right">Password:</td>
<td align="left"><input type="password" placeholder="Kata kunci" name="password" maxlength="20" required/></td>
</tr>
<tr>
<td class="label" align="right"> </td>
<td align="left"><input type="submit" value="Masuk" /></td>
</tr>
<tr>
<td colspan="2" class="label"> </td>
</tr>
</table>
</body>
</html>
dengan tampilan akhir seperti berikut :
pada bagian <img src="gambar/kunci.png" border="0" align="absbottom"/> (yang berwarna ungu)
adalah tag untuk memanggil gambar yang telah disimpan sebelumnya dalam folder gambar seperti di contohkan dalam gambar di bawah ini :
dan jangan lupa juga folder gambar dan folder dokumen html harus dalam satu folder kerja seperti yang ada di contoh gambar >> folder gambar dan dokumen masuk.html berada pada folder masuk.
Selamat Mencoba dan Berkreasi!
thanks to :
qualitycodes.com untuk inspirasi pembuatan form dan
iconseeker.com atas icon-icon gambar yang telah tersedia untuk di unduh
Tidak ada komentar:
Posting Komentar