wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

Desain Web

Total questions: 50

Worksheet time: 8mins

Name
Class
Date
1.

Website pertama di dunia dibuat oleh...

a)

Steve Jobs

b)

Bill Gates

c)

Tim Berners-Lee

d)

Mark Zuckerberg

2.

Ciri utama Web 1.0 adalah...

a)

Interaktif dan partisipatif

b)

Hanya bisa dibaca (read-only)

c)

Berbasis media sosial

d)

Menggunakan AI

3.

Teknologi yang memungkinkan pengaturan tampilan halaman web adalah...

a)

HTML

b)

CSS

c)

JavaScript

d)

PHP

4.

Era munculnya CSS pertama kali sekitar tahun...

a)

1990

b)

1996

c)

2001

d)

2010

5.

Web 2.0 dikenal dengan ciri...

a)

Statis

b)

Tidak interaktif

c)

Interaktif dan user-friendly

d)

Tanpa warna

6.

Prinsip utama UX (User Experience) adalah...

a)

Fokus pada tampilan

b)

Fokus pada pengalaman pengguna

c)

Fokus pada animasi

d)

Fokus pada warna

7.

Prinsip UI (User Interface) menekankan pada...

a)

Logika program

b)

Keamanan data

c)

Tampilan visual

d)

Struktur server

8.

Warna dan tipografi dalam desain web berfungsi untuk...

a)

Membuat situs lebih berat

b)

Menarik perhatian dan memperjelas pesan

c)

Mengurangi loading time

d)

Mencegah error

9.

Desain yang memprioritaskan tampilan di smartphone disebut...

a)

Mobile friendly

b)

Desktop only

c)

Static design

d)

Web legacy

10.

Storytelling visual dalam web berfungsi untuk...

a)

Menampilkan teks panjang

b)

Membangun narasi yang menarik

c)

Menyembunyikan informasi

d)

Menghapus gambar

11.

Prinsip consistency dalam UI berarti...

a)

Warna dan gaya berbeda di tiap halaman

b)

Keseragaman elemen visual di seluruh halaman

c)

Tampilan berubah setiap refresh

d)

Layout acak

12.

UX yang baik harus...

a)

Rumit dan detail

b)

Cepat, mudah, dan intuitif

c)

Banyak efek animasi

d)

Hanya fokus pada estetika

13.

Aksesibilitas web berarti...

a)

Desain hanya untuk pengguna ahli

b)

Dapat diakses semua pengguna termasuk difabel

c)

Hanya untuk pengguna premium

d)

Hanya untuk perangkat tertentu

14.

Micro-interaction berfungsi untuk...

a)

Membingungkan pengguna

b)

Memberi respon visual kecil pada tindakan

c)

Mengganti seluruh tampilan

d)

Menonaktifkan tombol

15.

Prinsip feedback dalam UX artinya...

a)

Sistem diam saja

b)

Sistem memberikan respon terhadap aksi pengguna

16.

Web 3.0 dikenal sebagai era...

a)

Artificial Intelligence & konektivitas data

b)

HTML statis

c)

Tanpa desain

d)

Media cetak

17.

Framework CSS populer yang sering digunakan adalah...

a)

Blender

b)

Bootstrap

c)

PowerPoint

d)

Canva

18.

Desain dark mode mulai populer karena...

a)

Meningkatkan konsumsi baterai

b)

Menyilaukan pengguna

c)

Mengurangi silau dan meningkatkan fokus

d)

Hanya tren sesaat

19.

Salah satu prinsip UX: User-Centered Design artinya...

a)

Desain berorientasi ke teknologi

b)

Desain berorientasi ke pengguna

c)

Desain berorientasi ke desainer

d)

Desain tanpa riset

20.

Website modern harus responsif, artinya...

a)

Menyesuaikan tampilan di berbagai perangkat

b)

Hanya bisa di desktop

c)

Tidak berubah ukuran

d)

Tidak menggunakan CSS

21.

Ekstensi file HTML yang benar adalah...

a)

.doc

b)

.html

c)

.css

d)

.exe

22.

Tag pembuka HTML adalah...

a)
  1. <body>

b)
  1. <html>

c)
  1. <title>

d)
  1. <head>

23.

Tag untuk menampilkan judul halaman di browser adalah...

a)

<h1>

b)

<title>

c)

<p>

d)

<head>

24.

Isi halaman web ditempatkan di dalam tag...

a)

b)

c)

d)

25.

Tag <h1> sampai <h6> digunakan untuk...

a)

Membuat hyperlink

b)

Menampilkan gambar

c)

Menentukan judul atau heading

d)

Membuat paragraf

26.

Tag <p> digunakan untuk...

a)

Paragraf

b)

Gambar

c)

Tabel

d)

Garis

27.

Untuk membuat tautan, digunakan tag...

a)

<a>

b)

<link>

c)

<button>

d)

<meta>

28.

Tag <img> digunakan untuk...

a)

Membuat tabel

b)

Menampilkan gambar

c)

Membuat daftar

d)

Menulis teks

29.

Struktur dasar HTML terdiri dari...

a)

Head dan Script

b)

Head dan Body

c)

Header dan Footer

d)

Page dan Section

30.

Tag untuk menampilkan daftar berurutan adalah...

a)

  • <ul>

b)

  1. <ol>

31.

Tag <br> berfungsi untuk...

a)

Membuat baris baru

b)

Membuat paragraf

c)

Menyisipkan gambar

d)

Menghapus teks

32.

32. Komentar dalam HTML ditulis dengan...

a)

// komentar

b)

/* komentar */

c)

<!-- komentar -->

d)

# komentar

33.

File HTML dapat dibuat menggunakan program...

a)

Notepad

b)

Excel

c)

Paint

d)

Word

34.

Tag <a href="..."> di gunakan untuk.....

a)

Menampilkan gambar

b)

Menyisipkan tautan

c)

Membuat heading

d)

Mengatur warna

35.

Atribut alt pada tag <img> berfungsi untuk...

a)

Memberi teks alternatif jika gambar tidak tampil

b)

Mengatur posisi gambar

c)

Menghapus gambar

d)

Menambah efek

36.

CSS singkatan dari...

4 lines
37.

CSS digunakan untuk...

a)

Struktur teks

b)

Mengatur tampilan halaman

c)

Menambah link

d)

Menyimpan data

38.

Sintaks dasar CSS adalah...

a)

selector { property: value; }

b)

tag = value

c)

(property) = value

d)

define style

39.

Untuk memberi warna teks digunakan properti...

a)

font

b)

color

c)

text

d)

background

40.

Untuk memberi warna latar belakang digunakan...

a)

text-color

b)

bg-color

c)

background-color

d)

fill

41.

Properti font-family digunakan untuk...

a)

Ukuran teks

b)

Jenis huruf

c)

Warna teks

d)

Gaya teks

42.

Properti font-size mengatur...

a)

Warna teks

b)

Jenis font

c)

Ukuran huruf

d)

Bayangan teks

43.

CSS eksternal disimpan dalam file dengan ekstensi...

a)

.html

b)

.css

c)

.js

d)

.xml

44.

Tag untuk menghubungkan CSS eksternal dalam HTML adalah...

a)

<link>

b)

<script>

45.

Selektor #header menandakan pemanggilan elemen berdasarkan...

a)

Tag

b)

Class

c)

ID

d)

Atribut

46.

46. Selektor .menu menandakan pemanggilan berdasarkan...

a)

ID

b)

Tag

c)

Class

d)

Variable

47.

Layout fleksibel dalam CSS dapat dibuat menggunakan...

a)

Grid dan Flexbox

b)

Table

c)

Frame

d)

Align

48.

Properti margin digunakan untuk...

a)

Mengatur jarak luar elemen

b)

Mengatur jarak dalam

c)

Mengubah warna

d)

Menambah border

49.

Properti padding digunakan untuk...

a)

Jarak luar

b)

Jarak dalam

c)

Ukuran teks

d)

Posisi gambar

50.

Untuk membuat teks berada di tengah digunakan properti...

a)

text-align: center;

b)

text-center: true;

c)

align-text: middle;

d)

font-align: center;