Mata Pelajaran : Pemrograman Web & Perangkat Bergerak

Materi / Tema : Client Side Scripting / CSS

Guru Mapel : Irwan Wardani, S.T

A. Petunjuk
1. Baca dan pelajari setiap langkah/instruksi dibawah ini dengan cermat sebelum melaksanakan
praktek.
2. Kerjakanlah setiap instruksi yang ada berdasarkan instruksi yang telah ditentukan.
3. Kerjakanlah tugas-tugas tersebut dengan melaksanakan prinsip keselamatan, kesehatan kerja
dan lingkungan
4. Lakukanlah komunikasi dengan teman anda untuk mendapatkan informasi dalam yang
dibutuhkan dalam melaksanakan tugas praktik in.

B. Skenario
Untuk mata pelajaran Pemrograman Pemrograman Web dan Perangkat Bergerak (PWPB) pada
materi Client Side Scripting dengan tema CSS. Anda diminta untuk membuat halaman login dengan
menggunakan HTML dan CSS. Untuk mengerjakan tugas tersebut, disediakan perangkat kumputer
dengan spesifikasi OS Windows beserta aplikasi pendukung nya. Waktu yang disediakan adalah 1
Jam Pelajaran untuk Latihan (Bag. D), dan 2 Jam Pelajaran untuk Tugas (Bag. E).
C. Alat dan Bahan
1. Personal Computer (PC) berbasis windows
2. Apache Web server (Optional)
3. Visual Studio Code / Sublime Text
4. Mosilla Firefox / Google Chrome / Internet Explorer (Edge)
D. Langkah Kerja (Latihan)
1. Buatlah sebuah folder dengan nama login
2. Buka Text Editor (Visual Studio Code / Sublime), kemudian buka folder login yang tadi kita buat
3. Pada bagian Explorer yang sudah muncul nama folder TUGAS, buat file baru dengan nama
login.html

Ketik -> Enter

4. Buat file kedua dengan nama style.css

5. Isi file login.html dengan kode berikut, kemudian simpan (Ctrl+S)
6. Buka / Klik File style.css, ketik kode berkut kemudian simpan (Ctrl+S)
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type = "text"],.box input[type = "password"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}
 7. Jalankan file login pada browser

E. Soal Tugas
Buatlah sebuah halaman beranda dengan tampilan seperti berikut :