Beranda
CSS

Cara Membuat Website Pertamamu dengan HTML & CSS (Gratis, 1 Jam)

Ilustrasi robot chef membangun website dari balok HTML dan cat CSS

Setiap programmer punya cerita tentang website pertamanya. Biasanya jelek. Tulisannya miring ke mana-mana, warnanya tabrakan, gambarnya tidak muncul. Tapi rasanya luar biasa, karena untuk pertama kalinya kamu membuat sesuatu yang benar-benar bisa dibuka di browser.

Kabar baiknya, kamu tidak butuh kursus mahal atau laptop spek dewa untuk merasakan itu. Cukup satu jam waktu luang, dua aplikasi gratis, dan panduan ini. Di akhir artikel, kamu akan punya satu halaman web buatan sendiri, plus tahu cara menerbitkannya ke internet supaya bisa dibuka dari HP temanmu.

Siap menyalakan kompor? Mari mulai.

Kenapa Mulai dari HTML dan CSS?

Di dapur Kompor Kode, kami suka memakai analogi masakan. Kalau website itu sebuah hidangan, maka HTML adalah bahan mentahnya: nasi, ayam, sayur, dan lauknya. CSS adalah bumbu dan platingnya: yang membuat hidangan terlihat menggugah selera. JavaScript? Itu apinya. Penting, tapi kamu tidak butuh api sebelum bahannya siap.

HTML (HyperText Markup Language) mengatur struktur: bagian mana yang jadi judul, mana paragraf, mana gambar, mana tombol. CSS (Cascading Style Sheets) mengatur tampilan: warna, jenis huruf, ukuran, dan posisi setiap elemen.

Dua teknologi ini adalah fondasi semua website di dunia, dari blog pribadi sampai situs perusahaan besar. Usianya sudah puluhan tahun dan tidak akan ke mana-mana. Artinya, waktu yang kamu investasikan untuk mempelajarinya tidak akan basi. Berbeda dengan framework yang datang dan pergi tiap tahun, HTML dan CSS adalah ilmu yang awet.

Persiapan: Cuma Butuh 2 Aplikasi Gratis

Tidak ada yang perlu dibeli. Siapkan dua ini:

  1. Text editor. Unduh Visual Studio Code gratis dari situs resminya (code.visualstudio.com). Ini aplikasi sejuta umat programmer untuk menulis kode, lengkap dengan pewarna sintaks yang membuat kode lebih mudah dibaca. Kalau komputermu kentang, Notepad++ juga cukup untuk latihan ini.
  2. Browser. Chrome, Edge, atau Firefox, terserah yang sudah terpasang. Browser inilah yang akan "memasak" kodemu menjadi tampilan website.

Setelah itu, buat satu folder baru di komputermu, misalnya bernama website-pertamaku. Di dalam folder itu, buat dua file kosong: index.html dan style.css. File pertama untuk HTML, file kedua untuk CSS. Memisahkan keduanya sejak awal adalah kebiasaan baik yang dipakai programmer profesional, jadi biasakan dari sekarang.

HTML: Kerangka Website

HTML bekerja dengan sesuatu yang disebut tag: kode berpasangan yang terdiri dari tag pembuka dan tag penutup. Isi di antara keduanya adalah kontenmu. Perhatikan contoh berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Website Pertamaku</title>
</head>
<body>
  <h1>Halo, Dunia!</h1>
  <p>Ini adalah website pertama yang aku buat sendiri.</p>
</body>
</html>

Mari bedah satu per satu:

  • <h1> artinya judul utama. Ada juga h2 sampai h6 untuk subjudul yang ukurannya makin kecil.
  • <p> artinya paragraf, untuk teks biasa.
  • Bagian <head> berisi informasi untuk browser (seperti judul tab), sedangkan <body> berisi semua yang tampil di layar.
  • Baris <!DOCTYPE html> cukup dihafal saja: itu cara memberi tahu browser bahwa ini dokumen HTML modern.

Selain tag berpasangan, ada juga atribut: informasi tambahan yang ditulis di dalam tag pembuka. Dua atribut yang paling sering kamu temui adalah href untuk link dan src untuk gambar:

<a href="https://komporkode.blogspot.com">Kunjungi Kompor Kode</a>
<img src="foto.jpg" alt="Foto profilku">

Salin kode kerangka tadi ke file index.html milikmu, lalu simpan. Jangan khawatir kalau belum paham semuanya, pemahaman datang sambil praktik.

CSS: Pakaian Website

Sekarang HTML-mu sudah punya struktur, tapi tampilannya masih polos: teks hitam di latar putih, rata kiri. Di sinilah CSS masuk. CSS bekerja dengan pola yang sederhana: pilih elemen, lalu atur gayanya.

body {
  font-family: Arial, sans-serif;
  background-color: #fdf6ec;
  color: #333333;
  text-align: center;
  padding: 40px;
}

h1 {
  color: #e8590c;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

Pola di atas disebut aturan CSS. Kata body dan h1 adalah selector, yaitu elemen yang dipilih. Isi di dalam kurung kurawal adalah deklarasi: pasangan properti dan nilai, misalnya color: #e8590c yang berarti warna teksnya oranye.

Satu konsep penting yang perlu kamu kenal adalah box model: setiap elemen HTML pada dasarnya adalah sebuah kotak. Properti margin mengatur jarak di luar kotak, padding mengatur jarak di dalam kotak, dan border adalah garis tepi kotak itu sendiri. Tiga properti inilah yang paling sering dipakai untuk merapikan tata letak.

Supaya file CSS ini dipakai oleh HTML-mu, tambahkan satu baris di dalam <head> pada file index.html:

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

Simpan kedua file, lalu buka index.html di browser dengan cara klik dua kali. Lihat perbedaannya: latar menjadi krem hangat, judul berubah oranye, teks rata tengah. Itu semua kerja CSS.

Proyek 1 Jam: Halaman Profil Pribadi

Teori cukup, sekarang masak beneran. Dalam 60 menit ke depan, buat halaman profil dirimu sendiri. Bagi waktunya begini:

Menit 0-15: struktur HTML. Tulis kerangka berisi namamu sebagai h1, satu paragraf perkenalan, daftar hobi memakai <ul> dan <li>, dan satu link ke media sosialmu memakai tag <a>.

Menit 15-35: dandani dengan CSS. Atur warna latar dan jenis huruf, lalu buat "kartu" profil sederhana: bungkus konten dengan <div>, beri latar putih, sudut membulat dengan border-radius, dan sedikit bayangan dengan box-shadow. Tidak perlu sempurna, yang penting berani coba-coba.

Menit 35-50: percantik detail. Tambahkan foto (simpan file gambar di folder yang sama, tampilkan dengan tag <img>), ubah warna link, dan atur jarak antar elemen dengan margin dan padding.

Menit 50-60: rapikan dan simpan. Baca ulang kodemu, pastikan tidak ada tag yang lupa ditutup, lalu simpan semua file.

Contoh potongan untuk daftar hobi:

<h2>Hobiku</h2>
<ul>
  <li>Main game</li>
  <li>Masak mi instan tengah malam</li>
  <li>Nonton tutorial ngoding</li>
</ul>

Kesalahan Umum Pemula (dan Cara Memperbaikinya)

Hampir semua pemula menabrak tiga tembok yang sama. Kalau websitemu bermasalah, cek tiga ini dulu sebelum bertanya ke mana-mana:

  1. Tag lupa ditutup. Setiap <p> butuh </p>. Satu tag yang tidak ditutup bisa merusak seluruh tampilan di bawahnya.
  2. Salah ketik nama file. Kalau CSS tidak berpengaruh sama sekali, kemungkinan besar atribut href pada tag <link> salah ketik, misalnya stayle.css padahal filenya style.css.
  3. Lupa menyimpan. Kamu mengedit, lalu refresh browser, tapi tidak ada yang berubah. Sembilan dari sepuluh kasus begini solusinya cuma satu: tekan Ctrl+S dulu.

Cara Melihat Hasilnya di Browser

Setiap kali selesai mengedit, tekan Ctrl+S untuk menyimpan, lalu buka (atau refresh) index.html di browser. Tidak perlu install apa pun dan tidak perlu koneksi internet. Browser membaca file langsung dari komputermu, jadi proses coba-coba berlangsung sangat cepat.

Tips tambahan: klik kanan pada halaman lalu pilih "Inspect" atau "Periksa" untuk membuka developer tools. Di sana kamu bisa melihat struktur HTML dan bereksperimen mengubah CSS secara langsung tanpa menyimpan file. Perubahan di sana sifatnya sementara, jadi aman untuk coba-coba.

Terbitkan ke Internet, Gratis

Halaman yang hanya bisa dibuka di komputermu sendiri itu seperti masakan yang cuma dimakan sendiri: enak, tapi tidak ada yang tahu. Saatnya diterbitkan supaya bisa dibagikan.

Cara termudah untuk pemula adalah Netlify Drop. Buka situsnya, lalu seret (drag and drop) folder website-pertamaku ke halaman tersebut. Dalam beberapa detik kamu mendapatkan link publik dengan HTTPS otomatis, misalnya nama-acak.netlify.app. Gratis dan tanpa kartu kredit.

Alternatif lain yang juga gratis per 2026: GitHub Pages (cocok kalau kamu sudah punya akun GitHub), Vercel, dan Cloudflare Pages. Semuanya menyediakan paket gratis yang lebih dari cukup untuk website statis seperti buatanmu ini. Kirim linknya ke grup temanmu dan nikmati momennya, karena website pertama hanya terjadi sekali.

Setelah Ini Belajar Apa?

Selamat, kamu sekarang resmi bisa bilang "aku bisa bikin website". Tapi ini baru dapur tingkat satu. Peta lanjutannya kira-kira begini:

  1. JavaScript: membuat websitemu interaktif, misalnya tombol yang bisa diklik, formulir, dan animasi.
  2. Responsive design: memastikan tampilan tetap bagus di layar HP, bukan cuma di laptop.
  3. Git dan GitHub: menyimpan riwayat versi kodemu dan berkolaborasi, standar wajib programmer profesional.

Ketiganya akan kita masak satu per satu di Kompor Kode. Untuk sekarang, nikmati dulu website pertamamu.

Kalau kamu menyelesaikan proyek satu jam ini, ceritakan di kolom komentar: website pertamamu tentang apa? Siapa tahu bisa jadi inspirasi pembaca lain. Selamat ngoding!