Tiga Pilar Web: HTML, CSS, dan JavaScript

Peran masing-masing teknologi dan hubungannya

Tujuan Pembelajaran

Memahami peran HTML, CSS, dan JavaScript
Bisa membedakan fungsi masing-masing teknologi

Analogi

Diagram


      Rumah = Halaman Web:

HTML = Struktur (Kerangka Rumah)
  - Dinding, pintu, jendela

CSS = Gaya (Cat dan Dekorasi)
  - Warna cat, ukuran jendela

JS = Interaksi (Listrik dan Peralatan)
  - Lampu yang bisa dinyalakan

HTML = struktur, CSS = tampilan, JS = interaksi — seperti kerangka, cat, dan listrik rumah

Penjelasan Konsep

Selamat datang di dunia coding!

Kalau di chapter sebelumnya kita belajar cara kerja internet dari sudut pandang “pengguna,” sekarang kita mulai belajar dari sudut pandang “pembuat.” Dan bahasa pertama yang harus dikuasai setiap web developer adalah HTML (HyperText Markup Language).

HTML adalah fondasi dari setiap halaman web yang pernah kamu buka — dari Google sampai Facebook,

Dari Wikipedia sampai website ini — semuanya dibangun di atas HTML.

Jadi, apa itu HTML?

HTML bukan bahasa pemrograman.

HTML adalah bahasa markup — bahasa yang digunakan untuk memberi “makna” dan “struktur” pada konten.

Bayangkan kamu menulis esai di Microsoft Word. Kamu bisa membuat judul besar, subjudul, paragraf, daftar, tabel, dan lainnya. HTML melakukan hal yang sama — tapi untuk halaman web. HTML memberitahu browser: “Ini adalah judul utama,” “Ini adalah paragraf,” “Ini adalah gambar,” dan “Ini adalah link ke halaman lain.”

Sejarah singkat HTML

Sejarah singkat HTML akan membantumu memahami mengapa HTML bentuknya seperti sekarang.

HTML diciptakan oleh Tim Berners-Lee pada tahun 1991 di CERN (laboratorium fisika di Swiss). Tujuannya sederhana: memungkinkan ilmuwan berbagi dokumen penelitian melalui internet. Versi pertama HTML sangat sederhana — cuma 18 tag saja. Seiring waktu, HTML berkembang: HTML 2.0 (1995), HTML 4.01 (1999), lalu XHTML (yang terlalu ketat dan tidak populer), dan akhirnya HTML5 (2014) yang menjadi standar sampai sekarang.

HTML5 membawa fitur modern seperti video, audio, canvas,

Dan semantic elements yang membuat web jauh lebih kaya.

Struktur Dasar Dokumen HTML5

Setiap dokumen HTML dimulai dengan <!DOCTYPE html> — ini memberitahu browser bahwa dokumen ini menggunakan HTML5.

Lalu ada tag <html> yang menjadi elemen paling luar (root element).

Di dalam <html> ada dua bagian utama:

1. `<head>` — Bagian Kepala (Tidak Terlihat)

Head berisi informasi tentang dokumen yang tidak ditampilkan langsung di halaman.

Ini seperti blueprint atau spesifikasi teknis rumah — penting tapi tidak dilihat pengunjung.

Isi head meliputi:

<title>: Judul halaman yang muncul di tab browser
<meta charset="UTF-8">: Menentukan encoding karakter (penting untuk bahasa Indonesia!)
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Agar halaman responsif di HP
<meta name="description">: Deskripsi untuk Google search
<link rel="stylesheet">: Menyambungkan file CSS
<script src="...">: Menyambungkan file JavaScript

2. `<body>` — Bagian Tubuh (Terlihat)

Body berisi semua konten yang dilihat user — teks, gambar, video, link, form, dan lainnya.

Ini adalah ruang tamu, kamar, dan dapur rumahmu — semua yang bisa dilihat dan diinteraksi pengunjung.

Tag, Element, dan Attribute

Tag: Penanda dengan tanda kurung sudut,

<p>, </p>, <img>.

Contoh Kode

html

<!DOCTYPE html>
<html>
<head>
  <title>Belajar Web</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      text-align: center;
      padding: 50px;
    }
    button {
      padding: 15px 30px;
      font-size: 18px;
      border: none;
      border-radius: 25px;
      background: #ff6b6b;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Halo, Dunia Web!</h1>
  <p>Klik tombol di bawah</p>
  <button id="tombolAjaib">Klik Aku!</button>
  <p id="pesan"></p>
  <script>
    const tombol = document.getElementById('tombolAjaib');
    const pesan = document.getElementById('pesan');
    tombol.addEventListener('click', () => {
      pesan.textContent = 'JavaScript berhasil!';
      pesan.style.color = '#ffd700';
    });
  </script>
</body>
</html>

Penjelasan Kode

Baris 7-18: CSS styling. Baris 22-24: HTML struktur. Baris 28-33: JavaScript event listener.

Prompt AI

Jelaskan mengapa CSS disebut 'Cascading' Style Sheets. Apa yang terjadi kalau ada konflik styling?

Pertanyaan Reflektif

Nonaktifkan JavaScript di browser. Lalu buka website favoritmu. Apa yang berubah?