Heading, Paragraf, Link, dan Gambar
Belajar memakai elemen konten dasar yang biasanya terlihat di dalam body halaman HTML.
Tujuan belajar
- Memahami fungsi heading dan paragraf sebagai struktur konten
- Memakai link dengan href dan gambar dengan src serta alt
- Membuat halaman konten sederhana dan melihat hasilnya di preview
Isi lesson
8 blok- 1.Mulai mengisi body halamanBelum selesaiWajib
- 2.Konten yang sering terlihat di halamanBelum selesaiWajib
- 3.Contoh konten halaman sederhanaBelum selesaiWajib
- 4.Cara membaca kode iniBelum selesaiWajib
- 5.Jangan memilih heading hanya karena ingin teks besarBelum selesaiWajib
- 6.Cek pemahamanBelum selesaiWajib
- 7.Coding practiceBelum selesaiWajib
- 8.RingkasanBelum selesaiWajib
Mulai mengisi body halaman
WajibDi lesson sebelumnya, kamu sudah mengenal tag, element, dan attribute. Sekarang kamu memakai beberapa element yang paling sering muncul di dalam body: heading, paragraf, link, dan gambar. Kamu belum perlu menghafal banyak tag. Fokus dulu pada fungsi setiap element dan kapan dipakai.
Bagian ini memengaruhi progres lesson.
Konten yang sering terlihat di halaman
Wajibh1 dipakai untuk heading utama halaman atau bagian besar. h2 dan h3 dipakai untuk heading tingkat berikutnya ketika konten punya subbagian. p dipakai untuk paragraf teks biasa. a dipakai untuk membuat link, dan attribute href memberi tahu tujuan link. img dipakai untuk menampilkan gambar; attribute src memberi tahu lokasi gambar, sedangkan alt berisi deskripsi singkat ketika gambar tidak bisa dilihat atau gagal dimuat.
Bagian ini memengaruhi progres lesson.
Contoh konten halaman sederhana
Wajib<body>
<h1>Catatan Belajar HTML</h1>
<p>Saya sedang belajar membuat struktur konten halaman.</p>
<a href="/roadmap">Lihat roadmap belajar</a>
<img src="images/html-card.png" alt="Kartu belajar HTML" />
</body>Contoh ini berisi konten yang terlihat di halaman. h1 menjadi heading utama, p menjadi teks biasa, a menjadi link, dan img menampilkan gambar dengan deskripsi alt.
Bagian ini memengaruhi progres lesson.
Cara membaca kode ini
WajibBaca dari tujuan kontennya. Teks paling penting menjadi h1. Penjelasan normal menjadi p. Teks yang membawa pengguna ke halaman lain menjadi a dengan href. Gambar memakai img dengan src untuk lokasi file dan alt untuk deskripsi. Semua contoh ini biasanya ditulis di dalam body karena ingin terlihat di halaman.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
WajibJangan memilih heading hanya karena ingin teks besar
Heading menjelaskan struktur konten, bukan sekadar ukuran teks. Kalau teks hanya perlu terlihat besar, nanti CSS yang mengatur tampilannya. Kesalahan lain yang sering terjadi adalah menulis img tanpa alt, padahal alt membantu menjelaskan gambar saat gambar tidak terlihat atau gagal dimuat.
Bagian ini memengaruhi progres lesson.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Attribute mana yang menjelaskan gambar ketika gambar tidak bisa dilihat atau gagal dimuat?
Progres lesson naik setelah jawaban benar.
Coding practice
WajibDibuka di workspace khususMembuat konten halaman sederhana
Latihan membuat heading, paragraf, link, dan gambar di dalam body.
Tujuan awal: Fokus pada konten HTML yang terlihat di body.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Gunakan h1 untuk heading utama, lalu h2 atau h3 untuk subbagian jika diperlukan.
- Gunakan p untuk paragraf teks biasa.
- Gunakan a dengan href untuk membuat link.
- Gunakan img dengan src dan alt untuk gambar yang bisa dipahami lebih jelas.
- Berikutnya, kamu akan melihat cara href dan src menunjuk ke file lain dengan relative path sederhana.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Mulai mengisi body halaman.