🌐 Phase 1 — HTML
P01 · Pertemuan 1 dari 20
Pengenalan Web & HTML Dasar
Memahami cara kerja web (browser, server, request-response), peran HTML/CSS/JS, dan membangun struktur dokumen HTML pertama.
Tujuan Pembelajaran
- 01Memahami cara kerja web: browser, server, request-response
- 02Mengenal peran HTML, CSS, dan JavaScript
- 03Menulis struktur dokumen HTML: <!DOCTYPE>, <html>, <head>, <body>
- 04Menggunakan tag heading h1–h6, paragraf <p>, dan komentar HTML
- 05Setup tools: VSCode, Firebase Studio, Chrome, Live Server
Sub-topik & Materi
- 01Cara kerja web: browser, server, request-response
- 02Peran HTML (Struktur), CSS (Tampilan), JavaScript (Perilaku)
- 03Struktur dokumen HTML: DOCTYPE, html, head, body
- 04Tag heading h1–h6, paragraf <p>, komentar <!-- -->
- 05Setup VSCode & Firebase Studio
Penjelasan Konsep
Konsep 1
Bagaimana Web Bekerja?
Saat kamu mengetik "google.com" di browser, browser mengirim permintaan (request) ke server Google. Server membalas dengan file HTML, CSS, dan JS. Browser kemudian membaca file-file itu dan menampilkannya sebagai halaman web yang bisa kamu lihat. Proses ini disebut request-response cycle.
Konsep 2
Peran HTML, CSS, dan JavaScript
Bayangkan sebuah rumah: HTML adalah struktur bangunannya (dinding, lantai, atap). CSS adalah dekorasi dan cat-nya (warna, ukuran, posisi). JavaScript adalah sistem listrik dan otomasi-nya (tombol yang berfungsi, animasi, interaksi). Ketiganya bekerja bersama untuk membuat website yang lengkap.
Konsep 3
Struktur Dokumen HTML
<!DOCTYPE html> memberi tahu browser bahwa ini adalah dokumen HTML5. Tag <html> adalah pembungkus seluruh halaman. Di dalam <head> kita taruh informasi tentang halaman (judul, charset, meta) yang TIDAK tampil di layar. Di dalam <body> kita taruh semua konten yang TAMPIL di layar.
html
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Judul Tab Browser</title> </head> <body> <!-- Konten tampil di sini --> </body> </html>
Konsep 4
Heading h1–h6 dan Paragraf
Heading digunakan untuk judul dan subjudul. h1 adalah yang terpenting (paling besar), h6 paling kecil. Dalam satu halaman sebaiknya hanya ada SATU h1. Tag <p> untuk paragraf teks biasa. Browser secara otomatis memberi jarak antar paragraf.
html
<h1>Judul Utama (paling besar)</h1> <h2>Subjudul</h2> <h3>Sub-subjudul</h3> <p>Ini adalah paragraf. Browser akan memberi jarak otomatis.</p> <!-- Ini komentar, tidak tampil di browser -->
Konsep 5
Setup VSCode & Live Server
VSCode adalah text editor gratis dari Microsoft. Install ekstensi "Live Server" (by Ritwick Dey) agar browser otomatis refresh setiap kali kamu save file. Caranya: klik kanan pada file index.html → "Open with Live Server". Kamu juga bisa pakai Firebase Studio (code.firebase.google.com) langsung di browser tanpa install apapun.
Contoh Kode Lengkap
html
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Halaman Pertamaku</title> </head> <body> <h1>Nama Saya</h1> <h2>Asal: Kediri</h2> <p>Paragraf pertama saya di HTML.</p> <!-- Komentar: tidak tampil di browser --> </body> </html>
Latihan Kelas · Buat halaman HTML pertama dari nol dan tampilkan di browser
1
Buka VSCode atau Firebase Studio
2
Buat folder project pertama dan file index.html
3
Ketik struktur HTML lengkap dari nol (tanpa copy-paste)
4
Tambahkan nama, kota asal, dan 3 kalimat tentang diri sendiri
5
Jalankan dengan Live Server dan lihat hasilnya di browser
Kesalahan yang Sering Dibuat
Lupa menulis <!DOCTYPE html> di baris pertama — menyebabkan browser masuk "quirks mode"
Tidak menutup tag — setiap <tag> harus ditutup dengan </tag> (kecuali void element seperti <br>, <img>)
Menyimpan file dengan ekstensi .txt bukan .html — browser tidak akan membacanya sebagai HTML
Menulis konten di dalam <head> — konten hanya boleh di <body>
Langsung copy-paste tanpa memahami — ketik ulang kode agar otak merekam pola