✅ Kode HTML: Halaman Login Sederhana
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Login</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: #fff;
padding: 30px 40px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #1877f2;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
button:hover {
background-color: #0f5dc3;
}
.footer {
text-align: center;
margin-top: 10px;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form action="/proses-login" method="POST">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<button type="submit">Masuk</button>
</form>
<div class="footer">
Belum punya akun? <a href="#">Daftar</a>
</div>
</div>
</body>
</html>
📘 Penjelasan Kode
1. <!DOCTYPE html> dan <html lang="id">
Menyatakan bahwa dokumen ini menggunakan HTML5.
lang="id" menunjukkan bahwa bahasa utama halaman ini adalah bahasa Indonesia.
2. <head>: Metadata dan CSS
<meta charset="UTF-8">: Mendukung karakter UTF-8 (karakter Indonesia).
<meta name="viewport"...>: Supaya responsif di perangkat mobile.
<title>: Judul tab browser.
<style>: CSS langsung ditulis di dalam file HTML (bisa juga pakai file eksternal).
3. CSS (Dalam <style>)
Memberi tampilan modern dan rapi.
body: Mengatur latar belakang, font, dan posisi login di tengah.
.login-container: Kotak putih untuk form login, ada padding, radius, dan shadow.
Input dan tombol diberi gaya agar nyaman digunakan.
4. <body>: Isi Halaman
<div class="login-container">: Pembungkus form login.
<h2>: Judul “Login”.
<form action="/proses-login" method="POST">
o Mengirim data ke server melalui POST saat tombol diklik.
<label> dan <input>: Untuk username dan password.
<button>: Tombol untuk submit (Masuk).
Footer kecil dengan link ke pendaftaran.
🛠️Cara Mengembangkan
Jika ingin lebih lanjut:
Validasi sisi klien dengan JavaScript.
Responsif lebih kompleks pakai media queries.
Back-end (server) di "/proses-login" harus dibuat pakai PHP, [Link], Python, dsb.
Tambahkan icon menggunakan Font Awesome atau SVG.
✅ 1. HTML (HyperText Markup Language)
📌 Fungsi:
Bahasa utama yang digunakan untuk membangun struktur halaman web.
💡 Contoh Penggunaan dalam Kode:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Halaman Login</title>
</head>
<body>
<div class="login-container">
<form action="/proses-login" method="POST">
<label for="username">Username</label>
<input type="text" id="username" name="username">
<button type="submit">Masuk</button>
</form>
</div>
</body>
</html>
🧠 Penjelasan:
<html> sampai </html> → Menandai bahwa isi dokumen adalah HTML.
<head> → Bagian untuk metadata (judul, stylesheet, dll.).
<body> → Bagian utama yang ditampilkan di browser.
Elemen seperti <form>, <input>, <button>, <label>, <div> digunakan untuk
menyusun antarmuka pengguna.
✅ 2. CSS (Cascading Style Sheets)
📌 Fungsi:
Digunakan untuk mengatur tampilan dan gaya visual halaman HTML seperti warna, posisi,
ukuran, dan font.
💡 Contoh Penggunaan dalam Kode:
<style>
body {
background-color: #f0f2f5;
font-family: Arial, sans-serif;
}
.login-container {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
input, button {
padding: 10px;
margin-bottom: 15px;
width: 100%;
}
button {
background-color: blue;
color: white;
}
</style>
🧠 Penjelasan:
CSS diletakkan dalam tag <style> di dalam <head>, atau bisa juga di file terpisah
([Link]).
.login-container adalah class selector untuk memberi gaya pada <div
class="login-container">.
input, button, dan body adalah element selectors.
Properti CSS seperti padding, background-color, color, dan box-shadow digunakan
untuk membuat desain lebih menarik.
✅ 3. (Opsional) Bahasa Server-Side seperti PHP, [Link],
atau Python
📌 Fungsi:
Untuk memproses data login di server, misalnya memverifikasi username dan password di
database.
💡 Contoh Indikasi dalam HTML:
<form action="/proses-login" method="POST">
🧠 Penjelasan:
Atribut action="/proses-login" menunjukkan bahwa data akan dikirim ke halaman
server (belum dibuat dalam HTML).
method="POST" berarti data dikirim secara tersembunyi (tidak muncul di URL).
Bahasa server-side akan memproses data ini. Misalnya:
Contoh (PHP):
<?php
$username = $_POST['username'];
$password = $_POST['password'];
// Cek ke database...
?>
✅ 4. (Opsional) JavaScript
📌 Fungsi:
Digunakan untuk interaksi dinamis di sisi klien, seperti validasi form sebelum dikirim.
💡 Contoh Penggunaan Sederhana:
<script>
function validateForm() {
let username = [Link]("username").value;
if (username === "") {
alert("Username tidak boleh kosong!");
return false;
}
return true;
}
</script>
<form onsubmit="return validateForm()">
🧠 Penjelasan:
Dapat digunakan untuk validasi data sebelum dikirim ke server.
Dimasukkan di tag <script>, biasanya di <head> atau sebelum </body>.
🧾 Rangkuman Penggunaan Bahasa:
Bahasa Fungsi Utama Letak Penggunaan
HTML Struktur dan isi halaman Seluruh dokumen .html
Bahasa Fungsi Utama Letak Penggunaan
CSS Tampilan dan desain visual Dalam tag <style> atau file .css
JavaScript Interaksi dan validasi sisi klien (opsional) Dalam tag <script>
PHP/Server-side Proses login, cek database (opsional) Dalam file server .php, .js, .py, dll
🔚 Penutup
Jadi, halaman login yang sederhana tetap melibatkan 3 komponen utama:
HTML: Struktur
CSS: Desain tampilan
(Opsional) JavaScript / Server-side: Fungsi interaktif dan pemrosesan
Kalau kamu ingin saya bantu menambahkan validasi JavaScript, integrasi dengan PHP, atau
koneksi ke database, tinggal bilang saja.