Website satu halaman menumpuk seluruh kontennya dalam satu dokumen, sehingga kerangkanya menjadi penentu utama kerapian. Bagian pertama ini menyiapkan dokumen portofolio yang valid: head lengkap dengan metadata, lalu tiga wilayah body berupa header, main, dan footer. Main sengaja dibiarkan kosong dengan satu komentar penanda karena isinya dibangun pada Bagian 2. Dengan kerangka yang berdiri sendiri, setiap penambahan berikutnya punya tempat yang jelas.

Keputusan Struktur untuk Satu Halaman #

Kerangka portofolio memakai unsur yang sama dengan proyek Halaman Profil, dengan beberapa keputusan khas website satu halaman:

  • Header menjadi wadah identitas — logo, nama, dan tagline — serta, mulai Bagian 2, wadah navigasi.
  • Main akan menampung empat section ber-id: beranda, proyek, keahlian, dan kontak.
  • Footer menutup halaman dengan baris hak cipta.
  • Title dan meta description memperkenalkan pemilik portofolio kepada mesin pencari.

Judul halaman pada title memakai pola “Portofolio + nama”. Pola ini ringkas dan langsung menjelaskan isi dokumen bila muncul sebagai hasil pencarian atau tautan yang dibagikan.

Menyusun Kerangka #

File berikut adalah hasil utuh tahap ini. Simpan sebagai portofolio.html, atau unduh melalui tautan pada header code block:

html portofolio.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Portofolio Siti Rahma, pengembang web yang fokus pada halaman cepat dan aksesibel.">
  <title>Portofolio Siti Rahma</title>
</head>
<body>
  <header>
    <img src="../assets/logo.svg" alt="Logo monogram SR" width="56" height="56">
    <div>
      <h1>Siti Rahma</h1>
      <p>Pengembang web: antarmuka cepat dan aksesibel</p>
    </div>
  </header>
  <main>
    <!-- Navigasi dan section ditambahkan pada Bagian 2 -->
  </main>
  <footer>
    <p>&copy; 2025 Siti Rahma</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text 
Browser menampilkan:
  - Logo bundar di kiri atas, diikuti nama "Siti Rahma" dan tagline di bawahnya
  - Wilayah kosong di tengah halaman karena main belum berisi konten
  - Baris hak cipta di dasar halaman
  - Teks "Portofolio Siti Rahma" pada tab browser

Mari kita telaah peran setiap bagian kode di atas:

  1. Baris 1-2: deklarasi doctype dan <html lang="id"> menempatkan browser pada mode standar serta memberi tahu bahasa kontennya.
  2. Baris 4-7: charset, viewport, description, dan title melengkapi head sebelum elemen apa pun.
  3. Baris 10-16: header memuat logo sebagai img beratribut alt, width, dan height, lalu div pembungkus nama dan tagline.
  4. Baris 17-19: main hanya berisi komentar HTML sebagai penanda tempat nav dan section Bagian 2.
  5. Baris 20-22: footer menampung baris hak cipta yang menutup halaman.

Pemeriksaan Hasil Tahap Ini #

  1. Buka portofolio.html di browser, lalu pastikan logo, nama, tagline, dan footer tampil dengan susunan yang benar.
  2. Periksa judul pada tab browser; teksnya harus sama dengan isi elemen title.
  3. Buka tests/cek-struktur.html, lalu centang butir-butir kerangka yang telah dipenuhi oleh file ini.

Kerangka telah berdiri, tetapi masih belum ada jalur untuk berpindah antarkonten. Bagian berikutnya menambahkan navigasi dan mengisi main dengan empat section.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

portofolio.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Portofolio Siti Rahma, pengembang web yang fokus pada halaman cepat dan aksesibel.">
  <title>Portofolio Siti Rahma</title>
</head>
<body>
  <header>
    <img src="../assets/logo.svg" alt="Logo monogram SR" width="56" height="56">
    <div>
      <h1>Siti Rahma</h1>
      <p>Pengembang web: antarmuka cepat dan aksesibel</p>
    </div>
  </header>
  <main>
    <!-- Navigasi dan section ditambahkan pada Bagian 2 -->
  </main>
  <footer>
    <p>&copy; 2025 Siti Rahma</p>
  </footer>
</body>
</html>