Home Tutorial

Tutorial Membuat Website Sederhana dari Nol untuk Pemula

Updated: • 0 • min read
Table of Contents

Tutorial Membuat Website Sederhana dari Nol untuk Pemula

Membuat website sebenarnya tidak harus sulit. Dengan memahami HTML, CSS, dan JavaScript, pemula sudah dapat membuat website sederhana yang dapat dibuka melalui browser.


Tutorial ini cocok untuk pemula dan siswa SMK yang ingin belajar Web Programming dari nol. Kita akan membuat sebuah website sederhana mulai dari menyiapkan folder, membuat struktur HTML, mempercantik tampilan dengan CSS, hingga menambahkan interaksi menggunakan JavaScript.

Apa yang Dibutuhkan?

Untuk mengikuti tutorial ini, Anda hanya membutuhkan:

  • Komputer atau laptop.

  • Browser seperti Chrome, Edge, atau Firefox.

  • Text editor.

  • Pengetahuan dasar tentang file dan folder.

Editor yang dapat digunakan antara lain:

  • Visual Studio Code.

  • Notepad++.

  • Sublime Text.

  • Notepad.

Jika baru mulai belajar, Visual Studio Code cukup direkomendasikan karena memiliki fitur seperti syntax highlighting dan bantuan penulisan kode.

HTML, CSS, dan JavaScript

Sebelum membuat website, pahami terlebih dahulu tiga teknologi utama.

HTML

HTML (HyperText Markup Language) digunakan untuk membuat struktur halaman.

Contohnya:

<h1>Website Saya</h1>
<p>Selamat datang di website saya.</p>

CSS

CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan.

Contohnya:

h1 {
    color: blue;
}

JavaScript

JavaScript digunakan untuk menambahkan interaksi.

Contohnya:

alert("Selamat datang!");

Secara sederhana:

HTML       → Struktur
CSS        → Tampilan
JavaScript → Interaksi

Langkah 1 — Membuat Folder Website

Buat sebuah folder baru, misalnya:

website-sederhana

Kemudian buat tiga file:

website-sederhana/
│
├── index.html
├── style.css
└── script.js

Ketiga file tersebut akan digunakan sebagai dasar website.

Langkah 2 — Membuat File HTML

Buka index.html, kemudian masukkan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Saya</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Website Saya</h1>
        <p>Belajar Web Programming dari Nol</p>
    </header>
    <main>
        <h2>Selamat Datang</h2>
        <p>
            Ini adalah website sederhana yang dibuat
            menggunakan HTML, CSS, dan JavaScript.
        </p>
        <button onclick="sapaPengunjung()">
            Klik Saya
        </button>
    </main>
    <footer>
        <p>© 2026 Website Saya</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

Simpan file tersebut.

Langkah 3 — Membuat Tampilan dengan CSS

Sekarang buka style.css.

Masukkan kode berikut:

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    color: #333;
}
header {
    text-align: center;
    padding: 50px 20px;
    background: #2563eb;
    color: white;
}
main {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    background: white;
    border-radius: 12px;
    text-align: center;
}
button {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}
footer {
    text-align: center;
    padding: 20px;
}

CSS tersebut digunakan untuk membuat website terlihat lebih rapi.

Langkah 4 — Menambahkan JavaScript

Sekarang buka file:

script.js

Masukkan:

function sapaPengunjung() {
    alert("Halo! Selamat datang di website saya.");
}

Simpan file tersebut.

Langkah 5 — Menjalankan Website

Sekarang buka folder:

website-sederhana

Kemudian klik dua kali:

index.html

Browser akan membuka website yang telah dibuat.

Ketika tombol Klik Saya ditekan, JavaScript akan menampilkan pesan.

Struktur Website yang Kita Buat

Website sederhana tadi memiliki struktur:

Header
   ↓
Konten Utama
   ↓
Tombol
   ↓
Footer

Sedangkan struktur file:

website-sederhana
│
├── index.html
├── style.css
└── script.js

Hubungan ketiga file tersebut adalah:

index.html
    │
    ├── style.css
    │
    └── script.js

HTML menjadi halaman utama, CSS mengatur tampilannya, dan JavaScript memberikan interaksi.

Mengenal Struktur Dasar HTML

Mari kita lihat bagian HTML lebih dekat.

<!DOCTYPE html>

<!DOCTYPE html>

Digunakan untuk memberitahu browser bahwa dokumen menggunakan HTML5.

<html>

<html lang="id">

Merupakan elemen utama dokumen HTML.

Atribut lang="id" menunjukkan bahwa bahasa halaman adalah Bahasa Indonesia.

<head>

<head>
    ...
</head>

Berisi informasi halaman yang tidak ditampilkan sebagai konten utama.

Contohnya:

  • Judul halaman.

  • Meta tag.

  • Link CSS.

  • Informasi lainnya.

<title>

<title>Website Saya</title>

Menentukan judul halaman yang biasanya ditampilkan pada tab browser.

<body>

<body>
    ...
</body>

Berisi konten yang ditampilkan kepada pengunjung.

Membuat Heading

HTML memiliki beberapa tingkat heading.

<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Subjudul Tingkat 3</h3>

Untuk struktur halaman, gunakan heading secara hierarkis.

Biasanya satu halaman memiliki satu H1 utama, kemudian dilanjutkan dengan H2 dan H3 sesuai struktur konten.

Membuat Paragraf

Gunakan:

<p>Ini adalah paragraf pertama.</p>

Contoh:

<p>
    Saya sedang belajar membuat website
    menggunakan HTML.
</p>

Membuat Link

Untuk membuat tautan:

<a href="https://example.com">Kunjungi Website</a>

Atribut href berisi alamat tujuan.

Membuat Gambar

Gunakan elemen:

<img src="gambar.jpg" alt="Contoh gambar">

Atribut alt memberikan teks alternatif yang menjelaskan gambar.

Membuat Daftar

Unordered List

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Hasilnya berupa daftar dengan bullet.

Ordered List

<ol>
    <li>Belajar HTML</li>
    <li>Belajar CSS</li>
    <li>Belajar JavaScript</li>
</ol>

Hasilnya berupa daftar bernomor.

Membuat Navigasi Website

Website biasanya memiliki menu navigasi.

Contoh:

<nav>
    <a href="#">Home</a>
    <a href="#">Tentang</a>
    <a href="#">Kontak</a>
</nav>

Kemudian dapat diberikan CSS:

nav {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}
nav a {
    text-decoration: none;
    color: #333;
}

Membuat Layout dengan CSS

CSS dapat digunakan untuk mengatur posisi elemen.

Salah satu teknik yang banyak digunakan adalah Flexbox.

Contoh:

.container {
    display: flex;
    gap: 20px;
}

HTML:

<div class="container">
    <div>Kolom 1</div>
    <div>Kolom 2</div>
    <div>Kolom 3</div>
</div>

Flexbox sangat berguna untuk membuat layout website yang fleksibel.

Membuat Website Responsif

Website harus dapat digunakan pada berbagai ukuran layar.

Tambahkan:

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

Kemudian gunakan CSS yang fleksibel.

Contoh media query:

@media (max-width: 600px) {
    main {
        margin: 20px;
        padding: 20px;
    }
    nav {
        flex-direction: column;
    }
}

Dengan demikian, tampilan dapat disesuaikan ketika dibuka melalui smartphone.

Menambahkan Interaksi JavaScript

JavaScript memungkinkan website memberikan respons terhadap tindakan pengguna.

Contoh:

<button onclick="ubahTeks()">
    Ubah Teks
</button>
<p id="pesan">
    Teks awal
</p>

JavaScript:

function ubahTeks() {
    document.getElementById("pesan").textContent =
        "Teks sudah berubah!";
}

Ketika tombol ditekan, isi paragraf akan berubah.

Contoh Website Sederhana Lengkap

Sekarang kita buat versi yang sedikit lebih menarik.

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Belajar Web Programming</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <a href="#">Home</a>
        <a href="#">Tentang</a>
        <a href="#">Materi</a>
        <a href="#">Kontak</a>
    </nav>
    <header>
        <h1>Belajar Web Programming</h1>
        <p>
            Belajar HTML, CSS, dan JavaScript
            dari dasar.
        </p>
        <button onclick="tampilkanPesan()">
            Mulai Belajar
        </button>
    </header>
    <main>
        <section>
            <h2>Tentang Website</h2>
            <p>
                Website ini dibuat sebagai contoh
                sederhana untuk belajar Web Programming.
            </p>
        </section>
        <section class="materi">
            <div class="card">
                <h3>HTML</h3>
                <p>
                    Digunakan untuk membuat struktur
                    halaman website.
                </p>
            </div>
            <div class="card">
                <h3>CSS</h3>
                <p>
                    Digunakan untuk mengatur tampilan
                    website.
                </p>
            </div>
            <div class="card">
                <h3>JavaScript</h3>
                <p>
                    Digunakan untuk membuat website
                    menjadi interaktif.
                </p>
            </div>
        </section>
    </main>
    <footer>
        <p>© 2026 Belajar Web Programming</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

style.css

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f4f6f8;
    color: #222;
}
nav {
    display: flex;
    justify-content: center;
    gap: 25px;
    padding: 18px;
    background: #111827;
}
nav a {
    color: white;
    text-decoration: none;
}
header {
    text-align: center;
    padding: 80px 20px;
    background: #2563eb;
    color: white;
}
header h1 {
    margin-bottom: 10px;
}
button {
    margin-top: 20px;
    padding: 12px 22px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
main {
    max-width: 1000px;
    margin: auto;
    padding: 50px 20px;
}
section {
    margin-bottom: 40px;
}
.materi {
    display: flex;
    gap: 20px;
}
.card {
    flex: 1;
    padding: 25px;
    background: white;
    border-radius: 12px;
}
footer {
    padding: 25px;
    text-align: center;
    background: #111827;
    color: white;
}
@media (max-width: 700px) {
    nav {
        flex-direction: column;
        align-items: center;
    }
    .materi {
        flex-direction: column;
    }
}

script.js

function tampilkanPesan() {
    alert("Selamat belajar Web Programming!");
}

Struktur Website Hasil Akhir

Website yang kita buat memiliki struktur:

┌─────────────────────────────┐
│           NAVBAR            │
├─────────────────────────────┤
│                             │
│           HEADER            │
│    Belajar Web Programming  │
│                             │
├─────────────────────────────┤
│                             │
│        TENTANG WEBSITE      │
│                             │
├──────────┬─────────┬────────┤
│   HTML   │   CSS   │   JS   │
│          │         │        │
├──────────┴─────────┴────────┤
│            FOOTER           │
└─────────────────────────────┘

Cara Belajar Web Programming Setelah Ini

Setelah berhasil membuat website sederhana, jangan berhenti di HTML dasar.

Pelajari secara bertahap:

Tahap 1 — HTML

Pelajari:

  • Struktur HTML.

  • Heading.

  • Paragraf.

  • Link.

  • Gambar.

  • List.

  • Table.

  • Form.

  • Semantic HTML.

Tahap 2 — CSS

Pelajari:

  • Selector.

  • Class dan ID.

  • Box Model.

  • Margin dan Padding.

  • Flexbox.

  • Grid.

  • Position.

  • Responsive Design.

  • Media Query.

Tahap 3 — JavaScript

Pelajari:

  • Variabel.

  • Tipe data.

  • Operator.

  • if.

  • for.

  • while.

  • Function.

  • Array.

  • Object.

  • DOM.

  • Event.

Tahap 4 — Project

Setelah memahami dasar, mulai membuat project:

  • Website profil pribadi.

  • Website sekolah.

  • Landing page.

  • Website portofolio.

  • Website toko sederhana.

  • Form pendaftaran.

  • To-do list.

  • Kalkulator.

  • Aplikasi sederhana berbasis JavaScript.

Kesalahan Umum Pemula

1. Nama File Salah

Pastikan:

index.html
style.css
script.js

bukan:

index.html.txt
style.css.txt
script.js.txt

2. Salah Menulis Path

Jika CSS berada di folder yang sama:

<link rel="stylesheet" href="style.css">

Begitu juga JavaScript:

<script src="script.js"></script>

3. Lupa Menyimpan File

Setelah melakukan perubahan, simpan file kemudian refresh browser.

4. HTML Tidak Ditutup

Contoh:

<p>Belajar HTML

Sebaiknya:

<p>Belajar HTML</p>

5. Terlalu Cepat Menggunakan Framework

Jangan langsung bergantung pada framework sebelum memahami dasar HTML, CSS, dan JavaScript.

Tips Belajar Web Programming

Gunakan metode:

Belajar → Praktik → Error → Perbaiki → Modifikasi → Buat Project

Misalnya setelah mempelajari tombol:

<button>Klik Saya</button>

jangan hanya menyalin contoh. Cobalah membuat:

  • Tombol mengubah warna.

  • Tombol mengubah teks.

  • Tombol menampilkan pesan.

  • Tombol menampilkan dan menyembunyikan elemen.

  • Tombol mengubah mode gelap.

Dengan cara ini, pemahaman akan jauh lebih kuat.

Kesimpulan

Membuat website sederhana dari nol dapat dimulai dengan memahami tiga teknologi utama:

HTML → CSS → JavaScript

HTML digunakan untuk membuat struktur halaman, CSS digunakan untuk mempercantik tampilan, sedangkan JavaScript digunakan untuk menambahkan interaksi.

Struktur project sederhana:

website-sederhana/
│
├── index.html
├── style.css
└── script.js

Setelah menguasai dasar tersebut, Anda dapat melanjutkan ke Responsive Web Design, JavaScript DOM, API, database, backend, dan framework.

Yang terpenting, jangan hanya membaca tutorial. Ketik sendiri kodenya, jalankan, ubah, dan buat project sederhana.

Website pertama tidak harus sempurna. Yang penting selesai dibuat dan menjadi dasar untuk project berikutnya.

FAQ

Apakah bisa membuat website tanpa pengalaman coding?

Bisa. Mulailah dari HTML, kemudian CSS dan JavaScript secara bertahap.

Apakah HTML termasuk bahasa pemrograman?

HTML adalah markup language, bukan bahasa pemrograman. HTML digunakan untuk menyusun struktur halaman web.

Apa fungsi CSS?

CSS digunakan untuk mengatur tampilan dan layout halaman website.

Apa fungsi JavaScript?

JavaScript digunakan untuk membuat halaman web lebih interaktif dan dinamis.

Apakah website ini bisa dibuka di HP?

Ya. Dengan menggunakan desain responsif, website dapat menyesuaikan tampilan dengan ukuran layar perangkat.

Apa yang harus dipelajari setelah HTML, CSS, dan JavaScript?

Setelah menguasai dasar, lanjutkan ke DOM, API, Git, database, backend, dan framework sesuai kebutuhan project.

Kata kunci: tutorial membuat website, cara membuat website dari nol, belajar web programming pemula, tutorial HTML CSS JavaScript, membuat website sederhana, belajar HTML untuk pemula, belajar CSS dasar, belajar JavaScript pemula, website sederhana siswa SMK, tutorial coding website.

Post a Comment