Source Code Sederhana Menampilkan Menu Login

Berikut scriptnya


*Pertama tama kita masukan dulu script html, dengan cara membuat file html, contoh : belajar5.html


<!DOCTYPE html>
<html>
<head>
<title>gajelas</title>
<link rel="stylesheet" type="text/css" href="belajar6.css">
</head>
<body>
<div class="kotak_login">
<b><p class="tulisan_login">Silahkan login</p></b>

<form>
<label>Username</label>
<input type="text" name="username" class="form_login" placeholder="Username atau email ..">

<label>Password</label>
<input type="password" name="password" class="form_login" placeholder="Password ..">

<br>
<button type="submit" class="tombol_login">
<b><a href="tabel.html">login</a></b>
</button>

<br/>
<br/>
</form>

</div>


</body>
</html>


*Dan langkah berikutnya kalian bisa memasukkan kode css nya, dengan membuat file, contoh : belajar6.css

body{
font-family: sans-serif;
background: url('black.png');


}

h1{
text-align: center;
/*ketebalan font*/
font-weight: 300;
}

.tulisan_login{
text-align: center;
/*membuat semua huruf menjadi kapital*/
text-transform: uppercase;
}

.kotak_login{
width: 250px;
background: white;
/*meletakkan form ke tengah*/
margin: 80px auto;
padding: 30px 20px;
}

label{
font-size: 11pt;
}

.form_login{
/*membuat lebar form penuh*/
box-sizing : border-box;
width: 100%;
padding: 10px;
font-size: 11pt;
margin-bottom: 20px;
}

.tombol_login{
background: #696969;
color: white;
font-size: 11pt;
width: 100%;
border: none;
border-radius: 3px;
padding: 10px 20px;
text-decoration: none;
}

.link{
color: #232323;
text-decoration: none;
font-size: 10pt;
}

Setelah kalian memasukkan script html dan juga css nya, bisa langsung kalian save, kalau sudah kalian bisa langsung membukanya di browser, dan ini lah tampilannya..

Dan selanjutnya script untuk tabel

*Script html

<!DOCTYPE html>
<html>
<head>
<title>tabel</title>
<link rel="stylesheet" type="text/css" href="tabel.css">
</head>
<body><center>
<table border="5">
<tr>
<td><b>No</b></td>
<td><b>Nama</b></td>
<td><b>Kelas</b></td>
<td><b>Jurusan</b></td>
</tr>
<tr>
<td>1.</td>
<td>Chindy</td>
<td>XI</td>
<td>TKJ</td>
</tr>
<tr>
<td>2.</td>
<td>Dinda</td>
<td>XI</td>
<td>TKJ</td>
</tr>
<tr>
<td>3.</td>
<td>Yolan</td>
<td>XI</td>
<td>TKJ</td>
</tr>
<tr>
<td>4.</td>
<td>Putri</td>
<td>XI</td>
<td>TKJ</td>
</tr>
<tr>
<td>5.</td>
<td>Sabrina</td>
<td>XI</td>
<td>TKJ</td>
</tr>
</table></center>
</body>
</html>

*Script css

body{
background: url('6.png');
background-size: cover;
margin: 200px;
color: #ffffff;
}

Dan seperti inilah tampilan akhirnya




Oke cukup sekian tutornya, semoga bermanfaat, dan selamat mencoba,~
akhir kata wassalamualaikum wr.wb

Komentar

Posting Komentar

Postingan populer dari blog ini

Contoh soal materi Firewall

   SOAL PG 1.       Suatu sistem yang dirancang untuk mencegah akses yang tidak diinginkan dari atau ke dalam suatu jaringan internet. a.        Firewall b.       Router c.        Gateway d.       Softswitch e.        Server Jawaban a     2.       Untuk mencegah berbagai serangan yang tidak diinginkan, Firewall dapat mengontrol, mengendalikan dan memutuskan suatu perintah ini , Kecuali.. a.        Menerima data b.       Mencatat aktivitas c.        Melakukan enkripsi data d.       Menolak data e.        Sebagai server Jawaban a   3.       Berikut ini merupakan kekuranagn cara kerj...
Baca selengkapnya

Cara Membuat Layanan PBX Sederhana di Cisco paket tracer

Gambar
Sebelum masuk pada materi yang akan di bahas, sedikit penjelasan tentang apa itu yang dinamakan dengan layanan PBX. PBX adalah sebuah sentral privat dengan fitur seperti sentral public yang digunakan oleh suatu lembaga / perusahaan dalam melayani komunikasi internet perusahaan tersebut. Langkah-langkahnya adalah sebagai berikut : 1. Pilih peralatan di bawah ini untuk di gunakan : Router 2811 Switches 2960 IP Phone 7960 d. Kabel Straight 2. Hubungkan Router (Fast Ethernet 0/0) dengan Switches (Fast Ethernet 0/1). 3. Hubungkan IP Phone (Port Switch) dengan Switches di port Fast Ethernet selanjutnya. all connect Hubungkan semua seperti gambar diatas.  4. Sambungkan kabel power IP Phone pada menu Physical. 5. Kemudian konfigurasi Switch dengan perintah dibawah ini : Switch config en config terminal int range fa0/1-24 switchport voice vlan 1 exit 6. Kemudian konfigurasi router dengan perintah dibawah ini : router config en config terminal ip dhcp pool voice network 192.168.31.2 255.255....
Baca selengkapnya

simulasi jaringan 5 ruang

Komponen - 2 Router - 15 pc - 5 Laptop - 1 AP - 5 Switch Kabel -Router ke Switch (straight) -Switch ke PC (straight) -AP ke Switch (straight) -Printer ke AP (sinyal) -Server ke Switch (straight) -Router ke Router (fiber) Ip ruang 1 Sr1 192.168.1.1 PC 0-2 192.168.1.2-4 laptop 192.168.1.5 Ip ruang 2 Pc 3-5 192.168.1.6-8 laptop 192.168.1.9 Ip ruang 3 Sr2 192.168.2.1 Pc 6-8 192.168.2.2-4 laptop 192.168.2.5 Ip ruang 4 Pc 9-11 192.168.2.6-8 laptop 192.168.2.9 Ip ruang 5 Pc 12-14 192.168.2.10-12 laptop 192.168.2.13 tutornya bisa cek di video yahh mohon maaf kalau banyak kekurangannya, bikinnya cepat kilatt, hahaha semoga tutor ini bisa bermanfaat, see you next video,~ tenang nanti videonya diperbaiki, biar jadi lebih bagus lagi:v akhir kata wassalamualaikum wr.wb
Baca selengkapnya