Informasi Game Offline dan Online Terlengkap di seluruh Asia

Membuat tampilan login sederhana dengan HTML dan CSS

Disetiap aplikasi khususnya yang berbasis web pasti akan dijupai tampilan login. Login sendiri digunakan untuk proses pengecekan user apakah sesuai tidak dengan data yang tersimpan didatabase. Jikas sesuai akan mask dan jika tidak sesuai akan kembali kemenu login tadi.

Kali ini saya akan berbagi tentang pembuatan login dengan HTML dan CSS. Kalau untuk gaya, warna, dan penempatan terserah anda. Bisa anda utak utik di HTML maupun CSSnya.

lankah langkah :

1. Buka apikasi editor text. Agar lebih mudah saya menggunakan sublime text.
2. Kita akan membuat bagian dasar dari HTMnya yaitu dari title. Skripnya seperti ini.
 3. Kita simpan lalu buka dengan browser. disitu terlihat bahwa titlenya adalah Coba Form Login.
4. Kemudian kita akan menambahkan logo login di atas tengah form login. Anda bisa memberikan gambar sesuai keinginan. Saya meletakkan gambarnya satu folder dengan idx.html. Jadi tidak perlu mengarahkan kefolder lain. Berikut scriptnya.
 5. Refresh browser anda dan ini hasilnya.
6. Lanjut ke membuat form loginnya. Anda bisa sesuaikan sesuai keinginan anda. Berikut scriptnya.
 7. Refresh kembali browser anda dan ini hasilnya. Kok masih acak acakan ? karena belum menambahkan CSSnya.
8. Kita tambahkan script untuk memanggil CSS. Agar lebih simpel kita taruh saja CSS filenya pada satu folder yang sama dengan file index.html.
 9. Tambahkan pula tag div untuk menandai beberapa script HTML yang akan kita ubah dengan CSS.
10. Kemudian buat CSSnya sesuai keinginan anda. Contohnya seperti ini.


11. Simpan lalu refresh browser anda. Ini hasilnya. Jika warnanya atau stylenya pengen anda ganti tinggal ganti saja di file CSSnya.




SEMOGA BERMANFAAT...........

BY : http://arditamania.blogspot.com/2016/04/membuat-tampilan-login-sederhana-dengan.html
Membuat tampilan login sederhana dengan HTML dan CSS Membuat tampilan login sederhana dengan HTML dan CSS Reviewed by Hafiz Rifani on December 27, 2018 Rating: 5

No comments:

Powered by Blogger.