pemrograman web menjadi salah satu materi utama di kelas 10 semester 2. Untuk menguasainya, latihan soal sangat diperlukan agar pemahaman semakin kuat. Artikel ini menyajikan sepuluh contoh soal pemrograman web lengkap dengan pembahasan singkat.
Soal HTML Dasar
-
Buatlah struktur dasar dokumen HTML yang benar. Sertakan elemen html, head, title, dan body.
Jawaban: Struktur dimulai dengan deklarasi DOCTYPE html. Kemudian tag html sebagai root, diikuti head yang berisi title, dan body untuk konten utama.
-
Tuliskan kode HTML untuk menampilkan heading utama dan paragraf sederhana. Gunakan tag h1 dan p.
Jawaban: Gunakan tag h1 untuk judul utama dan tag p untuk paragraf. Contoh: h1>Selamat Datang/h1> p>Ini adalah paragraf pertama./p>.
-
Buatlah hyperlink yang mengarah ke halaman tentang. Gunakan tag a dengan atribut href.
Jawaban: Tag a dengan href=’tentang.html’ akan membuat tautan. Teks tautan ditulis di antara tag pembuka dan penutup a.
Soal CSS dan Desain
-
Tuliskan aturan CSS untuk mengubah warna latar belakang halaman menjadi biru muda. Gunakan selector body.
Jawaban: body { background-color: lightblue; } Aturan ini ditempatkan di dalam tag style atau file CSS eksternal.
-
Buatlah kelas CSS bernama .kotak yang memiliki lebar 200px, tinggi 100px, dan border solid hitam.
Jawaban: .kotak { width: 200px; height: 100px; border: 1px solid black; } Kelas ini bisa diterapkan pada elemen div.
-
Terapkan properti font-size dan color pada elemen paragraf menggunakan CSS internal. Tujuannya agar teks berukuran 18px dan berwarna merah.
建築 設備共通機能 CADEWA Real CADEWAシリーズ 製品情報 導入事例 株式会社四電工 CAD開発部 Jawaban: p { font-size: 18px; color: red; } Letakkan kode ini di dalam tag style di bagian head.
Soal JavaScript Sederhana
-
Tuliskan kode JavaScript untuk menampilkan pesan ‘Halo Dunia’ di konsol browser. Gunakan method console.log.
Jawaban: console.log(‘Halo Dunia’); Kode ini dapat ditulis di dalam tag script atau file .js terpisah.
-
Buatlah fungsi JavaScript yang menjumlahkan dua angka. Fungsi tersebut menerima parameter a dan b, lalu mengembalikan hasil penjumlahannya.
Jawaban: function jumlah(a, b) { return a + b; } Panggil fungsi dengan jumlah(5,3) untuk mendapatkan hasil 8.
Soal Pemrograman Web Gabungan
-
Buatlah halaman HTML sederhana yang memuat form input nama dan tombol submit. Saat tombol diklik, tampilkan nama yang diinput dalam alert.
Jawaban: Gunakan input type=’text’ dengan id=’nama’, dan button dengan event onclick. Di dalam fungsi, ambil nilai input lalu panggil alert(nama).
-
Tuliskan kode untuk mengubah warna teks paragraf saat mouse berada di atasnya. Gunakan event mouseover dan CSS inline.
Jawaban: Tambahkan atribut onmouseover=’this.style.color=’red” pada elemen paragraf. Saat mouse di atas paragraf, warna teks berubah menjadi merah.
Kesimpulan
Sepuluh contoh soal pemrograman web di atas mencakup HTML, CSS, dan JavaScript. Latihan secara rutin akan membantu siswa kelas 10 memahami konsep dasar dengan lebih baik.
Dengan mengerjakan soal-soal ini, siswa dapat mengukur kemampuan dan menemukan area yang perlu diperbaiki. Teruslah berlatih dan eksplorasi untuk menjadi pengembang web yang handal.
