Kali ini Kota Hujan Lab akan memberikan tutorial yang sangat sederhana sekali. Yaitu membuat posisi form login agar berada di tengah layar PC atau laptop kita. Mungkin anda sering atau pernah membuka sebuah situs yang mengharuskan anda login, dan form login tersebut berada di tengah-tengah layar. Kelihatannya hal tersebut sangat sepele. Namun bagi yang belum mengerti, hal tersebut akan menjadi sebuah pertanyaan. Bagaimana membuat form login tersebut bisa berada di tengah layar?
Cara yang sangat paling mudah agar sebuah form login berada di tengah layar adalah dengan menggunakan bantuan CSS. Kodenya seperti yang terlihat di bawah ini:
<style>
.tengah{
position: absolute;
margin-top: -100px;
margin-left: -200px;
left: 50%;
top: 50%;
width: 400px;
height: 220px;
background-color: brown;
}
</style>
Sangat sederhana sekali bukan? Tapi bagaimana cara menggunakannya? Langkah pertama kali yang harus anda lakukan adalah membuat form terlebih dahulu dengan format html. Lalu ada sisipkan kode CSS tersebut di atas </head>. Setelah itu panggil class tengah yang sudah kita buat pada kode CSS pada html yang kita buat, misal < div class=”tengah”>. Untuk lebih jelasnya silahkan lihat kode lengkapnya di bawah ini:
<html><head><title>Form Screen Center</title>
<style></head><body><div align="center" class="tengah"><p align="center"><font face="verdana" size="4" color="black">Silahkan Login Dahulu</font>/p>
.tengah{</style>
position: absolute;margin-top: -100px;margin-left: -200px;left: 50%;top: 50%;width: 400px;height: 220px;background-color: brown;}
<form action="" method="post" name="postform"><font face="verdana" size="2" color="white">Username</br><input type="text" name="username"/></br>Password</br><input type="password" name="password" /></br></br><input type="submit" name="login" value="Login"/></font></form></div></body></html>
Demikian tutorial sederhana kali ini, semoga bisa bermanfaat dan sampai ketemu lagi di tutorial pemrograman web berikutnya. Salam Kota Hujan Lab.
mantap gan, kunjungi juga web saya www.smartkiosku.com
BalasHapusgan caranya buat profil kek web agan gimana
Hapusmantappppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
BalasHapus