Proyek: Halaman Profil Penulis

Sebanyak apa pun elemen yang kita kenal, halaman web pertama yang kita susun sendiri tetap terasa istimewa. Pada proyek ini kita membangun halaman profil penulis untuk seorang penulis fiktif bernama Dewi Lestari: satu berkas index.html yang memuat metadata lengkap pada head, biografi, foto profil, daftar publikasi, dan informasi kontak — seluruhnya ditulis dengan elemen yang kita pilih berdasarkan maknanya.

Proyek ini melatih hampir seluruh kebiasaan baik dari Course HTML dalam satu berkas: struktur dokumen dan metadata, pemilihan elemen semantik header, main, section, dan footer, penyusunan list dengan ol dan ul disertai elemen time, gambar dengan figure dan teks alternatif yang bermakna, hingga tautan eksternal yang aman dengan target="_blank" dan rel="noopener". Tidak ada CSS dan tidak ada JavaScript — fokus kita murni pada struktur.

Perilaku yang Diharapkan #

Hasil akhir proyek ini adalah satu berkas HTML yang berdiri sendiri. Untuk melihatnya, buka index.html di browser: klik ganda berkasnya, atau gunakan menu File → Open File, atau seret berkas ke jendela browser. Tidak ada server dan tidak ada langkah build — browser membaca berkas langsung dari disk.

Hal yang akan tampil, dari atas ke bawah:

• Judul tab browser tercetak Dewi Lestari — Penulis dan Editor.
• Bagian atas halaman menampilkan nama penulis besar beserta tagline singkat.
• Section Tentang memuat dua paragraf biografi dan foto profil dengan keterangan gambar.
• Section Publikasi memuat daftar buku bernomor dan daftar cerita pendek, lengkap dengan tahun terbit.
• Section Kontak memuat alamat email yang bisa diklik (membuka aplikasi email) dan dua tautan yang terbuka di tab baru.
• Bagian paling bawah menampilkan baris hak cipta.

Tahapan Pengerjaan #

Proyek dikerjakan dalam empat bagian berurutan. Setiap bagian menghasilkan berkas yang tetap bisa dibuka di browser:

1. Struktur Dokumen menyiapkan doctype, head dengan metadata lengkap, dan kerangka body beserta komentar penanda bagian.
2. Informasi Penulis mengisi header identitas, section Tentang dengan biografi, dan figure foto profil.
3. Daftar Publikasi menyusun daftar buku dan cerita pendek dengan ol, ul, dan elemen time.
4. Link dan Kontak melengkapi section Kontak dengan address, tautan eksternal yang aman, dan footer penutup.

Mulailah dari Bagian 1 dan ikuti urutannya — setiap bagian dibangun di atas bagian sebelumnya, dan potongan kode pada tiap bagian sama persis dengan bagiannya pada berkas final.

Kode Sumber Lengkap #

Berkas index.html berikut memuat keseluruhan halaman yang dihasilkan empat bagian di atas:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dewi Lestari — Penulis dan Editor</title>
  <meta name="description" content="Profil Dewi Lestari, penulis cerita pendek dan novel dari Yogyakarta: biografi, daftar publikasi, dan cara menghubungi.">
</head>
<body>

  <!-- Bagian: header -->
  <header>
    <h1>Dewi Lestari</h1>
    <p>Penulis dan editor — Yogyakarta</p>
  </header>

  <main>

    <!-- Bagian: tentang -->
    <section id="tentang">
      <h2>Tentang</h2>
      <p>Dewi Lestari menulis cerita pendek dan novel sejak 2010. Karya-karyanya berkisah
      tentang kehidupan kota kecil di lereng gunung: pemilik warung, guru sekolah dasar,
      dan perantau yang pulang. Ia menempuh studi Sastra Indonesia di Yogyakarta, lalu
      bekerja sebagai editor penerbit sebelum memilih jalur lepas.</p>
      <p>Saat ini Dewi menjadi editor lepas untuk naskah fiksi dan memoar. Ia menulis
      setiap pagi di kedai kopi dekat rumah dan menerima naskah baru melalui email
      pada bagian Kontak.</p>
      <figure>
        <img src="assets/foto.svg" alt="Dewi Lestari tersenyum di ruang kerjanya, duduk di depan rak buku." width="320" height="320">
        <figcaption>Dewi Lestari di ruang kerjanya.</figcaption>
      </figure>
    </section>

    <!-- Bagian: publikasi -->
    <section id="publikasi">
      <h2>Publikasi</h2>
      <p>Daftar berikut memuat karya terpilih Dewi menurut tahun terbit.</p>
      <h3>Buku</h3>
      <ol>
        <li>Jejak Kabut di Bukit (<time datetime="2019">2019</time>)</li>
        <li>Rumah di Ujung Musim (<time datetime="2021">2021</time>)</li>
        <li>Suara dari Peron Tiga (<time datetime="2024">2024</time>)</li>
      </ol>
      <h3>Cerita Pendek</h3>
      <ul>
        <li>Penjaga Warung Kopi — majalah Cerita Kita, <time datetime="2018">2018</time></li>
        <li>Surat untuk Rani — antologi Dua Belas Suara, <time datetime="2022">2022</time></li>
        <li>Terminal Sebelum Subuh — majalah Cerita Kita, <time datetime="2023">2023</time></li>
      </ul>
    </section>

    <!-- Bagian: kontak -->
    <section id="kontak">
      <h2>Kontak</h2>
      <p>Undangan menulis, kerja sama editing, dan surat pembaca dapat dikirim melalui
      jalur berikut:</p>
      <address>
        <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
        <ul>
          <li><a href="https://example.com/dewi" target="_blank" rel="noopener">Situs pribadi</a></li>
          <li><a href="https://example.org/dewilestari" target="_blank" rel="noopener">Profil media sosial</a></li>
        </ul>
      </address>
    </section>

  </main>

  <!-- Bagian: footer -->
  <footer>
    <p>&copy; <time datetime="2026">2026</time> Dewi Lestari. Seluruh hak cipta terpelihara.</p>
  </footer>

</body>
</html>

Hasil yang dijanjikan bagian Perilaku yang Diharapkan bisa diperiksa tanpa menyimpan berkas — inilah halaman yang sama, berjalan langsung dari nama besar sampai baris hak cipta:

Pada demo, berkas assets/foto.svg diganti placeholder SVG agar gambarnya langsung terlihat, dan tautan mailto: biasanya ditahan browser di dalam iframe — dua tautan situs luar tetap bisa diklik dan terbuka di tab baru; unduh berkasnya untuk mencoba tautan email sungguhan.

Penjelasan singkat per blok besar, dari atas ke bawah:

• Baris 1–8 — kerangka dan head: doctype, html lang="id", charset UTF-8, viewport, judul halaman, dan meta description. Inilah seluruh metadata yang dibaca browser dan mesin pencari sebelum satu piksel pun dirender.
• Baris 11–15 — header: nama penulis sebagai h1 tunggal dan tagline satu kalimat. Area pembuka yang sama untuk seluruh pengunjung.
• Baris 19–33 — section Tentang: dua paragraf biografi plus figure berisi foto profil dan figcaption. Konten utama pertama di dalam main.
• Baris 35–51 — section Publikasi: daftar buku sebagai ol (urutan terbit bermakna), daftar cerita pendek sebagai ul, dengan tahun terbit ditandai elemen time.
• Baris 53–65 — section Kontak: address berisi email mailto: dan dua tautan eksternal dengan target="_blank" rel="noopener".
• Baris 69–72 — footer: baris hak cipta dengan tahun terbungkus elemen time.

Empat bagian berikut membedah berkas ini tahap demi tahap. Setiap part menampilkan potongan yang identik dengan bagiannya pada berkas di atas, sehingga hasil mengetik ulang kita bisa cocok diperiksa baris demi baris.