WEB02 / BELAJAR DAN MENCOBA
HTML, CSS, JavaScript
Masih dalam pengembangan. Belajar pelan-pelan. Gunakan komputer sendiri dan data contoh.
Isi pelajaran ini
Kita belajar apa?
HTML mengatur isi dan susunan halaman. CSS mengatur tampilannya. JavaScript membuat halaman merespons tindakan, misalnya tombol ditekan. File yang dikirim ke browser dapat dibaca pengguna.
Bayangkan seperti ini
HTML seperti susunan rumah, CSS seperti cat dan dekorasi, JavaScript seperti tombol yang menyalakan lampu.
Arti kata yang mungkin baru
- browser
- aplikasi untuk membuka website
Penjelasan tambahan jika kamu ingin tahu lebih jauh
HTML memberi struktur, CSS memberi presentasi, dan JavaScript memberi perilaku. Sumber yang dikirim ke browser dapat dibaca pengguna. Menaruh password atau API secret dalam JavaScript publik berarti membagikannya ke setiap pengunjung.
Persiapan
Siapkan catatan dan baca panduan perangkat. Pakai data buatan, bukan data pribadi. Baca satu langkah, kerjakan, lalu periksa hasilnya sebelum melanjutkan.
Pelajaran ini tidak meminta kamu menjalankan server lab. Siapkan aplikasi atau file yang disebut pada langkah latihan di bawah.
Langkah latihan
- Buat folder latihan baru.
- Salin contoh halaman di bawah ke file latihan.html.
- Buka file itu dengan browser.
- Tekan tombol Ubah teks dan perhatikan tulisan.
- Ubah satu tulisan pada file, simpan, lalu muat ulang browser.
Contoh halaman latihan mandiri
<!doctype html>
<html lang="id">
<meta charset="utf-8">
<title>Latihan lokal</title>
<button id="ubah">Ubah teks</button>
<p id="hasil">Belum diubah</p>
<script>
document.getElementById("ubah").addEventListener("click", () => {
document.getElementById("hasil").textContent = "Berhasil lokal";
});
</script>
</html>Hasil yang diharapkan
Kamu melihat perbedaan mengubah file dan menekan tombol pada halaman.
Bandingkan dengan hasilmu sendiri. Jika berbeda, tulis apa yang terlihat lalu baca bagian bantuan di bawah. Jangan mengaku berhasil jika langkahnya belum kamu coba.
Jika terhambat
Berhenti sebentar dan baca pesan yang muncul. Periksa nama file, folder, alamat, dan apakah program latihan masih berjalan. Ulangi satu langkah saja. Jika tetap bingung, minta bantuan guru atau pendamping; jangan mematikan keamanan perangkat.
Petunjuk khusus untuk pelajaran ini
Jika tidak berubah, pastikan membuka folder salinan dan reload tanpa cache. Jangan ubah paket publik asli tanpa backup.
Apa yang perlu kamu catat?
Tulis langkah yang kamu lakukan dan hasil yang benar-benar terlihat. Tambahkan satu kalimat: “Saya belajar bahwa …”. Untuk latihan menggambar, simpan gambar dan jawabanmu.
Cek pemahamanmu
Apa peran CSS?
Buka pembahasan
Mengatur presentasi halaman.
Tantangan mandiri
Buat tombol sederhana dengan event listener yang mengganti teks lewat textContent.
Pedoman penilaian tantangan
Jawaban harus sesuai hasil aktual, menyebut batas kesimpulan, dan tidak keluar scope. Gunakan langkah serta hasil harapan pelajaran sebagai pembanding; nilai 0 bila belum ada, 1 bila sebagian, 2 bila jelas dan dapat ditinjau.
Perbaikan & retest
Simpan secret hanya di layanan yang sesuai; website statis ini tidak memerlukannya.