🎨 Modul 2: Menghias Website

Pengenalan CSS - Membuat Website Jadi Cantik

HTML CSS Desain

1. 🎯 Tujuan Belajar

Setelah selesai membaca modul ini, adik-adik bisa:

2. 🧸 Penjelasan Materi (Bahasa Bayi)

A. Apa itu CSS?

Ingat waktu Modul 1 kita bikin rumah Lego?

  • HTML itu adalah batu batanya (supaya rumah berdiri).
  • CSS itu adalah cat tembok, karpet, dan hiasannya.

Kalau cuma pakai HTML, website warnanya putih biasa dan tulisannya hitam biasa. Membosankan kan? 😴 Dengan CSS, kita bisa bikin tulisan jadi warna-warni!

👗 Analogi: Kalau HTML itu tubuh manusia, CSS itu baju dan make-up-nya. Supaya tampil lebih keren!

B. Rumus Rahasia CSS

Kode CSS itu cuma punya 3 bagian:

  1. Siapa yang mau dihias? (Misal: h1, body)
  2. Mau dihias apa? (Misal: color, background)
  3. Mau warnanya apa? (Misal: red, blue)
h1 {
    color: red;
}

Artinya: "Hei Komputer, semua tulisan Judul (h1), tolong warnanya diganti jadi Merah ya!"

⚠️ Penting: Jangan lupa tanda titik dua : dan titik koma ;.

3. 🎮 Studio CSS Interaktif

🖌️ Coba Hias Website Sendiri!

Pilih warna dan lihat perubahannya secara langsung!

CSS Style Editor
📝 Kode CSS (Ketik di sini)
👁️ Hasil Preview

Halo Dunia!

Ini adalah website pertama saya yang sudah dihias.

4. 🛠️ Langkah-langkah Belajar

1

Buka File Lama

Buka file index.html yang kamu buat di Modul 1 menggunakan Notepad.

2

Siapkan Kotak Cat (<style>)

Cari bagian <head> dan tambahkan ini:

<head>
    <title>Website Pertamaku</title>
    <style>
        /* Kita akan menulis kode CSS di sini */
    </style>
</head>
3

Mencat Latar Belakang (Body)

Di dalam <style>, kita mau mengubah warna seluruh halaman:

body {
    background-color: lightblue;
}
4

Mencat Judul (h1)

Sekarang kita buat judulnya menyala:

h1 {
    color: darkred;
    font-size: 50px;
}
5

Simpan dan Lihat

  • Simpan file (Ctrl + S)
  • Buka Chrome, lalu Refresh
  • Wow! Halamannya sekarang berwarna!
⚠️ Penting: Jangan lupa tanda titik dua : dan titik koma ;. Kalau lupa, komputer bisa bingung!

5. 📝 Penilaian (Cek Kemampuan)

6. 💡 Pesan untuk Guru / Orang Tua

Komputer itu Penurut tapi Bodoh: Tekankan pada siswa bahwa komputer akan melakukan persis apa yang ditulis. Kalau salah ketik satu huruf, komputer akan bingung.

Daftar Warna: Komputer tahu banyak nama warna dalam bahasa Inggris (red, blue, green, orange, purple). Berikan daftar warna sederhana kepada siswa.

Eksperimen: Biarkan siswa "salah". Misal mereka tulis color: meraha (salah eja), website tidak akan berubah warnanya. Ini cara terbaik belajar!

7. 🎁 Lembar Contekan Kode

📚 Cheat Sheet CSS Dasar

Warna Tulisan:
color: red;
Warna Background:
background-color: blue;
Ukuran Huruf:
font-size: 20px;
Tengah Halaman:
text-align: center;
Daftar Warna:
red, blue, green, yellow, orange,
purple, black, white, pink, gray

8. 📊 Progress Belajar

0% - Mulai Menghias!

🎉 Selamat!

Kamu sekarang bukan hanya bisa membuat website,
tapi kamu juga bisa mendandani website itu! 🎨

Website kamu sudah punya gaya sendiri!

Siap lanjut ke Modul 3 (Foto & Daftar)? 🖼️