1. Pendahuluan
Dalam dunia pengembangan web, ada tiga bahasa utama yang wajib dipelajari: HTML, CSS, dan JavaScript.
Ketiganya bekerja sama untuk menciptakan website yang terstruktur (HTML), indah (CSS), dan interaktif (JavaScript).
2. HTML (HyperText Markup Language)
HTML adalah bahasa markup yang digunakan untuk membuat struktur dasar halaman web.
- Membuat elemen seperti judul, paragraf, gambar, tabel, dan link.
- HTML bersifat statis, hanya sebagai kerangka.
Contoh kode HTML sederhana:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Ini adalah paragraf pertama saya di HTML.</p>
<a href="https://www.google.com">Kunjungi Google</a>
</body>
</html>
3. CSS (Cascading Style Sheets)
CSS digunakan untuk mengatur tampilan halaman web.
- Memberi warna, font, layout, animasi, dan responsivitas.
- Membuat tampilan lebih menarik dan profesional.
Contoh kode CSS sederhana:
body {
background-color: #f3f4f6;
font-family: Arial, sans-serif;
color: #1f2937;
}
h1 {
color: #2563eb;
text-align: center;
}
a {
color: #16a34a;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
4. JavaScript
JavaScript adalah bahasa pemrograman untuk membuat halaman web dinamis dan interaktif.
- Bisa merespon aksi pengguna (klik, input, scroll).
- Bisa mengubah isi halaman tanpa reload.
- Bisa berkomunikasi dengan server (API).
Contoh kode JavaScript sederhana:
<button id="tombol">Klik Saya</button>
<p id="pesan"></p>
<script>
const tombol = document.getElementById("tombol");
const pesan = document.getElementById("pesan");
tombol.addEventListener("click", () => {
pesan.textContent = "Halo! Kamu sudah klik tombol.";
});
</script>
5. Cara Kerja Bersama
- HTML → Struktur dan isi halaman.
- CSS → Memberikan gaya visual.
- JavaScript → Menambahkan logika dan interaktivitas.
🔑 Analogi sederhana:
- HTML = Tulang tubuh
- CSS = Pakaian dan penampilan
- JavaScript = Otak & gerakan
6. Kesimpulan
- HTML membangun kerangka web.
- CSS mempercantik tampilan web.
- JavaScript membuat web hidup dan interaktif.
Dengan menguasai ketiga bahasa ini, seorang developer dapat membuat website yang indah, responsif, dan fungsional.