HTML dan CSS plus Contoh Proyek (1)

Halo para pembelajar web!

Kamu pengen belajar bikin website tapi bingung mulai dari mana? Tenang, artikel ini bakal ngebahas dasar-dasar HTML dan CSS dengan gaya bahasa yang santai, cocok buat kamu yang baru mau nyemplung ke dunia coding. Belajar pemrograman web itu seru banget karena apa yang kamu tulis bisa langsung kelihatan hasilnya di browser!

1. Apa Itu HTML?

HTML (HyperText Markup Language) adalah bahasa standar untuk membuat struktur website. Bayangkan HTML itu seperti kerangka manusia atau struktur sebuah dokumen. Kalau kamu pengen bikin tombol, paragraf, atau judul, kamu butuh HTML.

Komponen Utama HTML: Elemen & Tag

HTML bekerja menggunakan “tag” yang membungkus konten. Biasanya ada tag pembuka (<...>) dan tag penutup (</...>).

Heading: Digunakan untuk judul (<h1> sampai <h6>).
Paragraph: Untuk teks biasa (<p>).
Button: Untuk membuat tombol klik (<button>).
Image: Untuk menampilkan gambar (<img>). Tag ini unik karena tidak butuh penutup (disebut void element).

Contoh Struktur Dasar HTML:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Website Pertamaku</title>
</head>
<body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertamaku di website.</p>
    <button>Klik Saya!</button>
</body>
</html>

2. Apa Itu CSS?

Kalau HTML itu kerangkanya, CSS (Cascading Style Sheets) adalah makeup atau pakaiannya. CSS bertugas buat bikin website kamu jadi cantik dengan mengatur warna, ukuran font, jarak, sampai tata letak (layout).

Cara Kerja CSS: Selector & Property

CSS memilih elemen HTML (Selector) lalu mengubah tampilannya (Property).

Selector: Memilih elemen mana yang mau dihias (misal: h1, p, atau nama class).
Property & Value: Aturan yang mau diubah (misal: color: red;).

Contoh Styling CSS:

CSS

h1 {
    color: blue; /* Mengubah warna judul jadi biru */
    font-size: 32px; /* Mengatur ukuran tulisan */
}

button {
    background-color: green;
    color: white;
    border-radius: 8px; /* Bikin pojokan tombol jadi melengkung */
}

3. Konsep Layouting: Grid vs Flexbox

Biar website kamu rapi, kamu perlu belajar tata letak. Ada dua “senjata” utama di CSS modern:

CSS Grid: Bagus banget buat bikin layout yang kaku dan terstruktur (seperti tabel dengan baris dan kolom). Cocok buat layout halaman utama.
Flexbox: Lebih fleksibel. Bagus buat ngatur item di dalam sebuah kontainer, misalnya menyusun menu navigasi atau ikon secara sejajar.

4. Tips Belajar Fun Learning

Jangan Dihafal: Coding itu bukan pelajaran sejarah. Jangan pusing ngafalin semua tag. Cukup tahu konsepnya, kalau lupa tinggal cari di Google atau dokumentasi seperti W3Schools atau MDN Web Docs.
Pakai Tools yang Oke: Sangat disarankan pakai Visual Studio Code (VS Code) sebagai teks editor kamu. Di sana ada fitur Emmet yang bikin ngetik kode jadi super cepat!
Langsung Praktik: Cara paling cepat belajar adalah dengan bikin project kecil-kecilan, misalnya bikin kartu profil (card) atau halaman biodata simpel.