50 Contoh Soal Kelas 12 SMK Desain Website Interaktif
50 Contoh Soal Kelas 12 SMK Desain Website Interaktif – Berikut adalah 50 contoh soal berganda untuk mata pelajaran Desain Website Interaktif kelas 12 SMK beserta jawabannya:
1. Apa yang dimaksud dengan desain website interaktif?
a. Website yang hanya berisi teks
b. Website yang menampilkan gambar statis
c. Website yang memungkinkan interaksi pengguna
d. Website yang hanya berisi video
e. Website tanpa elemen desain
Jawaban: c. Website yang memungkinkan interaksi pengguna
2. Manakah yang merupakan bagian utama dalam desain web?
a. Backend
b. Konten
c. Kode HTML
d. Semua benar
e. Tidak ada yang benar
Jawaban: d. Semua benar
3. Apakah yang dimaksud dengan UI dalam desain website?
a. User Interface
b. User Interaction
c. Under Interaction
d. Unilateral Interaction
e. None of the above
Jawaban: a. User Interface
4. Apa yang dimaksud dengan UX dalam desain website?
a. Universal Experience
b. User Experience
c. Uniform Experience
d. Unique Experience
e. None of the above
Jawaban: b. User Experience
5. Manakah dari berikut ini yang merupakan contoh elemen interaktif dalam website?
a. Formulir kontak
b. Gambar statis
c. Teks yang tidak bisa diubah
d. Gambar background
e. Semua di atas
Jawaban: a. Formulir kontak
6. Apa fungsi dari navigasi dalam desain website?
a. Memperindah tampilan
b. Memudahkan pengunjung berpindah antar halaman
c. Menambahkan gambar
d. Meningkatkan kecepatan website
e. Menambah kompleksitas
Jawaban: b. Memudahkan pengunjung berpindah antar halaman
7. HTML digunakan untuk?
a. Menampilkan elemen-elemen visual dalam website
b. Menghubungkan website ke database
c. Membuat website dinamis
d. Mengatur tampilan dan layout
e. Membuat interaksi pengguna
Jawaban: a. Menampilkan elemen-elemen visual dalam website
8. CSS digunakan untuk?
a. Menyusun struktur data
b. Mengatur gaya dan tata letak tampilan
c. Menambahkan elemen interaktif
d. Membuat kode HTML
e. Menyimpan data website
Jawaban: b. Mengatur gaya dan tata letak tampilan
9. JavaScript pada website berfungsi untuk?
a. Menyusun layout
b. Menambahkan animasi dan efek interaktif
c. Menyusun struktur HTML
d. Mengelola database
e. Menghubungkan ke server
Jawaban: b. Menambahkan animasi dan efek interaktif
10. Manakah yang bukan merupakan prinsip desain website yang baik?
a. Konsistensi
b. Hierarki visual
c. Penggunaan font yang bervariasi
d. Responsivitas
e. Keterbacaan
Jawaban: c. Penggunaan font yang bervariasi
11. Tag HTML yang digunakan untuk mendefinisikan paragraf adalah?
a. `<p>`
b. `<div>`
c. `<header>`
d. `<span>`
e. `<section>`
Jawaban: a. `<p>`
12. Tag HTML yang digunakan untuk mendefinisikan gambar adalah?
a. `<img>`
b. `<image>`
c. `<pic>`
d. `<photo>`
e. `<src>`
Jawaban: a. `<img>`
13. Tag HTML yang digunakan untuk mendefinisikan daftar terurut adalah?
a. `<ul>`
b. `<ol>`
c. `<li>`
d. `<dl>`
e. `<dt>`
Jawaban: b. `<ol>`
14. Manakah atribut yang digunakan untuk menambahkan sumber gambar pada tag `<img>`?
a. src
b. href
c. alt
d. title
e. link
Jawaban: a. src
15. Tag HTML yang digunakan untuk membuat tautan (link) adalah?
a. `<a>`
b. `<link>`
c. `<href>`
d. `<url>`
e. `<urlref>`
Jawaban: a. `<a>`
16. Atribut HTML yang digunakan untuk membuka tautan di tab baru adalah?
a. target=”_blank”
b. href=”_new”
c. link=”_blank”
d. window=”_new”
e. tab=”_open”
Jawaban: a. target=”_blank”
17. Tag HTML yang digunakan untuk mendefinisikan tabel adalah?
a. `<table>`
b. `<tr>`
c. `<th>`
d. `<td>`
e. Semua benar
Jawaban: a. `<table>`
18. Manakah atribut yang digunakan untuk mendefinisikan lebar gambar dalam tag `<img>`?
a. width
b. size
c. dimension
d. height
e. scale
Jawaban: a. width
19. Untuk menambahkan judul di halaman website, tag HTML yang digunakan adalah?
a. `<head>`
b. `<title>`
c. `<h1>`
d. `<header>`
e. `<meta>`
Jawaban: b. `<title>`
20. Apa fungsi dari tag `<meta>` dalam HTML?
a. Menampilkan gambar
b. Menyimpan informasi metadata seperti deskripsi dan kata kunci
c. Menambahkan tabel
d. Menampilkan video
e. Tidak ada jawaban yang benar
Jawaban: b. Menyimpan informasi metadata seperti deskripsi dan kata kunci
21. Manakah yang digunakan untuk menyusun warna latar belakang pada CSS?
a. background-color
b. background
c. color
d. border-color
e. text-color
Jawaban: a. background-color
22. Tag CSS yang digunakan untuk mengubah ukuran font adalah?
a. font-size
b. font-style
c. text-size
d. size
e. font-weight
Jawaban: a. font-size
23. Manakah unit yang digunakan untuk mengukur jarak dalam CSS?
a. px
b. cm
c. em
d. rem
e. Semua benar
Jawaban: e. Semua benar
24. Tag CSS yang digunakan untuk mengatur spasi antar huruf adalah?
a. letter-spacing
b. word-spacing
c. line-height
d. text-indent
e. margin
Jawaban: a. letter-spacing
25. Apa fungsi dari selector `id` dalam CSS?
a. Mengatur elemen berdasarkan tipe tag
b. Mengatur elemen berdasarkan kelas
c. Mengatur elemen berdasarkan ID unik
d. Mengatur elemen berdasarkan tag dan kelas
e. Mengatur elemen berdasarkan jenis konten
Jawaban: c. Mengatur elemen berdasarkan ID unik
26. Manakah yang benar untuk mendeklarasikan kelas CSS?
a. `#class {}`
b. `.class {}`
c. `class {}`
d. `className {}`
e. `!class {}`
Jawaban: b. .class {}
27. Untuk membuat elemen tampil secara horizontal, tag CSS yang digunakan adalah?
a. display: block;
b. display: inline;
c. display: inline-block;
d. display: flex;
e. display: none;
Jawaban: b. display: inline;
28. Apa fungsi dari `float` dalam CSS?
a. Mengatur posisi elemen
b. Menambahkan efek bayangan
c. Menyembunyikan elemen
d. Mengatur jarak antar elemen
e. Mengatur layout elemen dalam satu baris
Jawaban: e. Mengatur layout elemen dalam satu baris
29. CSS Grid digunakan untuk?
a. Membuat animasi
b. Membuat layout halaman web berbasis grid
c. Mengatur warna elemen
d. Mengatur font dan teks
e. Menambahkan gambar
Jawaban: b. Membuat layout halaman web berbasis grid
30. Manakah dari berikut ini adalah cara untuk membuat font tebal di CSS?
a. font-weight: bold;
b. font-style: bold;
c. font: bold;
d. text-weight: bold;
e. bold-style: true;
Jawaban: a. font-weight: bold;
31. Fungsi JavaScript digunakan untuk?
a. Menyusun struktur website
b. Mengatur tampilan website
c. Menambahkan interaktivitas pada website
d. Menyimpan data dalam website
e. Mengatur server website
Jawaban: c. Menambahkan interaktivitas pada website
32. Apa itu DOM dalam JavaScript?
a. Data Output Method
b. Document Object Model
c. Document Operate Method
d. Direct Object Model
e. None of the above
Jawaban: b. Document Object Model
33. Bagaimana cara menampilkan alert di JavaScript?
a. `alert(“message”);`
b. `show(“message”);`
c. `message.show();`
d. `popup(“message”);`
e. `alertBox(“message”);`
Jawaban: a. alert(“message”);
34. Event handler `onclick` pada JavaScript digunakan untuk?
a. Menampilkan pesan
b. Menambahkan gaya CSS
c. Menangani klik pada elemen
d. Memasukkan data ke dalam form
e. Menambah elemen baru
Jawaban: c. Menangani klik pada elemen
35. Bagaimana cara mendeklarasikan variabel di JavaScript?
a. `var x;`
b. `let x;`
c. `const x;`
d. Semua benar
e. Semua salah
Jawaban: d. Semua benar
36. Manakah pernyataan yang benar tentang `addEventListener` dalam JavaScript?
a. Digunakan untuk menambahkan event listener ke elemen
b. Menampilkan pesan pop-up
c. Menyembunyikan elemen dari layar
d. Menghapus event listener
e. Menghentikan event dari elemen
Jawaban: a. Digunakan untuk menambahkan event listener ke elemen
37. Fungsi `document.getElementById()` digunakan untuk?
a. Mendapatkan elemen berdasarkan ID
b. Mengubah teks elemen
c. Menambahkan elemen baru
d. Menghapus elemen dari halaman
e. Mengubah gaya elemen
Jawaban: a. Mendapatkan elemen berdasarkan ID
38. Manakah dari berikut ini yang digunakan untuk mendefinisikan array di JavaScript?
a. `var arr = [];`
b. `var arr = {};`
c. `arr = ();`
d. `arr = <>;`
e. `None of the above`
Jawaban: a. var arr = [];
39. Perintah untuk membuat objek baru di JavaScript adalah?
a. `var obj = new Object();`
b. `var obj = {};`
c. `new Object();`
d. Semua benar
e. Semua salah
Jawaban: d. Semua benar
40. Method yang digunakan untuk menambahkan elemen ke dalam array di JavaScript adalah?
a. `push()`
b. `add()`
c. `insert()`
d. `append()`
e. `insertAt()`
Jawaban: a. push()
41. Apa yang dimaksud dengan desain web responsif?
a. Website yang dapat diakses tanpa koneksi internet
b. Website yang berubah sesuai dengan ukuran layar perangkat
c. Website yang hanya tampil pada desktop
d. Website yang hanya tampil pada perangkat mobile
e. Website yang memiliki banyak animasi
Jawaban: b. Website yang berubah sesuai dengan ukuran layar perangkat
42. Media query dalam CSS digunakan untuk?
a. Menyusun layout halaman web
b. Mengubah gaya elemen berdasarkan kondisi perangkat
c. Menambah interaktivitas dalam website
d. Mengoptimalkan gambar
e. Mengatur warna latar belakang
Jawaban: b. Mengubah gaya elemen berdasarkan kondisi perangkat
43. Tool yang digunakan untuk menguji responsivitas website adalah?
a. Chrome DevTools
b. Firebug
c. F12 Developer Tools
d. Semua benar
e. Semua salah
Jawaban: d. Semua benar
44. Manakah yang benar mengenai pengujian usability pada website?
a. Menguji kemudahan penggunaan oleh pengunjung
b. Menguji kecepatan loading
c. Menguji tampilan pada perangkat mobile
d. Semua benar
e. Tidak ada yang benar
Jawaban: d. Semua benar
45. Apa yang dimaksud dengan mobile-first design?
a. Mendesain website untuk perangkat mobile terlebih dahulu
b. Mendesain website untuk desktop terlebih dahulu
c. Mendesain website untuk tablet terlebih dahulu
d. Mendesain website untuk semua perangkat sekaligus
e. Mendesain website untuk laptop terlebih dahulu
Jawaban: a. Mendesain website untuk perangkat mobile terlebih dahulu
46. Apa yang dimaksud dengan viewport dalam desain web responsif?
a. Ukuran layar perangkat pengguna
b. Area tempat elemen-elemen website ditampilkan
c. Ukuran file gambar yang ditampilkan
d. Semua benar
e. Semua salah
Jawaban: b. Area tempat elemen-elemen website ditampilkan
47. CSS Flexbox digunakan untuk?
a. Membuat layout responsif
b. Menyusun elemen secara fleksibel dan dinamis
c. Mengatur posisi elemen dalam satu baris atau kolom
d. Semua benar
e. Tidak ada yang benar
Jawaban: d. Semua benar
48. Manakah yang digunakan untuk menyesuaikan gambar dalam desain responsif?
a. width: 100%;
b. height: 100%;
c. max-width: 100%;
d. Semua benar
e. Semua salah
Jawaban: c. max-width: 100%;
49. Browser tools yang paling umum digunakan untuk debugging website adalah?
a. Chrome DevTools
b. Firefox DevTools
c. Edge DevTools
d. Safari Developer Tools
e. Semua benar
Jawaban: e. Semua benar
50. Manakah dari berikut ini yang merupakan alat untuk mengoptimalkan gambar dalam desain web?
a. TinyPNG
b. Photoshop
c. GIMP
d. Semua benar
e. Semua salah
Jawaban: d. Semua benar
Sekian 50 Contoh Soal Kelas 12 SMK Desain Website Interaktif, Semoga Bermanfaat. Baca Juga 50 Contoh Soal Kelas 12 SMK Teknik Mesin
