Cara Membuat Web Login Facebook dengan HTML dan CSS

By Posted on

Cara Membuat Web Login Facebook dengan HTML dan CSS – Dalam era digital ini, banyak orang ingin mempelajari cara membuat halaman login yang mirip dengan halaman login Facebook. Dalam panduan haikalweb kali ini, kita akan membahas langkah-langkah detail untuk membuat sebuah halaman login Facebook sederhana menggunakan HTML dan CSS. Langkah-langkahnya mudah dipahami, cocok untuk pemula yang ingin mempelajari dasar-dasar pembuatan halaman web.

Alat yang Harus di Siapkan

Sebelum Anda memulai untuk membuat web login facebook dengan html dan css. Berikut ini beberapa alat yang harus di siapkan:

  • Laptop,
  • Text editor (Visual studi code, sublime text, notepad++, dan lain sebagainya) cukup gunakan salah satunya,
  • Browser (direkomendasikan Chrome),
  • Niat.

Cara Membuat Web Login Facebook dengan HTML dan CSS

1. Buat Folder Proyek Web Login Facebook

Langkah pertama yang perlu Anda lakukan adalah membuat sebuah folder untuk proyek halaman login Facebook Anda. Anda dapat memberi nama folder ini sesuai dengan keinginan Anda, misalnya “ProyekWebLoginFacebook“.

2. Buat Folder Img

Dalam folder proyek Anda, buatlah folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di halaman login Facebook Anda. Sebagai contoh unduh gambar disini untuk implementasi awal.

3. Buat Sebuah File web_login_facebook.html

Buatlah sebuah file baru di dalam folder proyek Anda dan beri nama “web_login_facebook.html“. Ini akan menjadi file utama yang akan menampilkan halaman login Facebook Anda. Gunakan editor teks favorit Anda, seperti Notepad atau Visual Studio Code, untuk membuat file ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Facebook</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <img src="img/facebook_logo.png" alt="Facebook Logo">
        <h1>Login to Facebook</h1>
        <form>
            <input type="text" placeholder="Email or Phone" required>
            <input type="password" placeholder="Password" required>
            <button type="submit">Login</button>
        </form>
        <a href="#">Forgot password?</a>
    </div>
</body>
</html>
 

4.  Buat File style.css

Sekarang, buatlah file CSS untuk mengatur tata letak dan tampilan halaman login Facebook Anda. Buat file baru di dalam folder proyek Anda dan beri nama “style.css“.

/* style.css */

body {
    font-family: Arial, sans-serif;
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

img {
    width: 100px; /* Sesuaikan dengan ukuran yang diinginkan */
    margin-bottom: 20px;
}

h1 {
    margin-bottom: 20px;
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #1877f2;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: #1877f2;
}

a:hover {
    text-decoration: underline;
}
 

5. Mengubah Tampilan Web Login Facebook

Anda dapat mengubah tampilan halaman login Facebook sesuai dengan preferensi Anda dengan mengedit file style.css. Cobalah untuk menyesuaikan warna, font, dan tata letak sesuai dengan keinginan Anda. Gunakan  tag seperti<header>, <nav>, <section>, <footer>. untuk perubahan lainnya sesuai dengan preferensi Anda.

Artikel Terkait:  Cara Membuat Website Toko Sepatu dengan HTML dan CSS

6. Simpan dan Lihat Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan Anda. Buka file web_login_facebook.html menggunakan browser web Anda untuk melihat tampilan halaman login Facebook Anda.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah membuat sebuah halaman login Facebook sederhana menggunakan HTML dan CSS. Semoga panduan ini bermanfaat bagi Anda dalam mempelajari dasar-dasar pembuatan halaman web!

Related posts: