wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

PSAS Pemrograman Web

Total questions: 40

Worksheet time: 1hrs 20mins

Name
Class
Date
1.

Apa kepanjangan dari CSS?

a)

Cascading Style Sheets

b)

Colorful Style Sheets

c)

Computer Style Sheets

d)

Creative Sheet Styles

2.

Mengapa kita harus menggunakan CSS?

a)

Untuk memberi gaya dan tata letak halaman web

b)

Supaya website bisa dinamis

c)

Agar tampilan menjadi tidak responsif

d)

Supaya website bisa diakses secara online

3.

Manakah yang digunakan untuk memberikan warna latar belakang pada elemen HTML menggunakan CSS?

a)

color

b)

bgcolor

c)

background-color

d)

font-color

4.

Properti CSS yang digunakan untuk mengatur jenis huruf yaitu font-.....

a)
family
b)

size

c)

type

d)

text

5.

Apa fungsi dari properti padding dalam CSS?

a)

Mengatur jarak antara elemen dan batas luar

b)

Mengatur jarak antara elemen dan kontennya

c)

Mengatur ukuran teks

d)

Mengatur ukuran elemen

6.

Untuk mengubah warna teks dalam CSS, kita menggunakan properti:

a)

text-color

b)

font-style

c)

font-color

d)

color

7.

Apakah yang dimaksud dengan selektor kelas (class selector) dalam CSS?

a)

Selektor yang digunakan untuk elemen spesifik berdasarkan ID

b)

Selektor yang digunakan untuk elemen berdasarkan jenisnya

c)

Selektor yang digunakan untuk mengidentifikasi elemen dengan kelas tertentu

d)

Selektor yang digunakan untuk memilih elemen berdasarkan atribut

8.

Bagaimana cara menggunakan beberapa file CSS dalam satu halaman HTML?

a)

Menggunakan tag <style> berulang kali

b)

Menggunakan atribut href dalam tag <link>

c)

Menggunakan beberapa tag <link> dengan atribut rel="stylesheet"

d)

Menggunakan tag <import>

9.

Untuk membuat teks dalam elemen berada di tengah secara horizontal, properti CSS yang digunakan adalah...

a)

text-align: middle;

b)

text-align: center;

c)

horizontal-align: center;

d)

align-content: center;

10.

Bagaimana cara menambahkan CSS eksternal ke dalam halaman HTML?

a)

<link rel="stylesheet" type="text/css" href="styles.css">

b)

<style href="styles.css">

c)

<css link="styles.css">

d)

<stylesheet src="styles.css">

11.

Apa yang dimaksud dengan "responsive design" dalam konteks CSS?

a)

Desain yang menggunakan CSS Grid

b)

Desain yang menyesuaikan tampilannya dengan ukuran layar perangkat

c)

Desain yang hanya digunakan untuk perangkat mobile

d)

Desain yang memuat halaman lebih cepat

12.

Selector class ditandai dengan tanda ...

a)

<!--

b)

.

c)

#

d)

*

13.

Manakah dari berikut ini yang merupakan cara yang benar untuk mengomentari kode CSS?

a)

// Ini adalah komentar

b)

/* Ini adalah komentar */

c)

<!-- ini adalah komentar -->

d)

** Ini adalah komentar **

14.

Apabila kita ingin mengganti style sebuah paragraf yang ada di dalam class main, cara pemanggilannya adalah ...

a)

.main

b)

p main

c)

.main p

d)

#main p

15.

Apakah yang dimaksud dengan selektor ID (ID selector) dalam CSS?

a)

Selektor yang digunakan untuk elemen berdasarkan kelas

b)

Selektor yang digunakan untuk elemen spesifik berdasarkan ID

c)

Selektor yang digunakan untuk semua elemen

d)

Selektor yang digunakan untuk elemen berdasarkan atribut

16.

Apa arti dari kelas hover:bg-blue-500 dalam Tailwind CSS?

a)

Memberikan warna latar belakang biru secara permanen

b)

Memberikan warna latar belakang biru hanya pada elemen yang diklik

c)

Memberikan warna latar belakang biru saat kursor melayang di atas elemen

d)

Memberikan warna latar belakang biru dengan transparansi

17.

Bagaimana cara mengatur teks menjadi tebal di Tailwind CSS?

a)

text-large

b)

text-bold

c)

text-thick

d)

font-bold

18.

Apa hasil dari kelas grid-cols-3 dalam Tailwind CSS?

a)

Menambahkan margin pada 3 kolom

b)

Membagi kolom menjadi 3 bagian sama besar

c)

Menentukan lebar kolom ke 3px

d)

Mengatur grid menjadi hanya memiliki 3 baris

19.

Apa yang dimaksud dengan utility-first framework dalam Tailwind CSS?

a)

Framework yang menyediakan kelas kecil yang bisa dikombinasikan untuk membuat desain

b)

Framework yang hanya menyediakan kelas-kelas untuk komponen kompleks

c)

Framework yang otomatis menghasilkan kode CSS

d)

Framework yang hanya mendukung proyek berbasis JavaScript

20.

Bagaimana cara mengintegrasikan Tailwind CSS dalam proyek baru?

a)

Menulis semua kelas secara manual tanpa file tambahan

b)

Membuat file CSS dengan framework lain

c)

Menggunakan file CDN atau menginstalnya melalui npm (CLI)

d)

Menggunakan Tailwind hanya dengan framework seperti React atau Vue

21.

Apa fungsi file tailwind.config.js dalam proyek Tailwind CSS?

a)

Mengatur konfigurasi global seperti warna, font, atau breakpoint

b)

Menyimpan semua gaya yang ditulis dalam Tailwind CSS

c)

Mengatur file CDN yang digunakan dalam proyek

d)

Tidak ada fungsi khusus, hanya file tambahan

22.

Apa keunggulan utama Tailwind CSS dibandingkan framework lain seperti Bootstrap?

a)

Tailwind CSS lebih sederhana dan ringan tanpa komponen bawaan

b)

Tailwind CSS memiliki dokumentasi yang lebih lengkap daripada framework lain

c)

Tailwind CSS mendukung semua browser tanpa pengaturan tambahan

d)

Tailwind CSS memberikan fleksibilitas penuh untuk desain tanpa keterbatasan gaya bawaan

23.

Kapan kita perlu menggunakan fitur container di Tailwind CSS?

a)

Ketika ingin membuat elemen responsif secara horizontal dengan lebar maksimum tertentu

b)

Ketika elemen membutuhkan margin besar secara otomatis

c)

Untuk mengatur tinggi elemen ke layar penuh

d)

Untuk membuat elemen menjadi elemen inline

24.

Apa peran direktori node_modules saat menggunakan Tailwind CSS melalui npm (Tailwind CLI)?

a)

Menyimpan elemen responsif dari Tailwind CSS

b)

Menyimpan file HTML proyek

c)

Menyimpan file konfigurasi proyek

d)

Menyimpan file CSS dan JavaScript bawaan dari Tailwind CSS

25.

Apa arti kelas w-1/2 dalam Tailwind CSS?

a)

Memberikan margin sebesar 50%

b)

Memberikan padding sebesar 50%

c)

Mengatur lebar elemen menjadi setengah dari kontainer induknya

d)

Mengatur tinggi elemen menjadi setengah

26.

Kelas apa yang digunakan untuk menambahkan garis luar pada elemen?

a)

outline

b)

border

c)

shadow

d)

line-out

27.

Kelas mana yang digunakan untuk mengatur elemen menjadi full width?

a)

full-width

b)

width-100

c)

w-100

d)

w-full

28.

Apa yang dilakukan oleh kelas uppercase?

a)

Membuat teks menjadi huruf kapital semua

b)

Membuat teks menjadi huruf kecil semua

c)

Membuat teks menjadi tebal

d)

Membuat teks menjadi rata kiri

29.

Agar tulisan "Home, Menu, Contact" menjadi sejajar dalam tampilan web yang menggunakan Tailwind, gunakan class ...

a)

block

b)

flex

c)

px-auto

d)

gap-2

30.

Class yang tepat untuk tag <div> untuk mengatur tata letak secara horizontal dengan jarak sama rata adalah ...

a)

justify-center

b)

justify-around

c)

justify-between

d)

justify-evenly

31.

Class yang tepat untuk tag <div> ke 4 dan <div> ke 7 dalam penggunaan Tailwind adalah ...

a)

colspan-2

b)

col-span-2

c)

rowspan-auto

d)

row-span-2

32.

Atribut berikut yang digunakan untuk membuka link pada jendela atau tab baru adalah ...

a)


_blank

b)

_top

c)

_parent

d)

_inframe

33.

Elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain adalah ...

a)


Image

b)

Form

c)

Hyperlink

d)

Tabel

34.

Dalam HTML terdapat tag yang berfungsi sebagai pembuat input dengan pilihan yang berbentuk list drop down adalah ...

a)

<checkbox>

b)

<select>

c)

<option>

d)

<optgroup>

35.

Tag HTML yang digunakan untuk membuat daftar (list) menggunakan nomor, huruf, romawi, dan lainnya ...

a)

<dt>

b)

<li>

c)

<ul>

d)

<ol>

36.

Nama unik yang diberikan untuk mengidentifikasi nama web di jaringan komputer ataupun internet disebut ...

a)

Domain

b)

HTTP

c)

Internet

d)

Hosting

37.

Salah satu atribut yang digunakan untuk menentukan URL (lokasi) gambar pada HTML adalah ...

a)

src

b)

float

c)

img

d)

alt

38.

Teks editor untuk menulis HTML di antaranya, kecuali ...

a)

Visual Studio Code

b)

Sublime Text

c)

Notepad++

d)

Photoshop

39.

Orang yang mempunyai keahlian bahasa pemrograman dan dapat membuat program yang diperlukan pada sistem komputer disebut ...

a)

Programmer

b)

Teknisi

c)

Administrator

d)

Operator

40.

Apa kepanjangan WWW ...

a)

Word Wide Web

b)

Wade World Web

c)

World Web Wide

d)

World Wide Web