Modul Pembelajaran: HTML & CSS untuk Pemula

Selamat datang di kelas komputer, anak-anak!

Halo semuanya! Hari ini kita akan memulai perjalanan seru menjadi seorang Web Developer. Pernah kalian berpikir bagaimana sebuah website bisa tampil cantik dengan warna-warni, gambar, dan tombol-tombol interaktif? Rahasinya ada pada dua bahasa pemrograman wajib: HTML dan CSS.

Jangan khawatir jika ini pertama kalinya kalian menyentuh kode. Saya telah menyiapkan materi yang runtut dan aplikasi simulasi khusus agar kalian bisa langsung praktek. Sebelum kita mulai, mari kita lihat peta materi atau daftar bacaan yang akan kita pelajari agar tidak tersesat.

📚 Daftar Bacaan & Urutan Materi

Pengenalan HTML & Struktur Dasar (Apa itu Web? Kerangka HTML).
Penyusun Teks HTML (Heading, Paragraf, Formatting).
Media dalam HTML (Menyisipkan Gambar & Link).
Pengenalan CSS (Inline Style vs Internal Style).
CSS Selector (Mengenal Class dan ID).
Styling Dasar (Warna, Font, dan Background).
Konsep Box Model (Border, Padding, Margin).
Dimensi Elemen (Width, Height, dan Overflow).
Layout & Posisi (Display, Float, dan Flexbox).
Studi Kasus Komponen (Card, Form, Table, Navigasi).

Sudah siap? Ayo kita mulai dari dasar!

1. Pengenalan HTML & Struktur Dasar

HTML adalah singkatan dari HyperText Markup Language. Bayangkan HTML sebagai kerangka bangunan atau tulang punggung sebuah website. Tanpa HTML, browser tidak mengerti isi halaman web kita.

HTML menggunakan “Tag” yang ditulis di dalam tanda kurung sudut. Setiap halaman wajib memiliki struktur dasar seperti ini:

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <!-- Isi website kalian ditulis di sini -->
    <h1>Halo Teman-Teman!</h1>
    <p>Saya sedang belajar coding hari ini.</p>
  </body>
</html>

Penjelasan singkat:

<html>: Akar dari seluruh halaman.
<head>: Tempat informasi tersembunyi (seperti judul tab browser).
<body>: Tempat semua konten yang terlihat di layar.

Anak-anak, coba buka aplikasi simulasi, pilih Soal 1 di menu “DASAR HTML”, dan lihat bagaimana kerangka ini bekerja.

🚀 Praktek: Struktur Dasar

2. Penyusun Teks HTML (Heading & Formatting)

Setelah punya kerangka, kita perlu mengisi teks. Kita tidak bisa asal menulis. Kita harus memberi tahu browser mana yang judul, mana yang paragraf biasa.

Heading: Ada 6 level, dari <h1> (paling besar) sampai <h6> (paling kecil).
Paragraph: Gunakan tag <p> untuk menulis kalimat.
Formatting: Untuk menebalkan teks gunakan <b> atau <strong>. Untuk miring gunakan <i> atau <em>.

Jangan lupa selalu tutup tag ya, contoh: <b>Tebal</b>.

📝 Praktek: Heading & Paragraf

3. Media: Gambar & Link

Website akan membosankan jika hanya berisi teks. Kita butuh gambar untuk menarik perhatian dan link untuk berpindah halaman.

Gambar (<img>): Tag ini unik karena tidak punya penutup. Kita butuh atribut src (sumber gambar).

<img src="link-gambar.jpg" alt="Deskripsi Gambar" width="300">

Link (<a>): Digunakan untuk membuat teks yang bisa diklik. Gunakan atribut href untuk tujuannya.

<a href="https://google.com" target="_blank">Kunjungi Google</a>

Coba Soal 4 di aplikasi untuk melihat cara menaruh gambar di halaman web kalian.

🖼️ Praktek: Gambar & Link

4. Masuk ke CSS: Mengubah Tampilan

Jika HTML adalah kerangka rumah, maka CSS adalah cat, keramik, dan perabotannya. CSS (Cascading Style Sheets) membuat website kita jadi cantik.

Ada dua cara sederhana yang akan kita pelajari:

Inline CSS: Menulis style langsung di dalam tag HTML (cepat, tapi berantakan jika kodenya panjang).
Internal CSS: Menulis style di dalam tag <style> di bagian head (lebih rapi dan terorganisir).

Contoh membuat tulisan berwarna merah:

<h1 style="color: red;">Ini Judul Merah</h1>

Silakan buka menu “DASAR CSS” dan pilih Soal 5 untuk mencoba mengubah warna teks kalian.

🎨 Praktek: Inline CSS

5. CSS Selector: Class dan ID

Bagaimana caranya jika kita ingin satu paragraf berwarna biru, tapi paragraf lainnya tetap hitam? Kita tidak bisa sembarangan memberi style ke semua tag <p>.

Kita butuh Selector:

Class (.): Digunakan untuk banyak elemen yang ingin punya gaya sama (misal: semua tombol berwarna hijau).
ID (#): Digunakan untuk satu elemen unik saja (misal: hanya header utama).

<style>
  .teks-penting { color: red; } /* Class pakai titik */
  #header-utama { color: blue; } /* ID pakai pagar */
</style>

<h1 id="header-utama">Judul Unik</h1>
<p class="teks-penting">Paragraf penting</p>

Pahami konsep ini di Soal 7 pada aplikasi.

🎯 Praktek: Class & ID

6. Styling Lanjutan: Font & Background

Agar website terlihat profesional, perhatikan jenis huruf (font) dan latar belakang (background).

Font Family: Gunakan font yang mudah dibaca seperti Arial, Verdana, atau ‘Times New Roman’.
Background Color: Jangan gunakan warna yang terlalu mencolok mata. Gunakan kode warna Hex (contoh: #f0f0f0 untuk abu-abu muda).

Coba main-main dengan background pattern di Soal 8.

🌈 Praktek: Font & Background

7. Konsep Box Model (Penting!)

Anak-anak, ini adalah materi yang sering membuat siswa bingung. Tapi tenang, bayangkan kalian membungkus kado.

Di CSS, setiap elemen adalah sebuah kotak (Box). Di dalam kotak itu ada:

Content: Isinya (teks/gambar).
Padding: Lapisan busa di dalam kado (jarak antara isi dengan pembungkus).
Border: Kertas kado / pita pembungkus (garis tepi).
Margin: Jarak antara kado ini dengan kado lain yang ada di meja.

Jika tampilan website kalian berdempetan, coba atur Margin. Jika teks menempel di pinggir kotak, tambahkan Padding.

Praktekkan Box Model di menu khusus ini.

📦 Praktek: Box Model

8. Layout: Display, Float, dan Flexbox

Setelah kotak-kotaknya cantik, bagaimana cara menyusunnya? Apakah berjejer ke samping (horizontal) atau ke bawah (vertical)?

Kita punya teknologi modern bernama Flexbox.

Secara default, elemen HTML bertumpuk ke bawah (display: block).
Dengan display: flex, kita bisa menyuruh elemen berbaris ke samping secara otomatis.
Kita juga bisa membuat posisi elemen persis di tengah layar menggunakan justify-content dan align-items.

Ini sangat berguna untuk membuat deret tombol atau menu navigasi. Coba Soal 15 dan Soal 16 untuk merasakan keajaiban Flexbox.

🔧 Praktek: Layout & Flexbox

📝 Tantangan Akhir: Studi Kasus

Selamat! Kalian sudah mempelajari teorinya. Sekarang, tugas Bapak/Ibu Guru kalian adalah menyelesaikan tantangan berikut menggunakan aplikasi simulasi. Pilih soal yang sesuai di menu dropdown aplikasi.

Kasus 1: Kartu Identitas Siswa (Soal 17)

Buatlah sebuah kartu profil yang berisi foto (gunakan gambar placeholder), Nama Lengkap, Kelas, dan sebuah tombol “Hubungi Saya”. Gunakan border-radius agar sudut kartu melengkung, dan berikan shadow (bayangan) agar kartu terlihat timbul.

👉 Kerjakan di Aplikasi (Soal 17)

Kasus 2: Formulir Biodata (Soal 18)

Buatlah formulir pendaftaran ekstrakurikuler. Form harus memiliki kolom input untuk Nama, Email (tipe email), dan Pesan (tipe textarea/teks panjang). Berikan styling CSS agar input box terlihat nyaman (ada padding, border tipis).

👉 Kerjakan di Aplikasi (Soal 18)

Kasus 3: Tabel Nilai Ujian (Soal 19)

Buatlah tabel data nilai 3 siswa. Kolomnya terdiri dari: No, Nama Siswa, Mapel, dan Nilai. Gunakan CSS untuk membuat garis tabel (border) menjadi satu (gunakan border-collapse: collapse) dan beri warna latar berbeda pada header tabel.

👉 Kerjakan di Aplikasi (Soal 19)

Kasus 4: Menu Navigasi Bar (Soal 20)

Buatlah menu navigasi di bagian paling atas halaman yang berisi link: Beranda, Profil, Galeri, dan Kontak. Gunakan Flexbox agar menu-menu tersebut berjejer ke samping secara rapi. Beri efek warna saat mouse diarahkan (hover).

👉 Kerjakan di Aplikasi (Soal 20)

Penutup

Anak-anak, belajar coding itu seperti belajar bahasa baru. Awalnya mungkin terasa aneh dengan banyaknya tanda kurung dan kode, tapi dengan latihan yang terus-menerus, kalian akan terbiasa.

Jangan takut salah. Di dunia coding, error itu adalah teman, karena dari error kita belajar memperbaiki kode. Gunakan aplikasi simulasi yang telah saya berikan untuk mencoba-coba tanpa takut merusak apapun.

Selamat berkarya! Semoga sukses dengan tugas-tugas kalian. Sampai jumpa di materi berikutnya!

🚀 Buka Aplikasi Simulasi Sekarang

Klik tombol di atas untuk mulai mengetik kode HTML & CSS.

Belajar HTML dan CSS