Skip to main content

Membuat Halaman Login HTML CSS & Bootstrap 4

Ada beberapa pengunjung bertanya bagaimana untuk Membuat halaman login dengan menggunakan HTML, CSS supaya menarik? Jawabannya sekarang sudah bisa kalian praktekan yak.

Kenapa kita membuat halaman login?
Pernahkah kalian mengunjungi sebuah website baik itu website informasi atau website jejaring sosial? Pernahkah kalian bertanya bagaiman sebuah website yang kita kunjungi begitu unik di mata kita, ada tulisan warna warni, gambar, musik dan video, apakah tidak terlintas di benak kamu bagaimana mereka ada dan terpampang di website? Mereka yang sudah saya sebutkan di atas melalui beberapa tahapan, yang pertama kita bicarakan gambar misalnya, bagaimana gambar itu ada di internet? Pertama - tama gambar diambil dengan menggunakan kamera, setelah gambar itu dinyatakan bagus oleh photographer maka gambar tersebut akan dipindahkan ke media penyimpanan komputer kemudian melakukan sedikit editing seperti mengatur kecerahan warna, atau mengkomress ukuran besar filenya. Setelah gambar tersebut dirasa sudah layak dipublikasikan maka seorang photographer membuka sebuah website atau situs dimana photo tersebut dapat dilihat oleh orang banyak dan bahkan gambarnya dapat dijual. Untuk dapat memamerkan atau menjual photonya si photographer ini harus login untuk dapat melakukan penyimpanan gambar dari komputer ke media penyimpanan internet (upload).

Apa saja yang diperlukan untuk login?
Setiap orang yang dapat melakukan login adalah orang yang pernah atu secara khusus mendaftarkan diri pda sebuah website atau situs secara pribadi atau didaftarkan karena keanggotaannya. Adapun untuk dapat melakukan login orang tersebut harus memiliki sejumlah data yang nantinya disesuaikan dengan formulir loginnya. Biasanya untuk login hanya diperlukan sebuah nama dan kata sandi, atau email dengan kata sandi dan atau sebuah kode unik yang didesign khusus oleh pemilik websitenya.

Bagaimana cara membuat halaman login?
Untuk dapat membuat halaman login ada beberapa keterampilan yang dibutuhkan, salah satunya adalah penguasaan bahasa penanda seperti HTML (HyperText Markup Language) dan CSS (Cascading Style Sheet) atau bahkan anda membutuhkan keterampilan dalam penggunaan javascript. Untuk mempermudah saya kali ini membuat simple atau sederhana login form yang dapat diutak - atik oleh kalian semua. 

Berikut kodenya: 
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>.:: Login Form ::.</title>
    <link rel="stylesheet" href="../../assets/bts/bootstrap.min.css">
  </head>
  <body>
    <div class="container-fluid">
<style>
  body, html{
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.9)),url(../../assets/img/bg.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    height:100%;
  }
  .wrap{
    background-color: #333;
    border:1px solid #333;
  }
  .login{
    width:40%;
    top:50%;
    left:50%;
    position: absolute;
    transform:translate(-50%,-50%);
    border-radius:4px;
    padding:5px;
    background-color:#3CB371;
  }
  .avatar{
    width: 100px;
    height: 100px;
    border-radius: 100px;
    transform: translate(-50%, -50%);
    left:50%;
    top:50%;
    position: relative;
  }
  .mn{
    font-size: 2em;
  }
  img{
    width:90%;
    box-sizing: border-box;
  }
  @media only screen and (max-width: 600px){
    .login{
        width:90%;
        top:50%;
        left:50%;
        position: absolute;
        transform:translate(-50%,-50%);
        border-radius:4px;
        padding:5px;
        background-color:#3CB371;
      }
  }
</style>
<div class="wrap">
  <div class="login">
  <img src="../../assets/img/logo.png" class="avatar" alt="Avatar">
    <p class="text-center mn">Login</p>
    <form method="post">
      <div class="form-group">
 
      </div>
      <div class="form-group">
        <input type="text" name="user" id="user" placeholder="Username" class="form-control" required>
      </div>
      <div class="form-group">
        <input type="password" name="ps" id="ps" placeholder="Password" class="form-control" required>
      </div>
      <div class="form-group">
        <input type="submit" name="login" id="login" class="btn btn-primary btn-block" value="Login">
        <input type="reset" name="rest" id="reset" class="btn btn-danger btn-block">
      </div>
    </form>
  </div>
</div>
    </div>
  </body>
  <script src="../../assets/jquery/jquery-3.5.1.min.js"></script>
  <script src="../../assets/bts/bootstrap.min.js"></script>
</html>

Kode - kode di atas merupakan pembuatan form login yang ada pada gambar di atas. 

Karena waktunya mepet ke jumatan jadi artikenya segini dulu ya, lain kali kita sambung lagi.
Labels:

Comments

Post a Comment

Popular posts from this blog

Pelajar dan Internet

Pelajar dan Internet  Pelajar adalah salah satu tolak ukur kemajuan suatu negara dimata dunia, internet adalah salah satu media informasi yang bersifat global, setiap orang dari berbagai penjuru dunia dapat mengaksesnya, seiring kemajuan Ilmu Teknologi maka semua kegiatan yang ada di real world harus disangkut pautkan dengan penggunaan IT, dan sekarang sudah dimulai dengan diperkenalkannya kepada pelajar SMP di Indonesia,
Post a Comment
Read more

Guru dan Internet

Guru dan Internet  Tahukah anda tentang seorang guru? dan tahukah anda hubungan guru dengan internet ? ya jika belum tahu saya juga belum tahu :D, maka dari itu coba kita telusuri apasih hubungannya guru dan internet . Tapi dalam hal ini saya tidak akan menjelaskan siapa guru dan siapa internet namun hanya sebagian kecil penyambung lidah persamaan atau perbedaan antara guru dan Internet , yang akan saya bahas adalah bagaimana cara belajar yang baik, baik itu dengan guru atau dengan internet , jadi tidak ada halangan bagi seorang pelajar atau karyawan yang memang sudah tidak punya guru karena keterbatasan waktu, apabila anda orang yang termasuk dalam kategori orang yang sudah tidak punya guru karena keterbatasan waktu, mungkin artikel ini cocok untuk anda.  Internet
3 comments
Read more

Telpon Gratis via Internet

Telephone berjam-jam tanpa PULSA? Internet selain tempat mencari dan menambah informasi ternyata Internet juga merupakan tempat komunikasi sebagaimana tujuan internet pada awalnya adalah dibentuk untuk membantu berkomunikasi antara Militer Amerika karena pada waktu itu perang dunia ke II sedang berlangsung.  Telephone Gratis?
Post a Comment
Read more