Belajar Membuat Website Dinamis Pertama Anda: Mengenal HTML, CSS, dan JavaScript
Halo semuanya! Saat kita berselancar di internet, kita sering melihat halaman web yang tampilannya menarik, bisa berganti warna ke mode gelap, atau bahkan menyapa kita sesuai waktu saat itu. Bagaimana cara membuatnya? Jawabannya adalah dengan menggabungkan tiga pilar utama web development: HTML, CSS, dan JavaScript.
Untuk mempermudah proses belajar, kita bisa menyatukan ketiga kode ini ke dalam satu file HTML utuh sebelum nantinya kita pecah menjadi file terpisah. Yuk, kita bedah fungsi dan peranan masing-masing komponen dari kode praktikum yang sudah kita coba sebelumnya!
1. Tiga Komponen Utama dalam Pembuatan Web
Bayangkan sebuah website seperti membangun sebuah rumah:
- HTML (HyperText Markup Language): Adalah pondasi, tiang, dan dinding rumah. HTML menentukan struktur dan kerangka apa saja yang ada di web tersebut (misalnya tombol, teks, atau gambar).
- CSS (Cascading Style Sheets): Adalah cat dinding, hiasan, dan dekorasi rumah. CSS bertugas menghias kerangka HTML agar tampilannya indah, rapi, dan memiliki warna yang menarik.
- JavaScript (JS): Adalah sistem otomatisasi rumah, seperti lampu otomatis atau pintu sensor. JavaScript membuat website menjadi hidup, interaktif, dan bisa merespons tindakan pengguna (dinamis).
2. Struktur Kode Utuh (HTML + CSS + JS)
Berikut adalah kode lengkap yang telah kita pelajari. Di dalamnya sudah dilengkapi dengan komentar penjelasan di setiap baris agar kalian bisa membacanya dengan mudah saat mengetik ulang di OneCompiler:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Web Dinamis (1 File)</title>
<!-- ========================================== -->
<!-- BAGIAN CSS (DESAIN & TAMPILAN) -->
<!-- ========================================== -->
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f7f6; /* Warna latar belakang */
color: #333; /* Warna teks */
transition: background 0.3s, color 0.3s; /* Efek transisi halus */
}
header {
background-color: #007bff; /* Header warna biru */
color: white;
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
header nav a {
color: white;
text-decoration: none;
margin-right: 15px;
font-weight: bold;
}
#theme-toggle {
background: #333;
color: white;
border: none;
padding: 8px 15px;
cursor: pointer;
border-radius: 5px;
}
main {
padding: 40px 20px;
max-width: 800px;
margin: 0 auto;
}
.hero, .content-box {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
text-align: center;
margin-bottom: 20px;
}
#btn-pesan {
background-color: #28a745; /* Tombol warna hijau */
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
.hidden {
display: none; /* Menyembunyikan elemen */
}
footer {
text-align: center;
padding: 20px;
color: #777;
}
/* --- CLASS TAMBAHAN UNTUK MODE GELAP --- */
body.dark-mode {
background-color: #1e1e1e;
color: #f4f7f6;
}
body.dark-mode .hero, body.dark-mode .content-box {
background-color: #2d2d2d;
color: #fff;
}
</style>
</head>
<body>
<!-- ========================================== -->
<!-- BAGIAN HTML (STRUKTUR HALAMAN) -->
<!-- ========================================== -->
<header>
<div class="logo">WebDinamis</div>
<nav>
<a href="#">Beranda</nav>
<a href="#">Tentang</nav>
<a href="#">Kontak</nav>
</nav>
<button id="theme-toggle">🌙 Mode Gelap</button>
</header>
<main>
<section class="hero">
<h1 id="greeting">Selamat Datang!</h1>
<p>Hari ini: <span id="current-date">-</span></p>
<p>Jam saat ini: <span id="current-time">00:00:00</span></p>
</section>
<section class="content-box">
<h2>Fitur Interaktif</h2>
<p>Klik tombol untuk memunculkan pesan rahasia.</p>
<button id="btn-pesan">Klik Saya!</button>
<p id="pesan-kejutan" class="hidden">🚀 Semangat belajarnya! Kode Anda berhasil berjalan.</p>
</section>
</main>
<footer>
<p>© 2026 WebDinamis. Bahan Bacaan Murid.</p>
</footer>
<!-- ========================================== -->
<!-- BAGIAN JAVASCRIPT (LOGIKA DINAMIS) -->
<!-- ========================================== -->
<script>
// FUNGSI 1: Waktu Real-Time & Ucapan Otomatis
function jalankanWaktuDinamis() {
const sekarang = new Date();
const jam = String(sekarang.getHours()).padStart(2, '0');
const menit = String(sekarang.getMinutes()).padStart(2, '0');
const detik = String(sekarang.getSeconds()).padStart(2, '0');
document.getElementById('current-time').innerText = `${jam}:${menit}:${detik}`;
const opsiTanggal = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
document.getElementById('current-date').innerText = sekarang.toLocaleDateString('id-ID', opsiTanggal);
let ucapan = "Selamat Malam! 🌙";
if (jam < 11) ucapan = "Selamat Pagi! ☀️";
else if (jam < 15) ucapan = "Selamat Siang! 🌤️";
else if (jam < 19) ucapan = "Selamat Sore! ⛅";
document.getElementById('greeting').innerText = ucapan;
}
setInterval(jalankanWaktuDinamis, 1000);
jalankanWaktuDinamis();
// FUNGSI 2: Tombol Mode Gelap (Dark Mode)
const tombolTema = document.getElementById('theme-toggle');
tombolTema.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
if (document.body.classList.contains('dark-mode')) {
tombolTema.innerText = "☀️ Mode Terang";
} else {
tombolTema.innerText = "🌙 Mode Gelap";
}
});
// FUNGSI 3: Menampilkan Pesan Tersembunyi
const btnPesan = document.getElementById('btn-pesan');
const pesanKejutan = document.getElementById('pesan-kejutan');
btnPesan.addEventListener('click', () => {
pesanKejutan.classList.toggle('hidden');
});
</script>
</body>
</html>3. Bedah Koding: Bagaimana Efek Dinamis Ini Bekerja?
A. Jam yang Berdetak Sendiri
Di bagian JavaScript, terdapat fungsi bernama setInterval(jalankanWaktuDinamis, 1000);. Fungsi ini memerintahkan browser untuk mengambil waktu internal dari perangkat kalian setiap 1.000 milidetik (atau 1 detik). Itulah alasan mengapa angka jam di layar terus berubah layaknya jam dinding digital.
B. Mengubah Ucapan Selamat Menggunakan Logika Pengondisian
Dengan memanfaatkan struktur logika if-else, JavaScript memeriksa variabel jam saat ini. Jika sistem mendeteksi jam berada di bawah angka 11, maka teks sapaan otomatis berubah menjadi “Selamat Pagi!”. Jika jam menunjukkan angka malam, teksnya akan berganti menjadi “Selamat Malam!”.
C. Toggle Mode Gelap (Dark Mode)
Saat tombol “Mode Gelap” diklik, perintah document.body.classList.toggle('dark-mode') akan menyuntikkan sebuah class CSS baru bernama .dark-mode ke dalam tag pembungkus utama (body). Ketika kelas ini aktif, aturan warna CSS baru (latar gelap, tulisan putih) langsung menggantikan tampilan bawaan web yang semula cerah.
D. Menyembunyikan dan Memunculkan Konten
Pesan rahasia di dalam web memiliki class bernama .hidden yang diatur di CSS dengan perintah display: none;. Ketika tombol hijau diklik, JavaScript bertugas melepas atau memasang kembali kelas tersebut secara instan sehingga teks bisa muncul dan menghilang saat diklik berulang kali.
4. Kesimpulan & Tugas Mandiri
Membuat halaman satu file utuh seperti ini sangat membantu kita melihat bagaimana HTML menyusun elemen, CSS mempercantik tampilan, dan JavaScript memberikan aksi nyata dalam waktu bersamaan.