UNL.ac.id

pemrograman web menjadi materi inti di kelas X semester 1, sehingga siswa perlu berlatih dengan contoh soal yang relevan. Artikel ini menyajikan daftar soal beserta tip praktis untuk meningkatkan kemampuan coding. Dengan memahami tiap contoh, siswa dapat menguasai konsep dasar HTML, CSS, dan JavaScript secara terstruktur.

Daftar 10 Contoh Soal pemrograman web Kelas X Semester 1

1. Soal 1: Buatlah sebuah halaman HTML yang menampilkan judul dan paragraf tentang hobi favorit. Struktur tag harus mengikuti standar HTML5. Pastikan penggunaan elemen head dan body tepat.

2. Soal 2: Tambahkan gaya CSS agar judul muncul dengan warna biru dan teks paragraf rata kiri. Gunakan selector kelas untuk mengidentifikasi elemen. Hasil tampilan harus responsif pada layar desktop.

3. Soal 3: Rancang form login sederhana dengan dua input, yaitu username dan password. Form harus memiliki atribut method="post" dan action yang mengarah ke halaman dummy. Sertakan tombol submit yang berfungsi.

4. Soal 4: Implementasikan validasi JavaScript untuk memastikan kolom username tidak kosong. Tampilkan pesan peringatan menggunakan alert() bila input tidak valid. Skrip harus diletakkan di dalam tag script pada akhir body.

5. Soal 5: Buat tabel HTML yang menampilkan nilai matematika tiga siswa. Tabel harus memiliki header kolom dan border tipis. Gunakan elemen thead dan tbody untuk struktur yang jelas.

6. Soal 6: Tambahkan gambar ke dalam halaman dengan tag img dan berikan atribut alt yang deskriptif. Gambar harus diatur lebarnya menjadi 300 piksel menggunakan CSS. Pastikan gambar terletak di tengah halaman.

7. Soal 7: Buat daftar terurut yang berisi lima langkah instalasi editor kode. Setiap langkah harus menjadi item li yang jelas. Daftar harus ditampilkan dengan nomor otomatis.

8. Soal 8: Rancang halaman dengan layout dua kolom menggunakan Flexbox. Kolom kiri berisi menu navigasi, kolom kanan menampilkan konten utama. Pastikan layout tetap rapi ketika jendela browser diperkecil.

9. Soal 9: Tambahkan interaksi tombol yang mengubah warna latar belakang halaman secara acak. Gunakan fungsi JavaScript untuk menghasilkan nilai warna hexadecimal. Setiap klik harus menghasilkan warna baru.

   

10. Soal 10: Integrasikan script PHP sederhana yang menampilkan tanggal dan waktu server. Script harus ditempatkan dalam file dengan ekstensi .php. Hasil output harus terlihat di dalam elemen div pada halaman.

Tips Mengatasi Soal Pemrograman Web

Selalu baca pernyataan soal secara teliti sebelum menulis kode, karena detail kecil sering menentukan keberhasilan solusi. Pecah masalah menjadi langkah‑langkah kecil, kemudian kerjakan satu per satu untuk menghindari kebingungan.

Gunakan komentar pada kode untuk menandai bagian penting, sehingga proses debugging menjadi lebih cepat. Setelah selesai, uji setiap fungsi di berbagai browser untuk memastikan kompatibilitas.

Strategi Belajar Efektif untuk Semester 1

Jadwalkan sesi belajar rutin, misalnya dua jam setiap hari, dengan fokus pada satu topik utama seperti HTML atau CSS. Kombinasikan teori dengan praktik langsung, karena pemrograman bersifat aplikatif.

Manfaatkan sumber daya daring seperti tutorial video dan forum diskusi, namun tetap prioritaskan buku teks resmi yang disarankan guru. Catat pertanyaan yang muncul, kemudian diskusikan bersama teman atau guru pada pertemuan kelas.

Sumber Belajar Gratis dan Relevan

Website MDN Web Docs menyediakan dokumentasi lengkap tentang HTML, CSS, dan JavaScript yang mudah dipahami oleh pemula. Semua contoh kode dapat langsung dicoba di browser tanpa instalasi tambahan.

Platform belajar seperti freeCodeCamp menawarkan modul interaktif khusus untuk pemula, termasuk proyek mini yang mirip dengan contoh soal di atas. Sertifikat penyelesaian dapat menambah nilai portofolio siswa.

Kesimpulan

Dengan menguasai 10 contoh soal di atas, siswa kelas X semester 1 dapat membangun fondasi kuat dalam pemrograman web. Penambahan tips, strategi belajar, dan sumber gratis mempercepat proses pembelajaran.

Terus praktikkan setiap contoh, evaluasi hasilnya, dan tingkatkan kompleksitas secara bertahap untuk mencapai kompetensi yang diharapkan.