Pada latihan kali ini adalah pembuatan contoh soal menggunakan html, dengan text input, combobox(option), radio, button, image biodata dll.
pada kesempatan kali ini saya pisahka antara script CSS dan HTMLnya
1. Pembuatan CSS ( berikan nama soal.css )
2. Pembuatan HTML ( berikan nama soal.html )
*{
box-sizing:border-box;
margin:0 auto;
}
body{
background-color:azure;
}
html,body{
font-family:Helvetica;
}
form {
top:-150px;
left: -0px;
position:relative;
width:100%;
max-width:400px;
background-color:azure;
border-radius:0px;
box-shadow:0px 0px 0px azure;
}
.input-mode{
border:1px solid silver;
border-radius:1px;
font-size:1px;
height:20px;
padding:10 0px;
display:inline;
width:60%;
}
soal {
top:-150px;
left: -0px;
position:relative;
width:100%;
max-width:400px;
background-color:azure;
border-radius:0px;
box-shadow:0px 0px 0px azure;
}
ad {
top:-1px;
left: 20px;
position:relative;
width:100%;
max-width:400px;
background-color:azure;
border-radius:0px;
box-shadow:0px 0px 0px azure;
}
panel {
top:-1px;
left: 20px;
position:relative;
width:100%;
}
quiz1 {
top:-1px;
left: 20px;
position:relative;
width:100%;
}
quiz2 {
top:-326px;
left: 395px;
position:relative;
width:100%;
}
button {
top:-300px;
left: 400px;
position:relative;
background-color: orchid;
width:10%;
color: white;
font-size: 15px;
cursor: pointer;
}
2. Pembuatan HTML ( berikan nama soal.html )
<html>
<head>
<title>Soal</title>
<link rel="stylesheet" href="soal.css">
</head>
<body>
<center><h1><u>STT PELITA BANGSA</u><br>
<h2>UTS SEMESTER GANJIL 2017 / 2018<br>
Mata Kuliah : Pemrograman Web</h2></h1></center><br><br>
<panel>
<ad><img src="104_.jpg"></ad>
<form>
NIM : <input type="text" class="input-mode" placeholder="NIM..."><br><br>
Nama : <input type="text" class="input-mode" placeholder="Nama...."><br><br>
Jurusan :
<select>
<option nama="Jurusan"></option>
<option nama="Jurusan" >Teknik Informatika</option>
<option nama="Jurusan" >Sistem Informasi</option>
<option nama="Jurusan" >Teknik Lingkungan</option>
<option nama="Jurusan" >Manajement</option>
<option nama="Jurusan" >Akuntansi</option></select><br><br>
Kelas : <input type="text" class="input-mode" placeholder="Kelas"><br><br></form></panel>
<soal>
<h2>Contoh : <u>Soal</u></h2>
<ol><quiz1>
<li>Background di html digunakan untuk ? ...</li>
<input type="radio" name="soal1">Membuat judul di table.<br>
<input type="radio" name="soal1">Membuat latar belakang table<br>
<input type="radio" name="soal1">Membuat kolom ditabel<br>
<input type="radio" name="soal1">Membuat garis ditabel<br><br>
<li>Mana yang termasuk Bahasa pemrograman ? ...</li>
<input type="radio" name="soal2">HTML dan PHP<br>
<input type="radio" name="soal2">HTML dan CSS<br>
<input type="radio" name="soal2">Semua Benar<br>
<input type="radio" name="soal2">Semua Salah<br><br>
<li>Kepanjangan HTML ? ...</li>
<input type="radio" name="soal3">Hyper Transfer Marque Language<br>
<input type="radio" name="soal3">Hyper Text Marque Language<br>
<input type="radio" name="soal3">Hydrantisation Manupulation Language<br>
<input type="radio" name="soal3">Semua Salah<br><br></quiz1>
<quiz2> <li>Posisi < head > pada HTML terletak di ? ...</li>
<input type="radio" name="soal4">Setelah Body<br>
<input type="radio" name="soal4">Sebelum Body<br>
<input type="radio" name="soal4">Setelah < html ><br>
<input type="radio" name="soal4">Setelah < /body ><br><br>
<li>Apa yang dimaksud dengan CMS ? ...</li>
<input type="radio" name="soal5">Aplikation Membantu pembuatan Web<br>
<input type="radio" name="soal5">Builder Web<br>
<input type="radio" name="soal5">Semua Benar<br>
<input type="radio" name="soal5">Semua Salah<br>
</soal><br></quiz2>
<button class="btn btn-submit" type="submit"><b>Kirim</b> <i class="fa fa-hand-o-right" aria-hidden="true"></i></button>
<button class="btn btn-submit" type="submit"><b>Submit</b> <i class="fa fa-hand-o-right" aria-hidden="true"></i></button>
</body>
</html>
Bagus ini script nya. Mohon izin menyalin ya admin. Maturnuwun gih
ReplyDelete