Validate, Debug & Review

Setelah lesson ini, kamu dapat menemukan kesalahan markup, memperbaiki hubungan penting, dan mencatat hasil review proyek.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

“Terlihat bagus” adalah satu pengamatan, bukan bukti bahwa semuanya sudah benar. Sekarang lihat halaman seperti pembaca yang memakai keyboard, gambar yang gagal dimuat, dan tab yang berjumlah banyak.

Menemukan kesalahan markup, memperbaiki hubungan penting, dan mencatat hasil review proyek.

PAHAMI KONSEPNYA

Bedakan preview dan pemeriksaan

Browser sering memperbaiki markup yang keliru saat membangun halaman. Validator seperti Nu HTML Checker membantu menemukan masalah kesesuaian HTML. Pemeriksa Lucia lebih terbatas: ia memeriksa tujuan latihan, bukan seluruh aturan HTML atau kualitas aksesibilitas.

Baca dan gunakan hasilmu

Periksa title dan lang kedua halaman, tujuan tautan, urutan heading, alt gambar, serta hubungan label. Coba Tab, Shift+Tab, dan Enter pada berkas yang kamu buka lokal. Bacalah teks alternatif sebagai pengganti gambar: apakah informasi pentingnya masih tersampaikan?

Catat perubahan yang nyata

Tuliskan masalah yang ditemukan, perubahan yang dilakukan, dan hal yang masih perlu ditinjau. Pada Final Challenge, penilaian otomatis struktur dipadukan dengan rubrik review mandiri. Hasilnya diberi label self-assessed, bukan sertifikat terverifikasi.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<!-- Catatan review contoh: label email semula menunjuk id yang salah. -->
<label for="email">Email (wajib)</label>
<input id="email" name="email" type="email" required>
<p>Perbaikan: for dan id sekarang sama, sehingga label terhubung.</p>

HASIL DI BROWSER

Catatan menjelaskan temuan dan perubahan spesifik, bukan hanya “semua beres”. Validator membantu struktur; manusia tetap menilai isi dan pengalaman.

KESALAHAN YANG SERING TERJADI

<label for="email">Email</label>
<input id="alamat" type="text">

Ada dua masalah terpisah: label tidak terhubung, dan tipe input belum email. Perbaiki keduanya, bukan sekadar teks yang terlihat.

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Preview terlihat normal, tetapi validator menunjukkan markup tidak sesuai. Apa langkah berikutnya?

Abaikan karena sudah tampilBaca temuan, perbaiki sumber, lalu amati ulangTambahkan warna agar masalah tidak terlihat

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Perbaiki halaman sebelum proyek akhir

Perbaiki kerangka dan metadata, ubah h4 menjadi subjudul yang logis, hubungkan label email dengan input bertipe email yang wajib, dan tambahkan paragraf diawali “Perbaikan:” yang menceritakan minimal satu temuan.

<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
  <h1>Jurnal Belajar</h1>
  <h4>Masukan</h4>
  <form><label for="email">Email</label><input id="alamat" name="email" type="text"></form>
</body>
</html>

index.htmlHTMLLn 1, Col 19 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

Preview, checker, dan review manusia memberi informasi berbeda.
Cari masalah struktur, navigasi, label, dan alternatif media.
Catat perbaikan nyata; penilaian mandiri bukan sertifikasi.

DebuggingAksesibilitas

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

HTML validation °Accessibility °Head °

Library: Tiga bahasa di balik satu halaman ↗

Mulai Final Challenge →