Build the Structure

Setelah lesson ini, kamu dapat membangun dua dokumen yang lengkap, semantik, dan saling terhubung.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Rencana sudah ada. Sekarang ubah setiap bagian menjadi HTML, mulai dari kerangka yang sama lalu beri isi yang berbeda pada tiap halaman.

Membangun dua dokumen yang lengkap, semantik, dan saling terhubung.

PAHAMI KONSEPNYA

Bangun dari luar ke dalam

Tulis doctype, html lang, head, dan body. Lengkapi title, charset, dan viewport. Di body tambahkan header/nav, satu main, dan footer. Setelah kerangka selesai, baru isi main dengan heading dan paragraf.

Navigasi konsisten, konten berbeda

Beranda dan halaman tentang dapat berbagi menu yang sama. Namun title dan h1 sebaiknya menjelaskan halaman masing-masing. Pengunjung perlu mengetahui posisi mereka tanpa menebak dari URL.

Selesaikan satu bagian setiap kali

Buat beranda dahulu, lalu halaman tentang. Tambahkan setidaknya satu daftar yang masuk akal. Pilih tab berkas untuk melihat masing-masing halaman. Jangan menunggu semua kode selesai untuk mengamati preview.

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>Beranda — Klub Langit</title>
</head>
<body>
<header><nav><a href="index.html">Beranda</a> <a href="about.html">Tentang klub</a></nav></header>
<main>
  <h1>Klub Langit</h1>
  <p>Belajar membaca langit bersama.</p>
  <h2>Kegiatan</h2>
  <ul><li>Mencatat fase Bulan</li><li>Mengenal rasi bintang</li></ul>
</main>
<footer><p>Proyek belajar HTML.</p></footer>
</body>
</html>

HASIL DI BROWSER

Pola beranda lengkap. Halaman tentang memerlukan dokumen sendiri dengan title, h1, dan isi yang sesuai.

KESALAHAN YANG SERING TERJADI

<!-- Dua berkas berbeda, tetapi keduanya masih bernama: -->
<title>Untitled</title>

Nama tab generik menyulitkan navigasi. Berikan judul yang berbeda sesuai peran setiap halaman.

COBA BERSAMA

Praktik memperjelas pemahaman.

Lengkapi tujuan tautan pulang dari about.html.

<a href="">Kembali ke beranda</a>

Lihat petunjuk

Nama halaman utama adalah index.html.

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

TULIS · LIHAT · PAHAMI

Bangun pondasi dua halaman

Lengkapi dua dokumen: keduanya memerlukan metadata lengkap, header/nav, main dengan satu h1 dan paragraf, serta footer. Hubungkan dua arah dan tambahkan setidaknya satu daftar pada beranda.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Beranda — Taman Cerita</title>
</head>
<body>
<!-- Bangun header, main, dan footer -->
</body>
</html>

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

Bangun kerangka dahulu, lalu isi.
Metadata dan judul harus sesuai masing-masing halaman.
Navigasi konsisten membantu pembaca menemukan jalan pulang.

Struktur dokumenStruktur semantikTautan

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

Hubungkan dengan konsep lain

Landmark °Heading °Relative path °

Library: Membaca alamat web tanpa tersesat ↗Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →