HTML Project - Halaman Bio

Tujuan Proyek

• Menggabungkan materi Images, Links, Lists, Tables dalam satu halaman
• Memahami struktur layout header / main / footer
• Siap dikumpulkan sebagai tugas proyek

Kerangka Proyek

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Bio Saya</title>
</head>
<body>
<header>
<h1>Nama Kamu</h1>
<p>Kelas | Sekolah</p>
</header>
<main>
<img src="foto.jpg" alt="Foto saya" width="150">
<h2>Tentang Saya</h2>
<p>Halo! Saya suka coding HTML.</p>
<h2>Hobi</h2>
<ul><li>Membaca</li><li>Futsal</li></ul>
<h2>Jadwal</h2>
<table border="1">
<tr><th>Hari</th><th>Kegiatan</th></tr>
<tr><td>Senin</td><td>Belajar HTML</td></tr>
</table>
<p><a href="https://example.com">Website favorit</a></p>
</main>
<footer>&copy; 2026 Nama Kamu</footer>
</body>
</html>

Checklist Penilaian

• Ada DOCTYPE, lang, charset, viewport, title
• Ada gambar + alt, link, list, tabel
• Struktur rapi dan semua tag ditutup

Latihan Mandiri

1. Duplikat contoh di atas menjadi file bio-saya.html lalu ganti nama, foto, dan hobi.
2. Tambahkan favicon dan ubah page title.
3. Tambahkan halaman kedua lalu hubungkan dengan link.

< HTML Images HTML Favicon >

Ringkasan belajar mandiri berbahasa Indonesia, terinspirasi dari struktur tutorial W3Schools HTML. Contoh kode adalah karya asli untuk latihan.