Sebelum Ngoding, Pahami Dulu "Panggung"-nya

Di modul sebelumnya kamu sudah menyiapkan text editor dan browser. Sekarang, sebelum mulai menulis baris kode HTML pertamamu di modul berikutnya, kita perlu paham dulu satu hal penting: apa yang sebenarnya terjadi saat kamu buka sebuah website? Paham konsep ini bikin kamu nggak cuma "hafal syntax", tapi ngerti alasan di balik setiap kode yang kamu tulis.

Apa yang Terjadi Saat Kamu Buka Website?

Coba bayangkan kamu ketik www.tokopedia.com di browser lalu tekan Enter. Ada beberapa langkah cepat yang terjadi di baliknya:

• Browser (aplikasi seperti Chrome atau Firefox yang kamu pakai untuk membuka website) mengirim permintaan ke sebuah komputer khusus bernama server (komputer yang menyimpan file-file website dan "melayani" permintaan dari browser).
• Server menerima permintaan itu, lalu mengirim balik file-file yang dibutuhkan: biasanya file HTML, CSS, gambar, dan kadang JavaScript.
• Browser menerima file-file tersebut, lalu merender-nya — artinya browser "menerjemahkan" kode itu menjadi tampilan visual yang kamu lihat di layar.

Proses request-response ini terjadi dalam hitungan milidetik, tapi memahami alurnya penting supaya kamu tahu: HTML dan CSS yang kamu tulis nanti bukan "sihir", melainkan file teks biasa yang diterjemahkan browser jadi tampilan.

Tiga Bahasa Utama di Web

Sebuah website modern pada dasarnya dibangun dari tiga bahasa yang punya peran berbeda. Analogi paling gampang: bayangkan sebuah rumah.

• HTML (HyperText Markup Language) adalah kerangka/struktur rumah — menentukan ada berapa ruangan, mana pintu, mana jendela. Di web, HTML menentukan ada judul, paragraf, gambar, tombol, dan seterusnya.
• CSS (Cascading Style Sheets) adalah dekorasi rumah — cat dinding, pilihan furnitur, tata letak. Di web, CSS mengatur warna, ukuran font, jarak antar elemen, sampai posisi tata letak.
• JavaScript adalah bagian yang membuat rumah "hidup" — lampu otomatis nyala saat gelap, pintu otomatis terbuka. Di web, JavaScript membuat halaman jadi interaktif, misalnya tombol yang bisa diklik dan memunculkan pop-up.

Kelas ini fokus ke dua yang pertama: HTML dan CSS. Keduanya cukup untuk membuat halaman web yang punya struktur rapi dan tampilan menarik — cukup untuk landing page yang akan kamu buat di modul terakhir nanti.

HTML vs CSS: Jangan Sampai Ketuker

Pemula sering bingung membedakan tugas HTML dan CSS. Aturan sederhananya:

• HTML menjawab pertanyaan "apa ini?" — ini judul, ini paragraf, ini gambar, ini tombol.
• CSS menjawab pertanyaan "seperti apa tampilannya?" — judulnya warna merah, paragrafnya rata kiri, tombolnya bulat.

Contoh gambarannya (belum perlu kamu pahami syntax-nya, cukup lihat pembagian tugasnya):

<h1>Selamat Datang</h1>   ← ini bagian HTML, isinya konten "apa"

h1 {
  color: blue;             ← ini bagian CSS, mengatur "tampilan"
}

Baris <h1>Selamat Datang</h1> memberi tahu browser "ini adalah judul utama". Baris CSS di bawahnya memberi tahu browser "tolong warnai semua judul utama dengan warna biru". HTML dan CSS bekerja sama, tapi tanggung jawabnya beda.

Mengenal Istilah "Tag" dan "Elemen"

Dua istilah ini akan sering muncul mulai modul berikutnya, jadi kenalan dulu sekarang:

• Tag adalah penanda yang ditulis dengan kurung siku, misalnya <h1> atau </h1>, yang memberi tahu browser jenis konten apa yang mengikutinya.
• Elemen adalah gabungan tag pembuka, isi konten, dan tag penutup secara utuh, misalnya <h1>Selamat Datang</h1> secara keseluruhan disebut satu elemen.

Tenang, kamu belum perlu menghafal tag-tag ini sekarang — itu akan jadi fokus modul 3 dan 4. Yang penting sekarang kamu paham istilahnya dulu.

Kenapa File HTML Bisa Dibuka Tanpa Internet?

Satu hal menarik: karena HTML dan CSS pada dasarnya cuma file teks biasa, kamu bisa membuat dan membuka file HTML di komputer sendiri tanpa koneksi internet sama sekali! Browser tetap bisa membacanya langsung dari penyimpanan komputermu. Internet baru dibutuhkan kalau file-nya disimpan di server dan diakses lewat alamat website (URL) dari komputer lain. Inilah alasan kenapa kelas ini bisa mengajarimu ngoding web dari nol — kamu cukup punya text editor dan browser, tanpa perlu setup server yang rumit dulu.

🧪 Studi Kasus: Uji Pemahamanmu

Sebelum lanjut ke modul berikutnya, coba kerjakan latihan konsep ini (tanpa perlu menulis kode dulu):

1. Tuliskan dengan kata-katamu sendiri: apa perbedaan tugas HTML dan CSS? Gunakan analogi selain "rumah" — misalnya analogi tubuh manusia, baju, atau apa pun yang menurutmu paling gampang kamu ingat.
2. Buka salah satu website favoritmu (misalnya Instagram atau Detik.com). Klik kanan di halaman tersebut lalu pilih "Inspect" atau "Inspect Element". Kamu akan melihat kode HTML asli dari halaman itu di panel yang muncul. Coba temukan minimal 2 tag yang terlihat familiar (petunjuk: cari tulisan di dalam kurung siku seperti <p> atau <img>).
3. Dari hasil inspect tadi, coba tebak: bagian mana yang menurutmu diatur oleh HTML, dan bagian mana yang kelihatannya hasil kerja CSS (misalnya warna atau jarak antar elemen)?

Latihan ini nggak ada jawaban "salah" — tujuannya supaya matamu mulai terbiasa melihat kode di balik website sungguhan sebelum kamu mulai menulisnya sendiri di modul berikutnya.

Saatnya Nulis Kode Pertamamu

Di modul sebelumnya kamu sudah paham gimana browser dan server saling ngobrol, dan kenapa HTML jadi "kerangka" sementara CSS jadi "kostumnya". Sekarang waktunya praktik beneran: bikin file HTML pertamamu dari nol.

1. Bikin File HTML

Buka text editor yang sudah kamu install (VS Code), lalu:

• Buat folder baru, misalnya belajar-html
• Di dalam folder itu, buat file baru dengan nama index.html

Nama index.html bukan sembarangan — ini adalah nama file default yang otomatis dibuka browser/server kalau kamu mengakses sebuah folder, tanpa perlu ketik nama filenya. Makanya halaman utama website hampir selalu bernama index.html.

2. Kerangka Wajib Setiap Halaman HTML

Setiap file HTML punya kerangka dasar yang hampir selalu sama. Ketik (jangan copy-paste, biar tangan kamu hafal) kode berikut ke index.html:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Halaman Pertamaku</title>
</head>
<body>
  <h1>Halo, Dunia!</h1>
  <p>Ini adalah halaman HTML pertama yang aku buat.</p>
</body>
</html>

Mari kita bedah satu-satu:

<!DOCTYPE html>

DOCTYPE adalah baris pertama yang wajib ada di setiap file HTML, fungsinya memberi tahu browser bahwa dokumen ini ditulis pakai HTML versi terbaru (HTML5). Tanpa ini, browser bisa salah menafsirkan kodemu (disebut "quirks mode") dan tampilannya jadi tidak konsisten.

<html>...</html>

Ini adalah tag pembungkus utama yang membungkus seluruh isi halaman — semua elemen HTML lain harus ada di dalam tag ini. Atribut lang="id" memberi tahu browser (dan mesin pencari) bahwa konten halamanmu berbahasa Indonesia.

Perhatikan pola <html> dan </html> — ini disebut tag pembuka dan tag penutup. Hampir semua tag HTML berpasangan begini: tag pembuka menandai mulainya sebuah elemen, tag penutup (ada tanda garis miring /) menandai akhirnya.

<head>...</head>

Bagian head berisi informasi "di belakang layar" tentang halamanmu yang tidak tampil langsung di layar, seperti judul tab browser, deskripsi untuk mesin pencari, atau link ke file CSS (akan kita pakai di modul 7).

Di dalamnya ada dua tag penting:

• <meta charset="UTF-8"> — memberi tahu browser encoding karakter yang dipakai, supaya karakter seperti "é" atau emoji tidak tampil berantakan.
• <title> — teks yang muncul di tab browser, bukan di badan halaman.

Coba perhatikan: <meta charset="UTF-8"> tidak punya tag penutup </meta>. Ini contoh tag mandiri (self-closing tag) — tag yang tidak membungkus konten apa pun, jadi tidak butuh pasangan penutup. Kamu akan ketemu beberapa tag jenis ini lagi nanti, misalnya <img> dan <br>.

<body>...</body>

Ini bagian yang paling penting buat kita: semua yang ada di dalam body adalah konten yang benar-benar tampil di layar — teks, gambar, tombol, semuanya. Kalau head itu "belakang panggung", body adalah "panggung"-nya.

Di contoh kode tadi, ada dua tag di dalam body:

• <h1> — heading atau judul utama halaman (akan dibahas lebih detail di modul 4)
• <p> — paragraf teks biasa

3. Buka Hasilnya di Browser

Sekarang buka file index.html di browser. Ada dua cara:

• Cara manual: cari file index.html di File Explorer/Finder, lalu double-click atau drag ke jendela browser.
• Cara lebih enak: kalau kamu sudah install extension Live Server di VS Code (dibahas di modul 1), klik kanan pada file index.html di VS Code, pilih "Open with Live Server". Browser akan otomatis terbuka dan halaman akan auto-refresh setiap kali kamu menyimpan perubahan — jauh lebih efisien untuk latihan ke depan.

Kalau berhasil, kamu akan lihat tulisan "Halo, Dunia!" besar di atas, dan paragraf di bawahnya. Judul tab browser juga akan bertuliskan "Halaman Pertamaku".

4. Elemen Bersarang (Nested Element)

Perhatikan lagi kode di atas: tag <title> ada di dalam tag <head>, dan <head> ada di dalam <html>. Ini disebut nesting — elemen di dalam elemen lain, seperti boneka Matryoshka.

Aturan pentingnya: kalau kamu membuka tag di dalam tag lain, kamu harus menutupnya sebelum menutup tag luarnya. Ini benar:

<p>Ini <strong>tebal</strong> ya</p>

Ini salah (urutan tutup tertukar):

<p>Ini <strong>tebal</p></strong>

Browser kadang masih bisa "menebak" dan tetap menampilkan versi yang salah, tapi jangan andalkan itu — kebiasaan menulis tag rapi akan sangat membantu ketika halamanmu makin kompleks nanti.

5. Indentasi Itu Bukan Formalitas

Kamu lihat di contoh kode, ada spasi/tab di depan tag yang ada di dalam tag lain (indentasi). Browser sebenarnya tidak peduli soal ini — halaman tetap tampil sama walau kodenya berantakan. Tapi indentasi bikin kode gampang dibaca manusia, terutama kamu sendiri tiga bulan dari sekarang. Biasakan setiap kali nesting satu level, tambah indentasi 2 spasi.

Latihan: Bikin Halaman "Tentang Aku"

Sekarang coba sendiri tanpa mencontek kode di atas. Buat file baru bernama tentang.html, lalu:

• Buat kerangka HTML lengkap (DOCTYPE, html, head, body)
• Isi <title> dengan "Tentang [Namamu]"
• Di dalam <body>, buat satu <h1> berisi namamu
• Tambahkan dua <p>: satu berisi cerita singkat tentang dirimu, satu lagi berisi alasan kamu belajar web development
• Di salah satu paragraf, coba selipkan tag <strong> untuk menebalkan satu kata atau frasa (misalnya nama kotamu)

Setelah selesai, buka pakai Live Server dan cek: apakah judul tab sudah sesuai? Apakah kata yang kamu bungkus <strong> tampil tebal? Kalau ada yang tidak muncul seperti harapan, cek lagi apakah semua tag sudah tertutup dengan benar — ini kesalahan paling umum buat pemula.

Sebelum Mulai

Di modul sebelumnya kamu sudah bikin file HTML pertama dengan struktur dasar <!DOCTYPE html>, <html>, <head>, dan <body>. Sekarang saatnya isi bagian <body> itu dengan konten beneran: judul, paragraf, dan teks yang diformat. Ini "kosakata" paling sering kamu pakai sehari-hari sebagai web developer.

1. Heading: Judul dan Sub-Judul

Heading adalah tag untuk menandai judul atau sub-judul pada halaman, levelnya dari <h1> (paling penting/besar) sampai <h6> (paling kecil).

<h1>Judul Utama Halaman</h1>
<h2>Sub Judul</h2>
<h3>Sub dari Sub Judul</h3>

Beberapa aturan tak tertulis yang penting kamu pegang:

• Hanya pakai satu <h1> per halaman — biasanya untuk judul utama, mirip judul buku.
• Jangan pilih heading berdasarkan ukuran tampilannya yang kamu suka, tapi berdasarkan hierarki makna. Kalau mau teks besar tapi bukan judul, nanti itu urusan CSS, bukan heading.
• Urutannya sebaiknya berjenjang: h1 → h2 → h3, jangan loncat dari h1 langsung ke h4.

Kenapa peduli soal hierarki? Karena screen reader (alat bantu baca untuk penyandang tunanetra) dan mesin pencari Google membaca struktur heading untuk memahami "peta" halamanmu, bukan cuma tampilan visualnya.

2. Paragraf: Tag Paling Sering Dipakai

Paragraf ditandai dengan tag <p>, dipakai untuk teks bacaan biasa.

<p>Ini adalah paragraf pertama yang menjelaskan sesuatu.</p>
<p>Ini paragraf kedua, terpisah dari paragraf pertama.</p>

Perhatikan: browser otomatis kasih jarak antar paragraf. Kamu tidak perlu menekan Enter berkali-kali di kode untuk bikin jarak—itu tidak akan berpengaruh ke tampilan. Spasi dan baris baru berlebih di dalam HTML akan "diringkas" jadi satu spasi saja oleh browser.

3. Line Break: Ganti Baris Tanpa Paragraf Baru

Kalau kamu cuma mau pindah baris tanpa bikin paragraf baru (misalnya untuk alamat atau puisi), pakai <br> — line break, tag kosong yang tidak butuh penutup.

<p>
  Jl. Merdeka No. 10<br>
  Jakarta Pusat<br>
  Indonesia
</p>

Jangan jadikan <br> sebagai pengganti <p> untuk memisahkan paragraf. Itu penyalahgunaan tag—makna semantiknya beda meskipun secara visual mirip.

4. Format Teks: Tebal, Miring, dan Lainnya

Beberapa tag untuk menekankan bagian teks tertentu:

• <strong> — menandai teks yang penting/sangat ditekankan (biasanya tampil tebal).
• <em> — menandai teks yang ditekankan secara intonasi (biasanya tampil miring, singkatan dari "emphasis").
• <small> — teks berukuran lebih kecil, biasanya untuk keterangan tambahan.
• <mark> — menandai teks seperti di-highlight/stabilo.

<p>Diskon <strong>50%</strong> hanya hari ini!</p>
<p>Saya <em>sangat</em> menyukai kelas ini.</p>
<p><small>*Syarat dan ketentuan berlaku</small></p>
<p>Kode promo: <mark>BELAJAR20</mark></p>

Ada juga <b> dan <i> yang tampilannya sama seperti <strong> dan <em>, tapi tidak membawa makna "penting" atau "penekanan"—murni gaya visual. Untuk pemula, lebih baik biasakan pakai <strong>/<em> karena maknanya lebih jelas.

5. Komentar HTML

Komentar adalah catatan di dalam kode yang tidak ditampilkan browser, berguna untuk kasih catatan ke diri sendiri atau tim.

<!-- Ini komentar, tidak akan muncul di halaman -->
<p>Teks ini yang akan tampil.</p>

6. Contoh Gabungan

Begini contoh kalau semua tag di atas digabung dalam satu halaman kecil:

<body>
  <h1>Kopi Nusantara</h1>
  <h2>Tentang Kami</h2>
  <p>
    Kami adalah <strong>produsen kopi lokal</strong> yang berdiri sejak 2015.
    Biji kopi kami berasal dari <em>petani langsung</em> di berbagai daerah.
  </p>
  <h2>Alamat Toko</h2>
  <p>
    Jl. Kopi Manis No. 5<br>
    Bandung, Jawa Barat
  </p>
  <p><small>Buka setiap hari 08.00 - 20.00</small></p>
</body>

Latihan: Coba Sendiri

Buka file HTML dari modul sebelumnya (atau buat file baru latihan-modul4.html dengan struktur dasar HTML lengkap), lalu kerjakan ini di dalam <body>:

• Buat 1 <h1> berisi judul halaman tentang hobi/topik favoritmu.
• Buat 2 <h2> sebagai sub-judul (misalnya "Kenapa Saya Suka Ini" dan "Rekomendasi untuk Pemula").
• Di bawah tiap <h2>, tulis minimal 1 <p> berisi 2-3 kalimat.
• Di salah satu paragraf, tandai satu kata dengan <strong> dan satu frasa dengan <em>.
• Tambahkan paragraf berisi alamat atau kutipan singkat dengan minimal 2 baris memakai <br>.
• Simpan, lalu buka file-nya di browser (drag file ke browser atau pakai Live Server dari editor). Pastikan tampilannya sesuai yang kamu bayangkan.

Kalau sudah selesai, coba tantangan tambahan: sisipkan satu <!-- komentar --> di kode untuk menandai bagian mana yang paling ingin kamu perbaiki nanti. Simpan file ini karena akan kita kembangkan lagi di modul selanjutnya.

Sebelum Mulai

Di modul sebelumnya kamu sudah paham tag-tag teks dasar seperti <h1>-<h6>, <p>, <strong>, dan <em>. Sekarang kita naik level: membuat daftar (list), tautan (link) yang bisa diklik, dan menyisipkan gambar. Tiga hal ini yang bikin halaman HTML mulai terasa seperti "website sungguhan", bukan cuma tumpukan teks.

1. Membuat Daftar dengan <ul> dan <ol>

List adalah cara menampilkan sekumpulan item secara berurutan atau tidak berurutan. Ada dua jenis utama:

• <ul> (unordered list) — daftar tanpa urutan, tampil dengan bullet point.
• <ol> (ordered list) — daftar berurutan, tampil dengan angka.

Di dalam keduanya, tiap item ditulis dengan tag <li> (list item) — tag untuk membungkus satu item dalam daftar.

<h4>Bahan Membuat Kopi</h4>
<ul>
  <li>Kopi bubuk</li>
  <li>Air panas</li>
  <li>Gula (opsional)</li>
</ul>

<h4>Langkah Membuat Kopi</h4>
<ol>
  <li>Panaskan air</li>
  <li>Masukkan kopi bubuk ke gelas</li>
  <li>Tuang air panas</li>
</ol>

Perhatikan: <ul> menghasilkan bullet (•), sedangkan <ol> otomatis menghasilkan angka 1, 2, 3 tanpa kamu ketik manual. Kamu juga bisa membuat list bersarang (nested) dengan meletakkan <ul> baru di dalam sebuah <li>.

2. Membuat Tautan dengan <a>

Tautan (hyperlink) adalah elemen yang menghubungkan satu halaman ke halaman/alamat lain saat diklik, dibuat dengan tag <a> (anchor). Atribut wajibnya adalah href (hypertext reference) — atribut yang menentukan alamat tujuan link tersebut.

<a href="https://www.google.com">Buka Google</a>

Teks "Buka Google" akan tampil sebagai teks yang bisa diklik, dan browser akan membawa pengguna ke alamat di dalam href.

Link ke Halaman Lain di Website Sendiri

href tidak harus berupa alamat internet lengkap. Kalau kamu punya file tentang.html di folder yang sama dengan file yang sedang dibuka, cukup tulis:

<a href="tentang.html">Tentang Kami</a>

Membuka Link di Tab Baru

Tambahkan atribut target="_blank" agar link terbuka di tab baru, tidak menggantikan halaman yang sedang dibuka:

<a href="https://www.google.com" target="_blank">Buka Google (tab baru)</a>

3. Menyisipkan Gambar dengan <img>

Tag <img> dipakai untuk menampilkan gambar di halaman. Ini termasuk void element — tag yang tidak punya penutup dan tidak membungkus konten, karena isinya cukup ditentukan lewat atribut.

<img src="kucing.jpg" alt="Foto kucing oren tidur di sofa">

Dua atribut yang wajib kamu kenal:

• src (source) — lokasi file gambar, bisa berupa file lokal ("gambar/kucing.jpg") atau URL dari internet.
• alt (alternative text) — teks pengganti yang muncul kalau gambar gagal dimuat, sekaligus dibacakan oleh screen reader untuk pengguna tunanetra. Jangan pernah dikosongkan tanpa alasan — ini bukan sekadar formalitas.

<img src="kucing.jpg" alt="Foto kucing oren" width="300" height="200">

<a href="https://www.google.com">
  <img src="logo-google.png" alt="Logo Google">
</a>

<h1>Profil Saya</h1>
<img src="foto-profil.jpg" alt="Foto profil saya sedang senyum" width="150">

<h3>Keahlian</h3>
<ul>
  <li>HTML & CSS</li>
  <li>Menulis konten</li>
</ul>

<h3>Media Sosial</h3>
<p>
  Kunjungi <a href="https://instagram.com" target="_blank">Instagram</a> saya.
</p>