WorksheetsLATIHAN SOAL PRAKARYA-REKAYASA KELAS XII
Total questions: 50
Worksheet time: 25mins
Dalam konteks kewirausahaan digital, apa tujuan utama merancang website sebelum membangunnya?
Agar struktur, tujuan, dan kebutuhan pengguna jelas sejak awal
Agar dapat langsung menghasilkan keuntungan
Agar desain lebih menarik dibanding kompetitor
Agar tidak perlu menggunakan bahasa pemrograman lain
Agar bisa tampil di media sosial secara otomatis
Seorang siswa diminta merancang website untuk memasarkan produk lokal. Langkah pertama yang sebaiknya dilakukan adalah…
Menganalisis kebutuhan pengguna dan tujuan website
Membuat form pemesanan
Menentukan domain dan hosting
Mendesain CSS untuk halaman utama
Membuat database produk
Jika sebuah perusahaan hanya mengandalkan brosur cetak untuk promosi produk rekayasa, dampak negatifnya dibandingkan dengan promosi lewat website adalah ….
Informasi terbatas dan sulit diperbarui
Biaya produksi lebih murah
Informasi lebih cepat menyebar
Konsumen lebih mudah mengakses produk
Perusahaan lebih dikenal luas
Fungsi utama deklarasi pada awal dokumen HTML adalah...
Memberitahu browser bahwa dokumen menggunakan standar HTML5
Menentukan encoding karakter halaman
Mengaktifkan JavaScript
Mengatur tampilan halaman
Menghubungkan file CSS
Elemen <html lang="id"> berfungsi untuk...
Menentukan font bahasa Indonesia
Membuat halaman bisa dibaca mesin pencari dan pembaca layar dalam Bahasa Indonesia
Menyimpan metadata tambahan
Mengatur struktur heading
Mengubah mode warna
Salah satu manfaat utama website bagi rekayasa produk adalah ….
Menyulitkan promosi
Menjadi sarana promosi digital
Membatasi akses pasar
Menghapus jejak digital
Mengurangi inovasi produk
Software yang digunakan untuk membuka halaman web disebut ….
Compiler
Browser
EditoR
Hosting
Server
Tag <head> dan <body> memiliki perbedaan utama yaitu...
<head> untuk konten visual, <body> untuk metadata
<head> untuk metadata, <body> untuk konten yang terlihat pengguna
Keduanya menampilkan isi halaman
<head> untuk styling inline
<body> berisi skrip eksternal
Struktur HTML yang benar adalah...
<html><body><head>...</head></body></html>
<head><body><html>...</html></body></head>
<html><head>...</head><body>...</body></html>
<body><head><html></html></head></body>
<html><meta><body></body></html>
Atribut alt dalam tag <img> penting untuk...
Menambah ukuran gambar
Mengatur posisi gambar
Membantu SEO dan pembaca layar ketika gambar gagal dimuat
Memberi efek bayangan
Mempercepat loading
Elemen <main> dalam HTML5 berfungsi...
Untuk styling tombol
Sebagai header halaman
Menandai isi utama halaman
Untuk metadata
Untuk menutup tag body
File HTML biasanya disimpan dengan ekstensi ...
.docx
.htm atau .html
.css
.js
<head> dalam HTML berfungsi untuk…
menampilkan konten web
menampilkan teks tebal
menyimpan informasi metadata & judul
menampilkan gambar
membuat form
Elemen <body> digunakan untuk…
mengatur hyperlink
menyimpan CSS
menyimpan script server
menampilkan semua konten utama web
menyimpan database
Atribut bgcolor="black" pada tag <body> digunakan untuk …
Mengubah warna teks hitam
Mengubah warna heading hitam
Mengubah warna garis hitam
Mengubah background menjadi hitam
Mengubah warna link hitam
Bagaimana perintah menentukan ukuran huruf ...
<font text=”...”>
<font face=”...”>
<font color=”...”>
<font size=”...”>
<font =”...”>
Perhatikan potongan kode berikut:
<body text="red" bgcolor="black">
<p align="center"><b>Belajar HTML</b></p>
</body>
Jika dijalankan pada browser, hasil tampilan teks adalah …
Teks berwarna merah, latar belakang merah, teks tebal rata kiri
Teks berwarna hitam, latar belakang hitam, teks rata tengah
Teks berwarna merah, latar belakang putih, teks tebal rata kiri
Teks berwarna merah, latar belakang hitam, teks tebal rata tengah
Teks hitam, latar belakang putih, teks tebal rata kiri
Kelebihan HTML5 dibanding versi sebelumnya adalah...
Tidak mendukung CSS
Tidak kompatibel dengan browser lama
Hanya untuk desktop
Mendukung tag semantik baru seperti <section>, <article>, <nav>
Tidak ada perbedaan
Untuk mengatur teks agar tebal di Tailwind digunakan class...
text-bold
bold-text
text-weight
fw-bold
font-bold
Class hidden md:block artinya...
Selalu tampil
Disembunyikan di semua ukuran layar
Muncul hanya di mobile
Tidak berfungsi di Tailwind
Tersembunyi di layar kecil, muncul di layar medium ke atas
Untuk memberi warna latar belakang kuning muda digunakan class...
bg-lightyellow
bg-yellow
yellow-bg
background-yellow
bg-yellow-100
Untuk mengganti tema dark/light menggunakan JavaScript, digunakan perintah...
body.toggleTheme()
theme.switch()
setTheme()
darkMode.enable()
document.body.classList.toggle("dark")
Elemen <iframe> dapat digunakan untuk...
Membuat daftar
Mengatur warna
Membuat form
Menyimpan data
Menampilkan konten dari sumber eksternal seperti Google Maps
Dalam JavaScript, DOM singkatan dari...
Document Object Model
Data Object Mode
Dynamic Order Model
Fungsi utama fetch() dalam JavaScript adalah...
Mengambil data dari server
Menyimpan data di localStorage
Membuat elemen HTML
Menghapus CSS
Mengubah warna teks
Fitur Code di Canva AI memungkinkan pengguna…
Menulis dan mengeksekusi potongan kode untuk menghasilkan visual
Membuat presentasi otomatis dari dokumen
Menghapus latar gambar
Mencetak desain langsung
Membuat prototipe aplikasi mobile
Keunggulan utama menggunakan Canva AI Code Mode untuk web designer adalah…
Hanya mendukung bahasa Python
Menghasilkan visual berbasis kode secara langsung
Mempercepat proses rendering video
Mengedit template bawaan saja
Mengurangi ukuran file HTML
Dalam pembuatan website, Gemini pada fitur Canvas dapat membantu dengan…
Membuat animasi 3D berkualitas tinggi
Menghasilkan teks, kode, dan brainstorming dalam satu ruang kerja
Menghapus bug dalam browser
Mengirim file ke GitHub otomatis
Menjalankan server lokal
Apa kelebihan Gemini Canvas dibandingkan chatbot standar?
Hanya mampu menjawab perintah berbasis suara
Memiliki ruang kerja kolaboratif multimodal
Tidak dapat mengekspor dokumen
Tidak mendukung kode
Hanya bisa digunakan offline
Editor teks berperan penting dalam pembuatan website karena…
Menghasilkan gambar otomatis
Menyediakan lingkungan penulisan dan pengeditan kode HTML, CSS, JavaScript
Membuat video animasi
Menghapus malware dari browser
Meningkatkan kecepatan jaringan
Contoh teks editor yang paling umum digunakan untuk web development adalah…
VLC Media Player
Visual Studio Code / Notepad ++
BlueStacks
Adobe Premiere
PowerPoint
Dalam penggunaan Canva AI Code, output yang dihasilkan biasanya berupa…
File executable
Data server
Gambar atau visual yang di-render dari kode
Video animasi
File musik
Jika seorang siswa ingin mendokumentasikan kode sambil berdiskusi dengan AI dalam satu halaman yang sama, ia sebaiknya menggunakan…
Canva Editor
Notepad biasa
Gemini Canvas
Terminal Linux
Aplikasi foto editor
Keunggulan Gemini Canvas untuk pembelajaran coding adalah…
Tidak bisa membaca file
Hanya menulis jawaban singkat
Dapat menampilkan penjelasan, kode, dan revisi secara interaktif
Tidak mendukung JavaScript
Tidak bisa digunakan untuk brainstorming
Saat membuat website, kombinasi ideal alat untuk belajar desain sekaligus coding adalah…
Hanya Canva
Hanya Gemini
Canva AI untuk visual + Gemini Canvas untuk penjelasan + teks editor untuk implementasi kode
Hanya Notepad
Hanya editor gambar
Pada CSS, properti margin berfungsi untuk…
Mengatur jarak dalam elemen
Mengatur warna teks
Mengatur jarak luar elemen
Mengubah jenis huruf
Mengatur ukuran gambar
Elemen <footer> dalam HTML digunakan untuk…
Menampilkan menu navigasi
Menampilkan bagian bawah halaman seperti kontak atau copyright
Menyimpan script
Menyimpan gambar
Menampilkan judul halaman
Atribut href pada tag <a> digunakan untuk…
Menentukan ukuran hyperlink
Menentukan jenis tombol
Menentukan alamat tujuan tautan
Mengatur warna tautan
Mengatur hover effect
Keunggulan menggunakan CSS eksternal adalah…
Hanya bisa digunakan pada satu halaman
Membuat kode lebih panjang
Memisahkan tampilan dari struktur sehingga lebih rapi dan mudah dikelola
Tidak bisa dipakai untuk website besar
Tidak bisa mengatur warna
Tag <video> dalam HTML digunakan untuk…
Menampilkan musik
Menampilkan video di web
Menghubungkan web dengan kamera
Menjalankan JavaScript
Mengirim file
Manfaat AI dalam kewirausahaan digital adalah…
Menghentikan promosi otomatis
Mempersempit jangkauan pasar
Memberikan rekomendasi produk dan personalisasi
Membatasi pengunjung
Menonaktifkan website saat trafik tinggi
Di Canva AI Code Mode, kode yang ditulis pengguna biasanya menghasilkan…
Website langsung jadi
Gambar atau visual dari kode
File database
Game 3D
Software desktop
Fungsi utama JavaScript dalam website interaktif adalah…
Mengatur struktur dasar halaman
Mengatur warna tanpa CSS
Memberikan interaktivitas dan logika pada website
Menggantikan gambar
Menyimpan web ke hosting
Elemen <section> digunakan untuk…
Menampilkan gambar
Mengelompokkan konten ke dalam bagian tematik
Menampilkan teks kecil
Menyimpan script
Menyimpan metadata
Dalam Gemini Canvas, keunggulan utamanya untuk coding adalah…
Hanya menampilkan output
Tidak bisa menjalankan kode
Memungkinkan brainstorming, penjelasan, dan revisi kode dalam satu ruang kerja
Tidak mendukung bahasa JavaScript
Hanya bisa menulis teks pendek
Elemen <nav> digunakan untuk…
Menampilkan paragraf
Menampilkan video
Menyimpan link navigasi
Menyimpan seluruh isi halaman
Membuat koment
Untuk memasukkan CSS eksternal digunakan tag…
<style>
<script>
<css>
<meta>
<link>
Ekstensi file JavaScript adalah…
.css
.js
.java
.jsx
.script
Gemini Canvas mendukung mode kerja…
Membuat gambar tanpa teks
Brainstorming, coding, penjelasan, dan revisi dalam satu halaman
Hanya untuk membuat tabel
Hanya bisa menulis jawaban pendek
Tidak mendukung file
Tag <source> umumnya digunakan dalam elemen…
<table>
<form>
<video> atau <audio>
<header>
<meta>
