wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

Pilihan Ganda (30 Soal) - HTML

Total questions: 35

Worksheet time: 3mins

Name
Class
Date
1.

Tag <header>

pada kode di atas berfungsi untuk …

a)

Menampilkan bagian navigasi

b)

Menampilkan bagian kepala atau pengantar halaman

c)

Menampilkan daftar proyek

d)

Menyimpan skrip JavaScript

e)

Menentukan metadata halaman

2.

Tag <section>

digunakan untuk …

a)

Menyimpan file CSS

b)

Mengelompokkan konten berdasarkan topik tertentu

c)

Membuat tabel data

d)

Membuat navigasi

e)

Menyisipkan gambar

3.

Elemen <footer>

berfungsi untuk menampilkan …

a)

Menu utama

b)

Informasi utama

c)

Bagian akhir halaman seperti hak cipta

d)

Daftar proyek

e)

Header tambahan

4.

Atribut lang="id" pada tag <html> menandakan …

a)

File CSS menggunakan bahasa Indonesia

b)

Bahasa dokumen HTML adalah bahasa Indonesia

c)

Browser menggunakan font Indonesia

d)

JavaScript ditulis dalam bahasa Indonesia

e)

Tidak memiliki fungsi

5.

5. Elemen <button id="btnContact"> akan bereaksi terhadap …

a)

Event scroll

b)

Event klik dari pengguna

c)

Event hover dari CSS

6.

Struktur <div class="card-container">

berisi …

a)

Tombol navigasi

b)

Kumpulan kartu proyek

c)

Gambar profil

d)

File CSS

e)

Script JavaScript

7.

Tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> berfungsi untuk …

a)

Mengatur ukuran teks

b)

Mengoptimalkan tampilan di perangkat mobile

c)

Menentukan warna latar halaman

d)

Mengatur bahasa halaman

e)

Menambahkan favicon

8.

File CSS dihubungkan ke HTML menggunakan tag …

a)

<style>

b)

<css>

c)

<link rel="stylesheet" href="style.css">

d)

<script>

e)

<meta>

9.

Isi dari

Hai, Saya Nama Kamu

menunjukkan …

a)

Contoh teks berwarna karena class CSS

b)

Format list

c)

Elemen gambar

d)

Tombol interaktif

e)

Elemen paragraf biasa

10.

File JavaScript dihubungkan melalui …

a)

<script src="script.js"></script>

b)

 <link src="script.js">

c)

<script href="script.js">

d)

<js>

e)

  1. <meta>

11.

Kode body { background-color: #f9f9f9; } berfungsi untuk …

a)

Mengubah warna teks

b)

Mengubah warna latar halaman

c)

Menyembunyikan elemen

d)

Mengubah ukuran font

e)

Membuat border

12.

Selektor .highlight mengacu pada …

a)

ID

b)

Class

c)

Tag

d)

Elemen JavaScript

e)

File eksternal

13.

Perintah transition: transform 0.3s; digunakan untuk …

a)

Mengubah posisi teks

b)

Membuat animasi halus saat hover

c)

Menghapus efek hover

d)

Mengubah font

e)

Membuat bayangan

14.

Kode display: flex; pada .card-container berarti …

a)

Mengatur elemen agar vertikal

b)

Mengatur layout kartu sejajar secara fleksibel

c)

Menambahkan efek animasi

d)

Mengatur warna teks

e)

Mengatur ukuran gambar

15.

Perintah box-shadow: 0 4px 8px rgba(0,0,0,0.1); berfungsi untuk …

a)

Memberi efek bayangan pada kartu

b)

Membuat border bulat

16.

Nilai border-radius: 10px; artinya …

a)

Mengatur ketebalan border

b)

Membuat sudut elemen menjadi melengkung

c)

Mengubah warna border

d)

Menambahkan padding

e)

Menentukan posisi elemen

17.

.hover dalam CSS berfungsi untuk …

a)

Menentukan warna dasar

b)

Efek saat elemen disentuh pointer/mouse

c)

Menentukan ukuran font

d)

Menentukan border

e)

Mengatur layout

18.

Warna biru utama halaman ditentukan oleh …

a)

background-color: #f9f9f9;

b)

color: #333;

c)

background-color: #2d89ef;

d)

color: #2d89ef;

e)

border: #2d89ef;

19.

Properti max-width: 900px; pada section berarti …

a)

Lebar maksimum konten adalah 900 piksel

b)

Tinggi halaman 900 piksel

c)

Mengatur padding 900 piksel

d)

Membatasi ukuran gambar

e)

Mengatur margin kiri

20.

Untuk membuat teks rata tengah digunakan properti …

a)

text-decoration

b)

text-align: center;

c)

align-items: center;

d)

justify-content: center;

e)

margin: auto;

21.

Fungsi document.getElementById() digunakan untuk …

a)

Membuat elemen HTML baru

b)

Mengambil elemen berdasarkan ID

c)

Menghapus elemen HTML

d)

Mengubah warna teks

e)

Membuka halaman baru

22.

Event listener "click" pada kode berarti …

a)

A. Aksi ketika halaman dimuat

b)

B. Aksi ketika tombol diklik

c)

C. Aksi ketika teks diubah

d)

D. Aksi ketika kursor bergerak

e)

E. Aksi ketika form dikirim

23.

Perintah alert() berfungsi untuk …

a)

Membuka tab baru

b)

Menampilkan pesan pop-up ke pengguna

c)

Menyimpan data ke database

d)

Menutup halaman

e)

Menjalankan animasi

24.

File JavaScript berada di bagian bawah halaman agar …

a)

Lebih cepat dimuat setelah HTML selesai

b)

Tidak perlu file CSS

c)

Tidak tampil di browser

d)

Menyembunyikan error

e)

Menghapus CSS

25.

Jika ID tombol diganti menjadi btnEmail, maka di script harus diganti menjadi …

a)

document.querySelector('btnEmail')

b)

document.getElementById('btnEmail')

c)

document.getElementsByClassName('btnEmail')

d)

document.querySelectorAll('#btnEmail')

e)

document.button('btnEmail')

26.

Apa yang akan terjadi jika file style.css tidak dihubungkan?

a)

Tampilan menjadi hitam putih tanpa gaya

b)

Website tidak dapat dibuka

c)

Tombol tidak berfungsi

d)

Gambar hilang

e)

File HTML error

27.

Mengapa bagian proyek dibuat dalam elemen .card terpisah?

a)

A. Agar mudah diatur dan ditata dengan CSS Flexbox

b)

B. Karena hanya bisa satu proyek

c)

C. Untuk mempercepat JavaScript

d)

D. Untuk membuat animasi otomatis

e)

E. Agar bisa dihapus dengan script

28.

Jika pengguna ingin menambah proyek baru, ia harus menambahkan …

a)

Elemen

    • b)

    Elemen

    di dalam .card-container

    c)

    Tag

    d)

    Tag