Kamu mungkin sudah belajar HTML dan CSS (lihat kelas HTML5 dan CSS3) dan sudah kenalan dengan JavaScript (lihat kelas JavaScript). Tapi banyak pemula mentok justru di bagian sambungannya: CSS sudah ditulis tapi tidak muncul, script jalan tapi querySelector menghasilkan null, tombol diklik tapi tidak ada yang berubah. Masalahnya jarang di sintaks bahasa itu sendiri. Hampir selalu di koneksi antar file.

Kelas ini fokus ke koneksi itu. Kita tidak akan mengulang semua tag HTML atau semua properti CSS. Kita akan membedah bagaimana ketiganya saling memanggil.

Bayangkan kamu membangun rumah:

• HTML adalah kerangka rumah. Pondasi, dinding, pintu, jendela. HTML menentukan apa yang ada dan di mana letaknya: ada judul, ada paragraf, ada tombol, ada formulir.
• CSS adalah cat dan dekorasi. Warna dinding, jenis lantai, ukuran ruangan, posisi perabot. CSS menentukan bagaimana semua itu terlihat.
• JavaScript adalah listrik dan mekanik. Saklar lampu, bel pintu, kunci otomatis. JavaScript menentukan apa yang terjadi saat ada aksi, misalnya tombol diklik atau formulir dikirim.

Rumah tanpa cat tetap bisa ditinggali, cuma kurang enak dilihat. Rumah tanpa listrik tetap berdiri, cuma tidak ada yang bisa dinyalakan. Tapi cat dan kabel listrik tanpa dinding? Tidak ada tempat menempelnya. Itu sebabnya HTML selalu jadi dasar: CSS dan JavaScript sama-sama "menempel" ke elemen HTML.

Satu hal penting dari analogi ini: tukang cat dan tukang listrik harus diberi tahu ruangan mana yang dikerjakan. Di web juga begitu. Ketiganya biasanya file terpisah (index.html, style.css, script.js), dan browser tidak otomatis tahu bahwa style.css milik index.html. Kita yang harus menghubungkannya secara sengaja.

Prinsip ini disebut separation of concerns: struktur di HTML, gaya di CSS, perilaku di JavaScript. Kenapa repot dipisah? Karena saat proyek membesar, kamu ingin tahu persis harus membuka file mana. Mau ganti warna tombol? Buka CSS. Mau ganti teks menu? Buka HTML. Mau ubah apa yang terjadi saat tombol diklik? Buka JavaScript. Kalau warna ditulis di JavaScript dan logika ditulis di atribut HTML, kamu harus mencari ke tiga tempat setiap kali ada perubahan kecil.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Halaman Saya</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1 id="judul">Halo Dunia</h1>
  <button class="tombol">Klik</button>
  <script src="js/script.js"></script>
</body>
</html>

Di browser, halaman ini menampilkan judul besar "Halo Dunia" dan satu tombol. Kalau css/style.css dan js/script.js ada, judul dan tombol itu ikut diberi gaya dan perilaku. Kalau tidak ada, kamu tetap melihat judul dan tombol polos. HTML tidak "rusak" hanya karena CSS atau JS gagal dimuat.

Perhatikan dua baris kuncinya:

1. <link rel="stylesheet" href="css/style.css"> di dalam <head>: titik koneksi ke CSS.
2. <script src="js/script.js"></script> sebelum </body>: titik koneksi ke JavaScript.

Sisanya adalah kerangka standar: <!DOCTYPE html> menandai dokumen HTML5, <head> berisi informasi yang tidak tampil (judul tab, charset, file gaya), dan <body> berisi konten yang terlihat. Kenapa <link> di head tapi <script> di akhir body? Akan dibahas tuntas di bab berikutnya.

Menghubungkan file baru setengah jalan. CSS dan JavaScript juga butuh cara menemukan elemen tertentu di dalam halaman. Caranya lewat atribut yang berfungsi seperti alamat rumah.

Beberapa catatan yang sering terlewat:

• Satu elemen boleh punya banyak class sekaligus: class="tombol utama". Itu dua class, tombol dan utama, dipisah spasi.
• id harus unik. Kalau ada dua elemen dengan id yang sama, getElementById hanya mengembalikan yang pertama, dan kamu akan bingung kenapa elemen kedua tidak berubah.
• Atribut data-* bebas kamu namai, asal diawali data-. Di JavaScript, data-user-id dibaca sebagai dataset.userId (tanda hubung jadi camelCase), dan nilainya selalu string.
• for di <label> adalah koneksi di dalam HTML itu sendiri: klik teks label, kursor langsung pindah ke input yang id-nya cocok. Bagus untuk aksesibilitas.
• href dan src adalah koneksi ke file lain: href di <a> dan <link>, src di <img> dan <script>.

Tanpa penanda seperti ini, CSS dan JavaScript cuma bisa memilih berdasarkan nama tag, misalnya "semua <p>". Itu terlalu kasar untuk halaman sungguhan.

.tombol {
  background-color: #e34f26;
  color: white;
  padding: 12px 24px;
}

Hasilnya: setiap elemen dengan class="tombol" jadi berlatar oranye, berteks putih, dengan ruang dalam 12px atas-bawah dan 24px kiri-kanan.

• Selector (.tombol): menentukan elemen mana yang kena. Inilah jembatan CSS ke HTML.
• Properti (background-color): aspek tampilan yang diubah.
• Nilai (#e34f26): isi untuk properti itu.
• Satu baris properti: nilai; disebut deklarasi. Titik koma memisahkan deklarasi. Lupa satu titik koma, deklarasi sesudahnya bisa ikut diabaikan browser tanpa pesan error.

Di browser, JavaScript punya empat pekerjaan utama:

1. Memanipulasi DOM: membaca dan mengubah elemen HTML setelah halaman dimuat, misalnya document.querySelector("#judul").textContent = "Baru";.
2. Menangani event: merespons klik, ketikan, scroll, atau kirim formulir lewat addEventListener.
3. Logika dan data: menghitung, membandingkan, menyimpan nilai, perulangan.
4. Komunikasi dengan server: mengambil data lewat fetch tanpa memuat ulang halaman.

Tiga yang pertama langsung menyentuh HTML dan CSS. Itu yang membuat JavaScript jadi satu-satunya pilar yang bisa menjangkau dua pilar lainnya.

• Mengira browser otomatis menemukan style.css. Tanpa <link>, file CSS tidak akan pernah dibaca, walau satu folder dengan HTML.
• Memakai id yang sama di banyak elemen. Pakai class untuk kelompok, id hanya untuk satu elemen.
• Menulis class="tombol, utama". Pemisah class adalah spasi, bukan koma. Koma membuat nama class-nya jadi tombol, yang tidak cocok dengan selector .tombol.
• Mencampur peran: menulis warna lewat JavaScript atau menulis logika di atribut HTML. Kode tetap jalan, tapi sulit dirawat.
• for di label tidak sama dengan id input. Label tetap tampil, tapi klik label tidak memfokuskan input.