Informasi Penulis

Kerangka telah berdiri; kini kita mengisi konten pertama sekaligus memperkenalkan pemilik halaman. Bagian 2 melengkapi tiga hal: header yang menampilkan nama dan tagline Dewi Lestari, section Tentang yang memuat dua paragraf biografi, dan figure foto profil beserta keterangannya. Ketiganya adalah konten yang dilihat pengunjung pertama kali — jadi elemen yang kita pilih di sini menentukan kesan pertama halaman.

Header: Nama dan Tagline #

Potongan berikut sama persis dengan baris 11–15 pada berkas index.html. Ia mengisi area header yang telah kita siapkan pada Bagian 1:

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

Mari kita bedah perannya satu per satu:

1. <header>: pembuka halaman — area perkenalan, bukan tempat konten utama. Semua halaman profil membutuhkan titik berhenti pertama bagi mata, dan inilah fungsinya.
2. <h1>Dewi Lestari</h1>: nama pemilik halaman sebagai judul tingkat tertinggi. Satu dokumen memakai satu h1 saja — peran itu sudah dipegang identitas pemilik halaman, bukan kata kunci lain.
3. <p>Penulis dan editor — Yogyakarta</p>: tagline satu baris. Tagline bukan judul, jadi ia bukan heading — ia kalimat pengantar biasa yang kebetulan pendek.

Section Tentang: Biografi dan Foto #

Seluruh section Tentang pada berkas final memuat dua paragraf biografi dan satu foto. Potongan berikut sama persis dengan baris 19–33 pada berkas index.html:

    <!-- 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>

Mari kita bedah elemen-elemennya:

1. <section id="tentang">: satu blok tematik — perkenalan penulis — di dalam main. Atribut id memberi alamat #tentang bila kelak halaman ini ditautkan dari luar.
2. <h2>Tentang</h2>: judul section. Karena h1 sudah dipakai nama di header, judul section naik satu tingkat ke h2 — hierarki heading tetap berurutan tanpa melompat.
3. Dua paragraf <p>: biografi dipecah dua bagian berbeda fokus — perjalanan menulis, lalu pekerjaan saat ini. Paragraf pendek tiga sampai empat kalimat jauh lebih mudah dibaca daripada satu blok panjang.
4. <figure>: wadah konten yang dirujuk dari teks dan berdiri sendiri — foto profil. Pasangannya selalu opsional tapi bernilai: figcaption.
5. <img ...>: src menunjuk assets/foto.svg dengan path relatif, alt menjelaskan isi foto, sementara width dan height memberi tahu browser ukuran asli gambar sehingga ruangnya tersedia sebelum gambar termuat — layout tidak bergeser mendadak.
6. <figcaption>: keterangan yang terikat figure — satu kalimat penjelas, bukan pengulangan alt.

Menyiapkan Foto Profil #

Baris img pada potongan di atas merujuk ke berkas yang belum ada: foto profil kita sediakan sendiri. Siapkan satu foto — hasil kamera, hasil unduhan, atau gambar sederhana buatan sendiri — lalu simpan ke src/assets/foto.svg. Bila foto kita bernama lain atau berformat JPG, cukup sesuaikan nilai src — misalnya assets/foto.jpg — tanpa mengubah elemen lain:

        <img src="assets/foto.svg" alt="Dewi Lestari tersenyum di ruang kerjanya, duduk di depan rak buku." width="320" height="320">

Sesuaikan pula nilai width dan height dengan ukuran foto sesungguhnya agar rasio yang dilaporkan browser tepat.

Hasil di Tahap Ini #

Buka ulang index.html di browser — atau tekan F5 bila masih terbuka. Halaman kini bertambah: nama besar di bagian atas diikuti tagline, lalu biografi dua paragraf, dan foto profil dengan keterangan di bawahnya. Semuanya tampil polos — tata letak dan rupa memang masih seluruhnya bawaan browser. Bagian 3 melanjutkan dengan karya-karya Dewi pada section Publikasi.

Inilah keadaan halaman pada akhir Bagian 2:

Pada demo, berkas assets/foto.svg diganti placeholder SVG agar gambarnya langsung terlihat; markup dan teksnya sama persis dengan berkas proyek.

Ringkasan Bagian 2 #

Identitas lengkap: header memuat nama sebagai h1 tunggal plus tagline, section Tentang memuat biografi dua paragraf, dan figure membungkus foto profil dengan alt yang bermakna serta figcaption. Teks alternatif menjaga halaman tetap berarti sebelum — dan tanpa — gambar termuat.