Coding

Panduan Lengkap Membuat Website Sederhana untuk Pemula dari Nol

Oleh Admin • 5 September 2025 • 3 min baca

Kalau lo bener-bener baru belajar coding dan pengen bikin website, artikel ini cocok buat lo. Kita akan bahas dari dasar banget: mulai dari apa itu HTML, CSS, JavaScript, sampai cara menjalankan website di komputer sendiri pakai XAMPP. Siap? Yuk mulai 🚀

1. Apa Itu Website?

Website adalah kumpulan halaman yang berisi teks, gambar, atau video yang bisa diakses lewat browser (Chrome, Firefox, Edge). Untuk bikin website, ada 3 komponen utama:

HTML → untuk struktur (kerangka halaman).
CSS → untuk tampilan (warna, layout, desain).
JavaScript → untuk interaksi (tombol, animasi, popup).

2. Pengenalan HTML, CSS, dan JavaScript

HTML (HyperText Markup Language)

HTML adalah bahasa dasar yang membentuk kerangka website.

<h1>Halo Dunia</h1>
<p>Ini adalah paragraf pertama saya.</p>

CSS (Cascading Style Sheets)

CSS berfungsi mempercantik tampilan HTML.

Logo CSS3

p {
  color: blue;
  font-size: 18px;
}

JavaScript

JavaScript menambahkan interaktivitas pada website.

function sayHello() {
  alert("Halo, selamat datang di website saya!");
}

3. Persiapan Tools

XAMPP

XAMPP adalah aplikasi yang bikin komputer lo jadi server lokal. Dengan XAMPP, lo bisa jalanin website di http://localhost/.

👉 Download di apachefriends.org

Setelah install, buka XAMPP Control Panel lalu klik tombol Start pada Apache.

XAMPP Control Panel

Visual Studio Code (VS Code)

VS Code adalah text editor modern untuk ngoding.

Logo VS Code

👉 Download di code.visualstudio.com

4. Membuat Project Website

Buka folder XAMPP → htdocs.
Buat folder baru, misalnya belajarweb.
Buka folder itu di VS Code.

5. Menulis HTML Dasar

Buat file index.html di folder belajarweb:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website Pertamaku</title>
</head>
<body>
  <h1>Halo Dunia! 🚀</h1>
  <p>Ini adalah website pertama saya.</p>
</body>
</html>

6. Menambahkan CSS

Biar lebih keren, tambahin style langsung di file HTML:

<style>
  body {
    background: linear-gradient(to right, #2563eb, #9333ea);
    font-family: Arial, sans-serif;
    color: white;
    text-align: center;
    padding: 50px;
  }
  h1 { color: #facc15; }
</style>

7. Menambahkan JavaScript

Tambahin script biar lebih interaktif:

<button onclick="sayHello()">Klik Aku</button>

<script>
  function sayHello() {
    alert("Selamat datang di website pertamamu!");
  }
</script>

8. Jalankan di Browser

Setelah file disimpan di C:\xampp\htdocs\belajarweb\index.html, buka browser dan ketik:

http://localhost/belajarweb/

Kalau berhasil, lo bakal lihat website sederhana lo tampil 🎉

Contoh Website di Browser

9. Kesimpulan

Selamat! Lo baru aja bikin website pertama lo. Langkahnya:

Kenalan dengan HTML, CSS, JS
Install XAMPP + VS Code
Bikin folder project di htdocs
Tulis index.html
Run di http://localhost/

Setelah ini, lo bisa lanjut belajar lebih dalam: CSS layout, JavaScript DOM, atau framework modern kayak React.js & Laravel.

Ingat, semua developer besar juga mulai dari "Hello World!" 😉