Waktu pertama kali belajar bikin web, tiga nama ini, HTML, CSS, dan JavaScript, biasanya datang sekaligus. Rasanya seperti kamu harus menguasai tiga dunia berbeda dulu sebelum apa pun bisa berjalan. Kabar baiknya, ketiganya memang dirancang untuk saling melengkapi, ibarat tiga orang dalam satu tim kecil. Cara tercepat memahami kerja sama mereka adalah berhenti membaca definisi dan langsung membangun sesuatu yang kecil.
Jadi itulah yang akan kita lakukan. Di artikel ini kita bikin satu tombol. Satu saja. Awalnya cuma teks biasa di halaman, lalu kita beri tampilan yang pantas, dan terakhir kita buat dia melakukan sesuatu saat diklik. Di akhir nanti kamu sudah melihat tiap lapisan ditambahkan di atas lapisan sebelumnya, dan paham lapisan mana yang bertanggung jawab atas apa.
Kalau kamu mau penjelasan gambaran besar soal kenapa web membagi pekerjaan jadi tiga lapisan, hal itu dibahas tersendiri di tulisan pendamping yang lebih konseptual. Di sini kita fokus praktik dan tetap menempel di keyboard.
Peran tiap lapisan
Sebelum mengetik apa pun, ada baiknya kita beri nama dulu perannya. Bayangkan membangun fitur web kecil seperti membayangkan membuat sebuah perabot di ruang pamer.
- HTML adalah strukturnya: kayu dan sekrupnya. Dia menyatakan ini benda apa — ini tombol, ini judul, ini paragraf.
- CSS adalah hasil akhirnya: cat dan pernisnya. Dia mengatur bentuk tampilannya — warna ini, ukuran ini, sudut yang membulat.
- JavaScript adalah perilakunya: bagian yang bergerak. Dia menentukan apa yang terjadi saat ada yang berinteraksi — klik ini, lalu muncul sebuah pesan.
Cara mudah mengingatnya: HTML itu kata benda, CSS itu kata sifat, JavaScript itu kata kerja.
HTML -> struktur -> "ini apa"
CSS -> tampilan -> "kelihatannya gimana"
JS -> perilaku -> "dia ngapain"Tiap lapisan sebenarnya opsional, dalam arti sebuah halaman secara teknis bisa berdiri hanya dengan HTML. Tapi fitur yang benar-benar rapi hampir selalu memakai ketiganya, dan ketiganya bertumpuk dengan rapi satu di atas yang lain.
Lapisan pertama: struktur dengan HTML
Mari kita buat versi paling dasar dari fitur kita. Buka berkas baru, beri nama index.html. Semua di bawah ini ditaruh di dalamnya.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8" />
<title>Tombol Pertamaku</title>
</head>
<body>
<h1>Selamat datang</h1>
<button id="greet-button">Sapa aku</button>
<p id="message"></p>
</body>
</html>Kalau berkas ini dibuka di browser, kamu akan melihat sebuah judul, tombol yang bisa diklik bertuliskan “Sapa aku”, dan… tidak ada lagi yang menarik. Tombolnya ada, tapi polos, dan mengkliknya sama sekali belum menghasilkan apa-apa. Itu wajar. Sekarang kita baru punya struktur.
Perhatikan dua hal kecil yang akan terasa penting sebentar lagi. Tombolnya punya id="greet-button", dan ada paragraf kosong dengan id="message". Sebuah id cuma label unik yang kita tempelkan ke sebuah elemen supaya lapisan lain bisa menemukannya nanti. Paragraf kosong itu adalah tempat penampung — sebuah titik di mana JavaScript nanti akan menuliskan sapaan.
Untuk apa sebuah id
Sebuah id adalah nama yang kamu berikan ke satu elemen tertentu di halaman. Nama itu harus unik — hanya boleh ada satu elemen yang memakai id tersebut. Kita pakai id di sini supaya CSS dan JavaScript bisa menunjuk persis ke elemen yang tepat tanpa kebingungan.
Masih asing dengan lapisan ini? Penjelasan khusus Apa Itu HTML? mengupas tag dan strukturnya lebih dalam.
Lapisan kedua: tampilan dengan CSS
Tombolnya sudah berfungsi sebagai sebuah benda, tapi tampilannya seperti sisa tahun 1998. Mari kita beri gaya. CSS ditulis sebagai daftar aturan. Tiap aturan memilih sebuah elemen (disebut “selector”) lalu mengatur beberapa propertinya.
Kita bisa menaruh CSS langsung di dalam HTML dengan menambahkan blok <style> di dalam <head>:
<head>
<meta charset="utf-8" />
<title>Tombol Pertamaku</title>
<style>
body {
font-family: system-ui, sans-serif;
padding: 40px;
}
#greet-button {
background-color: #00b8e6;
color: #ffffff;
border: none;
padding: 12px 20px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
}
#greet-button:hover {
background-color: #0098bd;
}
</style>
</head>Muat ulang halamannya dan bedanya langsung terasa. Tombolnya sekarang biru dengan teks putih, sudut membulat, padding yang nyaman, dan kursor mouse berubah jadi penunjuk saat melayang di atasnya. Bahkan saat disorot, warnanya sedikit menggelap berkat aturan :hover.
Baca selector #greet-button itu pelan-pelan. Tanda # berarti “elemen yang id-nya greet-button” — inilah cara CSS menjangkau persis tombol yang tadi kita beri label di HTML. Kita sama sekali tidak menyentuh struktur HTML-nya; kita cuma menjelaskan bagaimana ia seharusnya terlihat. Pemisahan itulah inti seluruhnya. Struktur tetap di tempatnya; tampilan ditambahkan di atasnya.
| Yang kamu tulis | Yang ia kendalikan |
|---|---|
background-color |
warna isi tombol |
border-radius |
seberapa membulat sudutnya |
padding |
ruang lega di dalam tombol |
cursor: pointer |
kursor tangan yang menandakan “bisa diklik” |
Kalau kamu ingin mendalami selector, warna, dan jarak, simak Apa Itu CSS?.
Lapisan ketiga: perilaku dengan JavaScript
Kita sudah punya tombol yang tampak seperti tombol. Tapi coba klik, halamannya cuma diam saja. Membuatnya melakukan sesuatu adalah tugas JavaScript.
Tambahkan blok <script> tepat di ujung <body>, sebelum tag penutup </body>:
<body>
<h1>Selamat datang</h1>
<button id="greet-button">Sapa aku</button>
<p id="message"></p>
<script>
const button = document.getElementById('greet-button');
const message = document.getElementById('message');
button.addEventListener('click', function () {
message.textContent = 'Halo, senang berkenalan!';
});
</script>
</body>Sekarang klik tombolnya. Paragraf kosong tadi terisi sapaan ramah. Klik lagi — ia tetap di sana. Kamu baru saja membuat halaman bereaksi terhadap manusia.
Mari kita baca beberapa baris itu perlahan, karena di situlah terlihat hubungan ketiga lapisan:
document.getElementById('greet-button')menyuruh browser: carikan elemen yang id-nyagreet-button. Itu persis tombol yang kita bangun di HTML. JavaScript sedang menjangkau ke dalam struktur.- Kita lakukan hal yang sama untuk mengambil paragraf kosong (
message). addEventListener('click', ...)berkata: saat tombol ini diklik, jalankan fungsi di dalamnya.- Di dalam fungsi itu,
message.textContent = '...'menuliskan teks ke paragraf — mengubah apa yang dilihat pengguna, secara langsung, tanpa memuat ulang.
Taruh skrip di bagian bawah
Perhatikan <script> berada di akhir body. Browser membaca halaman dari atas ke bawah. Kalau skrip dijalankan sebelum tombolnya ada di dokumen, getElementById tidak akan menemukan apa-apa. Menempatkan skrip setelah elemen-elemennya adalah kebiasaan sederhana dan andal untuk pemula.
Itulah jabat tangannya. HTML membuat tombol dan memberinya id. JavaScript memakai id itu untuk menemukan tombol, lalu menyimak klik, lalu mengubah halaman sebagai responsnya. Mau tur yang lebih lengkap soal variabel, fungsi, dan event? Mulai dari Apa Itu JavaScript?.
Melihat ketiga lapisan saling bekerja
Mundur sejenak dan lihat apa yang disumbangkan tiap lapisan ke satu tombol yang sama:
<button id="greet-button"> <- HTML: dia ada, dia sebuah tombol
background-color, border-radius <- CSS: kelihatan bisa diklik dan ramah
addEventListener('click', ...) <- JS: dia merespons saat diklikid yang sama, greet-button, muncul di ketiga tempat itu. Nama bersama itulah benang yang mengikat ketiga lapisan. HTML mendefinisikannya, CSS memberinya gaya, JavaScript mengendalikannya. Tidak satu pun dari ketiganya perlu tahu detail isi yang lain — mereka cukup sepakat soal sebuah label dan satu titik di halaman.
Inilah juga alasan kenapa di proyek nyata para pengembang biasanya menyimpan ketiganya di berkas terpisah. Di demo mungil kita semua dijejalkan ke satu index.html demi kepraktisan, tapi saat fitur membesar, lebih rapi punya index.html, styles.css, dan script.js sebagai tiga berkas. HTML lalu menautkan ke dua berkas lainnya:
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- isi kontenmu -->
<script src="script.js"></script>
</body>Idenya sama, cuma lebih rapi. Struktur, tampilan, dan perilaku masing-masing tinggal di berkasnya sendiri, lalu halaman menyatukannya.
Biarkan tiap tugas di tempatnya
Begitu sudah bisa JavaScript, godaannya adalah mengerjakan semuanya pakai dia — termasuk tampilan dan struktur. Tahan dulu di awal-awal. Kalau urusannya soal tampilan, pakai CSS. Kalau soal sebuah elemen itu apa, itu HTML. Membiarkan tiap lapisan memegang tugasnya sendiri itulah yang membuat sebuah proyek mudah dibaca dan diperbaiki nanti.
Daftar periksa singkat di kepala
Saat membangun fitur web kecil apa pun, kamu bisa menempuh tiga langkah yang sama setiap kali:
- Struktur dulu. Elemen apa yang aku butuhkan? Tulis HTML-nya. Beri
idatau kelas pada yang penting. - Lalu tampilan. Mau kelihatan seperti apa? Tulis aturan CSS yang menyasar elemen-elemen itu.
- Lalu perilaku. Apa yang harus terjadi saat ada interaksi? Tulis JavaScript yang menemukan elemen dan merespons event.
Lakukan dalam urutan itu dan kamu jarang tersesat. Tiap langkah dibangun di atas versi jadi dari langkah sebelumnya. Halaman dengan HTML saja sudah berfungsi. Tambah CSS, ia tetap berfungsi, cuma lebih cantik. Tambah JavaScript, ia mendapat denyut.
Menutup
Kita membawa satu tombol dari sekadar teks polos menjadi elemen yang bergaya dan interaktif, dan di sepanjang jalan kamu melihat pembagian tugas yang menggerakkan setiap situs yang pernah kamu pakai. HTML memberinya struktur dan sebuah nama. CSS memberinya tampilan. JavaScript memberinya perilaku, dengan kembali menjangkau nama yang sama untuk merangkai semuanya.
Itulah jantung pengembangan front-end. Proyek yang lebih besar menambahkan perkakas, framework, dan kode yang jauh lebih banyak, tapi di baliknya tetap tiga lapisan ini yang bekerja sama persis seperti yang barusan kamu saksikan. Lain kali kamu bertemu antarmuka yang rumit, kamu bisa mengupasnya di kepala: ini apa (HTML), tampilannya gimana (CSS), dia ngapain (JavaScript). Begitu cara pandang itu pas, seluruh web mulai jadi jauh lebih masuk akal.
