🌐 1. Memulai: Apa itu HTML, CSS, dan JavaScript?
Sebelum membuat website, kita perlu tahu 3 pondasi utama:
🧱 HTML (HyperText Markup Language)
Digunakan untuk membuat struktur dan isi halaman, seperti teks, gambar, tombol, dsb.
🎨 CSS (Cascading Style Sheets)
Digunakan untuk mempercantik tampilan website: warna, layout, font, animasi.
⚡ JavaScript
Memberi interaktivitas pada halaman, seperti tombol yang bisa diklik, pop-up, perhitungan otomatis, dll.
Tiga teknologi ini bekerja bersama untuk membuat website modern 💻✨
🏗️ 2. Membuat Struktur Dasar HTML
Buat sebuah file bernama index.html.
Isi dengan struktur dasar berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Sederhana</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Selamat Datang di Website Sederhana! 🎉</h1>
<p>Ini adalah website pertama Anda menggunakan HTML, CSS, dan JavaScript.</p>
<button id="tombol">Klik Aku!</button>
<script src="script.js"></script>
</body>
</html>
✨ Di sini kita membuat:
- Judul
- Paragraf
- Tombol
- Menghubungkan file CSS dan JavaScript
🎨 3. Membuat Tampilan Website dengan CSS
Buat file style.css untuk mempercantik halaman:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
text-align: center;
padding: 50px;
}
h1 {
color: #333;
}
button {
padding: 15px 25px;
font-size: 16px;
background-color: #4CAF50;
border: none;
color: white;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
Dengan CSS ini:
- Warna background jadi cerah 🌤️
- Tombol tampil lebih keren
- Teks rapi dan enak dilihat
⚡ 4. Menambahkan Interaksi dengan JavaScript
Buat file script.js untuk membuat tombol bisa melakukan sesuatu:
document.getElementById("tombol").addEventListener("click", function() {
alert("Halo! 🎊 Anda berhasil membuat interaksi JavaScript!");
});
Sekarang, ketika tombol diklik, muncul pesan pop-up 🎉
Itulah kekuatan JavaScript — membuat website hidup!
🧪 5. Menguji Website
Setelah membuat ketiga file (HTML, CSS, JavaScript), buka index.html di browser seperti Chrome atau Firefox.
Jika tampilan sesuai dan tombol berfungsi, SELAMAT! 🎊
Kamu berhasil membuat website pertamamu!
🚀 6. Pengembangan Lanjutan
Setelah ini kamu bisa menambahkan:
✨ Navbar
✨ Form input
✨ Animasi
✨ Slider gambar
✨ Dark mode toggle 🌙
Langkah demi langkah kamu akan makin jago membuat website nyata! 💪💻
🎉 Penutup
Membangun website dengan HTML, CSS, dan JavaScript adalah langkah awal yang seru untuk masuk ke dunia web development. Dengan terus latihan, kamu bisa membuat website yang modern, responsif, dan profesional.
Zuliana