Petunjuk Soal
1. Kerjakan tugas berikut pembuatan contoh soal menggunakan HTML dan CSS. File HTML
dan CSS dibuat terpisah.
2. Ganti gambar dengan gambar kalian masing-masing
3. Yang diupload : 1. File CSS dengan nama file soal.css
2. File HTML dengan nama file soal.html
3. Hasil Screenshoot tampilan jadi extensi JPG/PDF
hasil.jpg atau hasil.pdf
3. Hal-hal yang belum jelas bias ditanyakan kepada Guru Pengajar
1. Pembuatan CSS ( berikan nama soal.css )
*{
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 )
<!Doctype html>
<html>
<head>
<title>Soal</title>
<link rel="stylesheet" href="soal.css">
</head>
<body>
<center><h1><u>SMK NEGERI 4 SURABAYA</u><br>
<h2>UTS SEMESTER GANJIL 2023 / 2024<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>
