Membuat Halaman Login dengan Html & CSS

Halo guyss..
Untuk artikel hari ini, saya akan berbagi artikel tentang Cara membuat halaman login dengan Html & CSS. Disini saya menggunakan software Macromedia Dreamweaver. Kenapa saya memilih software ini? Karena disini kita bisa melihat tampilan web kita saat melakukan pengerjaannya dan lebih nyaman dalam pemakaiannya. Trus apakah harus memakai Macromedia Dreamweaver?? Tidak! Anda juga bisa menggunakan software lain seperti notepad, notepad++ ataupun software lainnya yang bisa digunakan dalam pembuatan web.
Langsung saja kita mulai...
1. Pertama, buatlah file baru dan pilihlah jenis html
2. Untuk script html nya seperti ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Halaman Login Luxy</title>
</head>
<body>
    <div align="center">
        <div id="utama">
            <div class="header_isi">
            <div class="background">
            <form action="" method="get">
            <h1>Silahkan Login</h1>
            <div class="header">
            <br />
            <label style="font-size:30px"><b>Username</b></label>
            <input type="text" name="username" placeholder="Username" class="login_regis" />
            <br/>
            <label style="font-size:30px"><b>Password</b></label>
                <input type="password" name="password" placeholder="Password" class="login_regis" />
                <br/>
            <div class="checkbox">
                <input type="checkbox" name="check" /> Remember me<br/>
            </div>
            </div>
                <input type="submit" name="login" value="LOGIN" class="tombol_login" />
            </form>
            </div>
        </div>
        </div>
    </div>
</body>
</html>

3. Simpan script itu di C:xampp/htdocs dengan nama halamanlogin. Kemudian ganti Save as type (tipe penyimpanan) yang ada dibawah nama tadi dan ubah menjadi jenis HTML Document (*.htm;*.html;*.hta;*.htc;*.xhtml). Kemudian save

4. Buka software xampp. Hidupkan Apache dan Mysql-nya untuk akses ke jaringan lokal kita.
5. Setelah itu buka browser dan ketik di url dengan nama localhost/nama_file.html. Maka akan muncul seperti ini :

Terus, bagaimana cara untuk mengubah desain, tulisan, warna, dll?
Nah, disini lah fungsi css itu digunakan.
1. Copy satu gambar sesuai keinginan anda ke C:xampp/htdocs untuk digunakan sebagai background halaman login nanti
2. Masuk lagi ke Macromedia Dreamweaver lagi. Kemudian buatlah file baru dan pilihlah jenis php
3. Masukkan script ini :

/* CSS Document */
*{
padding: 0px;
margin: 0px;
}

#utama{
background-image:url(11.jpg);
background-size: cover;
height:680px;
}
.header_isi{
width: 335px;
height: 230px;
padding: 180px 0px 90px 480px;
}
.gambar{
background-color:rgba(170, 114, 123 ,0.6);
height:350px;
border:2px solid rgba(170, 114, 123 ,1);
}
img{
width: 250px;
height: 100px;
margin-left: 45px;
margin-top: 15px;
}
.login_regis {
height: 40px;
width: 260px;
text-align: center;
color: white;
font-size: 17px;
border-radius: 8px;
background-color: rgba(225, 255, 255, 0.4);
border: 3px solid #0288D1;
margin-left: 42px;
margin-top: 10px;
}

.chexbox {
font-size: 15px;
color: white;
margin-left: 45px;
margin-top: 10px;
}

.tombol_login {
width: 260px;
height: 30px;
text-align: center;
background-color: #0288D1;
color: white;
font-size: 17px;
border: 2px solid #0288D1;
border-radius: 8px;
margin-top: 20px;
margin-left: 42px;
}

.login_regis:hover {
border: 3px solid #fff;
}

.tombol_login:hover {
background-color: white;
color: #0288D1;
border: 2px solid white;
}

.copyright {
margin-top: 150px;
color: #0288D1;
font-size: 17px;
margin-left: 10px;
}

a {
text-decoration: none;
color: black;
}

.copyright a {
color:#FF0000;
}

*Catatan : pada script #utama pada bagian background-image:url(kakashi.jpg), gantilah background sesuai dengan nama background yang sudah anda masukkan sebelumnya
3. Simpan script itu di C:xampp/htdocs dengan nama style. Kemudian ganti Save as type (tipe penyimpanan) menjadi jenis Style Sheets (*.css). Kemudian save
4. Masuk ke file login lagi yang sudah dibuat sebelumnya
5. Tambah script dibawah ini di antara</title> dan < head> pada file login tadi . kemudian save
<link href="stylelat1.css" rel="stylesheet" type="text/css" >
6. Kemudian refresh (F5) browser anda tadi. maka akan berubah menjadi seperti ini :

Keren bukan..? Anda juga bisa mengkreasikan sesuai dengan keinginan anda.
Tapi ini hanya tampilan login saja ya. Belum mengarah ke halaman lain. Saya akan mengupdatenya lagi nanti.
Terima kasih sudah berkunjung :)