Proyek Mini: Halaman Tentang Saya

Tujuan Belajar

Setelah pelajaran ini, kamu akan bisa:

Menggabungkan semua konsep HTML yang sudah dipelajari dalam satu proyek nyata
Membuat halaman profil lengkap yang bisa ditampilkan di browser
Merasakan kepuasan membangun sesuatu dari nol!

Materi Singkat

Selamat! Kamu sudah menyelesaikan 9 pelajaran HTML. Sekarang saatnya menyatukan semua yang kamu pelajari menjadi satu halaman profil yang sesungguhnya.

Ini bukan sekadar latihan — ini adalah proyek pertamamu. Ketika selesai, kamu akan punya halaman web yang bisa kamu tunjukkan kepada siapapun.

Yang Akan Kita Bangun

Sebuah halaman "Tentang Saya" yang berisi:

Header dengan nama dan navigasi
Foto profil (menggunakan placeholder)
Seksi perkenalan diri
Daftar keahlian
Tabel hobi atau jadwal
Form kontak sederhana
Footer

Review Konsep yang Dipakai

Pastikan kamu ingat cara kerja:

Struktur dokumen HTML (<!DOCTYPE>, <html>, <head>, <body>)
Heading (<h1> – <h3>) dan paragraf (<p>)
List (<ul>, <ol>, <li>)
Link (<a href>) dan gambar (<img src alt>)
Tabel (<table>, <thead>, <tbody>, <tr>, <th>, <td>)
Form (<form>, <input>, <label>, <select>, <textarea>)
Semantic HTML (<header>, <nav>, <main>, <section>, <footer>)

Contoh Kode

Ini adalah contoh lengkap — gunakan sebagai referensi, bukan untuk di-copy. Buatlah versimu sendiri!

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tentang Saya — Budi Santoso</title>
  </head>
  <body>
 
    <!-- HEADER -->
    <header>
      <h1>Budi Santoso</h1>
      <p>Mahasiswa & Calon Web Developer</p>
      <nav>
        <a href="#profil">Profil</a> |
        <a href="#keahlian">Keahlian</a> |
        <a href="#jadwal">Jadwal Belajar</a> |
        <a href="#kontak">Kontak</a>
      </nav>
    </header>
 
    <!-- KONTEN UTAMA -->
    <main>
 
      <!-- PROFIL -->
      <section id="profil">
        <h2>Profil Saya</h2>
        <img
          src="https://picsum.photos/150/150?random=10"
          alt="Foto profil Budi Santoso"
          width="150"
          height="150"
        />
        <p>
          Halo! Nama saya <strong>Budi Santoso</strong>, mahasiswa semester 3
          jurusan Teknik Informatika dari Surabaya. Saya sedang belajar
          <em>web development</em> dan sangat antusias untuk membuat
          website pertamaku.
        </p>
        <p>
          Saya percaya bahwa siapapun bisa belajar coding asalkan
          mau konsisten dan tidak menyerah di awal.
        </p>
      </section>
 
      <!-- KEAHLIAN -->
      <section id="keahlian">
        <h2>Keahlian & Minat</h2>
 
        <h3>Sedang Dipelajari</h3>
        <ol>
          <li>HTML — Struktur halaman web</li>
          <li>CSS — Tampilan dan desain</li>
          <li>JavaScript — Interaktivitas</li>
        </ol>
 
        <h3>Keahlian Lain</h3>
        <ul>
          <li>Desain grafis (Adobe Photoshop dasar)</li>
          <li>Penulisan konten dan artikel</li>
          <li>Microsoft Office (Word, Excel, PowerPoint)</li>
          <li>Komunikasi dan presentasi</li>
        </ul>
      </section>
 
      <!-- JADWAL -->
      <section id="jadwal">
        <h2>Jadwal Belajar Mingguan</h2>
        <table border="1">
          <thead>
            <tr>
              <th>Hari</th>
              <th>Waktu</th>
              <th>Topik</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Senin & Rabu</td>
              <td>19.00 – 20.00</td>
              <td>HTML Dasar</td>
            </tr>
            <tr>
              <td>Selasa & Kamis</td>
              <td>19.00 – 20.00</td>
              <td>CSS Dasar</td>
            </tr>
            <tr>
              <td>Jumat & Sabtu</td>
              <td>20.00 – 21.30</td>
              <td>JavaScript Dasar</td>
            </tr>
            <tr>
              <td>Minggu</td>
              <td>Bebas</td>
              <td>Review & Proyek Mini</td>
            </tr>
          </tbody>
        </table>
      </section>
 
      <!-- KONTAK -->
      <section id="kontak">
        <h2>Hubungi Saya</h2>
        <p>Ingin berkenalan atau berdiskusi? Isi form di bawah ini:</p>
 
        <form action="#" method="post">
          <p>
            <label for="nama-pengirim">Namamu:</label><br />
            <input type="text" id="nama-pengirim" name="nama"
                   placeholder="Nama lengkapmu" required />
          </p>
          <p>
            <label for="email-pengirim">Email:</label><br />
            <input type="email" id="email-pengirim" name="email"
                   placeholder="email@kamu.com" required />
          </p>
          <p>
            <label for="pesan">Pesanmu:</label><br />
            <textarea id="pesan" name="pesan" rows="4"
                      placeholder="Tulis pesanmu di sini..."></textarea>
          </p>
          <button type="submit">Kirim Pesan</button>
        </form>
      </section>
 
    </main>
 
    <!-- FOOTER -->
    <footer>
      <p>© 2026 Budi Santoso. Dibuat dengan ❤️ dan HTML murni.</p>
      <p>
        <a href="https://github.com" target="_blank">GitHub</a> |
        <a href="https://linkedin.com" target="_blank">LinkedIn</a>
      </p>
    </footer>
 
  </body>
</html>

Tugas: Buat Versimu Sendiri!

Buat file tentang-saya.html yang merupakan halaman profilmu sendiri. Jangan copy-paste — tulis ulang dengan konten yang sebenarnya tentang dirimu.

Checklist yang harus ada:

[ ] <!DOCTYPE html> dan struktur HTML5 yang lengkap
[ ] <header> dengan namamu dan navigasi anchor
[ ] Foto profil (bisa dari picsum.photos atau foto asli)
[ ] <section> "Tentang Saya" dengan minimal 2 paragraf
[ ] <section> "Keahlian" dengan setidaknya 1 list (ul atau ol)
[ ] <section> "Jadwal" atau "Pengalaman" dengan tabel minimal 3 baris
[ ] <section> "Kontak" dengan form yang punya minimal 3 field
[ ] <footer> dengan informasi copyright
[ ] Minimal 1 link eksternal yang terbuka di tab baru
[ ] Semua gambar punya alt yang deskriptif

Materi Singkat

Selamat! Kamu sudah menyelesaikan 9 pelajaran HTML. Sekarang saatnya menyatukan semua yang kamu pelajari menjadi satu halaman profil yang sesungguhnya.

Ini bukan sekadar latihan — ini adalah proyek pertamamu. Ketika selesai, kamu akan punya halaman web yang bisa kamu tunjukkan kepada siapapun.

Yang Akan Kita Bangun

Sebuah halaman "Tentang Saya" yang berisi:

Header dengan nama dan navigasi

Foto profil (menggunakan placeholder)

Seksi perkenalan diri

Daftar keahlian

Tabel hobi atau jadwal

Form kontak sederhana

Footer

Review Konsep yang Dipakai

Pastikan kamu ingat cara kerja:

Struktur dokumen HTML (<!DOCTYPE>, <html>, <head>, <body>)

Heading (<h1> – <h3>) dan paragraf (<p>)

List (<ul>, <ol>, <li>)

Link (<a href>) dan gambar (<img src alt>)

Tabel (<table>, <thead>, <tbody>, <tr>, <th>, <td>)

Form (<form>, <input>, <label>, <select>, <textarea>)

Semantic HTML (<header>, <nav>, <main>, <section>, <footer>)

Contoh Kode

Ini adalah contoh lengkap — gunakan sebagai referensi, bukan untuk di-copy. Buatlah versimu sendiri!

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tentang Saya — Budi Santoso</title>
  </head>
  <body>
 
    <!-- HEADER -->
    <header>
      <h1>Budi Santoso</h1>
      <p>Mahasiswa & Calon Web Developer</p>
      <nav>
        <a href="#profil">Profil</a> |
        <a href="#keahlian">Keahlian</a> |
        <a href="#jadwal">Jadwal Belajar</a> |
        <a href="#kontak">Kontak</a>
      </nav>
    </header>
 
    <!-- KONTEN UTAMA -->
    <main>
 
      <!-- PROFIL -->
      <section id="profil">
        <h2>Profil Saya</h2>
        <img
          src="https://picsum.photos/150/150?random=10"
          alt="Foto profil Budi Santoso"
          width="150"
          height="150"
        />
        <p>
          Halo! Nama saya <strong>Budi Santoso</strong>, mahasiswa semester 3
          jurusan Teknik Informatika dari Surabaya. Saya sedang belajar
          <em>web development</em> dan sangat antusias untuk membuat
          website pertamaku.
        </p>
        <p>
          Saya percaya bahwa siapapun bisa belajar coding asalkan
          mau konsisten dan tidak menyerah di awal.
        </p>
      </section>
 
      <!-- KEAHLIAN -->
      <section id="keahlian">
        <h2>Keahlian & Minat</h2>
 
        <h3>Sedang Dipelajari</h3>
        <ol>
          <li>HTML — Struktur halaman web</li>
          <li>CSS — Tampilan dan desain</li>
          <li>JavaScript — Interaktivitas</li>
        </ol>
 
        <h3>Keahlian Lain</h3>
        <ul>
          <li>Desain grafis (Adobe Photoshop dasar)</li>
          <li>Penulisan konten dan artikel</li>
          <li>Microsoft Office (Word, Excel, PowerPoint)</li>
          <li>Komunikasi dan presentasi</li>
        </ul>
      </section>
 
      <!-- JADWAL -->
      <section id="jadwal">
        <h2>Jadwal Belajar Mingguan</h2>
        <table border="1">
          <thead>
            <tr>
              <th>Hari</th>
              <th>Waktu</th>
              <th>Topik</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Senin & Rabu</td>
              <td>19.00 – 20.00</td>
              <td>HTML Dasar</td>
            </tr>
            <tr>
              <td>Selasa & Kamis</td>
              <td>19.00 – 20.00</td>
              <td>CSS Dasar</td>
            </tr>
            <tr>
              <td>Jumat & Sabtu</td>
              <td>20.00 – 21.30</td>
              <td>JavaScript Dasar</td>
            </tr>
            <tr>
              <td>Minggu</td>
              <td>Bebas</td>
              <td>Review & Proyek Mini</td>
            </tr>
          </tbody>
        </table>
      </section>
 
      <!-- KONTAK -->
      <section id="kontak">
        <h2>Hubungi Saya</h2>
        <p>Ingin berkenalan atau berdiskusi? Isi form di bawah ini:</p>
 
        <form action="#" method="post">
          <p>
            <label for="nama-pengirim">Namamu:</label><br />
            <input type="text" id="nama-pengirim" name="nama"
                   placeholder="Nama lengkapmu" required />
          </p>
          <p>
            <label for="email-pengirim">Email:</label><br />
            <input type="email" id="email-pengirim" name="email"
                   placeholder="email@kamu.com" required />
          </p>
          <p>
            <label for="pesan">Pesanmu:</label><br />
            <textarea id="pesan" name="pesan" rows="4"
                      placeholder="Tulis pesanmu di sini..."></textarea>
          </p>
          <button type="submit">Kirim Pesan</button>
        </form>
      </section>
 
    </main>
 
    <!-- FOOTER -->
    <footer>
      <p>© 2026 Budi Santoso. Dibuat dengan ❤️ dan HTML murni.</p>
      <p>
        <a href="https://github.com" target="_blank">GitHub</a> |
        <a href="https://linkedin.com" target="_blank">LinkedIn</a>
      </p>
    </footer>
 
  </body>
</html>

Tugas: Buat Versimu Sendiri!

Buat file tentang-saya.html yang merupakan halaman profilmu sendiri. Jangan copy-paste — tulis ulang dengan konten yang sebenarnya tentang dirimu.

Checklist yang harus ada:

[ ] <!DOCTYPE html> dan struktur HTML5 yang lengkap

[ ] <header> dengan namamu dan navigasi anchor

[ ] Foto profil (bisa dari picsum.photos atau foto asli)

[ ] <section> "Tentang Saya" dengan minimal 2 paragraf

[ ] <section> "Keahlian" dengan setidaknya 1 list (ul atau ol)

[ ] <section> "Jadwal" atau "Pengalaman" dengan tabel minimal 3 baris

[ ] <section> "Kontak" dengan form yang punya minimal 3 field

[ ] <footer> dengan informasi copyright

[ ] Minimal 1 link eksternal yang terbuka di tab baru

[ ] Semua gambar punya alt yang deskriptif

10. Proyek Mini: Halaman Tentang Saya

Tujuan Belajar

Materi Singkat

Yang Akan Kita Bangun

Review Konsep yang Dipakai

Contoh Kode

Tugas: Buat Versimu Sendiri!

10. Proyek Mini: Halaman Tentang Saya

Tujuan Belajar

Materi Singkat

Yang Akan Kita Bangun

Review Konsep yang Dipakai

Contoh Kode

Tugas: Buat Versimu Sendiri!