Menghubungkan CSS & JavaScript

HTML, CSS, dan JavaScript bekerja bertiga

HTML saja menghasilkan halaman polos. Untuk tampilan dan interaksi, HTML dihubungkan dengan CSS dan JavaScript. Prinsip penting: pisahkan ketiganya dalam berkas masing-masing agar rapi.

proyek/
  index.html    ← struktur
  style.css     ← tampilan
  script.js     ← perilaku

Tiga cara memasang CSS

<head>
  <link rel="stylesheet" href="style.css">
</head>

Memasang JavaScript

<body>
  ...isi halaman...
  <script src="script.js"></script>
</body>

• Letakkan <script> di akhir body agar HTML selesai dimuat dulu, atau di head dengan atribut defer.
• defer: skrip diunduh paralel lalu dijalankan setelah HTML selesai dibaca (pilihan modern terbaik).
• async: dijalankan begitu selesai diunduh (untuk skrip mandiri seperti analitik).
• Kode JavaScript langsung di halaman (internal): <script> console.log("Halo"); </script>.

noscript

Elemen <noscript> berisi pesan untuk pengguna yang JavaScript-nya mati.

Mengapa file terpisah lebih baik?

• Satu berkas CSS dipakai banyak halaman: ubah sekali, semua berubah.
• Browser menyimpan (cache) berkas CSS/JS sehingga halaman berikutnya lebih cepat.
• Kode lebih rapi dan mudah dicari.