Proyek Mini: Halaman Biodata

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Biodata | Andi Pratama</title>
  <meta name="description" content="Halaman biodata Andi Pratama, pelajar SMK yang sedang belajar web development.">
  <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>

  <header>
    <img src="foto.jpg" alt="Foto Andi Pratama" width="150" height="150">
    <h1>Andi Pratama</h1>
    <p>Pelajar SMK jurusan <strong>Rekayasa Perangkat Lunak</strong> yang sedang belajar menjadi <em>web developer</em>.</p>
    <nav>
      <a href="#tentang">Tentang</a>
      <a href="#keahlian">Keahlian</a>
      <a href="#riwayat">Riwayat</a>
      <a href="#kontak">Kontak</a>
    </nav>
  </header>

  <main>
    <section id="tentang">
      <h2>Tentang Saya</h2>
      <p>Halo! Saya Andi, 17 tahun, dari Bandung. Saya mulai belajar ngoding karena penasaran <strong>bagaimana website dibuat</strong>.</p>
      <p>Target saya tahun ini: menguasai HTML, CSS, dan JavaScript dasar, lalu membangun <em>portfolio online</em> pertama saya.</p>
    </section>

    <section id="keahlian">
      <h2>Keahlian</h2>
      <ul>
        <li>HTML: struktur dokumen, form, tabel</li>
        <li>Git dasar: commit dan push</li>
        <li>Sedang dipelajari:
          <ul>
            <li>CSS</li>
            <li>JavaScript</li>
          </ul>
        </li>
      </ul>
    </section>

    <section id="riwayat">
      <h2>Riwayat Pendidikan</h2>
      <table>
        <caption>Riwayat pendidikan formal</caption>
        <thead>
          <tr>
            <th>Tahun</th>
            <th>Sekolah</th>
            <th>Jurusan</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2020-2023</td>
            <td>SMPN 1 Bandung</td>
            <td>-</td>
          </tr>
          <tr>
            <td>2023-2026</td>
            <td>SMKN 1 Bandung</td>
            <td>Rekayasa Perangkat Lunak</td>
          </tr>
        </tbody>
      </table>
    </section>

    <section id="kontak">
      <h2>Hubungi Saya</h2>
      <form>
        <label for="nama">Nama</label>
        <input type="text" id="nama" name="nama" minlength="3" required>

        <label for="email">Email</label>
        <input type="email" id="email" name="email" required>

        <label for="pesan">Pesan</label>
        <textarea id="pesan" name="pesan" rows="4" required></textarea>

        <button type="submit">Kirim Pesan</button>
      </form>
      <p>Atau langsung: <a href="mailto:[email protected]">[email protected]</a></p>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Andi Pratama. Dibuat dengan &lt;3 dan HTML murni.</p>
  </footer>

</body>
</html>