Pendidikan
Menguasai Dunia Kode: Contoh Soal UKP Pemrograman Web Kelas XI Semester 1
Januari 10, 2026

Menguasai Dunia Kode: Contoh Soal UKP Pemrograman Web Kelas XI Semester 1

Dunia digital terus berkembang pesat, dan pemrograman web menjadi salah satu pilar utamanya. Bagi siswa kelas XI Sekolah Menengah Kejuruan (SMK) yang mengambil jurusan terkait teknologi informasi, pemahaman mendalam tentang pemrograman web bukan hanya sekadar mata pelajaran, tetapi juga bekal penting untuk masa depan karir. Ujian Kenaikan Pangkat (UKP) pada semester 1 kelas XI menjadi momen krusial untuk mengukur sejauh mana pemahaman dan keterampilan yang telah diperoleh.

Artikel ini akan membekali Anda dengan pemahaman mendalam mengenai contoh-contoh soal UKP pemrograman web kelas XI semester 1. Kita akan mengupas tuntas berbagai aspek yang mungkin diujikan, mulai dari konsep dasar hingga implementasi praktis, serta memberikan tips dan strategi untuk menjawab soal-soal tersebut dengan optimal.

Memahami Cakupan UKP Pemrograman Web Kelas XI Semester 1

Menguasai Dunia Kode: Contoh Soal UKP Pemrograman Web Kelas XI Semester 1

Pada semester 1 kelas XI, fokus utama pemrograman web biasanya mencakup teknologi frontend, yaitu sisi klien yang berinteraksi langsung dengan pengguna. Materi yang umum diujikan meliputi:

  • HTML (HyperText Markup Language): Bahasa dasar untuk membangun struktur konten halaman web.
  • CSS (Cascading Style Sheets): Bahasa untuk mengatur tampilan dan gaya visual halaman web.
  • JavaScript (Dasar): Bahasa skrip yang digunakan untuk menambahkan interaktivitas dan fungsionalitas dinamis pada halaman web.
  • Konsep Dasar Desain Web: Prinsip-prinsip desain yang baik untuk menciptakan pengalaman pengguna yang positif.
  • Alat Bantu Pengembangan Web: Pengenalan terhadap editor kode dan browser developer tools.

Mari kita selami lebih dalam contoh-contoh soal yang mungkin muncul, dikategorikan berdasarkan teknologi utama.

Bagian 1: HTML – Fondasi Struktur Halaman Web

HTML adalah tulang punggung dari setiap halaman web. Pemahaman yang kuat tentang elemen-elemennya, atribut, dan cara menyusun struktur semantik sangatlah penting.

Contoh Soal 1: Struktur Dokumen HTML

Soal: Buatlah struktur dasar dokumen HTML5 yang semantik untuk sebuah artikel berita singkat. Dokumen ini harus mencakup:

  • Deklarasi tipe dokumen.
  • Tag <html> dengan atribut lang="id".
  • Bagian <head> yang berisi <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">, dan <title>Berita Terbaru Hari Ini</title>.
  • Bagian <body> yang berisi:
    • Tag <header> untuk judul utama artikel dengan tag <h1>.
    • Tag <main> yang berisi bagian konten artikel utama. Di dalamnya, gunakan tag <article> untuk setiap bagian berita.
    • Di dalam <article>, gunakan tag <h2> untuk sub-judul, tag <p> untuk paragraf teks, dan tag <img> untuk menampilkan gambar (dengan atribut src dan alt).
    • Tag <footer> untuk informasi penulis dan tanggal publikasi.

Pembahasan:
Soal ini menguji pemahaman siswa tentang struktur dasar HTML5 dan penggunaan elemen-elemen semantik. Elemen semantik seperti <header>, <main>, <article>, dan <footer> membantu mesin pencari dan teknologi asistif memahami konten halaman web dengan lebih baik. Atribut lang="id" menunjukkan bahasa utama dokumen, dan tag <meta> di dalam <head> sangat penting untuk tampilan responsif dan pengkodean karakter yang benar.

Contoh Kode Jawaban:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Berita Terbaru Hari Ini</title>
</head>
<body>
    <header>
        <h1>Krisis Iklim Mengancam Kehidupan di Bumi</h1>
    </header>

    <main>
        <article>
            <h2>Dampak Pemanasan Global Meningkat</h2>
            <p>Para ilmuwan memperingatkan bahwa peningkatan suhu global telah mencapai titik kritis, menyebabkan fenomena cuaca ekstrem yang semakin sering terjadi di seluruh dunia. Gelombang panas, banjir bandang, dan kekeringan berkepanjangan menjadi ancaman nyata bagi keberlangsungan hidup.</p>
            <img src="gambar-iklim.jpg" alt="Ilustrasi dampak krisis iklim">
        </article>

        <article>
            <h2>Upaya Mitigasi dan Adaptasi</h2>
            <p>Pemerintah di berbagai negara mulai mengambil langkah-langkah konkret untuk mengurangi emisi gas rumah kaca dan beradaptasi dengan perubahan iklim. Namun, upaya ini membutuhkan kolaborasi global yang lebih kuat dan kesadaran masyarakat yang lebih tinggi.</p>
        </article>
    </main>

    <footer>
        <p>Ditulis oleh: Tim Redaksi | Tanggal: 26 Oktober 2023</p>
    </footer>
</body>
</html>

Contoh Soal 2: Tabel dan Daftar dalam HTML

Soal: Buatlah sebuah tabel yang menampilkan data produk dengan kolom: "Nama Produk", "Harga", dan "Stok". Di bawah tabel tersebut, buatlah daftar tidak berurutan (unordered list) yang berisi fitur-fitur utama dari produk "Laptop XYZ".

Pembahasan:
Soal ini menguji kemampuan siswa dalam membuat tabel menggunakan tag <table>, <thead>, <tbody>, <tr>, <th>, dan <td>. Selain itu, siswa juga diuji kemampuannya dalam membuat daftar menggunakan tag <ul> dan <li>.

Contoh Kode Jawaban:

<h2>Daftar Produk</h2>
<table>
    <thead>
        <tr>
            <th>Nama Produk</th>
            <th>Harga</th>
            <th>Stok</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop XYZ</td>
            <td>Rp 15.000.000</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Mouse Gaming</td>
            <td>Rp 300.000</td>
            <td>120</td>
        </tr>
        <tr>
            <td>Keyboard Mekanik</td>
            <td>Rp 750.000</td>
            <td>80</td>
        </tr>
    </tbody>
</table>

<h2>Fitur Unggulan Laptop XYZ</h2>
<ul>
    <li>Prosesor Intel Core i7 Generasi ke-12</li>
    <li>RAM 16GB DDR4</li>
    <li>SSD 512GB NVMe</li>
    <li>Layar 14 inci Full HD IPS</li>
    <li>Kartu Grafis NVIDIA GeForce RTX 3050</li>
</ul>

Bagian 2: CSS – Mempercantik Tampilan Web

CSS adalah kunci untuk membuat halaman web terlihat menarik dan profesional. Soal-soal di bagian ini akan menguji pemahaman tentang selektor, properti, nilai, dan cara menerapkan gaya.

Contoh Soal 3: Selektor CSS dan Properti Dasar

Soal: Terapkan gaya CSS berikut pada elemen-elemen HTML yang telah dibuat pada Soal 1:

  • Untuk <h1>, ubah warna teks menjadi #333, font-size menjadi 2.5em, dan tambahkan text-align center.
  • Untuk setiap <article>, berikan margin bawah 20px, border 1px solid #ccc, dan padding 15px.
  • Untuk tag <img> di dalam <article>, atur lebar menjadi 100% dan tinggi menjadi auto agar responsif.
  • Untuk <footer>, ubah warna teks menjadi #666, font-size menjadi 0.9em, dan tambahkan text-align center serta padding 10px.

Pembahasan:
Soal ini menguji kemampuan siswa dalam menggunakan selektor CSS (seperti tag selector, descendant selector) dan menerapkan berbagai properti untuk mengubah tampilan elemen. Pemahaman tentang unit pengukuran (em, px) dan properti layout seperti text-align, margin, dan padding juga diuji.

Contoh Kode Jawaban (dalam tag <style> di <head> atau file .css terpisah):

/* Gaya untuk Soal 1 */
h1 
    color: #333;
    font-size: 2.5em;
    text-align: center;


article 
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 15px;


article img 
    width: 100%;
    height: auto;


footer 
    color: #666;
    font-size: 0.9em;
    text-align: center;
    padding: 10px;

Contoh Soal 4: CSS Box Model dan Layout Dasar

Soal: Buatlah sebuah div dengan kelas card yang memiliki lebar 300px, tinggi auto, padding 20px, border 2px solid blue, dan box-shadow 0 4px 8px rgba(0,0,0,0.1). Di dalam div tersebut, letakkan sebuah <h2> dan sebuah <p>. Berikan margin kanan 20px pada setiap card jika ada lebih dari satu card yang ditampilkan secara horizontal.

Pembahasan:
Soal ini berfokus pada pemahaman CSS Box Model (content, padding, border, margin) dan cara membuat elemen-elemen yang terorganisir seperti kartu. Properti box-shadow juga merupakan bagian dari styling visual yang umum. Konsep menata beberapa card secara horizontal membutuhkan pemahaman tentang display properties (misalnya display: inline-block atau Flexbox/Grid yang mungkin belum mendalam di semester 1).

Contoh Kode Jawaban (HTML dan CSS):

HTML:

<div class="card">
    <h2>Judul Kartu</h2>
    <p>Ini adalah deskripsi singkat untuk kartu ini. Konten di dalam kartu ini akan memiliki tampilan yang menarik.</p>
</div>

<div class="card">
    <h2>Kartu Lainnya</h2>
    <p>Ini adalah konten dari kartu kedua. Perhatikan bagaimana setiap kartu memiliki gaya yang sama.</p>
</div>

CSS:

.card 
    width: 300px;
    height: auto;
    padding: 20px;
    border: 2px solid blue;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-right: 20px; /* Akan efektif jika elemen ditampilkan inline-block atau dalam Flex/Grid */
    display: inline-block; /* Contoh sederhana untuk menata horizontal */
    vertical-align: top; /* Penting saat menggunakan inline-block */


.card h2 
    margin-top: 0;
    color: navy;

Bagian 3: JavaScript – Menghidupkan Halaman Web

JavaScript menjadi jembatan antara desain statis dan interaksi dinamis. Soal-soal di bagian ini akan menguji pemahaman tentang variabel, tipe data, operator, struktur kontrol, dan manipulasi DOM dasar.

Contoh Soal 5: Variabel, Tipe Data, dan Operator

Soal: Deklarasikan dua variabel: namaPengguna dengan nilai string "Budi Santoso" dan umur dengan nilai number 25. Buatlah sebuah ekspresi yang menggabungkan namaPengguna dengan pesan "berusia" dan umur serta "tahun". Tampilkan hasilnya dalam sebuah alert().

Pembahasan:
Soal ini menguji pemahaman dasar tentang deklarasi variabel menggunakan var, let, atau const, serta mengenali tipe data string dan number. Operasi penggabungan string (concatenation) menggunakan operator + juga diuji.

Contoh Kode Jawaban (dalam tag <script>):

let namaPengguna = "Budi Santoso";
let umur = 25;

let pesan = namaPengguna + " berusia " + umur + " tahun.";

alert(pesan); // Akan menampilkan popup "Budi Santoso berusia 25 tahun."

Contoh Soal 6: Struktur Kontrol (If-Else) dan Manipulasi DOM Dasar

Soal: Buatlah sebuah tombol HTML dengan id tombolUbahWarna. Tambahkan sebuah paragraf dengan id teksSapaan dan isi teksnya "Selamat Datang!". Gunakan JavaScript untuk menambahkan event listener pada tombol. Ketika tombol diklik, ubah warna latar belakang paragraf teksSapaan menjadi yellow dan ubah teksnya menjadi "Halo Dunia!".

Pembahasan:
Soal ini menggabungkan konsep event handling pada JavaScript dengan manipulasi Document Object Model (DOM). Siswa harus bisa mendapatkan elemen dari HTML menggunakan document.getElementById(), menambahkan event listener menggunakan addEventListener(), dan mengubah properti CSS (style.backgroundColor) serta konten teks (textContent) dari elemen HTML.

Contoh Kode Jawaban (HTML dan JavaScript):

HTML:

<button id="tombolUbahWarna">Ubah Teks dan Warna</button>
<p id="teksSapaan">Selamat Datang!</p>

JavaScript (dalam tag <script>):

// Mendapatkan referensi ke elemen-elemen HTML
const tombol = document.getElementById('tombolUbahWarna');
const paragraf = document.getElementById('teksSapaan');

// Menambahkan event listener ke tombol
tombol.addEventListener('click', function() 
    // Mengubah warna latar belakang paragraf
    paragraf.style.backgroundColor = 'yellow';

    // Mengubah teks paragraf
    paragraf.textContent = 'Halo Dunia!';
);

Bagian 4: Konsep Dasar Desain Web dan Alat Bantu

Selain kode, pemahaman tentang prinsip desain yang baik dan penggunaan alat bantu juga merupakan bagian dari UKP.

Contoh Soal 7: Prinsip Desain Web

Soal: Jelaskan tiga prinsip dasar desain web yang menurut Anda paling penting dalam menciptakan pengalaman pengguna yang positif. Berikan contoh singkat untuk masing-masing prinsip.

Pembahasan:
Soal ini bersifat konseptual dan menguji pemahaman siswa tentang estetika dan fungsionalitas web. Jawaban yang baik akan mencakup prinsip-prinsip seperti:

  • Konsistensi: Penggunaan elemen desain yang seragam di seluruh situs (misalnya, font, warna, tata letak). Contoh: Tombol "Tambah ke Keranjang" memiliki tampilan yang sama di setiap halaman produk.
  • Hierarki Visual: Mengatur elemen berdasarkan kepentingannya untuk memandu mata pengguna. Contoh: Judul utama lebih besar dari sub-judul, dan sub-judul lebih besar dari teks paragraf.
  • Kemudahan Navigasi (Usability): Pengguna harus dapat menemukan informasi yang mereka cari dengan mudah. Contoh: Menu navigasi yang jelas dan mudah diakses di bagian atas halaman.
  • Aksesibilitas: Mendesain untuk semua pengguna, termasuk mereka yang memiliki disabilitas. Contoh: Penggunaan teks alternatif untuk gambar.

Contoh Jawaban Singkat (salah satu dari banyak kemungkinan):

"Tiga prinsip penting dalam desain web adalah:

  1. Konsistensi: Memastikan elemen desain seperti warna, font, dan tata letak seragam di seluruh situs. Ini membantu membangun identitas merek dan membuat pengguna merasa nyaman karena familiar dengan antarmuka. Contohnya, semua tombol utama menggunakan warna biru dan gaya yang sama.
  2. Hierarki Visual: Mengatur elemen berdasarkan tingkat kepentingannya untuk memandu perhatian pengguna. Elemen yang lebih penting harus menonjol. Contoh, judul halaman yang besar dan tebal akan lebih dulu menarik perhatian daripada paragraf deskripsi.
  3. Kemudahan Navigasi: Pengguna harus dapat dengan mudah menemukan apa yang mereka cari. Menu navigasi yang jelas, tautan yang informatif, dan struktur situs yang logis sangat krusial. Contoh, jika pengguna ingin mencari produk, mereka harus dapat menemukan kategori produk dengan cepat melalui menu utama."

Contoh Soal 8: Penggunaan Browser Developer Tools

Soal: Jelaskan fungsi dari tab "Elements" dan "Console" pada Browser Developer Tools. Berikan contoh skenario kapan Anda akan menggunakan masing-masing tab tersebut.

Pembahasan:
Soal ini menguji pemahaman siswa tentang alat bantu pengembangan web yang esensial.

Contoh Jawaban:

"Browser Developer Tools adalah seperangkat alat yang sangat berguna bagi pengembang web.

  • Tab ‘Elements’: Tab ini memungkinkan kita untuk melihat dan mengedit struktur HTML dan gaya CSS dari sebuah halaman web secara langsung di browser. Kita dapat melihat bagaimana elemen-elemen HTML tersusun, menginspeksi atributnya, dan melihat aturan CSS apa saja yang diterapkan pada elemen tersebut. Skenario penggunaan: Jika saya ingin memeriksa mengapa sebuah elemen memiliki warna latar belakang tertentu atau mengapa sebuah div tidak memiliki lebar yang diinginkan, saya akan menggunakan tab ‘Elements’ untuk menginspeksi struktur HTML dan aturan CSS yang berlaku, lalu mencoba mengubahnya secara langsung untuk melihat efeknya.
  • Tab ‘Console’: Tab ini digunakan untuk melihat output dari kode JavaScript, seperti pesan log (console.log()), peringatan (console.warn()), atau error. Selain itu, kita juga dapat menjalankan perintah JavaScript secara interaktif di console. Skenario penggunaan: Jika kode JavaScript saya tidak berjalan sebagaimana mestinya, saya akan menggunakan console.log() untuk mencetak nilai variabel atau status eksekusi di console, sehingga saya dapat melacak di mana letak kesalahannya. Saya juga bisa menjalankan perintah JavaScript sederhana di console untuk menguji fungsionalitas kecil."

Strategi Menghadapi UKP Pemrograman Web

  1. Pahami Konsep Dasar: Jangan hanya menghafal kode, tetapi pahami logika di baliknya. Mengapa kita menggunakan tag <div>? Kapan sebaiknya menggunakan let dibandingkan var?
  2. Latihan Intensif: Praktik adalah kunci. Buatlah proyek-proyek kecil sendiri, coba berbagai variasi kode, dan selesaikan soal-soal latihan dari buku atau sumber online.
  3. Baca Dokumentasi: Biasakan membaca dokumentasi resmi (misalnya, MDN Web Docs) untuk memahami detail tentang setiap elemen HTML, properti CSS, dan fungsi JavaScript.
  4. Gunakan Alat Bantu: Familiarisasi diri dengan editor kode (VS Code, Sublime Text) dan gunakan fitur-fitur seperti autocompletion dan syntax highlighting. Pelajari cara menggunakan Browser Developer Tools.
  5. Analisis Soal: Saat mengerjakan soal UKP, baca instruksi dengan cermat. Identifikasi apa yang diminta oleh soal, teknologi apa yang perlu digunakan, dan batasan apa yang ada.
  6. Struktur Jawaban: Untuk soal yang memerlukan kode, pastikan kode Anda terstruktur dengan baik, mudah dibaca, dan sesuai dengan standar penulisan kode yang baik. Berikan komentar jika diperlukan.
  7. Manajemen Waktu: Alokasikan waktu yang cukup untuk setiap bagian soal. Jika Anda kesulitan dengan satu soal, jangan terlalu lama terpaku padanya; lanjutkan ke soal berikutnya dan kembali lagi jika ada waktu.

Kesimpulan

UKP Pemrograman Web kelas XI semester 1 adalah kesempatan emas untuk menunjukkan penguasaan Anda terhadap teknologi dasar pembuatan web. Dengan pemahaman yang kuat tentang HTML, CSS, dan JavaScript, serta persiapan yang matang melalui latihan dan pemahaman konsep, Anda akan mampu menjawab setiap tantangan yang diberikan. Ingatlah bahwa pemrograman web adalah sebuah perjalanan belajar yang berkelanjutan. Teruslah berlatih, bereksperimen, dan jangan pernah berhenti untuk belajar hal-hal baru. Selamat belajar dan semoga sukses dalam UKP Anda!

admin
0

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Archives

Categories

Recent Posts

Recent Comments

Tidak ada komentar untuk ditampilkan.