Setiap halaman yang rapi dibangun dari kerangka yang sama: doctype yang jujur, head yang informatif, dan body yang tertata. Pada Bagian 1 ini kita menyiapkan kerangka tersebut untuk halaman profil Dewi Lestari. Delapan baris metadata yang kita tulis terlihat sepele, tetapi justru baris-baris itulah yang dibaca browser paling awal — sebelum satu paragraf bio pun dirender, judul tab, encoding, dan skala viewport sudah diputuskan.

Struktur Berkas #

Proyek ini hanya membutuhkan satu berkas HTML dan satu folder untuk gambar:

text 
profil-penulis/
└── src/
    ├── index.html
    └── assets/
        └── foto.svg    (kita buat sendiri pada Bagian 2)

Berkas index.html memuat seluruh halaman, sedangkan folder assets/ menampung berkas pendukung agar tetap terpisah dari berkas utama. Pola src/ plus assets/ inilah yang kita pelajari pada chapter Struktur File dan Folder dan Mengelola Assets. Nama index.html dipilih karena server web mengenalinya sebagai berkas bawaan sebuah folder — kebiasaan yang baik sejak proyek pertama.

Head: Metadata yang Dibaca Pertama #

Ketik delapan baris berikut sebagai awal berkas. Potongan ini sama persis dengan baris 1–8 pada berkas index.html, dan isinya tidak akan berubah lagi sampai proyek selesai:

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

Mari kita bedah tugas setiap baris:

  1. <!DOCTYPE html>: memberi tahu browser memakai mode standar modern. Tanpa doctype, browser turun ke mode quirks dan hasil render sulit diprediksi.
  2. <html lang="id">: menyatakan bahasa konten adalah Indonesia. Pembaca layar memakai nilai ini untuk memilih suara pengucapan yang tepat, dan mesin pencari memakainya untuk mengenali bahasa halaman.
  3. <meta charset="UTF-8">: menetapkan encoding karakter. Tanda hubung em pada judul dan nama-nama Indonesia tampil benar hanya bila baris ini ada — dan ia harus berada pada 1024 byte pertama berkas.
  4. <meta name="viewport" ...>: mengatur lebar viewport mengikuti layar perangkat. Halaman kita tetap terbaca di ponsel tanpa zoom manual.
  5. <title>: judul halaman yang tampil di tab browser dan sebagai baris utama hasil pencarian. Format nama — peran membuat judul ini informatif di keduanya.
  6. <meta name="description" ...>: ringkasan satu-dua kalimat untuk mesin pencari. Tulis deskripsi yang benar-benar meringkas isi halaman, bukan tumpukan kata kunci.

Body: Rencana Susunan #

Setelah </head>, elemen <body> membuka area konten. Susunannya kita rencanakan sejak sekarang agar tiga bagian berikutnya tinggal mengisi:

text 
body
├── header                — nama dan tagline
├── main
│   ├── section Tentang    — biografi dan foto
│   ├── section Publikasi  — daftar karya
│   └── section Kontak     — email dan tautan
└── footer                — hak cipta

Kerangka ini adalah pola halaman semantik yang kita kenal pada Section Semantic HTML: satu header pembuka, satu main sebagai konten utama, dan satu footer penutup. Untuk membantu navigasi di dalam berkas, setiap anak body ditandai komentar singkat:

html 
<!-- Bagian: tentang -->

Komentar tidak dirender browser — ia hanya penanda bagi kita pembaca kode. Pakai secukupnya: satu komentar per blok besar sudah cukup, seperti dibahas pada chapter Menggunakan Komentar Seperlunya.

Hasil di Tahap Ini #

Simpan berkas, lalu buka index.html di browser. Layar masih kosong — belum ada satu elemen body pun yang terisi — tetapi dua hal sudah bisa diperiksa: tab browser kini tercetak Dewi Lestari — Penulis dan Editor, dan halaman langsung tampil pada skala yang tepat di ponsel. Buka menu View Page Source (pintasan Ctrl+U atau Cmd+Option+U) untuk memastikan seluruh metadata tersimpan persis seperti di atas.

Tahap ini memang tidak menghasilkan demo render: seluruh kerja delapan baris tadi terjadi di tab judul dan viewport — bukan di area halaman yang masih kosong — jadi periksa langsung pada berkas milikmu.

Ringkasan Bagian 1 #

Kerangka berdiri: folder proyek tertata, head memuat doctype, bahasa, charset, viewport, judul, dan deskripsi, sementara body telah direncanakan menjadi header, main, dan footer yang ditandai komentar. Bagian 2 mulai mengisi konten pertama: identitas penulis di header beserta biografi dan foto pada section Tentang.