🌐 Modul 1: Pengenalan HTML

Dasar Web Programming - Membuat Website Pertama

HTML Dasar Pemula

1. 🎯 Tujuan Belajar

Setelah selesai membaca modul ini, adik-adik bisa:

Mengerti apa itu HTML (bahasa komputer).
Menulis kode HTML sederhana.
Membuat halaman web "Tentang Aku" yang bisa dibuka di internet.
Memahami struktur dasar halaman web.

2. 🧸 Penjelasan Materi (Bahasa Bayi)

A. Apa itu HTML?

Bayangkan kamu ingin membuat Rumah Lego.

Website itu seperti Rumah Legonya yang sudah jadi.
HTML itu adalah batu bata Legonya.

Kalau tidak ada batu bata (HTML), tidak ada rumah (Website). HTML adalah bahasa yang dipakai kita untuk memberi tahu komputer apa yang harus ditampilkan.

🏗️ Analogi: HTML itu seperti resep masakan. Komputer adalah koki yang mengikuti resep untuk membuat website!

B. Struktur HTML (Kerangka Tubuh)

Setiap halaman web itu seperti manusia, punya kepala dan badan.

<html>
Kulit Luar

⬇️

<head>
OTAK

<body>
BADAN

<html> ... </html> → Ini adalah kulit luarnya. Semua kode harus ada di dalam sini.
<head> ... </head> → Ini adalah OTAK. Isinya rahasia, tidak terlihat di layar, tapi penting untuk pengaturan.
<body> ... </body> → Ini adalah BADAN. Semua yang kita lihat di layar (tulisan, gambar, warna) harus ditaruh di dalam badan ini.

C. Kode Ajaib (Tags)

Komputer itu agak "bodoh", dia hanya paham kalau kita memberi tanda kurung < >. Tanda ini disebut TAG.

👟 Analogi: Tag itu biasanya berpasangan, seperti sepatu kiri dan kanan!

<h1> Isi Konten </h1>

Perhatikan ada garis miring / di tag penutup!

Tag yang Sering Dipakai:

<h1> → Untuk membuat Judul Besar. Seperti judul koran.
<p> → Untuk menulis cerita atau teks biasa (Paragraph).
<img> → Untuk memasang foto. Ini tag spesial, tidak perlu sepatu tutup!
<a> → Untuk membuat Pintu Ajaib (Link) yang kalau diklik bisa pindah ke tempat lain.

3. 🎮 Editor HTML Interaktif

✏️ Coba Tulis Kode HTML Sendiri!

Ketik kode HTML di kotak kiri, lihat hasilnya di kotak kanan!

HTML Code Editor

📝 Kode HTML (Ketik di sini)

👁️ Hasil Preview

4. 🛠️ Langkah-langkah Belajar

Buka Notepad

Ayo buka aplikasi Notepad di komputermu. Layar putih kosong itu adalah "kertas ajaib" kita.

Menulis Mantra Pembuka

Ketik kode ini persis seperti ini (jangan sampai salah huruf):

<!DOCTYPE html>
<html>
<head>
    <title>Website Pertamaku</title>
</head>
<body>

</body>
</html>

Ini seperti kita menyiapkan kertas, amplop, dan perangko sebelum mengirim surat.

Mengisi Badan (Body)

Di antara <body> dan </body>, mari kita tulis sesuatu:

<body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah website pertama saya. Saya hebat!</p>
</body>

Menyimpan dengan Benar

Klik File > Save As
Beri nama: index.html (Wajib ada .html di belakangnya!)
Simpan di Desktop agar mudah dicari

Membuka Hasilnya

Pergi ke Desktop, cari file index.html tadi
Klik dua kali
Tadaaa! Akan terbuka di Google Chrome. Itu adalah karyamu! 🎉

⚠️ Penting: File harus bernama index.html (huruf kecil semua). Kalau tidak, komputer tidak akan tahu itu website!

5. 📝 Penilaian (Cek Kemampuan)

✅ Keberanian: Apakah siswa berani mengetik kode sendiri? (Tidak copy-paste teman)
✅ Ketelitian: Apakah tag pembuka < > dan penutup </ > sudah pasang-pasangan?
✅ Kreativitas: Apakah siswa berhasil mengganti tulisan "Halo Dunia" dengan nama mereka sendiri?
✅ File Benar: Apakah file disimpan dengan nama index.html?

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. Jadi harus teliti.

Jangan Takut Salah: Kalau websitenya rusak atau putih kosong, itu wajar. Cek lagi tag-nya, apakah sudah ditutup?

Rayakan Kecil: Saat tulisan pertama muncul di browser, beri tepuk tangan. Itu momen "Aha!" mereka.

7. 🎁 Lembar Contekan Kode

📚 Cheat Sheet HTML Dasar

Struktur Dasar:

<!DOCTYPE html>

                    <html>

                      <head>

                        <title>Judul</title>

                      </head>

                      <body>

                        Konten di sini

                      </body>

                    </html>

Tag Umum:

<h1>Judul Besar</h1>

                    <p>Paragraf teks</p>

                    <img src="foto.jpg">

                    <a href="link.html">Link</a>

Tips Penting:

✓ Tag biasanya berpasangan

                    ✓ Tag tutup ada garis miring /

                    ✓ Simpan dengan .html

                    ✓ Huruf kecil semua!

8. 📊 Progress Belajar

0% - Mulai Petualangan!

🎉 Selamat!

Kamu sudah menjadi Penyihir Kode! 🧙‍♂️

Kamu baru saja membuat sesuatu yang bisa dilihat oleh semua orang di dunia lewat internet.

Lanjutkan belajar, karena masih banyak kode ajaib lainnya yang menunggu!

Siap lanjut ke Modul 2 (CSS)? 🎨