Breaking News

Belajar Membuat Template

Februari 21, 2018

Membuat Template

Assalamu'alaikum wr. wb.

1.      PENDAHULUAN

a.       Pengertian

Template website merupakan salah satu bahan dokumen atau file yang sangat dibutuhkan dalam hal pembuatan website.

2.      ALAT DAN BAHAN

1)      laptop

2)      text editor

3)      file items

4)      browser

3.      JANGKA WAKTU PELAKSANAAN KEGIATAN

4 jam

4.      PROSES TAHAP PEKERJAAN

Saya mencoba membuat template menggunakan html. Berikut adalah apa yang saya kerjakan:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;
background-image: url("sawah.JPG");
background-repeat: no-repeat;
background-size: 100% 100%}
form {border: 3px solid #f1f1f1;}

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

img.avatar {
            vertical-align: middle;
    width: 40%;
            height: 50px;
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
</style>
</head>
<body>
<center>
<div style="width:500px;background-color:#f1f1f1" class="container">
<h2 align="center" style="color:black;">Login Form</h2>

<form action="/action_page.php">
  <div class="imgcontainer">
    <img src="Anicons-Wifi.GIF" style="width:280px;height:280px;" alt="Avatar" class="avatar">
  </div>

  <div class="container" align="left">
 
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" id="myInput" required><br><br>
    <input type="checkbox" onclick="myFunction()">Show Password

<script>
function myFunction() {
    var x = document.getElementById("myInput");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
}
</script>

</body>
</html>
    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>
</div>
</body>
</html>

Berikut hasilnya:




5.      HASIL YANG DIDAPATKAN
Saya dapat membuat template pertama saya sendiri.
6.      TEMUAN PERMASALAHAN
Saya belum menemukan masalah.
7.      KESIMPULAN
Membuat template itu jika kita niati pasti mudah.
      8.   REFERENSI
            https://www.w3schools.com/howto/howto_css_login_form.asp


Tidak ada komentar

Langganan: Posting Komentar ( Atom )