Materi Pembelajaran: Pengenalan HTML, CSS, dan JavaScript

Dalam pengembangan web (Web Development), ada tiga pilar utama yang harus dikuasai. Analogi paling mudah adalah membayangkan halaman web seperti sebuah bangunan rumah:

1. HTML (HyperText Markup Language)

HTML adalah bahasa markup standar yang digunakan untuk membuat struktur atau kerangka dasar dari sebuah halaman web. HTML menggunakan elemen yang ditandai dengan tag.

📐 Struktur Dasar Penulisan HTML

Setiap dokumen HTML yang baik harus mengikuti kerangka dasar berikut agar dapat dibaca dengan benar oleh browser:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman Web</title>
</head>
<body>
    <!-- Semua konten visual ditulis di dalam body -->
    <h1>Halo, Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
</body>
</html>

• <!DOCTYPE html>: Deklarasi tipe dokumen, memberi tahu browser bahwa ini adalah dokumen HTML5 modern.
• <html>: Elemen root (akar) yang membungkus seluruh konten halaman web.
• <head>: Berisi metadata (informasi tentang dokumen), seperti karakter set (<meta>) dan judul tab browser (<title>).
• <body>: Berisi semua konten visual (teks, gambar, tombol, dll.) yang akan ditampilkan kepada pengguna di layar.

Fungsi Utama: Menampilkan teks, gambar, tombol, link, dan mengatur tata letak dasar.

Tag Populer: <h1> s/d <h6> (Judul), <p> (Paragraf), <button> (Tombol), <div> (Kontainer pengelompok).

2. CSS (Cascading Style Sheets)

CSS adalah bahasa yang digunakan untuk mengatur tampilan visual atau desain dari dokumen HTML yang sudah kita buat.

• Fungsi Utama: Mengatur warna teks, latar belakang, ukuran font, jarak antar elemen (padding/margin), tata letak kolom, hingga animasi.
• Cara Penggunaan: Inline (langsung di tag), Internal (di tag <style>), atau External (file .css terpisah). Catatan: Penggunaan Tailwind CSS (seperti pada Tugas 3 Syabilla) juga merupakan bagian dari framework CSS modern.

3. JavaScript (JS)

JavaScript adalah bahasa pemrograman yang berjalan di sisi client (browser) untuk membuat halaman web menjadi hidup dan interaktif.

• Fungsi Utama: Merespons tindakan pengguna (klik tombol), memvalidasi formulir, memanipulasi konten HTML secara dinamis tanpa reload, dan menampilkan notifikasi pop-up.
• Penerapan: Menggunakan fungsi (function) yang dipicu oleh event tertentu, misalnya onclick.

Contoh Penerapan Integrasi (HTML + CSS + JS)

Berikut adalah contoh kode utuh yang menggabungkan ketiga materi di atas ke dalam satu file, mirip dengan studi kasus Tugas 8 Syabilla Junior:

<!-- Struktur HTML -->
<div class="kartu-biodata">
  <h1>Halo, Selamat Datang!</h1>
  <p>Mari belajar pemrograman web bersama-sama.</p>
  <button onclick="tampilkanPesan()">Mulai Belajar</button>
</div>

<!-- Desain CSS -->
<style>
  .kartu-biodata { text-align: center; padding: 30px; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
  button { background-color: #007BFF; color: white; padding: 12px 24px; border: none; border-radius: 6px; cursor: pointer; }
  button:hover { background-color: #0056b3; }
</style>

<!-- Logika JavaScript -->
<script>
  function tampilkanPesan() {
    alert('Hebat! Kamu telah berhasil berinteraksi dengan JavaScript.');
  }
</script>

💡 Penjelasan Alur Kerja Kode di Atas:

1. HTML membuat kotak kontainer (<div>), teks judul (<h1>), teks paragraf (<p>), dan sebuah tombol (<button>).
2. CSS mengubah tampilan kotak tersebut menjadi warna putih dengan bayangan (box-shadow), menata jenis huruf, serta mengubah warna tombol menjadi biru yang berubah lebih gelap saat kursor diarahkan (hover).
3. JavaScript mendeteksi ketika pengguna mengklik tombol melalui perintah onclick=”tampilkanPesan()”, lalu menjalankan fungsi untuk memunculkan kotak pesan peringatan (alert).

🎮 Demo Interaktif (Coba Klik!)

Berikut adalah implementasi nyata dari kode di atas yang sudah diadaptasi agar aman dan kompatibel dengan WordPress: