SKA/SMK -1 -Kode Soal : …..
/ / /18
PEMERINTAH PROPINSI JAWA TENGAH
DINAS PENDIDIKAN DAN KEBUDAYAAN
SEKOLAH MENENGAH KEJURUAN (SMK) NEGERI 5 SURAKARTA
PENILAIAN AKHIR SEMESTER GASAL TAHUN PELAJARAN 2018/2019
LEMBAR SOAL
MATA UJI : PEMROGRAMAN WEBSITE DAN PERANGKAT
BERGERAK
Kurikulum : K 13 Kelas : XI ( sebelas )
Program Keahlian : Hari/tanggal :
Kompetensi Keahlian : Rekayasa Perangkat Lunak Waktu :
PETUNJUK UMUM : Isilah Identitas Anda pada Lembar Jawab !.
PETUNJUK KHUSUS:
I. Berilah tanda silang ( X ) pada huruf A, B, C, D atau E yang merupakan jawaban yang paling benar pada
lembar jawaban yang telah tersedia !
1. Apakah kepanjangan dari WWW ….
A. Word Wide Web
B. Wide Web Word
C. World Wide Web
D. World Web Wide
E. Word Web Wide
2. Siapakah penemu Website …
A. Marc Andersen
B. Tim Berners Lee
C. Jim Clark
D. CERN
E. Mark Zuckernberk
3. Berikut ini yang merupakan karakterikstik website dinamis adalah ….
A. Jarang diupdate
B. Menggunakan bahasa pemrograman sederhana HTML
C. Tidak ada interaksi dengan pengunjung
D. Menggunakan database
E. Biasanya untuk website personal profile
4. Bagian website yang dilihat langsung oleh pengguna adalah …
A. Front-End
B. Back-End
C. Home
D. Profile
E. Interface
5. Yang termasuk bahasa pemrograman Back-End adalah …
A. HTML
B. PHP
C. CSS
D. Javascript
E. Bootstrap
6. Apakah kepanjangan dari HTML ….
A. Hypertext Markup Language
B. Hypertext Mark Link
C. Hype Text Markup Language
D. Hype Text Minimal Language
E. Header Text Markup Language
7. Berikut merupakan cuplikan dari bahasa pemrograman
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
SKA/SMK -2- Kode Soal :……/
/GSL/18
A. HTML
B. XML
C. PHP
D. Javascript
E. C++
8. Kode dengan cetak tebal berikut adalah contoh dari bahasa pemrograman ?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Contoh Bahasa Pemrograman</title>
<script> console.log("Hi, ini kode bahasa pemrograman"); </script> </head> <body> <script>
document.write("Bahasa Pemrograman itu keren!"); </script> </body> </html>
A. HTML
B. XML
C. PHP
D. Javascript
E. C++
9. Berikut ini yang bukan merupakan website editor adalah …
A. Notepad++
B. Microsoft Visual Studio
C. Dreamweaver
D. Adobe Photoshop
E. Notepad
10. Perhatikan kode dibawah ini !
body{
padding:0; margin:0; background:#ffffff; color:#111406;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif ;
},
Berikut ini atribut yang berfungsi untuk mengubah jenis font adalah ….
A. Body
B. Font-family
C. Arial
D. Sans-serif
E. color
11. Tag pada html yang berfungsi untuk memberikan judul pada bar dokumen adalah …
A. Head
B. Title
C. Body
D. H1
E. P
12. Perhatikan kode dibawah ini !
body{
padding:0; margin:0; background:#ffffff; color:#111406;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif ;
},
Atribut yang berfungsi untuk mengubah warna tulisan adalah …
A. Padding
B. Margin
C. Background
D. Color
E. Body
13. Tag heading yang digunakan untuk membuat judul konten yang paling besar adalah …
A. H1
B. H2
C. H3
D. H4
E. H5
14. Atribut yang digunakan untuk membuat tulisan rata kanan adalah …
A. Align:left;
B. Align:right;
C. Align:justify
D. Align:center
E. Align:top
15. CSS merupakan sintak yang digunakan untuk mempercantik halaman suatu web. Kepanjang dari CSS
adalah …
A. Cascade Style Sheet
B. Casacade sheet style
C. Code style sheet
D. Code sheet style
E. Colspan style sheet
16. Pada tahun 1994, CSS ditemukan oleh salah seorang pendiri CTO Opera yaitu yang bernama …
SKA/SMK -3- Kode Soal :……/
/GSL/18
A. Håkon Wium Lie
B. Marc Andersen
C. Tim Berners Lee
D. Jim Clark
E. Jon Stephenson von Tetzchner
17. Versi terakhir dari perkambangan CSS yang digunakan saat ini adalah …
A. CSS 1
B. CSS 2
C. CSS 3
D. CSS 4
E. CSS 5
18. CSS terdiri dari beberapa bagian yang menyusunnya, berikut ini yang tidak termasuk bagian dari penyusun
CSS adalah…
A. Tag
B. Selector
C. Properti
D. Nilai Properti
E. Blok deklarasi
19. Perhatikan kode CSS dibawah ini !
h1 {
color: red;
}
Dari kode diatas, manakah yang disebut sebagai selector …
A. h1
B. {
C. Color
D. Red
E. }
20. Selector adalah kata kunci untuk memilih elemen HTML yang akan kita atur. Berikut ini yang bukan
merupakan varian dari selector pada CSS adalah …
A. Tag
B. Class
C. Value
D. Id
E. Atribut
21. Perhatikan kode dibawah ini !
Jika terdapat kode pada file html :
<p> Berikut ini merupakan defisini dari CSS : </p>
Maka kode CSS yang bisa diberikan pada tag p untuk mengubah warna teks menjadi merah adalah …
A. p { color:red; }
B. .p { color:red; }
C. #p { color:red; }
D. p[type=text] { color:red; }
E. <p { color:red; } >
22. Berikut ini kode untuk memberikan warna background abu-abu pada bagian div dengan id elemen “header”
adalah …
A. header { background:grey; }
B. . header { background:grey; }
C. # header { background:grey; }
D. <header { background:grey; }>
E. header[type=text] { background:grey; }
23. Kode CSS berikut dapat diberikan untuk selector yang menggunakan ?
.bg-yellow {
backgound-color: yellow;
}
A. Tag
B. Class
C. Value
D. Id
E. Atribut
24. Berikut ini yang tidak termasuk penulisan CSS adalah …
SKA/SMK -4- Kode Soal :……/
/GSL/18
A. Internal CSS
B. Embeded CSS
C. Inline CSS
D. Eksternal CSS
E. Imported CSS
25. Berikut ini yang merupakan penanda dimulainya kode CSS adalah ..
<html>
1
<head>
<title>Contoh Internal CSS</title>
2
<style type="text/css">
p{ 3
font-family: serif;
line-height: 1.75em;
font-size: 18px;
}
i {
font-family: sans;
color: orange;
4
}
</style>
</head>
5
<body> </html>
A. 1
B. 2
C. 3
D. 4
E. 5
26. Perhatikan kode dibawah ini !
<body>
<style type="text/css">
h2 {
font-family: sans;
color: #333;
}
</style>
<h2>Ini judul artikel</h2>
Berikut ini merupaka teknik penulisan CSS dengan metode..
A. Internal CSS
B. Embeded CSS
C. Inline CSS
D. Eksternal CSS
E. Imported CSS
27. Perhatikan tampilan dibawah ini !
Berikut ini kode CSS yang dapat digunakan untuk menampilkan tampilan tag <h2
class=”judul”>diatas ,kecuali …
A. <h2 class=”judul” style="color:red;font-family:sans">Ini judul artikel</h2>
B. h2 {
SKA/SMK -5- Kode Soal :……/
/GSL/18
color:red;
font-family:sans;
}
C. .judul {
color:red;
font-family:sans;
}
D. <h2 class=”judul”> <font color="red" face=”sans” > Ini judul artikel</font></h2>
E. <h2 class=”judul”>{
style="color:red;font-family:sans;"
}Ini judul artikel</h2>
28. Berikut ini yang merupakan contoh dari selector universal adalah ….
A. * {
margin:0px;
}
B. p {
margin:0px;
}
C. .main {
margin:0px;
}
D. #content {
margin:0px;
}
E. <body {
margin:0px;
}>
29. Dibawah ini manfaat penggunaan dari CSS dalam pembuatan web, kecuali ...
A. Menjadi lebih sederhana
B. Dapatberkolaborasi dengan javascript
C. Mudah untuk mengubah tampilan
D. Capasitas penyimpanan menjadi lebih besar, sehingga load lebih mudah
E. Dapat digunakan semua jenis web browser
30. Perhatikan kode dibawah ini !
SKA/SMK -6- Kode Soal :……/
/GSL/18
Jika kode HTML tersebut dijalankan bagaimana pengaruh kode HTML pada baris nomor 5...
A. Siswa belajar pemrograman Web
B. siswa belajar pemrograman web
C. SISWA BELAJAR PEMROGRAMAN WEB
D. siswa belajar pemrograman web
E. Siswa Belajar Pemrograman Web
1. Perhatikan Tampilan website dan keterangannya dibawah ini ! Buatlah kode lengkap dari tampilan tersebut
!
Judul Bar : Bruno Mars
Background :
gradient : - to bottom right ,
#D41454,#FBB03B
Judul Halaman : Bruno Mars , h1 , Arial ,
warna : putih
Gambar :
Nama : bruno.png
Ukuran : width : 500 , height : 500
2. Button atau tombol adalah komponen paling dibutuhkan untuk menghubungkan antara satu halaman
website dengan halaman yang lain. Tombol bisa berupa tulisan maupun gambar. Bagaimanakah kode untuk
membuat sebuah tombol gambar yang tujuan dari link tersebut menuju ke halaman “home.html” , gambar
yang digunakan adalah “home_button.png” dengan ukuran panjang dan lebarnya adalah 50 ! (tulis hanya
kode tombol gambarnya saja)
3. List atau daftar, merupakan komponen lainnya yang penting dalam bahasa pemrograman untuk membuat
website. List dalam html memiliki dua kategori yaitu unordered list (bullet/symbol) dan ordered list
(numbering). Buatlah sebuah kode list untuk tampilan dibawah ini ! (kode listnya saja)
SKA/SMK -7- Kode Soal :……/
/GSL/18
4. Dibawah ini terdapat kode untuk membuat tabel. Isilah kode-kode yang kurang dari tampilan tersebut !
<html>
<head>
<title> Suhu Kota <………….>
</head>
<body>
<………………>
Suhu Udara di Kota
<…………… border=1 >
<tr>
<…………> No <………….>
<…………> Kota <…………>
<th>Suhu </th>
</tr>
<tr ………=center>
<td> 1 </td>
<…………> Palembang <………….>
<td> 27 </td>
</tr>
</table>
</center>
</body>
</html>
5. Perhatikan kode dibawah ini, apakah keluaran/tampilan dari kode dibawah ?
