Bab 1 · ± 6 menit

Website Itu Terbuat dari Apa?

Diperbarui 4 Nov 2026 · Jadi Frontend Developer

Setiap hari kamu membuka website. Cek berita, belanja online, nonton video, baca e-book seperti ini. Tapi pernah nggak kamu bertanya, sebenarnya halaman itu terbuat dari apa?

Jawabannya mengejutkan: kebanyakan halaman web cuma dibangun dari tiga bahan. Ketiganya berupa teks biasa yang bisa kamu tulis sendiri di laptop. Di bab ini kita kenalan dengan ketiganya, lalu mengintip "dapur" website mana pun langsung dari browser-mu.

Setelah bab ini kamu bisa

Menjelaskan peran HTML, CSS, dan JavaScript dengan bahasamu sendiri.
Membedakan pekerjaan frontend dan backend.
Membuka DevTools dan mengintip isi website mana pun.

Analogi

Bayangkan membangun rumah. Pertama, kamu butuh kerangka: tiang, dinding, pintu, dan ruangan. Lalu rumah itu diberi cat dan dekorasi supaya enak dilihat. Terakhir, kamu pasang listrik dan saklar supaya lampu bisa menyala dan bel bisa berbunyi. Website dibangun dengan urutan yang persis sama.

Tiga bahan utama sebuah website

HTML: kerangka rumah

(HyperText Markup Language) menentukan isi dan struktur halaman. Mana judul, mana paragraf, mana gambar, mana tombol. HTML bukan bahasa untuk menghitung atau berpikir. Tugasnya hanya memberi tahu "ini apa".

index.html

<h1>Warung Bu Sari</h1>
<p>Nasi goreng paling enak se-kecamatan.</p>
<button>Pesan sekarang</button>

Tanpa bahan lain, hasilnya sudah bisa tampil di browser. Polos, hitam putih, tapi isinya lengkap.

CSS: cat dan dekorasi

(Cascading Style Sheets) mengatur tampilan. Warna, ukuran huruf, jarak, sampai posisi elemen di layar. Isinya tetap sama, hanya bajunya yang berganti.

style.css

h1 {
  color: darkorange;
  font-size: 40px;
}

JavaScript: listrik dan saklar

membuat halaman bisa bereaksi. Tombol yang bisa diklik, menu yang membuka, keranjang belanja yang angkanya bertambah. Inilah satu-satunya dari tiga bahan yang benar-benar bahasa pemrograman.

script.js

const tombol = document.querySelector("button");
tombol.addEventListener("click", () => {
  alert("Pesanan diterima!");
});

Belum paham kodenya? Wajar sekali. Semua ini akan kita bahas pelan-pelan mulai bab 9. Untuk sekarang, cukup kenali bentuknya.

Gambar 1.1 — Tiga bahan website dirakit browser menjadi satu halaman.

Frontend vs backend

Bayangkan kamu makan di warung. Sebagai pembeli, kamu hanya melihat etalase, meja, dan menu. Dapur, gudang, dan buku kas ada di belakang, tersembunyi dari pembeli.

Website juga begitu. Bagian yang kamu lihat dan sentuh di layar disebut . Bagian yang bekerja di balik layar disebut . Backend berjalan di komputer lain bernama , menyimpan data, mengecek password, dan memproses pembayaran.

	Frontend	Backend
Analogi	Etalase & ruang makan warung	Dapur & gudang warung
Berjalan di	Browser milik pengunjung	Server
Contoh tugas	Menampilkan produk, tombol, form	Menyimpan pesanan, cek login
Bahan utama	HTML, CSS, JavaScript	Beragam (Node.js, PHP, Python, dll.)

Buku ini fokus ke frontend. Tujuannya: kamu bisa membuat halaman web sendiri, dari nol sampai online.

Browser: tukang yang merakit

seperti Chrome, Firefox, Safari, atau Edge adalah tukang yang membaca ketiga bahan tadi. Ia mengambil file HTML, CSS, dan JavaScript dari server, lalu merakitnya menjadi halaman yang bisa kamu lihat.

Artinya, untuk belajar frontend kamu cuma butuh dua alat: browser dan text editor untuk menulis kode. Text editor gratis yang populer adalah Visual Studio Code. Tidak perlu laptop mahal.

DevTools: kacamata tembus pandang

Setiap browser modern punya fitur tersembunyi bernama . Dengan fitur ini, kamu bisa melihat HTML dan CSS dari website mana pun. Ini alat yang dipakai developer profesional setiap hari.

Cara membukanya di Chrome, Edge, atau Firefox:

Windows/Linux: tekan F12 atau Ctrl + Shift + I.
macOS: tekan Cmd + Option + I.
Atau klik kanan pada bagian halaman, lalu pilih Inspect (Periksa).

Ada dua tab yang paling sering dipakai. Tab Elements menampilkan HTML dan CSS halaman. Tab Console adalah tempat mengetik perintah JavaScript. Coba ketik baris ini di Console, lalu tekan Enter:

Console · DevTools

document.body.style.background = "pink";

Latar halaman langsung berubah jadi merah muda. Kamu baru saja menjalankan JavaScript pertamamu!

Hati-hati

Perubahan lewat DevTools hanya terjadi di browser-mu sendiri, dan hilang begitu halaman di-refresh. Kamu tidak sedang meretas website itu. Sebaliknya, jangan percaya screenshot "saldo" atau "nilai" yang mencurigakan. Siapa pun bisa mengedit teks halaman dengan cara ini.

Satu lagi: jangan pernah menempel kode dari orang asing ke Console, apalagi di halaman yang sedang login. Itu trik penipuan yang umum.

Sebenarnya lebih rumit dari ini…

Website modern sering memakai tambahan seperti gambar, font, video, dan framework semacam React. Tapi semuanya tetap berujung ke tiga bahan yang sama. React misalnya, pada akhirnya menghasilkan HTML, CSS, dan JavaScript juga. Itu sebabnya fondasi di buku ini tetap berguna, apa pun alat yang kamu pakai nanti.

Coba sendiri (5 menit)

Buka website favoritmu, misalnya situs berita.
Klik kanan pada judul berita, lalu pilih Inspect.
Di tab Elements, klik dua kali teks judulnya dan ganti dengan namamu.
Tekan Enter, lihat hasilnya, lalu refresh. Judulnya kembali seperti semula, kan?

Ringkasan bab

HTML = kerangka rumah: isi dan struktur halaman.
CSS = cat dan dekorasi: tampilan halaman.
JavaScript = listrik dan saklar: membuat halaman bisa bereaksi.
Frontend berjalan di browser pengunjung, backend berjalan di server.
DevTools (F12) membantumu mengintip dan mencoba-coba halaman mana pun.

Di bab berikutnya, kita mulai membangun rumah pertama kita dengan menulis file HTML dari nol.

Bab 1 selesai!

Bab ini membantu?