Edit, Preview, Repeat

Setelah lesson ini, kamu dapat mengubah dokumen HTML dan membedakan hasil edit di body dari metadata di head.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Kamu baru mengubah kode, tetapi tampilan belum berubah. Apakah salah menulis, belum menyimpan, atau sedang melihat berkas yang lain? Kita bangun kebiasaan kecil yang membantu sepanjang course.

Mengubah dokumen HTML dan membedakan hasil edit di body dari metadata di head.

PAHAMI KONSEPNYA

Siklus edit → simpan → lihat

Di komputer sendiri, simpan kode sebagai index.html, lalu buka berkas itu di browser. Setelah mengedit, simpan lagi dan muat ulang tab. Pastikan namanya bukan index.html.txt. Index.html lazim dipakai sebagai nama halaman utama sebuah folder pada server web.

Di ruang latihan Lucia

Ketik pada editor. Preview diperbarui otomatis setelah jeda singkat; tombol Jalankan preview memperbaruinya segera. Tombol Periksa tugas mengecek tujuan latihan dan memberi petunjuk. Kode serta posisi belajar disimpan di browser ini bila penyimpanan tersedia.

Ubah satu hal, amati hasilnya

Cobalah mengganti teks h1 dahulu, lalu satu paragraf. Kalau hasil tidak sesuai, cari bagian yang baru kamu ubah. Preview yang terlihat normal belum menjamin markup benar: browser cukup pandai memulihkan kesalahan.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Log Eksplorasi</title>
</head>
<body>
  <h1>Eksplorasi hari kedua</h1>
  <p>Aku menemukan pola baru di langit.</p>
  <p>Besok aku ingin mengamati lagi.</p>
</body>
</html>

HASIL DI BROWSER

Ganti satu kalimat pada body dan amati hasilnya. Mengubah title memengaruhi judul dokumen, bukan teks h1.

KESALAHAN YANG SERING TERJADI

<title>Eksplorasi hari kedua</title>
<body><h1>Judul lama</h1></body>

Mengubah title saja tidak mengganti h1. Cari elemen yang benar-benar menghasilkan teks yang ingin kamu ubah.

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Saat mengedit berkas lokal, perubahan belum muncul di tab browser. Langkah pertama yang masuk akal?

Hapus semua kodeSimpan berkas lalu muat ulang tab berkas yang samaTambahkan CSS

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

TULIS · LIHAT · PAHAMI

Catatan yang terus tumbuh

Ubah title menjadi “Jurnal Hari Kedua”, ubah h1 menjadi “Tunas Pertama”, dan tambahkan paragraf kedua berisi rencana merawat tanaman. Jalankan preview untuk melihat hasilnya.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jurnal Hari Pertama</title>
</head>
<body>
  <h1>Menanam Benih</h1>
  <p>Aku menyiapkan pot kecil.</p>
</body>
</html>

index.htmlHTMLLn 1, Col 112 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.

Berkas HTML lokal mengikuti siklus edit, simpan, lalu muat ulang.
Di Lucia, preview berjalan otomatis dan bisa dijalankan ulang.
Perubahan title dan body memiliki hasil berbeda.

DebuggingMetadata

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

Hubungkan dengan konsep lain

Browser °HTML °Title °

Library: Apa yang terjadi saat kamu membuka sebuah website? ↗

Hadapi Chapter Trial →