Lewati ke konten
Lucia LADDERHTML Fundamentals Chapter 08Memuat progres belajar…
HTML-08-01 · LESSON 1 / 4 · ± 10 MENIT
Plan Your Website
Setelah lesson ini, kamu dapat membuat rencana isi, pembaca, dan pembagian dua halaman sebelum menulis proyek.
MULAI DARI SEBUAH PERTANYAAN
Pemahaman berawal dari pertanyaan.
Editor kosong sering terasa lebih menakutkan daripada tag yang salah. Kamu dapat menguranginya dengan memutuskan dulu siapa pembacanya dan apa yang mereka cari.
Membuat rencana isi, pembaca, dan pembagian dua halaman sebelum menulis proyek.
PAHAMI KONSEPNYA
Mulai dari kebutuhan pembaca
Pilih tema sederhana: profil minat, klub buku, atau kebun komunitas rekaan. Tulis satu tujuan, misalnya “membantu pengunjung mengenal kegiatan klub”. Tentukan siapa yang membaca dan informasi apa yang perlu mereka temukan dalam satu kunjungan.
Bagi isi menjadi dua halaman
Index.html menjadi beranda yang menjawab “apa ini?”. About.html menjelaskan cerita, minat, atau kegiatan lebih jauh. Setiap halaman membutuhkan title yang berbeda serta navigasi pulang-pergi. Simpan ilustrasi contoh di assets/observatory.svg atau gunakan gambar milikmu yang sesuai izin.
Wireframe cukup berupa kata
Tulis urutan header → nav → main → footer, lalu heading dan isi tiap bagian. Daftarkan gambar dan form demo yang diperlukan. Tabel hanya ditambahkan jika datanya memang tabular; tidak perlu memaksakan seluruh elemen HTML ke proyek.
CONTOH / KONTEKS
Contoh memperjelas konsep.
CONTOH HTML
<h1>Rencana: Klub Pengamat Langit</h1>
<p>Tujuan: membantu pemula mengenal kegiatan mengamati langit.</p>
<p>Pembaca: teman yang baru tertarik astronomi.</p>
<h2>index.html</h2>
<ul><li>Pengantar klub</li><li>Daftar kegiatan</li><li>Link Tentang</li></ul>
<h2>about.html</h2>
<ul><li>Cerita klub</li><li>Ilustrasi observatorium</li><li>Form saran demonstrasi</li></ul>HASIL DI BROWSER
Ini dokumen rencana, bukan hasil akhir. Struktur sederhana membantu mengetahui konten apa yang perlu ditulis.
COBA BERSAMA
Praktik memperjelas pemahaman.
Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.
TULIS · LIHAT · PAHAMI
Tulis peta websitemu
Buat dokumen rencana dalam HTML: h1 berisi tema, dua paragraf yang menyebut “Tujuan:” dan “Pembaca:”, h2 untuk index.html dan about.html, lalu satu ul berisi minimal dua ide konten untuk masing-masing halaman.
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.
Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.
PETUNJUK BERTAHAP
- Rencana boleh berupa teks sederhana yang diberi markup.
- Pilih konten yang realistis: pengantar, minat, kegiatan, gambar, dan form demo.
BAWA PEMAHAMAN INI BERSAMAMU
Praktik memberi dasar.
- Tentukan pembaca dan tujuan dahulu.
- Bagi isi menjadi dua halaman dengan tugas berbeda.
- Pilih elemen berdasarkan konten; tidak semua elemen harus dipakai.
Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.