Newest Post
Tugas Topik 3 ( Aksi Memakai JavaScript )
|
Selasa, 13 Maret 2018
Baca selengkapnya »
kali ini saya akan melanjutkan pembahasan/tutorial dari Tugas Topik 2 (Form Login Mengguakan CSS)
Baiklah langsung saja untuk mempersingkat waktu saya memulainya.
1. Seperti biasa kita membuka applikasi xampp untuk menghubungkan ke localhost.
2. Kita melanjutkan membuka applikasi ngoding dan saya sendiri menggunakan applikasi sublime.
3. Selanjutnya kita menulis syntaks dari Tugas Topik 2 dan menambahkan file Java Script dan type dari java script sendiri menggunakan .js. Seperti gambar dibawah ini
4. Setelah itu kita tulis source codenya
5. Lalu kita tulis source code java script
6. Setelah tulis source codenya akan menampilkan seperti gambar dibawah ini
Fungsi dari source code javascript guna untuk top-up atau sebuah peringatan seperti gambar diatas.
Itulah tutorial sederhana yang saya buat semoga bermanfaat...
Baiklah langsung saja untuk mempersingkat waktu saya memulainya.
1. Seperti biasa kita membuka applikasi xampp untuk menghubungkan ke localhost.
2. Kita melanjutkan membuka applikasi ngoding dan saya sendiri menggunakan applikasi sublime.
3. Selanjutnya kita menulis syntaks dari Tugas Topik 2 dan menambahkan file Java Script dan type dari java script sendiri menggunakan .js. Seperti gambar dibawah ini
6. Setelah tulis source codenya akan menampilkan seperti gambar dibawah ini
Itulah tutorial sederhana yang saya buat semoga bermanfaat...
Tugas Topik 2 (Form Login dengan menggunakan CSS)
|
Baca selengkapnya »
Selamat siang, kali ini saya akna membahas tentang membuat form login dengan menggunakan css. Ok langsung saja...
1. Pertama-tama kita siapkan bahannya/software yaitu: xampp dan sublime text
2. Setelah diinstal softwarenya, kita pertama membuka xampp
Setelah membuka applikasi xampp. kita meng-startkan module Apache guna untuk menghubungkan file php ke google.
3. Selanjutnya kita buka software sublime text. seperti gambar dibawah ini
4. Kita menulis script nya dan css
<html>
<head>
<title> Form Login</title>
<link rel="stylesheet" type"text/css" href="css/style.css">
<body>
<div class="container">
<form>
<div class="input">
<table id="header">
<table colspan="0"><h2>Login Disini</h2></table>
<input type="text" name="username"
placeholder="Username">
</div>
<div class="input">
<input type"password" name="password"
placeholder="Password">
</div>
<input type="submit" name="submit"
value="LOGIN" class="btn-login"><br>
<a href="#">Lupa Password?</a><br>
<a href="#">Buat Akun!</a>
</form>
</div>
</body>
</head>
</html>
dan scriptnya
body{
margin: 0 auto;
background-image: url("../Kanade.Jpg");
background-repeat: no-repeat;
background-size: 100% 720px;
}
.container{
width: 500px;
height: 400px;
text-align: left-side;
background-color: rgba (52, 73, 94,0.7);
border-radius: 4px;
margin: 0 auto;
margin-top: 150px;
}
.container img{
width: 220px;
height: 220px;
margin-top: -60px;
margin-bottom: 30px;
}
input [type="text"],input[type="password"]{
height: 546px;
width: 200px;
font-size: 16px;
border: none;
margin-bottom: 20px;
margin.radius: 4px;
background-color: #fff;
}
.btn-login{
padding: 10px 30px;
color: #fff;
font-size: 16px;
border-radius: 4px;
border: none;
background-color: #B22222;
}
a{
font-size: 18px;
color: #000000;
}
Dan hasilnya Seperti gambar dibawah ini
1. Pertama-tama kita siapkan bahannya/software yaitu: xampp dan sublime text
2. Setelah diinstal softwarenya, kita pertama membuka xampp
3. Selanjutnya kita buka software sublime text. seperti gambar dibawah ini
<html>
<head>
<title> Form Login</title>
<link rel="stylesheet" type"text/css" href="css/style.css">
<body>
<div class="container">
<form>
<div class="input">
<table id="header">
<table colspan="0"><h2>Login Disini</h2></table>
<input type="text" name="username"
placeholder="Username">
</div>
<div class="input">
<input type"password" name="password"
placeholder="Password">
</div>
<input type="submit" name="submit"
value="LOGIN" class="btn-login"><br>
<a href="#">Lupa Password?</a><br>
<a href="#">Buat Akun!</a>
</form>
</div>
</body>
</head>
</html>
dan scriptnya
body{
margin: 0 auto;
background-image: url("../Kanade.Jpg");
background-repeat: no-repeat;
background-size: 100% 720px;
}
.container{
width: 500px;
height: 400px;
text-align: left-side;
background-color: rgba (52, 73, 94,0.7);
border-radius: 4px;
margin: 0 auto;
margin-top: 150px;
}
.container img{
width: 220px;
height: 220px;
margin-top: -60px;
margin-bottom: 30px;
}
input [type="text"],input[type="password"]{
height: 546px;
width: 200px;
font-size: 16px;
border: none;
margin-bottom: 20px;
margin.radius: 4px;
background-color: #fff;
}
.btn-login{
padding: 10px 30px;
color: #fff;
font-size: 16px;
border-radius: 4px;
border: none;
background-color: #B22222;
}
a{
font-size: 18px;
color: #000000;
}
Dan hasilnya Seperti gambar dibawah ini
