Cara Membuat Halaman Login Website dengan HTML dan CSS

Cara Membuat Halaman Login Website dengan HTML dan CSS – Selamat datang di panduan praktis kami tentang cara membuat halaman login menggunakan HTML dan CSS! Jika Anda sedang belajar tentang pengembangan web, salah satu langkah penting yang mungkin ingin Anda coba adalah membuat halaman login untuk situs web Anda. Halaman login adalah salah satu elemen yang sangat umum ditemui di berbagai situs web, baik itu jejaring sosial, situs e-commerce, atau bahkan aplikasi perbankan online. Dengan menguasai keterampilan ini, Anda akan memiliki dasar yang kuat dalam membangun pengalaman pengguna yang interaktif dan aman.

Dalam artikel ini, riztekno akan membahas secara rinci langkah-langkah untuk membuat halaman login sederhana menggunakan HTML dan CSS. Kami akan menjelaskan setiap langkah dengan detail agar mudah dipahami, bahkan bagi pemula sekalipun. Jadi, jika Anda siap untuk memulai perjalanan Anda dalam membangun halaman login yang menarik dan fungsional, mari kita mulai!

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat halaman login website dengan html dan css:

  • Perangkat laptop,
  • Sublime text (Text editor code),
  • Chrome (Web browser),
  • Niat yang kuat.

Cara Membuat Halaman Login Website dengan HTML dan CSS

1. Buat Folder Project Halaman Login

Langkah pertama yang perlu Anda lakukan adalah membuat folder untuk proyek halaman login Anda. Ini akan membantu Anda menyusun file-filenya dengan rapi.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah folder baru bernama “img“. Folder ini akan digunakan untuk menyimpan gambar-gambar yang mungkin Anda perlukan untuk halaman login Anda. Download gambar disini untuk dapat membuat halaman login website dengan html dan css

3. Buat Sebuah File halaman_login.html

Buatlah file baru dengan nama “halaman_login.html” di dalam folder proyek Anda. Ini akan menjadi file utama untuk halaman login kita. Mulailah dengan struktur dasar HTML dengan menambahkan file berikut ini:

Artikel Terkait:   Cara Membuat Portofolio dengan HTML dan CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>Selamat Datang</h2>
        <img src="img/user.png" alt="Logo" class="logo">
        <form action="https://riztekno.com/">
            <div class="input-container">
                <input type="text" placeholder="Username">
            </div>
            <div class="input-container">
                <input type="password" placeholder="Password">
            </div>
            <button type="submit">Login</button>
        </form>
    </div>
</body>
</html>
 

4. Buat File style.css

Sekarang, buatlah file CSS dengan nama “style.css” di dalam folder proyek Anda. File ini akan digunakan untuk mengatur tata letak dan tampilan halaman login Anda.

Berikut ini file css yang harus Anda tambahkan untuk dapat membuat halaman login website dengan html dan css:

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.container {
    width: 400px;
    margin: 100px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.logo {
    width: 100px;
    margin-bottom: 20px;
}

h2 {
    margin-bottom: 20px;
    color: #333;
}

input[type="text"],
input[type="password"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.input-container {
    position: relative;
}

.input-container:before {
    content: '\f007';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #ccc;
}

input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder {
    color: #ccc;
}
 

5. Mengubah Tampilan Halaman Login

Anda bisa menyesuaikan tampilan halaman login sesuai keinginan Anda dengan mengedit file “style.css“. Anda bisa mengubah warna latar belakang, jenis font, ukuran elemen, dan banyak lagi.

Artikel Terkait:   Cara Membuat Landing Page dengan HTML dan CSS

6. Simpan & Lihat Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, simpan perubahan Anda dan buka file “halaman_login.html” di browser web Anda. Anda seharusnya dapat melihat halaman login sederhana yang telah Anda buat!

Preview hasil

Berikut ini preview hasil yang dapat tampil nantinya jika Anda berhasil membuat halaman login website dengan html dan css:

Penutup

Dengan demikian, kami berharap panduan ini telah memberikan Anda pemahaman yang kuat tentang cara membuat halaman login menggunakan HTML dan CSS. Dengan langkah-langkah yang kami berikan, Anda dapat memulai perjalanan Anda dalam mengembangkan halaman login untuk situs web Anda sendiri. Teruslah eksplorasi dan praktikkan keterampilan yang Anda pelajari dalam artikel ini, karena praktek adalah kunci untuk memperdalam pemahaman Anda dalam pengembangan web.

Jangan ragu untuk menyesuaikan desain dan fungsionalitas halaman login sesuai dengan kebutuhan dan gaya situs web Anda. Selain itu, jangan lupa untuk terus belajar dan mengembangkan keterampilan Anda dalam pengembangan web, karena dunia teknologi terus berkembang.

Terima kasih telah mengikuti panduan kami. Semoga artikel ini bermanfaat bagi Anda dalam perjalanan Anda menuju pengembangan web yang lebih mahir dan inovatif. Tetap semangat dan selamat mencoba!