Membuat Form Login Keren Teddy Gangster

Membuat Form Login Keren Teddy Gangster - Teddy bear adalah boneka berbentuk beruang yang sangat lucu ini akan di jadikan login untuk sebuah website tetapi biar menimbulkan kesan keren jadi saya pilih gambar yang bertema gangster dan ternyata tersedia di google dan berikut bahan gambar yang kalian butuhkan.

dan selanjutnya tahap pembuatan scriptnya pertama buatlah script bernama login.html dan isi script di bawah

<html>
<head>
<title>Teddy Gangster Login</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
  <br>
       <form action="" method="post">
   <h2>Teddy Gangster</h2><br>
 
   <label>Username :</label>
   <input id="name" name="username" placeholder="username" type="text">
 
   <label>Password :</label>
   <input id="password" name="password" placeholder="**********" type="password">
 
   <center><input type="submit" name="submit" id="submit" value="Login"></center><br>
      <center><input type="submit1" name="daftar" id="daftar" value="Sing-Up"></center>
    </form>
   </div>
</body>
</html>

selanjutnya buat lagi script style.css dan isi script di bawah

body{
background: url('img/1.jpg');
background-repeat:no-repeat;
background-size:cover;
color: #fff;
}
.container {
width: 30%;
margin-top: 10%;
border-radius:15px;
margin-left: 35%;
padding: 20px 25px;
opacity:2;filter:alpha(opacity=10);
box-shadow: 5px 6px 20px 15px #DCDCDC;
}
h2{
 background-color: #FFDEAD ;opacity:0.9;filter:alpha(opacity=5);border-radius:15px;
 padding: 10px 10px;
 margin: -10px -50px;
 text-align:center;
 color: #00008B;
 font-family: calibri;


}


input[type=text]{
 width: 100%;
 height: 50px;
 padding: 5px;
 margin-bottom: 25px;
 margin-top: 5px;
 border: 2px solid #ccc;
 color: grey;
 font-size: 16px;
 font-family: arial;
}
input[type=password]{
 width: 100%;
height: 50px;
 padding: 5px;
 margin-bottom: 25px;
 margin-top: 5px;
 border: 2px solid #ccc;
 color: grey;
 font-size: 16px;
}

label{
 color: #00FFFF;
 text-shadow: 0 1px 0 BLACK;
 font-size: 15px;
 font-weight: bold;
 font-family: arial;
}

input[type=submit]{
 font-size: 16px;
 color: BLACK;
 font-weight: bold;
 cursor: pointer;
 width: 100%;
 padding: 10px 0;
 outline:none;
}
input[type=submit1]{
text-align:center;
 font-size: 16px;
 color: BLACK;
 font-weight: bold;
 cursor: pointer;
 width: 50%;
 padding: 10px 0;
 outline:none;
}

dan selanjutnya buatlah folder bernama img dan kumpulkan menjadi satu folder

dan kalian bisa coba jalankan dengan mengklik login.html dan buka di browser kalian.

Membuat Form Daftar Keren : Blue Electro

Setelah pembuatan form login blue electro sekarang kita membahas tentang pembuatan form pendaftaran blue electro bahannya hampir sama hanya saja perbedaan ada pada background body dan background containernya, saya menukarnya gambar 1 saya ganti menjadi gambar 2 hanya itu saja sih perbedaannya. terus perunahan yang lain adalah pada input text yang mana disana bertambah label email dan label re-type password.
seperti halnya yang kemarin kita membuat filenya lagi seperti awal yaitu dengan cara :
1. membuat file index.html/php lalu copykan script yang di bawah ini.

<html>
<head>
<title>Blue Electro Sign Up</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
  <br>
       <form action="" method="post">
   <h2>BLUE ELECTRO</h2><br>

   <label>Username :</label>
   <input id="name" name="username" placeholder="username" type="text">

      <label>Email :</label>
   <input id="name" name="username" placeholder="username" type="text">
 
      <label>Password :</label>
   <input id="password" name="password" placeholder="**********" type="password">
 
      <label>Re-Type Password :</label>
   <input id="password" name="password" placeholder="**********" type="password">

   <center><input type="submit" name="submit" id="submit" value="Create Account"></center><br>
      <center><input type="submit1" name="login" id="login" value="Login"></center>
    </form>
   </div>
</body>
</html>

2. selanjutnya buatlah file style.css lalu copy scriptnya.

body{
background: url('img/2.jpg');
  background-repeat:no-repeat;
background-size:cover;
color: #fff;
}
.container {
width: 30%;
margin-top: 5%;
border-radius:15px;
margin-left: 35%;
background: url('img/1.jpg');
  background-repeat:no-repeat;
background-size:cover;
padding: 20px 25px;
opacity:0.9;filter:alpha(opacity=5);
box-shadow: 6px 8px 8px 6px #DCDCDC;
}
h2{
 background-color: #F0FFFF;
 padding: 10px 10px;
 margin: -10px -50px;
 text-align:center;
 color: #000080;
 font-family: arial;
}


input[type=text]{
 width: 100%;
 height: 50px;
 padding: 5px;
 margin-bottom: 25px;
 margin-top: 5px;
 border: 2px solid #ccc;
 color: grey;
 font-size: 16px;
 font-family: arial;
}
input[type=password]{
 width: 100%;
height: 50px;
 padding: 5px;
 margin-bottom: 25px;
 margin-top: 5px;
 border: 2px solid #ccc;
 color: grey;
 font-size: 16px;
}

label{
 color: #00FFFF;
 text-shadow: 0 1px 0 BLACK;
 font-size: 15px;
 font-weight: bold;
 font-family: arial;
}

input[type=submit]{
 font-size: 16px;
 color: BLACK;
 font-weight: bold;
 cursor: pointer;
 width: 100%;
 padding: 10px 0;
 outline:none;
}
input[type=submit1]{
text-align:center;
 font-size: 16px;
 color: BLACK;
 font-weight: bold;
 cursor: pointer;
 width: 50%;
 padding: 10px 0;
 outline:none;
}

3. buat foldernya dan berinama img lalu isi dengan gambar yang ada pada pembuatan form login atau pada postingan yang disini

4. setelah kalian pastikan semuanya sudah ada pada posisinya kalian bisa langsung mencobanya menggunakan browser.

selesai deh, semoga bermanfaat.

Membuat Form Login Keren : Blue Electro

Membuat Form Login Keren : Blue Electro sangatlah mudah hanya saja perlu pemahaman yang lebih agar bisa membuatnya sendiri dan selain itu dengan memahami coding apa yang kita ketik, kita tidak perlu lagi yang namanya googling. kan sudah hafal dengan code tersebut.

nah langsung saja kita buat form loginnya dan berikut codingnya :

1. kita harus buat yang namanya index.php / index.html dengan script di bawah

<html>
<head>
<title>Blue Electro Login</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
  <br>
       <form action="" method="post">
   <h2>BLUE ELECTRO</h2><br>

   <label>Username :</label>
   <input id="name" name="username" placeholder="username" type="text">

   <label>Password :</label>
   <input id="password" name="password" placeholder="**********" type="password">

   <center><input type="submit" name="submit" id="submit" value="Login"></center><br>
      <center><input type="submit1" name="daftar" id="daftar" value="Sing-Up"></center>
    </form>
   </div>
</body>
</html>

2. selanjutnya kalian buat file style.css dengan script dibawah ini

body{
background: url('img/1.jpg');
background-repeat:no-repeat;
background-size:cover;
color: #fff;
}
.container {
width: 30%;
margin-top: 10%;
border-radius:15px;
margin-left: 35%;
background: url('img/2.jpg');
  background-repeat:no-repeat;
background-size:cover;
padding: 20px 25px;
opacity:0.9;filter:alpha(opacity=5);
box-shadow: 6px 8px 8px 6px #DCDCDC;
}
h2{
 background-color: #F0FFFF;
 padding: 10px 10px;
 margin: -10px -50px;
 text-align:center;
 color: BLUE;
 font-family: arial;
}


input[type=text]{
 width: 100%;
 height: 50px;
 padding: 5px;
 margin-bottom: 25px;
 margin-top: 5px;
 border: 2px solid #ccc;
 color: grey;
 font-size: 16px;
 font-family: arial;
}
input[type=password]{
 width: 100%;
height: 50px;
 padding: 5px;
 margin-bottom: 25px;
 margin-top: 5px;
 border: 2px solid #ccc;
 color: grey;
 font-size: 16px;
}

label{
 color: #00FFFF;
 text-shadow: 0 1px 0 BLACK;
 font-size: 15px;
 font-weight: bold;
 font-family: arial;
}

input[type=submit]{
 font-size: 16px;
 color: BLACK;
 font-weight: bold;
 cursor: pointer;
 width: 100%;
 padding: 10px 0;
 outline:none;
}
input[type=submit1]{
text-align:center;
 font-size: 16px;
 color: BLACK;
 font-weight: bold;
 cursor: pointer;
 width: 50%;
 padding: 10px 0;
 outline:none;
}

3. kalian buat folder img lalu download gambar dibawah ini

beri nama "1.jpg" dan "2.jpg" pada gambar di atas tanpa petik taruh di dalam foldernya

4. kumpulkan jadi satu semua file yang sudah di buat tadi, seperti gambar di bawah ini

lalu kalian bisa test deh di firefox kalian
dan hasilnya bisa kalian lihat seperti gambar di postingan ini

Belajar HTML Dengan Mudah Dan Cepat

Halo para mahasiswa dan mahasiswi KULONTEKNO .Belajar HTML dasar adalah sebuah langkah awal bagi kita yang ingin menjadi programer website, agar kalian bisa memahami pemrograman website untuk tingkat lanjut. website sendiri memiliki banyak kegunaan antara lain untuk bersosial mencari teman bahkan ada yang mencari penghasilan dari website itu, tapi bagi kalian yang baru ingin belajar kalian bisa ikuti tutorial di kulontekno.blogspot.com.
untuk peralatan membuat website sangatlah sederhana yang pasti kalian harus mempunyai website
1. notepad
2. firefox
3. tutorial dari kulontekno.blogspot.com

yang perlu kalian perhatikan adalah kalian wajib atau harus rajin membaca tutorial dan penjelasan dari script yang di tulis.
aplikasi untuk menulis scriptnya ada bermacam - macam mulai dari notepad biasa yang ada pada waktu instalasi windows  sampai yang harus kalian download sendiri.
aplikasi lain yang  bisa kalian gunakan untuk menulis script website adalah sebagai berikut:
1. notepad windows
2. notepad ++
3. bracket dll
kalian bisa googling sendiri tapi saya lebih menyarankan untuk menggunakan notepad ++.
sedangkan aplikasi yang bisa langsung mendesain websitenya dan hanya membutuhkan sedikit pengetahuan coding yaitu Dreamweaver, aplikasi dreamweaver sendiri sudah banyak di gunakan oleh para designer website tapi kebanyakan yang profesional lebih memilih untuk menggunakan full code dengan menulis menggunakan notepad ++ dan kawan - kawannya.
langsung saja ke pokok pembahasan tentang pemrograman webstie dasar yaitu HTML, dan dibawah ini adalah Script dari HTML.
<html>
<head>
<title>nama website</title>
<head>
<body>

</body>
</html>

penjelasannya :
setiap html wajib di awali dengan <html> dan di akhiri </html> perbedaan akhir sama awal hanya pada garis "/" untuk yang menandakan bahwa itu adalah penutup perintahnya,
<head> adalahan tempat kita memberikan judul dan beberapa kode selanjutnya.
<title> adalah nama atau tulisan yang akan muncul pada tab judul.
<body> adalah tempat kita mendesain tampilan website yang ingin kita buat.