📚 Materi Belajar HTML & CSS: Projek Website "Cita-Citaku"

Halo! Materi ini dibuat khusus untuk kamu yang baru pertama kali belajar membuat website. Kita akan belajar sambil langsung membuat projek nyata: Website tentang Cita-Cita. Yuk mulai!

🎯 Apa yang Akan Kita Buat?

Website sederhana yang menampilkan:

Judul "Cita-Citaku"
Foto/gambar cita-cita
Alasan kenapa ingin meraih cita-cita itu
Langkah-langkah untuk mencapainya

🧠 Pengenalan Dulu

Bayangkan website itu seperti rumah:

HTML = kerangka rumah (tembok, pintu, jendela)
CSS = cat, warna, dan dekorasi rumah

Jadi HTML itu isinya, CSS itu tampilannya. Wajib belajar dua-duanya!

📅 PERTEMUAN 1: Kenalan dengan HTML

1.1 Apa itu HTML?

HTML singkatan dari HyperText Markup Language. Dia pakai "tag" untuk memberi tahu browser (Chrome, Firefox) apa yang harus ditampilkan.

Tag HTML ditulis pakai tanda kurung siku < >.

Contoh: <p>Halo</p> artinya "Halo" itu sebuah paragraf.

1.2 Struktur Dasar HTML

Buka Notepad atau VS Code, lalu tulis kode ini:

<!DOCTYPE html>
<html>
<head>
  <title>Cita-Citaku</title>
</head>
<body>
  <h1>Halo, Namaku Budi!</h1>
  <p>Aku ingin jadi dokter.</p>
</body>
</html>

Simpan dengan nama: index.html
Cara buka: Klik 2x file-nya, nanti terbuka di browser.

1.3 Tag HTML yang Sering Dipakai

Tag	Fungsi	Contoh
`<h1>` sampai `<h6>`	Judul (h1 paling besar)	`<h1>Cita-Citaku</h1>`
`<p>`	Paragraf	`<p>Aku ingin jadi pilot</p>`
`<img>`	Gambar	`<img src="gambar.jpg">`
`<ul>` + `<li>`	Daftar berpoin	lihat contoh di bawah
`<br>`	Pindah baris	`Halo<br>Dunia`
`<a>`	Link	`<a href="google.com">Klik</a>`

1.4 Contoh Daftar (List)

<h2>Langkah Jadi Dokter:</h2>
<ul>
  <li>Rajin belajar biologi</li>
  <li>Masuk SMA IPA</li>
  <li>Kuliah kedokteran</li>
</ul>

✏️ Latihan 1

Buat file index.html yang berisi:

Judul besar: Cita-Citaku
Paragraf: jelaskan cita-citamu (minimal 3 baris)
Daftar 3 langkah untuk meraih cita-cita

📅 PERTEMUAN 2: HTML Lebih Dalam + Gambar

2.1 Menambahkan Gambar

Siapkan gambar (misalnya dokter.jpg) di folder yang sama dengan index.html.

<img src="dokter.jpg" alt="Foto Dokter" width="300">

src = lokasi gambar
alt = tulisan pengganti kalau gambar gagal muncul
width = lebar gambar (dalam pixel)

2.2 Membagi Halaman dengan `<div>`

<div> itu seperti kotak untuk mengelompokkan isi.

<div>
  <h1>Cita-Citaku</h1>
  <p>Aku ingin jadi dokter.</p>
</div>

2.3 Memberi Nama pada Bagian (class & id)

Biar nanti bisa diwarnai pakai CSS, kita kasih nama:

<div class="header">
  <h1>Cita-Citaku</h1>
</div>

<div class="isi">
  <p>Aku ingin jadi dokter karena ingin menolong orang.</p>
</div>

class = nama kelompok (boleh dipakai berkali-kali)
id = nama unik (hanya untuk 1 elemen)

✏️ Latihan 2

Tambahkan gambar ke website cita-citamu, dan bagi jadi 3 kotak:

Kotak header (judul)
Kotak isi (penjelasan)
Kotak footer (nama kamu)

📅 PERTEMUAN 3: Kenalan dengan CSS

3.1 Apa itu CSS?

CSS = Cascading Style Sheets = pengatur tampilan.
Bikin tulisan berwarna, ukuran, posisi, dan lainnya.

3.2 3 Cara Memakai CSS

Cara 1: Langsung di tag (inline) — kurang rapi

<h1 style="color: red;">Cita-Citaku</h1>

Cara 2: Di dalam <head> — lebih rapi

<head>
  <style>
    h1 { color: red; }
  </style>
</head>

Cara 3: File terpisah — paling rapi (kita pakai cara ini!)

Buat file baru bernama style.css, lalu sambungkan ke HTML:

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

3.3 Aturan Dasar CSS

Bentuknya selalu begini:

selector {
  properti: nilai;
}

Contoh:

h1 {
  color: blue;
  font-size: 40px;
  text-align: center;
}

3.4 Properti CSS Penting

Properti	Fungsi	Contoh Nilai
`color`	Warna tulisan	`red`, `#ff0000`, `blue`
`background-color`	Warna latar	`yellow`, `#fff`
`font-size`	Ukuran tulisan	`20px`, `30px`
`font-family`	Jenis huruf	`Arial`, `Verdana`
`text-align`	Perataan	`center`, `left`, `right`
`padding`	Jarak dalam kotak	`20px`
`margin`	Jarak luar kotak	`20px`
`border`	Garis tepi	`2px solid black`
`border-radius`	Sudut melengkung	`10px`

✏️ Latihan 3

Buat style.css untuk mengubah:

Warna judul jadi biru
Latar halaman jadi krem
Tulisan paragraf rata tengah

📅 PERTEMUAN 4: Mempercantik Website Cita-Cita

Sekarang gabungkan semuanya! Ini contoh lengkap:

📄 index.html

<!DOCTYPE html>
<html>
<head>
  <title>Cita-Citaku</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="header">
    <h1>Cita-Citaku</h1>
    <p>Website impian Budi</p>
  </div>

  <div class="isi">
    <img src="dokter.jpg" alt="Dokter" width="200">
    <h2>Aku ingin jadi Dokter</h2>
    <p>Aku ingin jadi dokter karena ingin menolong orang sakit
       dan membuat keluargaku bangga.</p>

    <h3>Langkah-langkahku:</h3>
    <ul>
      <li>Belajar rajin setiap hari</li>
      <li>Masuk SMA jurusan IPA</li>
      <li>Kuliah di fakultas kedokteran</li>
    </ul>
  </div>

  <div class="footer">
    <p>Dibuat oleh: Budi - Kelas 8A</p>
  </div>
</body>
</html>

🎨 style.css

body {
  font-family: Arial, sans-serif;
  background-color: #fdf6e3;
  margin: 0;
}

.header {
  background-color: #4a90e2;
  color: white;
  text-align: center;
  padding: 30px;
}

.header h1 {
  margin: 0;
  font-size: 40px;
}

.isi {
  background-color: white;
  max-width: 600px;
  margin: 30px auto;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: center;
}

.isi img {
  border-radius: 50%;
  border: 4px solid #4a90e2;
}

.isi h2 {
  color: #4a90e2;
}

.isi ul {
  text-align: left;
  display: inline-block;
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 15px;
}

✏️ Latihan 4

Ubah sesuai cita-citamu sendiri! Ganti:

Warna tema (ubah #4a90e2 jadi warna favoritmu)
Gambar
Isi teks

🎁 Tantangan Akhir (Projek Penilaian)

Buat website "Cita-Citaku" versi kamu sendiri, wajib ada:

✅ Judul dengan namamu
✅ Gambar (bisa cari di Google atau gambar sendiri)
✅ Paragraf alasan (minimal 5 baris)
✅ Daftar 5 langkah mencapai cita-cita
✅ Minimal 3 warna berbeda dari CSS
✅ Footer berisi nama dan kelas

💡 Tips untuk Guru

Mulai dari yang visual — tunjukkan hasil akhir dulu biar siswa semangat
Koding bareng — praktik langsung, jangan cuma teori
Error itu normal — ajarkan siswa cek tanda <, >, {, }, ;
Pamerkan hasil — minta siswa saling lihat website temannya
Pakai VS Code — gratis, ada warna-warni kode biar mudah dibaca

📌 Ringkasan Cepat

Hal	HTML	CSS
Fungsi	Isi & struktur	Tampilan & warna
File	`index.html`	`style.css`
Cara sambung	`<link rel="stylesheet" href="style.css">`	—
Simbol khas	`< >`	`{ }`

Selamat mengajar dan selamat berkarya! 🚀
Semoga siswa-siswamu semakin semangat mengejar cita-cita! ✨

Cari Blog Ini

BORNEO DEVELOPMENT SERVICES