HTML, CSS, dan JavaScript

Halaman web modern disusun oleh tiga teknologi yang masing-masing menggarap lapisan berbeda: HTML untuk struktur, CSS untuk tampilan, dan JavaScript untuk interaksi. Memahami pembagian tiga lapisan membuat kita menulis kode pada tempatnya — dan memahami mengapa Course ini dimulai dari HTML.

Tiga Lapisan Halaman Web #

Perbandingan ringkas ketiga teknologi:

Penjelasan tiap lapisan:

• HTML (struktur) — mendeskripsikan isi halaman beserta maknanya: mana judul, mana paragraf, mana tautan, mana gambar.
• CSS (tampilan) — mengatur warna, ukuran huruf, jarak antar elemen, dan tata letak halaman.
• JavaScript (interaksi) — menjalankan aksi: memeriksa isian form, mengganti isi halaman, memuat data baru tanpa memuat ulang.

Prinsip utamanya: tiap teknologi menggarap lapisannya sendiri. Mengubah tampilan tidak menuntut perombakan struktur; menambah interaksi tidak menuntut penulisan ulang konten.

Contoh: Satu Tombol, Tiga Lapisan #

Contoh berikut menyatukan ketiga lapisan pada satu tombol. HTML menyediakan tombolnya, CSS memberi tombol warna dan jarak, dan JavaScript mengganti tulisan tombol saat tombol diklik.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Tombol Sapa</title>
  <style>
    button {
      background-color: #2563eb;
      color: white;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <button id="tombolSapa">Sapa Budi</button>
  <script>
    const tombol = document.querySelector("#tombolSapa");
    tombol.addEventListener("click", function () {
      tombol.textContent = "Halo, Budi!";
    });
  </script>
</body>
</html>

Mari kita telaah tiga lapisan pada kode di atas:

1. Baris 6-14 (<style>...</style>): lapisan CSS — mengatur warna latar tombol, warna tulisan, jarak, dan sudut tombol yang membulat.
2. Baris 17 (<button ...>): lapisan HTML — elemen tombol dengan atribut id="tombolSapa" sebagai pengenal.
3. Baris 18-23 (<script>...</script>): lapisan JavaScript — memasang addEventListener; ketika tombol diklik, isi teks tombol diganti menjadi “Halo, Budi!”.

Hasil render di browser: tombol bertuliskan “Sapa Budi” tampil berwarna biru dengan jarak yang nyaman di sekeliling tulisan. Setelah tombol diklik, tulisan berubah menjadi “Halo, Budi!” tanpa halaman dimuat ulang.

Demo berikut menyandingkan kedua keadaan pada markup tombol yang persis sama. Kotak kiri hanya HTML — tombol bawaan browser tanpa gaya dan tanpa perilaku. Kotak kanan menambah <style> dan <script> dari contoh di atas. Tekan tombol pada masing-masing kotak dan bandingkan reaksinya:

Tekan tombol kanan sekali lagi — tulisannya kembali ke “Sapa Budi”; skrip demo ditambah satu kondisi kecil agar tombol bisa bolak-balik, selebihnya sama dengan contoh. Dari satu markup yang sama, dua lapisan tambahan mengubah tampilan (warna dan jarak) sekaligus perilaku (teks berganti) — itulah pembagian kerja ketiga teknologi.

Fokus Course Ini #

Course ini berfokus pada HTML: struktur dokumen, elemen, atribut, dan makna semantik konten. CSS dan JavaScript masing-masing dibahas pada Course tersendiri. Untuk saat ini, kita cukup mengenali posisi tiap teknologi agar contoh-contoh pada chapter berikutnya mudah dipahami.

Ringkasan #

• HTML = struktur; CSS = tampilan; JavaScript = interaksi.
• Ketiga lapisan dapat bekerja pada satu halaman secara bersamaan.
• Pada proyek nyata, CSS dan JavaScript dipisah ke berkas sendiri.

Selanjutnya kita masuk ke anatomi kode HTML itu sendiri: elemen.