Tutorial HTML CSS Lengkap untuk Pemula: Bangun Website Pertamamu dalam 1 Hari!

By | September 27, 2025
0 Comment

 

Tutorial HTML CSS Lengkap untuk Pemula: Bangun Website Pertamamu dalam 1 Hari!

Pernah nggak sih kamu browsing sebuah website keren lalu kepikiran, “Gimana ya cara bikin website kayak gini?” Apa kamu merasa dunia coding itu terlalu rumit dan cuma bisa dikuasai oleh para programmer berpengalaman? Tenang, kabar baiknya: siapapun bisa belajar bikin website, dan kunci awalnya adalah menguasai HTML dan CSS.

Bayangkan HTML dan CSS itu seperti membangun sebuah rumah. HTML adalah struktur dan kerangkanya—dinding, lantai, atap. Sedangkan CSS adalah segala hal tentang penampilan—cat dinding, tirai jendela, dekorasi interior. Tutorial lengkap ini akan memandu kamu langkah demi langkah, dari nol sama sekali, sampai bisa membuat website portofolio sederhana sendiri. Kita bakal bahas dengan gaya santai, pakai analogi yang mudah dicerna, dan yang pasti, tanpa tekanan! Yuk, kita mulai petualangan seru ini!

Apa Itu HTML dan CSS? Memahami Peran Dasar Mereka

Sebelum masuk ke kode, mari kita kenalan dulu dengan dua “pahlawan” utama dalam pembuatan website.

HTML: Si Pembuat Kerangka

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dan konten dari sebuah halaman web. HTML terdiri dari serangkaian element atau tag yang memberitahu browser bagian mana yang menjadi judul, paragraf, gambar, atau link.

Analoginya, kalau kamu bikin dokumen di Microsoft Word, kamu bisa membuat judul dengan style “Heading 1”, lalu paragraf di bawahnya. HTML melakukan hal yang sama, tetapi dengan menggunakan tag. Contoh tag HTML adalah <h1> untuk heading utama, <p> untuk paragraf, dan <img> untuk menampilkan gambar.

HTML itu sendiri terlihat polos—hanya teks dan gambar tanpa gaya. Tugasnya hanya satu: mendefinisikan apa isi dari websitenya.

CSS: Si Ahli Gaya dan Tata Rias

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendeskripsikan penampilan dari sebuah halaman web yang ditulis dengan HTML. Kalau HTML tadi adalah kerangka rumah, maka CSS adalah yang mengecat dinding, memilih warna karpet, dan menentukan jenis lampu yang dipasang.

Dengan CSS, kamu bisa mengatur:

  • Warna teks dan latar belakang.
  • Font dan ukuran teks.
  • Layout dan posisi elemen (misalnya, side-by-side atau bertumpuk).
  • Spacing (jarak antar elemen).
  • Dan masih banyak lagi!

Kombinasi HTML dan CSS inilah yang menghasilkan website yang tidak hanya informatif tetapi juga enak dipandang.

Mempersiapkan “Kandang” Coding: Tools yang Kamu Butuhkan

Hal terbaik dari belajar HTML dan CSS adalah kamu tidak perlu software yang ribet. Cukup dengan dua tools sederhana ini, kamu sudah bisa mulai:

  1. Text Editor: Ini adalah software untuk menulis kode. Kamu bisa pakai Notepad++, Visual Studio Code (VS Code), atau Sublime Text. VS Code adalah yang paling direkomendasikan karena fiturnya lengkap dan gratis.
  2. Web Browser: Seperti Google Chrome atau Mozilla Firefox untuk melihat hasil kode mu.

Yap, cuma itu saja! Tidak perlu install software berbayar yang berat-berat.

Langkah 1: Membuat File HTML Pertamamu

Sekarang, saatnya praktik! Ikuti langkah-langkah berikut:

  1. Buat folder baru di komputermu dengan nama “Website-Pertamaku”.
  2. Buka text editor (misalnya VS Code), lalu buat file baru.
  3. Salin kode dasar HTML berikut ini ke dalam file tersebut.
<!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 pertamaku yang dibuat dengan HTML.</p>
</body>
</html>
  1. Simpan file ini di dalam folder “Website-Pertamaku” dengan nama “index.html”. Nama “index.html” adalah nama standar untuk file homepage sebuah website.
  2. Sekarang, buka folder tersebut dan double-click file index.html. File tersebut akan terbuka di browser default kamu. Lihat! Website pertamamu sudah jadi!

Mari kita pahami struktur kode di atas:

  • <!DOCTYPE html>: Mendeklarasikan bahwa ini adalah dokumen HTML5.
  • <html>: Elemen root (akar) yang membungkus semua konten HTML.
  • <head>: Berisi informasi meta tentang halaman web, seperti judul tab (<title>) dan link ke file CSS.
  • <body>: Berisi semua konten yang akan ditampilkan di browser, seperti heading, paragraf, gambar, dan link.
  • <h1>: Tag untuk Heading tingkat 1 (judul utama).
  • <p>: Tag untuk Paragraf.

Langkah 2: Mengenal Tag-Tag HTML Penting Lainnya

Setelah berhasil membuat struktur dasar, mari kita tambahkan lebih banyak konten ke dalam <body> website kita. Coba tambahkan tag-tag berikut di bawah paragraf yang sudah ada:

<h2>Tentang Saya</h2>
<p>Nama saya [Nama Kamu]. Saya sedang belajar coding.</p>

<h3>Hobi Saya:</h3>
<ul>
    <li>Membaca</li>
    <li>Menonton Film</li>
    <li>Belajar Hal Baru</li>
</ul>

<h3>Foto Favorit Saya:</h3>
<img src="https://source.unsplash.com/random/400x300" alt="Deskripsi gambar random">

<p>Kunjungi <a href="https://www.google.com">Google</a> untuk mencari informasi.</p>

Simpan file dan refresh browser kamu. Lihat perubahannya? Berikut penjelasan tag baru yang kita pakai:

  • <h2> dan <h3>: Heading level 2 dan 3 (subjudul).
  • <ul>: Unordered List (daftar dengan bullet points).
  • <li>: List Item (item dalam daftar).
  • <img>: Tag untuk menampilkan gambar. Atribut src adalah sumber gambar, dan alt adalah teks pengganti jika gambar gagal dimuat.
  • <a>: Tag anchor untuk membuat hyperlink. Atribut href menentukan tujuan link.

Langkah 3: Menghidupkan Website dengan CSS

Sekarang website kita sudah punya konten, tapi penampilannya masih sangat polos. Saatnya memanggil sang ahli gaya: CSS! Kita akan menambahkan CSS dengan tiga cara, tapi kita mulai dengan cara yang paling direkomendasikan untuk pemula: External CSS.

  1. Di folder yang sama dengan file index.html, buat file baru dan simpan dengan nama “style.css”.
  2. Buka file index.html, dan di dalam bagian <head>, tambahkan baris berikut untuk menghubungkan file CSS: 
    <link rel="stylesheet" href="style.css">

    Sekarang, struktur <head> kamu akan terlihat seperti ini:

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Pertamaku!</title>
    <link rel="stylesheet" href="style.css">
</head>
  3. Sekarang, buka file style.css dan mari kita mulai menghias! Salin kode CSS berikut ke dalamnya:
/* Ganti font dan background seluruh halaman */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f8ff; /* Warna biru muda */
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

/* Gaya untuk judul utama */
h1 {
    color: #2c3e50;
    text-align: center;
}

/* Gaya untuk subjudul */
h2 {
    color: #3498db;
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
}

/* Gaya untuk paragraf */
p {
    color: #34495e;
}

/* Gaya untuk daftar */
ul {
    background-color: #ecf0f1;
    padding: 20px 40px;
    border-radius: 5px;
}

/* Gaya untuk gambar */
img {
    border: 5px solid #3498db;
    border-radius: 10px;
    display: block;
    margin: 10px auto;
}

/* Gaya untuk link */
a {
    color: #e74c3c;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #c0392b;
    text-decoration: underline;
}

Simpan kedua file (index.html dan style.css), lalu refresh browser kamu. Lihat perubahannya? Website polos tiba-tiba jadi berwarna dan lebih terstruktur!

Memahami Sintaks CSS

CSS bekerja dengan memilih elemen HTML dan menerapkan “gaya” kepadanya. Strukturnya selalu seperti ini:

selector {
    property: value;
    property: value;
}
  • Selector: Bagian ini memilih elemen HTML mana yang ingin di-styling (misalnya, h1, p, atau body).
  • Property: Aspek spesifik yang ingin diubah (misalnya, color untuk warna teks, background-color untuk warna latar).
  • Value: Nilai dari property tersebut (misalnya, red, 20px, center).

Langkah 4: Mengatur Layout dengan CSS (Flexbox)

Sekarang kita akan membuat layout yang lebih modern. Misalnya, kita ingin membuat section yang berisi “kartu” tentang hobi kita yang disusun secara sejajar. Untuk ini, kita akan menggunakan CSS Flexbox—alat layout modern yang membuat penataan elemen jadi sangat mudah.

  1. Pertama, tambahkan struktur HTML berikut di file index.html, di atas tag penutup </body>:
<h2>Hobi Saya Lebih Detail</h2>
<div class="hobi-container">
    <div class="kartu">
        <h3>Membaca</h3>
        <p>Saya suka membaca novel fiksi ilmiah dan buku-buku pengembangan diri.</p>
    </div>
    <div class="kartu">
        <h3>Menonton Film</h3>
        <p>Genre favorit saya adalah thriller psikologis dan dokumenter.</p>
    </div>
    <div class="kartu">
        <h3>Belajar</h3>
        <p>Saat ini saya sedang giat belajar HTML, CSS, dan JavaScript.</p>
    </div>
</div>

 

    1. Kemudian, tambahkan kode CSS berikut ke file style.css:

 

 

/* Container untuk kartu-kartu hobi */
.hobi-container {
    display: flex; /* Aktifkan Flexbox */
    flex-wrap: wrap; /* Biarkan kartu pindah baris jika tidak muat */
    gap: 20px; /* Beri jarak antar kartu */
    justify-content: center; /* Rata-tengah kartu */
}

/* Gaya untuk setiap kartu */
.kartu {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    width: 250px; /* Lebar tetap untuk setiap kartu */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Bayangan subtle */
}

.kartu:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Bayangan lebih dalam saat hover */
    transform: translateY(-5px); /* Efek angkat sedikit */
}

Simpan dan refresh. Sekarang kamu punya tiga kartu yang tersusun rapi! Coba kecilkan jendela browser kamu, dan lihat bagaimana kartu-kartu itu secara otomatis menyesuaikan diri. Itulah kekuatan Flexbox!

Kesimpulan: Kamu Sudah Bisa Membuat Website!

Selamat! Jika kamu mengikuti semua langkah di atas, kamu sudah berhasil menyelesaikan tutorial HTML CSS lengkap untuk pemula. Kamu sekarang sudah memahami:

  • Apa itu HTML dan CSS serta perbedaannya.
  • Cara membuat struktur dasar halaman web dengan HTML.
  • Cara menghubungkan file CSS ke HTML.
  • Cara mengatur warna, font, dan spacing dengan CSS.
  • Dasar-dasar layout modern dengan CSS Flexbox.

Ini adalah awal yang luar biasa. Jalan selanjutnya adalah dengan terus berlatih. Coba ubah-ubah nilai warna dan ukuran di CSS. Coba tambahkan elemen HTML baru dan style sendiri. Eksperimen adalah guru terbaik dalam belajar coding.

Ingat, setiap developer expert juga pernah menjadi pemula seperti kamu hari ini. Kuncinya adalah konsistensi dan rasa ingin tahu. Selamat coding, dan selamat menikmati kekuatan baru kamu untuk menciptakan sesuatu di dunia digital!