HTML, CSS, dan JavaScript untuk Pemula: Membangun Halaman Web Interaktif

Situs web modern menggabungkan tiga teknologi yang bekerja bersama. HTML mendefinisikan struktur konten, CSS mendefinisikan tampilan dan tata letaknya, dan JavaScript membuat halaman merespons apa yang dilakukan pengguna, seperti mengklik tombol, mengetik teks, atau memilih tab. Artikel ini membangun contoh kecil yang menyatukan ketiganya, menjelaskan fungsi setiap bagian, dan menunjukkan mengapa membuat tanggung jawab mereka terpisah itu bermanfaat.

Memahami peran setiap bahasa

Bayangkan membangun sebuah rumah. HTML adalah struktur dan dindingnya: ia menentukan di mana ruang tamu, dapur, dan pintu berada. CSS adalah cat, bahan, dan susunan perabot yang membuat rumah nyaman dihuni. JavaScript adalah sistem listrik dan sakelarnya: tekan sakelar dan lampu menyala, buka pintu dan bel berbunyi.

Memisahkan peran ini sangat berguna. Untuk mengubah warna di seluruh situs, Anda hanya mengedit CSS dan membiarkan strukturnya. Untuk menambahkan interaksi, Anda menulis JavaScript tanpa mengubah tampilan. Ini membuat kode lebih mudah dibaca dan dirawat seiring waktu.

Struktur proyek

Buat folder bernama `interactive-demo` yang berisi tiga berkas.

`index.html` untuk struktur
`style.css` untuk gaya
`script.js` untuk perilaku interaktif

Simpan ketiga berkas dalam folder yang sama agar referensi di HTML berfungsi tanpa alamat lengkap.

Langkah 1: struktur HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Score Counter</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="card">
    <h1>Score Counter</h1>
    <p id="score-text">Current score: <span id="score">0</span></p>
    <div class="buttons">
      <button id="add-btn" type="button">+1 point</button>
      <button id="reset-btn" type="button">Reset</button>
    </div>
    <p id="message" aria-live="polite"></p>
  </main>
  <script src="script.js"></script>
</body>
</html>

Kode ini memiliki tiga kelompok elemen utama: angka skor dengan `id="score"`, dua tombol yang masing-masing memiliki `id` sendiri, dan paragraf pesan `id="message"` yang dipakai untuk menampilkan pemberitahuan. Atribut `aria-live="polite"` memberi tahu pembaca layar untuk mengumumkan teks baru ketika berubah, sehingga pengguna yang tidak bisa melihat layar menerima informasi yang sama dengan semua orang.

Menempatkan `<script>` di akhir `<body>` berarti JavaScript mulai berjalan hanya setelah semua elemen di halaman dimuat, sehingga kode bisa menemukannya berdasarkan `id` tanpa error.

Langkah 2: gaya dengan CSS

:root {
  --bg: #f0f4fb;
  --card: #ffffff;
  --accent: #2255aa;
  --text: #1a1a1a;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, sans-serif;
}

.card {
  background: var(--card);
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: min(90vw, 360px);
}

.buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

button {
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.2s ease;
}

button:hover {
  opacity: 0.9;
}

button:active {
  transform: scale(0.96);
}

#reset-btn {
  background: #8a94a8;
}

Membaca aturan satu per satu:

`:root` menyimpan variabel warna. Untuk mengubah warna utama situs, Anda cukup mengedit satu baris. Variabel dipakai dengan bentuk `var(--name)`.
`body` memakai Flexbox untuk memusatkan kartu secara vertikal dan horizontal. `min-height: 100vh` membuat tata letak memenuhi seluruh layar.
`.card` diawali titik karena ia adalah class, yang bisa dipakai bersama oleh beberapa elemen. `width: min(90vw, 360px)` mencegah kartu terlalu lebar di layar besar sambil tetap muat di ponsel.
`button:hover` dan `button:active` menggambarkan keadaan ketika mouse berada di atas tombol dan ketika tombol ditekan, sehingga pengguna merasakan bahwa tombol itu merespons.
`#reset-btn` diawali `#` karena ia menargetkan id, yang mengidentifikasi tepat satu elemen.

Perbedaan antara class dan id penting. Class mengelompokkan elemen yang memakai gaya yang sama, sedangkan id mengidentifikasi satu elemen tertentu.

Langkah 3: membuat halaman interaktif dengan JavaScript

const scoreEl = document.getElementById("score");
const addBtn = document.getElementById("add-btn");
const resetBtn = document.getElementById("reset-btn");
const messageEl = document.getElementById("message");

let score = 0;

function render() {
  scoreEl.textContent = score;
  if (score >= 10) {
    messageEl.textContent = "Excellent! You reached 10 points.";
  } else {
    messageEl.textContent = "";
  }
}

addBtn.addEventListener("click", function () {
  score = score + 1;
  render();
});

resetBtn.addEventListener("click", function () {
  score = 0;
  render();
});

render();

Berkas ini membagi pekerjaannya menjadi bagian-bagian yang jelas.

1. `document.getElementById` menemukan elemen di HTML berdasarkan id-nya dan menyimpannya dalam variabel. Mencari mereka sekali di awal membuat kode lebih cepat dan lebih mudah dibaca.

2. `let score = 0` menyimpan state program. Nilai ini adalah satu sumber kebenaran yang dipakai seluruh program.

3. Fungsi `render` membaca `score` dan memperbarui layar agar sesuai. Ini disebut rendering dari state. Alih-alih mengubah teks di layar pada setiap aksi, Anda mengubah nilainya dan membiarkan fungsi penggambaran menyegarkan tampilan.

4. `addEventListener("click", ...)` memasang fungsi pada event klik. Setiap kali pengguna mengklik tombol, fungsi itu dijalankan.

5. Pemanggilan akhir `render()` menampilkan skor awal 0 segera setelah halaman dimuat.

Coba: setiap tekan +1 menaikkan angka, mencapai 10 menampilkan pesan, dan Reset mengembalikan hitungan ke nol.

Langkah 4: membuat kode lebih tangguh

Contoh ini sudah berfungsi, tetapi beberapa kebiasaan akan membuat kode Anda lebih kuat.

**Periksa bahwa elemen ada:** Jika sebuah id salah ketik, `getElementById` mengembalikan `null`, dan kode akan gagal begitu memakai nilai itu. Di proyek yang lebih besar, periksa sebelum dipakai.
**Pakai `const` sebagai default:** Gunakan `let` hanya ketika nilainya memang berubah, seperti `score`.
**Jaga fungsi tetap fokus:** Setiap fungsi sebaiknya melakukan satu pekerjaan. `render` hanya menampilkan state dan tidak menghitung skor sendiri.

Contoh pemeriksaan keamanan:

if (!scoreEl) {
  console.error("Element #score was not found in the HTML");
}

`console.error` mencetak pesan di tab Console browser (tekan F12), yang membantu Anda menemukan masalah dengan cepat.

CSS atau JavaScript? Aturan sederhana

Pemula kadang bertanya-tanya bahasa mana yang seharusnya menangani sebuah efek. Aturan sederhana membantu. Jika perubahannya murni visual dan tidak bergantung pada apa yang dilakukan pengguna, gunakan CSS. Contohnya perubahan warna saat hover atau jarak antarelemen. Jika perilakunya bergantung pada data atau aksi, seperti menghitung klik atau menyimpan teks yang diketik, gunakan JavaScript.

Misalnya, mengubah warna tombol saat hover bisa dilakukan dengan CSS `:hover`, tetapi menghitung berapa kali tombol ditekan memerlukan JavaScript.

Mengganti tampilan dengan class

Misalkan Anda ingin kartu berubah warna ketika skor mencapai 10. Alih-alih menulis aturan gaya di JavaScript, tambahkan class dari JavaScript dan definisikan tampilannya di CSS.

.card.success {
  background: #e6f7ec;
  border: 2px solid #2e9e5b;
}

const cardEl = document.querySelector(".card");

function render() {
  scoreEl.textContent = score;
  if (score >= 10) {
    messageEl.textContent = "Excellent! You reached 10 points.";
    cardEl.classList.add("success");
  } else {
    messageEl.textContent = "";
    cardEl.classList.remove("success");
  }
}

Ini menjaga tanggung jawab tetap jelas. JavaScript menyatakan "state sekarang success", dan CSS memutuskan seperti apa success itu. Anda bisa mendesain ulang tampilannya tanpa menyentuh JavaScript.

Contoh tambahan: menu tab sederhana

Contoh ini mengganti konten ketika tombol diklik, pola yang muncul di banyak situs web sungguhan.

<nav>
  <button class="tab-btn active" data-tab="home">Home</button>
  <button class="tab-btn" data-tab="about">About</button>
</nav>
<section class="tab-panel active" id="home">Welcome to my website.</section>
<section class="tab-panel" id="about">I am a student learning to build websites.</section>

.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-btn.active { background: #2255aa; color: #fff; }

const buttons = document.querySelectorAll(".tab-btn");
const panels = document.querySelectorAll(".tab-panel");

buttons.forEach(function (btn) {
  btn.addEventListener("click", function () {
    const target = btn.dataset.tab;
    buttons.forEach(b => b.classList.remove("active"));
    panels.forEach(p => p.classList.remove("active"));
    btn.classList.add("active");
    document.getElementById(target).classList.add("active");
  });
});

`querySelectorAll` mengembalikan daftar setiap elemen yang cocok dengan selector, dan `forEach` melakukan perulangan untuk memasang handler klik pada setiap tombol. `btn.dataset.tab` membaca nilai atribut `data-tab`, sehingga satu fungsi melayani setiap tombol tanpa menulis fungsi terpisah untuk masing-masing.

Kesalahan JavaScript yang umum

**Memakai elemen sebelum HTML selesai dimuat:** Perbaiki dengan menempatkan `<script>` di akhir `<body>` atau menambahkan `defer` pada tag script.
**Kurung atau tanda kutip yang hilang:** Periksa bahwa setiap kurung tertutup, dan baca Console browser ketika muncul error.
**Membandingkan dengan `=` alih-alih `===`:** Gunakan `===` untuk perbandingan nilai yang ketat.
**Memperbarui halaman berulang kali di dalam perulangan:** Kumpulkan perubahan dan perbarui sekali jika memungkinkan, agar halaman tetap lancar.

Panduan untuk pemula

Tulis HTML terlebih dahulu, dan pastikan halaman terbaca dengan masuk akal sebelum menambahkan CSS dan JavaScript.
Tambahkan CSS dalam langkah kecil dan periksa hasilnya di browser setelah setiap perubahan.
Tambahkan JavaScript satu fungsi dalam satu waktu dan uji sebelum melanjutkan.
Gunakan Console untuk menemukan masalah, dan baca pesan error sepenuhnya sebelum mengubah kode.
Berlatihlah dengan membangun proyek kecil sendiri, seperti penghitung, jam, kalkulator, atau daftar tugas.

Cara menyimpan dan menjalankan proyek

1. Buat folder baru bernama `interactive-demo`.

2. Buat ketiga berkas di dalam folder itu: `index.html`, `style.css`, dan `script.js`, lalu tempel kode dari setiap langkah.

3. Simpan berkas dengan encoding UTF-8. Di Notepad, pilih "Save As" dan atur encoding ke UTF-8, jika tidak karakter non-Inggris bisa tampil rusak.

4. Periksa nama berkas. Di Windows, aktifkan dulu ekstensi nama berkas agar Anda tidak berakhir dengan berkas bernama `script.js.txt`.

5. Klik dua kali `index.html`, atau seret ke jendela browser.

6. Jika Anda memakai VS Code, pasang ekstensi Live Server, klik kanan `index.html`, dan pilih "Open with Live Server". Halaman kemudian menyegarkan dirinya sendiri setiap kali Anda menyimpan.

Hasil dari menjalankan sungguhan

Hasil ini berasal dari menjalankan penghitung skor di browser sungguhan dan menekan tombol secara berurutan. Pengujian memakai versi Thailand dari kode, jadi pesan di bawah ini tertulis dalam bahasa Thailand. Logikanya sama di bahasa apa pun.

**Awal:** skor 0, tanpa pesan, kartu putih.
**Tekan +1 sembilan kali:** skor 9, tanpa pesan, kartu masih putih.
**Tekan +1 untuk kesepuluh kali:** skor 10, pesan "ยอดเยี่ยม! คุณทำได้ถึง 10 คะแนนแล้ว" muncul, dan kartu berubah hijau karena JavaScript menambahkan class `success`.
**Tekan Reset:** skor kembali ke 0, pesan hilang, dan kartu kembali putih karena JavaScript menghapus class `success`.

Contoh menu tab juga dijalankan di browser. Mulai dari tab home, menekan "About" menampilkan panel About dan menyorot tombol itu, dan menekan "Home" mengembalikan panel home. Pesan dalam pengujian itu juga berbahasa Thailand; perilakunya sama di bahasa apa pun.

Langkah berikutnya

Setelah nyaman dengan ketiga bahasa ini, Anda bisa menjelajahi Flexbox dan Grid CSS untuk tata letak lanjutan, `fetch` dan JSON untuk memuat data dari server, Git untuk mengelola kode, dan framework seperti React ketika proyek bertambah besar.

Kesimpulan

HTML menyediakan struktur, CSS menyediakan tampilan, dan JavaScript menyediakan interaksi. Menjaga ketiga tanggung jawab ini tetap terpisah membuat kode lebih mudah dipahami, diubah, dan dikembangkan. Mulailah dengan contoh kecil seperti penghitung skor atau menu tab, lalu tambahkan kompleksitas selangkah demi selangkah. Menulis dan menguji kode sendiri setiap hari akan membangun keterampilan jauh lebih cepat daripada hanya membaca.