STEP 1 — Membuat Folder Project
Buat folder:
login-html-css
Kemudian buat dua file:
login-html-css/│├── index.html└── style.css
Fungsi masing-masing:
index.html→ struktur halamanstyle.css→ tampilan halaman
STEP 2 — Membuat Struktur HTML Dasar
Buka index.html.
Mulai dengan struktur HTML dasar:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Login</title><linkrel="stylesheet"href="style.css"></head><body></body></html>
Penjelasan
Bagian:
<!DOCTYPE html>
memberitahu browser bahwa kita menggunakan HTML5.
Kemudian:
<htmllang="en">
merupakan elemen utama HTML.
Bagian:
<head>
berisi informasi halaman.
Sedangkan:
<body>
berisi sesuatu yang akan ditampilkan kepada pengguna.
STEP 3 — Membuat Container Login
Di dalam <body>, kita buat container.
<body><divclass="login-container"></div></body>
div digunakan sebagai wadah.
Kita memberikan class:
class="login-container"
supaya nanti bisa kita atur menggunakan CSS.
STEP 4 — Membuat Box Login
Sekarang kita tambahkan box di dalam container.
<body><divclass="login-container"><divclass="login-box"></div></div></body>
Strukturnya sekarang:
body│└── login-container │ └── login-box
STEP 5 — Membuat Judul Login
Tambahkan heading:
<divclass="login-box"><h2>Login</h2></div>
Sehingga:
<body><divclass="login-container"><divclass="login-box"><h2>Login</h2></div></div></body>
STEP 6 — Membuat Input Username
Sekarang kita buat label dan input.
<divclass="form-group"><label>Username</label><inputtype="text"placeholder="Masukkan username"></div>
Jadi:
<divclass="login-box"><h2>Login</h2><divclass="form-group"><label>Username</label><inputtype="text"placeholder="Masukkan username"></div></div>
Penjelasan
<label>Username</label>
digunakan untuk memberikan keterangan input.
Sedangkan:
<inputtype="text">
digunakan untuk memasukkan teks.
placeholder:
placeholder="Masukkan username"
memberikan petunjuk kepada pengguna.
STEP 7 — Membuat Input Password
Tambahkan input password.
<divclass="form-group"><label>Password</label><inputtype="password"placeholder="Masukkan password"></div>
Kenapa menggunakan:
type="password"
?
Karena karakter yang diketik akan disembunyikan.
Misalnya:
••••••••
STEP 8 — Membuat Tombol Login
Tambahkan button:
<buttontype="submit">Login</button>
Sehingga:
<divclass="login-box"><h2>Login</h2><divclass="form-group"><label>Username</label><inputtype="text"placeholder="Masukkan username"></div><divclass="form-group"><label>Password</label><inputtype="password"placeholder="Masukkan password"></div><buttontype="submit">Login</button></div>
STEP 9 — Membuat Form
Sebenarnya input login sebaiknya berada di dalam <form>.
Ubah menjadi:
<divclass="login-box"><h2>Login</h2><form><divclass="form-group"><label>Username</label><inputtype="text"placeholder="Masukkan username"></div><divclass="form-group"><label>Password</label><inputtype="password"placeholder="Masukkan password"></div><buttontype="submit">Login</button></form></div>
Sekarang struktur HTML kita sudah lebih baik.
STEP 10 — Membuat CSS Dasar
Buka:
style.css
Kita mulai dari reset CSS.
* { margin: 0; padding: 0; box-sizing: border-box;}
Kenapa menggunakan box-sizing?
Dengan:
box-sizing: border-box;
perhitungan ukuran elemen menjadi lebih mudah ketika kita menggunakan:
widthpaddingborder
STEP 11 — Mengatur Body
Tambahkan:
body { font-family: Arial, sans-serif; background-color: #f2f2f2;}
Kita mendapatkan:
body ├── font └── background
STEP 12 — Membuat Login di Tengah
Sekarang kita gunakan Flexbox.
.login-container { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center;}
Bagian penting:
display: flex;
mengaktifkan Flexbox.
Kemudian:
justify-content: center;
untuk posisi horizontal.
Dan:
align-items: center;
untuk posisi vertikal.
Hasilnya login akan berada di tengah layar.
STEP 13 — Membuat Box Login
Tambahkan:
.login-box { width: 400px; padding: 30px; background-color: white; border-radius: 10px; box-shadow: 05px20pxrgba(0, 0, 0, 0.1);}
Sekarang kita memiliki kotak login.
Penjelasan
width: 400px;
lebar box.
padding: 30px;
jarak antara isi dengan tepi box.
background-color: white;
warna background.
border-radius: 10px;
membuat sudut melengkung.
box-shadow
memberikan efek bayangan.
STEP 14 — Mengatur Judul
Tambahkan:
.login-boxh2 { text-align: center; margin-bottom: 25px;}
text-align membuat tulisan berada di tengah.
Sedangkan:
margin-bottom
memberikan jarak dengan elemen berikutnya.
STEP 15 — Mengatur Form Group
Tambahkan:
.form-group { margin-bottom: 20px;}
Setiap kelompok:
LabelInput
akan memiliki jarak.
STEP 16 — Mengatur Label
Tambahkan:
.form-grouplabel { display: block; margin-bottom: 8px; font-weight: bold;}
display: block membuat label berada pada baris sendiri.
STEP 17 — Mengatur Input
Sekarang bagian yang cukup penting.
.form-groupinput { width: 100%; padding: 12px; border: 1pxsolid #ccc; border-radius: 5px; font-size: 16px;}
Input akan memenuhi lebar box.
STEP 18 — Membuat Efek Saat Input Dipilih
Kita bisa menggunakan pseudo-class:
.form-groupinput:focus { outline: none; border-color: #007bff;}
Ketika input diklik, border berubah.
Konsep ini penting untuk dipahami:
input:focus
berarti:
CSS diterapkan ketika input sedang mendapatkan fokus.
STEP 19 — Membuat Tombol
Tambahkan:
button { width: 100%; padding: 12px; border: none; border-radius: 5px; background-color: #007bff; color: white; font-size: 16px; cursor: pointer;}
Sekarang tombol memenuhi lebar box.
STEP 20 — Efek Hover
Tambahkan:
button:hover { background-color: #0056b3;}
Ketika mouse diarahkan ke tombol, warnanya berubah.
Konsep:
:hover
digunakan untuk memberikan efek ketika mouse berada di atas elemen.
STEP 21 — Kode Lengkap HTML
Setelah semua tahap di atas, index.html menjadi:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Login</title><linkrel="stylesheet"href="style.css"></head><body><divclass="login-container"><divclass="login-box"><h2>Login</h2><form><divclass="form-group"><label>Username</label><inputtype="text"placeholder="Masukkan username"></div><divclass="form-group"><label>Password</label><inputtype="password"placeholder="Masukkan password"></div><buttontype="submit"> Login</button></form></div></div></body></html>
STEP 22 — Kode Lengkap CSS
style.css:
* { background-color: #f2f2f2;}.login-container { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center;}.login-box { width: 400px; padding: 30px; background-color: white; border-radius: 10px; box-shadow: 05px20pxrgba(0, 0, 0, 0.1);}.login-boxh2 { text-align: center; margin-bottom: 25px;}.form-group { margin-bottom: 20px;}.form-grouplabel { display: block; margin-bottom: 8px; font-weight: bold;}.form-groupinput { width: 100%; padding: 12px; border: 1pxsolid #ccc; border-radius: 5px; font-size: 16px;}.form-groupinput:focus { outline: none; border-color: #007bff;}button { width: 100%; padding: 12px; border: none; border-radius: 5px; background-color: #007bff; color: white; font-size: 16px; cursor: pointer;}button:hover { background-color: #0056b3;}
