Add Media & Forms

Setelah lesson ini, kamu dapat melengkapi halaman dengan gambar informatif dan form demonstrasi berlabel tanpa menjanjikan pengiriman.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Situs mulai punya bentuk. Sebelum menambahkan fitur, tanyakan: apa yang dibantu oleh gambar ini, dan apa yang diharapkan orang ketika melihat form ini?

Melengkapi halaman dengan gambar informatif dan form demonstrasi berlabel tanpa menjanjikan pengiriman.

PAHAMI KONSEPNYA

Gambar harus punya alasan

Pilih ilustrasi yang mendukung isi. Tulis alt yang menjelaskan informasi relevan, serta dimensi yang sesuai. Figcaption boleh menambahkan konteks. Jika memakai diagram observatorium untuk komunitas rekaan, jelaskan bahwa itu ilustrasi contoh.

Form demo harus jujur

Sediakan label untuk setiap kontrol, tipe email yang sesuai, dan aturan isian yang mudah dipahami. Nyatakan secara terlihat bahwa data tidak dikirim. Tombol type button tidak mengirim form; jangan tampilkan pesan sukses pengiriman tanpa proses yang benar-benar ada.

Pertahankan inti HTML

Proyek ini tidak mewajibkan CSS, JavaScript, atau server. Ukur kemajuan dari kejelasan konten dan struktur. Data tabel juga tidak harus ditambahkan jika tema websitemu tidak membutuhkannya.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<figure>
  <img src="assets/observatory.svg" alt="Teleskop mengarah ke Bulan" width="640" height="360">
  <figcaption>Ilustrasi untuk proyek komunitas rekaan.</figcaption>
</figure>
<form>
  <label for="email">Email (wajib)</label><input id="email" name="email" type="email" required>
  <label for="pesan">Pesan (minimal 10 karakter)</label><textarea id="pesan" name="pesan" required minlength="10"></textarea>
  <p>Demo: data tidak dikirim.</p>
  <button type="button">Contoh tombol</button>
</form>

HASIL DI BROWSER

Gambar mempunyai alternatif, form mempunyai label dan batas isian, serta status demo dinyatakan langsung pada halaman.

KESALAHAN YANG SERING TERJADI

<button type="button">Kirim sekarang — pasti terkirim!</button>

Tombol biasa ini tidak melakukan pengiriman. Ubah copy menjadi penjelasan demonstrasi, tanpa janji yang tidak tersedia.

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Apa yang harus dikatakan form tanpa backend?

Pesan berhasil terkirimForm demonstrasi; data tidak dikirimAkun akan dibuat otomatis

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

TULIS · LIHAT · PAHAMI

Tambahkan konteks dan ruang masukan

Di dalam main, tambahkan figure dengan gambar contoh dan caption. Tambahkan form berisi email wajib, textarea pesan wajib minimal 10 karakter, label lengkap, tombol type button, dan penjelasan bahwa data tidak dikirim.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cerita Klub Langit</title>
</head>
<body>
<main>
  <h1>Tentang Klub Langit</h1>
  <p>Komunitas rekaan untuk belajar HTML.</p>
</main>
</body>
</html>

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

Media mendukung isi, bukan sekadar mengisi ruang.
Label dan aturan membantu orang mengisi form.
Demo tanpa server tidak menjanjikan pengiriman.

Gambar & mediaFormAksesibilitas

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

Hubungkan dengan konsep lain

Teks alternatif °Form label °HTML validation °

Library: Gambar yang jernih, halaman yang ringan ↗

Ke lesson berikutnya →