Beginner · Level 2: HTML and Accessibility FoundationsBeginner40 menitBahasa Indonesia

Struktur HTML Dasar

Belajar membaca dan menulis kerangka pertama dokumen HTML sebelum masuk ke tag, element, dan attribute.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Mengenali bagian utama dokumen HTML: doctype, html, head, title, dan body
Menaruh heading dan paragraf di tempat yang terlihat pada halaman
Menulis halaman HTML sederhana dan mengeceknya dengan preview serta cek otomatis

HTMLWeb Fundamentals

Isi lesson

8 blok

1.
Mulai dari kerangka halamanBelum selesaiWajib
2.
Bagian utama dokumen HTMLBelum selesaiWajib
3.
Contoh halaman HTML paling sederhanaBelum selesaiWajib
4.
Cara membaca contoh iniBelum selesaiWajib
5.
Title bukan heading halamanBelum selesaiWajib
6.
Cek pemahamanBelum selesaiWajib
7.
Coding practiceBelum selesaiWajib
8.
RingkasanBelum selesaiWajib

Mulai dari kerangka halaman

Wajib

Di Web Foundations, kamu sudah tahu bahwa HTML dipakai untuk menyusun struktur halaman. Sekarang kamu mulai menulis dokumen HTML pertama. Kamu belum perlu menghafal semua tag. Fokus dulu pada bagian besar dokumen: informasi untuk browser dan konten yang terlihat di halaman.

Bagian ini memengaruhi progres lesson.

Bagian utama dokumen HTML

Wajib

doctype memberi tahu browser bahwa dokumen ini memakai HTML modern. Elemen html membungkus seluruh halaman. Di dalamnya ada head dan body. Head menyimpan informasi untuk browser, seperti title. Title muncul di tab browser. Body berisi konten yang terlihat di halaman, seperti h1 untuk heading utama dan p untuk paragraf.

Bagian ini memengaruhi progres lesson.

Contoh halaman HTML paling sederhana

Wajib

html

<!doctype html>
<html lang="id">
  <head>
    <title>Catatan Belajar</title>
  </head>
  <body>
    <h1>Belajar HTML</h1>
    <p>Ini halaman HTML pertama saya.</p>
  </body>
</html>

Contoh ini sengaja kecil. Tujuannya bukan menghafal semua kode, tetapi melihat bahwa informasi halaman berada di head, sedangkan konten yang terlihat berada di body.

Bagian ini memengaruhi progres lesson.

Cara membaca contoh ini

Wajib

Baca dari luar ke dalam. Baris doctype memberi konteks untuk browser. Elemen html membungkus dokumen. Bagian head berisi title untuk tab browser. Bagian body berisi h1 dan p, sehingga dua teks itulah yang akan kamu lihat di preview. Kalau kamu ingin menampilkan sesuatu di halaman, tempat utamanya adalah body.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Title bukan heading halaman

Kesalahan awal yang sering terjadi adalah menaruh teks yang ingin terlihat di head, atau mengira title sama dengan h1. Title membantu memberi nama halaman di tab browser. H1 adalah heading utama yang terlihat di dalam halaman, jadi h1 ditulis di body.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Saat kamu ingin h1 dan paragraf terlihat di preview, bagian mana yang harus kamu isi?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Membuat halaman HTML pertama

Latihan menulis kerangka HTML dasar dan melihat konten body di preview.

Tujuan awal: Fokus pada struktur HTML dulu. Ini bukan latihan desain.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

7 cek otomatis8 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

Gunakan doctype untuk memberi tahu browser bahwa dokumen memakai HTML modern.
Gunakan head untuk informasi halaman, seperti title untuk tab browser.
Gunakan body untuk konten yang terlihat di preview.
Gunakan h1 untuk heading utama dan p untuk paragraf.
Berikutnya, kamu akan membedakan tag, element, dan attribute agar lebih mudah membaca dan menulis HTML.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Mulai dari kerangka halaman.

Memuat progres Review module