Bab 27: HTML Dasar — KKA Kelas 9

💡 Tahukah Kamu?
Coba klik kanan pada halaman website apa saja, lalu pilih "View Page Source" atau "Lihat Sumber Halaman". Yang muncul terlihat seperti kode aneh penuh tanda kurung siku, bukan? Itulah HTML — bahasa yang membentuk kerangka setiap halaman web yang pernah kamu lihat, mulai dari Google hingga Instagram!

A. Apa Itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membangun struktur dan isi sebuah halaman web. HTML bukanlah bahasa pemrograman seperti yang kamu pelajari di Blockly, melainkan bahasa penanda (markup) yang memberi tahu browser bagian mana yang merupakan judul, paragraf, gambar, atau link.

HTML menggunakan tag — kata kunci yang diapit tanda kurung siku < > — untuk menandai setiap bagian konten. Hampir semua tag memiliki tag pembuka dan tag penutup, misalnya <p> untuk membuka paragraf dan </p> untuk menutupnya.

🏗️ Bayangkan HTML seperti kerangka bangunan. Tag HTML menentukan mana yang jadi dinding, pintu, jendela — sama seperti tag HTML menentukan mana yang jadi judul, paragraf, atau gambar di halaman web.

B. Struktur Dasar Dokumen HTML

Setiap halaman HTML memiliki struktur dasar yang sama. Perhatikan kode berikut:

<!-- Struktur Dasar HTML -->
<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    Isi halaman yang ditampilkan di browser ditulis di sini.
  </body>
</html>

Bagian	Penjelasan
<!DOCTYPE html>	Memberitahu browser bahwa dokumen ini adalah HTML5
<html>	Membungkus seluruh isi dokumen HTML
<head>	Menyimpan informasi yang tidak tampil langsung di halaman (seperti judul tab browser)
<body>	Menyimpan seluruh konten yang benar-benar dilihat pengguna

C. Tag HTML Dasar

Berikut adalah tag-tag HTML yang paling sering digunakan:

Tag	Fungsi	Contoh
<h1> – <h6>	Heading (judul), h1 paling besar, h6 paling kecil	<h1>Judul Utama</h1>
<p>	Paragraf teks	<p>Ini adalah paragraf.</p>
<img>	Menampilkan gambar	<img src="foto.jpg" alt="Foto">
<a>	Link / tautan ke halaman lain	<a href="https://kawai.id">Kunjungi</a>
<ul> / <li>	Daftar tanpa urutan (bullet)	<ul><li>Item</li></ul>
<ol> / <li>	Daftar berurutan (nomor)	<ol><li>Item</li></ol>

D. Heading, Paragraf, Gambar, Link, dan List

Tag heading (<h1> sampai <h6>) digunakan untuk menandai judul dan subjudul, mirip seperti Heading 1 dan Heading 2 pada Microsoft Word.

Tag <p> digunakan untuk paragraf biasa.

Gambar ditampilkan menggunakan tag <img> dengan atribut src (sumber file gambar) dan alt (teks alternatif jika gambar gagal dimuat).

Link dibuat dengan tag <a> dan atribut href yang menunjuk ke alamat tujuan.

List dibuat dengan <ul> untuk daftar bullet atau <ol> untuk daftar bernomor, dengan setiap item dibungkus tag <li>.

Contoh Halaman Biodata Sederhana

<h1>Biodata Diri</h1>
<img src="foto-profil.jpg" alt="Foto Profil">
<p>Nama: Ahmad Rizki</p>
<p>Kelas: 9A</p>
<p>Hobi:</p>
<ul>
  <li>Membaca buku</li>
  <li>Bermain futsal</li>
  <li>Coding</li>
</ul>
<a href="https://kawai.id">Kunjungi website sekolahku</a>

💡 Perhatikan bahwa tag <img> tidak memiliki tag penutup — tag ini disebut self-closing tag. Tidak semua tag butuh pasangan penutup!

E. Aktivitas Praktik

✏️ Aktivitas 2.1 — Halaman HTML Pertamaku

Platform: Replit (replit.com) atau VS Code

Buat file baru bernama index.html
Tulis struktur dasar HTML (DOCTYPE, html, head, body)
Tambahkan satu <h1> berisi judul "Halaman Pertamaku"
Tambahkan dua <p> berisi perkenalan singkat tentang dirimu
Jalankan (Run) dan lihat hasilnya di tab preview

✏️ Aktivitas 2.2 — Membuat Biodata Sederhana

Platform: CodePen (codepen.io) atau Replit

Buat halaman biodata yang memuat:

Judul nama menggunakan <h1>
Foto menggunakan <img> (boleh gambar placeholder)
Minimal 3 paragraf informasi diri menggunakan <p>
Daftar hobi menggunakan <ul> dan <li>
Satu link menggunakan <a> menuju website favoritmu

📝 Jawab pertanyaan berikut berdasarkan materi yang sudah kamu pelajari. Pilih kelas dan namamu, lalu isi jawaban.

Kelas

Nama

Soal 1

Jelaskan apa yang dimaksud dengan tag pembuka dan tag penutup dalam HTML! Berikan satu contoh!

Soal 2

Apa perbedaan fungsi <head> dan <body> dalam struktur HTML?

Soal 3

Tuliskan kode HTML untuk menampilkan judul "Hobi Saya" dan daftar 3 hobi dalam bentuk bullet list!

Soal 4

Apa fungsi atribut alt pada tag <img>? Mengapa atribut ini penting?

Soal 5

Tuliskan kode HTML lengkap (dari <!DOCTYPE html> sampai </html>) untuk halaman dengan judul tab "Tentang Saya" dan satu paragraf perkenalan!