Your First HTML Document

Setelah lesson ini, kamu dapat menulis kerangka dokumen HTML dengan doctype, html, head, dan body pada tempatnya.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Dua baris HTML bisa tampil di preview. Namun sebuah berkas halaman juga perlu “sampul”: informasi tentang bahasa, nama halaman, dan cara browser membacanya.

Menulis kerangka dokumen HTML dengan doctype, html, head, dan body pada tempatnya.

PAHAMI KONSEPNYA

Satu dokumen, dua ruang

Elemen html membungkus dokumen. Di dalamnya ada head untuk informasi tentang halaman, kemudian body untuk isi halaman. Bayangkan head sebagai label sebuah buku, sedangkan body adalah halaman yang dibaca.

Mulai dengan doctype dan bahasa

<!DOCTYPE html> adalah deklarasi agar browser memakai mode standar modern, bukan sebuah elemen pembungkus. Atribut lang="id" pada html menyatakan bahwa bahasa utama dokumen adalah Bahasa Indonesia. Informasi ini membantu alat penerjemah dan pembaca layar.

Tulis kerangka dengan jelas

Browser bisa menambahkan beberapa elemen yang terlewat saat membaca HTML. Untuk membangun kebiasaan yang jelas, tulis sendiri tag html, head, dan body beserta penutupnya di latihan ini. Masukkan judul halaman ke title dan konten yang terlihat ke body.

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>Catatan Langit</title>
</head>
<body>
  <h1>Halo, langit!</h1>
  <p>Ini halaman HTML pertamaku.</p>
</body>
</html>

HASIL DI BROWSER

Baca dari luar ke dalam: html → head dan body. Metadata di head dibahas pada lesson berikutnya.

KESALAHAN YANG SERING TERJADI

<head>
  <h1>Selamat datang</h1>
</head>

h1 adalah isi halaman, sehingga tempatnya di body. Head menyimpan metadata seperti title, bukan konten utama yang dibaca pengunjung.

COBA BERSAMA

Praktik memperjelas pemahaman.

Isi nama elemen yang membungkus konten terlihat.

<>
  <h1>Halo!</h1>
</body>

Lihat petunjuk

Jawab nama tag saja, tanpa tanda kurung sudut.

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

TULIS · LIHAT · PAHAMI

Susun halaman perpustakaan

Susun ulang potongan ini menjadi dokumen lengkap berbahasa Indonesia. Pertahankan metadata, judul tab “Perpustakaan Mini”, h1, dan paragraf; tempatkan masing-masing di ruang yang sesuai.

<h1>Perpustakaan Mini</h1>
<title>Perpustakaan Mini</title>
<p>Satu buku, satu penemuan.</p>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

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

Doctype mengaktifkan mode standar.
Html membungkus head dan body; lang menyatakan bahasa utama.
Head untuk metadata, body untuk konten halaman.

Struktur dokumen

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

Hubungkan dengan konsep lain

HTML °Head °HTML element °HTML attribute °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →